{"id":25267,"date":"2013-03-27T00:00:00","date_gmt":"2024-09-13T08:48:30","guid":{"rendered":"https:\/\/wordpress-583806-4798031.cloudwaysapps.com\/moderna-webbapplikationer-med-native-ria-stacken\/"},"modified":"2024-11-15T16:22:55","modified_gmt":"2024-11-15T15:22:55","slug":"moderna-webbapplikationer-med-native-ria-stacken","status":"publish","type":"post","link":"https:\/\/informator.se\/en\/moderna-webbapplikationer-med-native-ria-stacken\/","title":{"rendered":"Moderna webbapplikationer med Native RIA stacken"},"content":{"rendered":"


D\u00e5 var det bloggdags igen! F\u00f6rra g\u00e5ngen var det java och maskinl\u00e4rande, nu blir det modern webbutveckling med Bootstrap, jQuery, Ajax, ASP.NET MVC och OrigoDB som backend. I denna f\u00f6rsta post b\u00f6rjar vi med anv\u00e4ndargr\u00e4nsnittet och bygger en prototyp. I n\u00e4sta post skall vi bygga server-sidan och knyta ihop allt med jQuery ajax. S\u00e5 starta notepad, eller annan favoriteditor, och h\u00e4ng med!<\/p>\n

Webbrevolutionen<\/h3>\n

Det h\u00e4nder mycket inom webb just nu. Med html5, javascript, css3, websockets och hundratals olika ramverk kan man bygga rika, interaktiva webbapplikationer. Jag brukar kalla denna stacken f\u00f6r Native RIA. Samtidigt ser vi andra RIA platformar p\u00e5 tillbakag\u00e5ng. Flash \u00e4r borta fr\u00e5n iOS och Silverlight, vad \u00e4r det? Med CSS3 Media Queries \u00e4r det m\u00f6jligt att skapa responsiva webbappar som anpassar sig till mobiler, plattor och olika sk\u00e4rmstorlekar.<\/p>\n

Typiskt f\u00f6r Native RIA \u00e4r single-page webbappar d\u00e4r sidan laddas en g\u00e5ng och sedan drivs av javascript h\u00e4ndelser och asynkrona serveranrop. Att ladda och rendera hela sidan vid varje f\u00f6r\u00e4ndring, \u00e4ven sm\u00e5, \u00e4r inte speciellt anv\u00e4ndarv\u00e4nligt och dessutom tyngre f\u00f6r servern. Det finns m\u00e5nga javascript ramverk som st\u00f6djer ajax och manipulation av DOM-tr\u00e4det. Exemplet kommer anv\u00e4nda jQuery, min favorit.<\/p>\n

B\u00f6rja alltid med en prototyp<\/h3>\n
Det s\u00e4gs att en bild s\u00e4ger mer \u00e4n tusen ord. Med en interaktiv prototyp f\u00e5r kunden k\u00e4nna p\u00e5 vad de f\u00e5r och kan ge feedback tidigt i utvecklingen. Med prototypen som utg\u00e5ngsl\u00e4ge blir det ocks\u00e5 enklare att bygga r\u00e4tt backend fr\u00e5n b\u00f6rjan. <\/div>\n
<\/div>\n
I detta stadiet brukar jag anv\u00e4nda en enklare text editor, fast Visual Studio har numera riktigt bra st\u00f6d f\u00f6r html, css och javascript. Webbl\u00e4saren Chrome har bra inbyggda utvecklarverktyg med interaktiv konsol. Ett annat verktyg f\u00f6r att enkelt testa saker med olika javascript ramverk \u00e4r jsfiddle, h\u00e4r \u00e4r en cool demo av jQuery ElementStacks<\/a>.<\/div>\n
<\/div>\n
<\/div>\n

Lizzy<\/h3>\n

Som exempel t\u00e4nkte jag att vi bygger en extremt enkel single-page app d\u00e4r anv\u00e4ndaren kan hantera ett antal listor. M\u00e5len \u00e4r att g\u00f6ra det extremt enkelt och avskalat, med f\u00e5 men bra features, enkelt att anv\u00e4nda samt med ett snyggt gui. S\u00e5 h\u00e4r ser prototypen ut. Man klickar f\u00f6r att redigera text och pekar f\u00f6r att f\u00e5 fram knappar med olika alternativ.<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Sk\u00e4rmdump prototyp Lizzy<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

<\/h3>\n

Bootstrap<\/h3>\n

Bootstrap<\/a> \u00e4r ett ramverk med css-klasser och javascript-baserade komponenter med st\u00f6d f\u00f6r snabb och enkel utveckling av webbgr\u00e4nssnitt. Det st\u00f6der \u00e4ven responsiva webbapplikationer. Det \u00e4r idealiskt f\u00f6r att g\u00f6ra snabba prototyper.<\/p>\n

F\u00f6r att anv\u00e4nda bootstrap l\u00e4nkar man in deras CSS. Man kan ladda ner och servera fr\u00e5n den egna webbservern eller l\u00e4nka direkt fr\u00e5n ett CDN<\/a>, Content Delivery Network:<\/p>\n

Det finns olika teman f\u00f6r bootstrap fr\u00e5n bootswatch<\/a>, ocks\u00e5 tillg\u00e4ngliga via CDN. Jag har anv\u00e4nt temat “readable” i prototypen.<\/p>\n

H\u00e4r \u00e4r ett block html (kopierat fr\u00e5n bootstraps webb!) som renderar en responsive meny. Den kollapsar och visar en menyikon n\u00e4r f\u00f6nsterbredden blir f\u00f6r liten. Klistra blocket i body-taggen ovan och prova!<\/p>\n

I \u00f6vrigt kommer vi anv\u00e4nda en 12-kolumners layout, 3 kolumner f\u00f6r menyn till v\u00e4nster och 9 kolumner f\u00f6r inneh\u00e5llet till h\u00f6ger, listan. Vi anv\u00e4nder en modal dialog f\u00f6r att bekr\u00e4fta borttagning samt enkla UL element med transparenta INPUT-f\u00e4lt f\u00f6r sj\u00e4lva listorna, det visas nedan eftersom vi kommer manipulera det med jQuery. Hela designen kan du se i den f\u00e4rdiga prototypen<\/a>.<\/p>\n

Javascript<\/h3>\n

F\u00f6r att sidor skall laddas snabbare \u00e4r det nu vanligast att man l\u00e4gger javascript i slutet av html-dokumentet, sist i body-taggen. Vi b\u00f6rjar med att importera jQuery, jQueryUI f\u00f6r drag\/drop i listan och bootstraps javascript lib som beh\u00f6vs f\u00f6r den modal dialogen.<\/p>\n

jQuery \u00e4r en funktion med ett antal \u00f6verlagrade argument. I grunden anv\u00e4nds jQuery f\u00f6r att selektera element i DOM-tr\u00e4det och sedan manipulera de valda elementen p\u00e5 olika s\u00e4tt. H\u00e4r \u00e4r ett exempel som d\u00f6ljer alla div-element p\u00e5 sidan med en l\u00e5ngsam animering.<\/p>\n

   jQuery('div').hide('slow');<\/pre>\n
Dollartecket, $, \u00e4r ett alias f\u00f6r jQuery, eller en variabel som refererar till samma objekt om man skall vara helt korrekt. S\u00e5ledes kunde man skrivit <\/p>\n
   $('div').hide('slow');<\/pre>\n
ist\u00e4llet. Testa direkt med jsfiddle!<\/a><\/p>\n
F\u00f6r att sl\u00e5 p\u00e5 drag\/drop p\u00e5 listan, selekterar vi p\u00e5 id och anropar jqueryUI funktionen sortable med lite in-parametrar som styr beteendet. Detta g\u00f6r vi i en funktion som skickas som argument till jQuery-funktionen. Funktionen anropas f\u00f6rst n\u00e4r DOM-tr\u00e4det laddats, detta garanterar att vi inte refererar till DOM-noder som \u00e4nnu inte finns. Hela konstruktionen \u00e4r en kortform f\u00f6r $(document).ready(function(){...})<\/code><\/p>\n
<\/p>\n
Anv\u00e4ndarinteraktion<\/h3>\n
Nu b\u00f6rjar det bli intressant. Det som \u00e5terst\u00e5r av prototypen \u00e4r att rigga upp alla h\u00e4ndelsehanterare med jQuery. Bland annat skall det:<\/p>\n
    \n
  • Visas knappar med ikoner (flytta, papperskorg) n\u00e4r vi pekar p\u00e5 ett element i listan<\/li>\n
  • Visas en bekr\u00e4ftelse dialog n\u00e4r vi klickar p\u00e5 ta-bort knappen<\/li>\n
  • Tas bort r\u00e4tt rad i listan vid bekr\u00e4ftelse<\/li>\n
  • G\u00f6ras uppdateringar mot servern med ajax<\/li>\n<\/ul>\n
    Alla dess h\u00e4ndelser binds till funktioner med hj\u00e4lp av jQuery, \u00e4ven dessa i document.ready callbacken. Observera alla todo-kommentarer d\u00e4r vi senare skall g\u00f6ra ajax-anrop f\u00f6r att g\u00f6ra uppdateringar p\u00e5 serversidan. Vi skriver \u00e4ven till konsolen f\u00f6r att se att vi har r\u00e4tt data f\u00f6r uppdatering.<\/div>\n
    <\/div>\n
    <\/p>\n
    <\/div>\n
    Sammanfattning<\/h3>\n
    Vi har skapat en single-page webapp (Native RIA) med html, bootstrap css, jQuery och jQueryUI. I n\u00e4sta post skall vi bygga server-sidan med ASP.NET MVC, en OrigoDB backend och knyta ihop allt med jQuery ajax.<\/div>\n
    <\/span><\/span><\/p>\n
    \u00a0<\/span><\/span><\/h4>\n
    <\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
    D\u00e5 var det bloggdags igen! F\u00f6rra g\u00e5ngen var det java och maskinl\u00e4rande, nu blir det modern webbutveckling med Bootstrap, jQuery, Ajax, ASP.NET MVC och OrigoDB som backend. I denna f\u00f6rsta post b\u00f6rjar vi med anv\u00e4ndargr\u00e4nsnittet och bygger en prototyp. I n\u00e4sta post skall vi bygga server-sidan och knyta ihop allt med jQuery ajax. S\u00e5 starta […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[570,922,1],"tags":[],"class_list":["post-25267","post","type-post","status-publish","format-standard","hentry","category-blogg","category-blogi","category-okategoriserad"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t