Ramverk-Presentationer

JQuery conflict
av: Jevgenijs Kulikovs När man använder JQuery, man oftast använder den senaste versionen av den som finns på en remote server. Eller så laddar man ner den och har på sin egen server. Och det oftast funkar utan problem att ha en version av JQuery när man bygger en hemsida från början eller för sig själv. När man utför olika uppdrag åt kunder det kan hända så att man kommer att integrera det som man har byggt i kundens system/webbsida. Och där kan finnas en annan version av JQuery som används. Varje version av JQuery kan ha specifika skillnader som kan göra så att någon del av funktionaliteten som man har byggt till exempel med den senaste versionen kommer inte fungera med de tidigare versionerna. Och då har man en tanke att använda till exempel 2 versioner av JQuery parallellt. JQuery bibliotek har samma funktions namngivning med "$" tecken - $(function{ ... });. Och då blir det en konflikt mellan de två bibliotek. För att lösa det man måste ange olika namn till dem funktionerna som ska använda en specifik bibliotek:

$(function{ ... }); - använder en version av JQuery bibliotek my_Jquery(function{ ... }); - använder en annan version av JQuery bibliotek

Innan man börjar använda en annan namn för dem funktionerna som ska använda en annan version av biblioteket, man måste göra följande:

var my_jQuery = $.noConflict(true);

Länk till API: []

** av: Jonny Nordin **
JQuery är ett ramverk för mer än bara AJAX. Det innehåller även många smarta funktioner för att arbeta med CSS och DOM. Dessa finnesser tillsammans med funktionaliteten för AJAX gör ramverket mycket praktiskt arbeta med, eftersom man har en genemsam syntax där man i fallet "olika ramverk för olika saker" ofta får blanda syntax, vilket kan leda till både förvirring och konflikter. JQuery har några basfunktionaliteter för AJAX, så som asynkron sändning och hämtning av olika format. Man strävar också efter att eliminera problemen med webbläsarskillnader genom att kapsla in och dölja den logik som hanterar detta. JQuery har också många tillägsmoduler som i sig är ramverk baserade på JQuery. Dessa kan användas för att lägga till effekter och finess till websidor på ett enkelt sätt.

För mer info, se hemsidan för JQuery

JQuery UI
Inlägg av: Przemyslaw Rutkowski För att ytterliggare utöka möjligheterna JQuery skapades ett tillägg som heter JQuery UI (UI - User Interface). Ramverket innehåller olika och färdiga att använda delar av användargränssnittet, som t.ex. Datepicker, Progressbar, Accordion, mm. Förutom användargränssnittsdelarna, som också kallas Widgets, finns det olika interaktionstekniker och effekter redo att använda. En spännande del av ramverket är det att man får välja mellan olika Themes (utseenden) och kan även skapa egna.

Ramverket gör det möjligt att plocka bara de bitar man behöver för sitt projekt. Tack vare detta blir inte js-filen onödigt stor.

Följande exempel visar hur enkelt det är att med JQuery UI lägga till en drop down-kalender på ett inputfält som ska ta ett datum. code $(function { $( "#datepicker" ).datepicker; }); code Besök JQuery UI hemsida

JQuery Plugins
Av: Joakim Söderberg Förutom all grundfunktionalitet som gör JQuery så kraftfullt, samt dess UI-framework, finns det även möjlighet att skriva egna plugins som sedan enkelt och intiutivt kan användas med resten av JQuery. En stor del av JQuery är såkallad "chaining" där man kan anropa flera metoder på ett DOM-element i en kedja:

code format="javascript" $("p.neat").addClass("ohmy").show("slow").myownplugin;

code

Detta fungerar även med de plugin man själv kan skriva. Kedjan fungerar så att DOM-elementet retuneras till nästa metod i kedjan med de ändringar som de tidigare metoderna gjort. Så i exemplet ovan används först en CSS-selector för att välja ut alla p-element med klassen neat. På alla dessa element läggs sedan klassen "ohmy" till, och en funktion som gör att elementen sakta görs synliga binds till dem. Och slutligen anropas ett plugin.

[|Mer om att skriva jQuery plugins].

jQuery och Ajax
Av: Andreas Engelkes

Metoden $.ajax är jQuerys hjärta när det kommer till ajaxfunktionalitet och är den mest kraftfulla och modifieringsbara Ajaxfunktionen som finns tillgänglig i ramverket. Metoden $.ajax tar ett flertal parametrar och de som är vanligast att använda är: type, url, dataType, complete, error och success. Ett enkelt exempel på hur metoden $.ajax kan användas för att hämta innehållet på sidan "data.html" asynkront:

$.ajax({ type: 'GET', url: 'data.html', dataType: 'html', error: function { /*Felmeddelande!*/ }, success: function(html) { /*Hämtat data!*/ $("body").append(html); } });

Mer om metoden $.ajax

MooTools
Inlägg av: Patrik Lantz Detta ramverk är open source baserat och erbjuder ett detaljerat //[|API]//. Det utnyttjar objektorienterad programmering och har ett eget sätt att skapa klasser på som stödjer ärvning. MooTools erbjuder en förbättrad interaktion med DOM där man kan lägga till, ta bort och ändra element på ett mer flexibelt sätt. Nedan visas ett exempel på hur man får ut elementet med ID 'myElement': code format="javascript" var myElement = $('myElement'); code Att hämta alla element efter deras Tag namn görs enkelt med: code format="javascript" $$('p', 'br'); code vilket returnerar alla paragrafer och radbrytningar. Det går även att själv välja vilka moduler i MooTools man vill ha med genom att besöka deras //[|Core builder]// sida, klicka för önskade funktionaliteter och sedan genereras en Javascript fil. Dessutom så finns det plugins att uttöka med på liknande sätt.

//[|MooTools hemsida]//

**Prototype**
Beskrivning av: Alexander Hansson

Prototype är ett ramverk för javascript som bygger på Open Source. Ramverket bygger i grund och botten på en fil, prototype.js, och används även i andra ramverk, exempelvis script.aculo.us. Prototype underlättar kodskrivning genom inbyggda funktioner för iterationer, selektioner och även hur man kan skriva objektorienterad kod med klasser och arv.

Prototype-ramverket fungerar genom att det ändrar de olika inbyggda javascriptobjektens prototype-modeller och därför ändrar funktionaliteten på dessa, därav namnet. En nackdel med detta tillvägagångssätt kan vara att kompatibilitetsproblem uppstår vid användning av andra ramverk samtidigt. En fördel är att ramverket kan användas tillsammans med tillägget Scriptaculous som ger möjlighet att enkelt applicera snygga animationer och GUI-effekter.

Officiell hemsida finns här: @http://www.prototypejs.org/. API för Prototype finns att läsa här.

**Dojo**
Beskrivning av: Haris Drapic

Min presentation av Dojo ligger på [|Dojo presentation]

Prototype
Beskrivning av Lars Nohle

Ramverket Prototype är ett ramverk som en del andra ramverk, t.ex. Rico och Script.acoulo.us bygger på. Det innehåller bland annat stöd för följande saker: - Ajax-anrop - JSON - Utökningar av DOM. - Arv

Nedan följer en kort presentation av hur man kan använda Prototype för att göra Ajax-anrop.

För att skapa ett asynkront AJAX-anrop med Prototype skapar man ett objekt av typen Ajax och anropar metoden Request på detta objekt. Som parametrar till metoden anger man den URL som skall anropas samt en objektliteral som anger vilken typ av anrop (get eller post) som skall göras samt vilka callback-metoder som skall anropas vid lämpliga tillfällen. Prototype hanterar skillnader mellan olika browsers så att man inte behöver tänka på detta.

För att göra ett get-anrop till URL:en www.enurl.se och ange att funktionen minCallback skall exekveras om anropet lyckas kan man göra följande:

new Ajax.Request("www.enurl.se", { method:'get', onSuccess: minCallback });

Prototype innehåller även stöd för att uppdatera ett givet HTML-element med ett Ajax-anrop. Detta kan göras en enstaka gång med metoden Ajax.Updater samt för att göra det återkommande med en viss period med metoden Ajax.PeriodicalUpdater.

script.aculo.us
Beskrivning av: Johan Norberg Uppdaterat av: Christoffer Fink

script.aculo.us är ett AJAX-ramverk i JavaScript som i sin tur är baserat på Prototype-ramverket. Det består av tre delar: visual effects, controls och builder. Visual effects utgörs av fem baseffekter som låter utvecklaren manipulera DOM-objekt visuellt, till exempel ändra opacitet eller storlek på en box. Dessa fem baseffekter går att kombinera. Det ingår också "Behaviours", som utökar funktionaliteten hos vanliga objekt, som till exempel möjligheten att dra och släppa ett DOM-objekt. Builder låter utvecklaren skapa DOM-objekt dynamiskt i JavaScript. Controls lägger till nya objekt/element istället för att göra det lättare att jobba med "vanliga" element som ingår som standard i HTML. Dessa har mycket specifika egenskaper, som t ex Slider för att styra olika värden, eller InPlaceEditor som genererar motsvarande JTextArea där besökaren kan ändra information på servern. Det finns dessutom ett Sound-bibliotek som gör det möjligt att spela upp musik direkt i webläsaren.

[]

MochiKit
Inlägg av: Anders Tobian

MochiKit är ett ramverk som är detalj dokumenterat och vältestat. Det är ett mindre ramverk som består av en samling JavaScript bibliotek, Exempel på några bibliotek som finns är MochiKit.Async som är till för att hantera asynkrona uppgifter, MochiKit.DOM är till för dom manipulering och MochiKit.Visual för visuala effekter.

Länk till Dynamic Drive: []

Echo3
Inlägg av: //Mats Ljungquist//

Echo3, är en komponentbaserat och eventorienterat ramverk för byggande av komplexa webbapplikationer med egenskaper i stil och klass med installerade applikationer. Utvecklaren har till sin hjälp ett GUI-toolkit.

Med Echo3 har man möjlighet att skapa sina applikationer på två sätt; antingen mha JavaScript på klientsidan (givetvis då via echo-apiet), och då krävs det egentligen ingen serversida, men kommunikation via XML eller Json över HTTP stöds, eller så kan man välja att utveckla, webbapplikation helt och hållet på serversidan mha java, och då utan att man behöver kunna någon html eller JavaScript (detta genereras). Åtminstone gäller det så länge man inte är ute efter någon special special feature.

Echo3 bygger på JavaScript-ramverket CoreJS. CoreJS ger betydligt bättre möjligheter till objektorienterad systemutveckling än vad som är möjligt, på ett smidigt sätt, med traditionell javascriptprogrammering. Till exempel finns det stöd för objektorienterat arv i klassisk stil, med arv på klass och inte instans, som rena prototype-arv är. Detta, CoreJSs OO-fokusering, underlättar för utvecklaren i synnerhet om han/hon är van vid OO-programmering.

Echo3 är open source och publiceras under Mozilla public Licence.

Mer finns att veta här: @http://echo.nextapp.com/site/

Där finns även demos, för både klientvarianten och servervarianten av Echo3.

Dojo
Inlägg av: Tobias Björkgren

Dojo är ett ramverk med väldigt många olika användningar. Den del jag fokuserade på var förbättringar av UI-objekt, såsom knappar och dropdown. Förutom att stödja asynkrona funktioner och datalagring så stödjer det följande funktionaliteter, enligt wikipedia:


 * [|Menus], [|tabs] , and [|tooltips]
 * Sortable tables, dynamic charts, and 2-D [|vector drawings]
 * Animated effects—fades, wipes and slides—facilities for custom animation effects
 * Tree widgets that support [|drag-and-drop]
 * Various [|forms] and routines for validating form input
 * Calendar-based date selector, time selector, and clock
 * Core widgets

Dojo är byggt av ett stort javascriptbibliotek och är gratis att använda. Dojo stödjer även grafiska representationer av data och en mängd olika APIs finns att tillgå. Besök [] om ni vill veta mer.

Länk till det jag gjorde: [|http://www.student.bth.se/~tobb10/ajax_test/tobias-dropdown.html]

=Pyjamas= Av: Morgan Bengtsson [|Pyjamas] är är ett lite annorlunda ramverk, eftersom man inte skriver någon javascript kod. Istället används språket [|Python], som i sin tur konverteras till javascript. Fördelen med detta är att man i största mån kan basera sin applikation på ett enda språk, Python, både på klient och server sidan. I annat fall kan det bli en blandning av många olika språk, t.ex. HTML, javascript och ett serverspråk, t.ex. PHP. Pyjamas innehåller även många hjälpmedel för asynkron kommunikation, UI komponenter och DOM hantering.

AJAX.OOP
Av: Joakim Lindskog AJAX.OOP är ett objektorienterat ramverk för AJAX som möjliggör enklare objektorienterad design med bl.a.:
 * Arv
 * Konstrukturer
 * Överlagring
 * Aggregat

Fördelarna med ramverket är främst att du på ett mer strukturerat sätt kan arbeta objektorienterat jämfört med om du använt Javascript direkt samt att du får tillgång till AJAX-objekt som du kan använda för dina AJAX-anrop och även bygga ut med ytterligare funktionalitet. Kodexempel: code format="javascript" // Klassdefinition i AJAX.OOP var Hus = Ajax.Class({ farg : null,  plan : null,

constructor : function(farg, plan) { this.farg = farg; this.plan = plan; },

stada : function { // Städa huset } }); code Läs mer om AJAX.OOP här: []

Google YUI
Av: Per Svensson Google User Interface Library (YUI) är ett open-source JavaScript ramverk från Yahoo för att bygga ria (rich internet applications). YUI använder som många andra AJAX, DHTML och olika tekniker för DOM manipulering. YUI innehåller även flera sk. Core CSS resurser som är enkla för användaren att använda. YUI började utvecklas 2005 och i september 2009 släpptes nuvarande version YUI3 som är helt ombyggt från grunden.

Källor: Wikipedia Yahoo Developer

Läs mer på: developer.yahoo.com/yui/

script.aculo.us
av: Joakim Ekendahl

script.aculo.us är en samling av Javascript-bibliotek som gör det möjligt att förbättra webbsidors användargränssnitt. Ramverket kan bl.a. åstadkomma en rad visuella effekter, dra-och-släpp-funktion, andra kontroller såsom Ajax-baserad auto-ifyllning, direkt-redigering, sidreglage och mycket mer. Via hemsidan för script.aculo.us finns också några demos för att illustrera möjligheterna med detta ramverk.

Mer info: http://script.aculo.us Demos: @http://madrobby.github.com/scriptaculous/demos/

Spry Framework for Ajax
Av: Patrik Iden (patrikiden@yahoo.se)


 * Spry Framework** är ett open source Ajax ramverk som utvecklats av Adobe Systems som används i byggandet av Rich Internet Applications (//Är som ett vanligt data program som körs från hårddisken, men körs via en webläsare och kommunicerar med en server//).

Till skillnad från andra rena JavaScript-ramverk såsom Dojo Toolkit och Prototype är Spry inriktad webbdesigners, inte webbutvecklare.

Spry Framework består av huvudsakligen 3 olika delar:
 * 1) **Spry-effekter** - animering effekter som blind, tona, växa, markera, skaka, rutschkana och squish.
 * 2) **Spry-Data** - databindning till HTML-kod med minimal kod eller proprietär kod. Spry använder Googles Xpath JavaScript-bibliotek för att konvertera XML till JavaScript-objekt. Den klarar XML, HTML och JSON-data.
 * 3) **Spry-widgets** - ramverk för utveckling av widgets.

Officiella webbsidan: http://labs.adobe.com/technologies/spry/home.html

Prevel
Av: Leif Ershag

Prevel är ett lättviktigt ramverk som är licensierat under MIT och LGPL. Det bidrar med en hel del förenklingar av vanliga problem utan att egentligen bidra med så mycket saker. Det förenklar anropandet av Ajax-funktioner, det har förenklad access av DOM-strukturen och det har även funktionalitet för att manipulera cookies och Local Storage.

Att Prevel är litet är en fördel om laddningstider är viktiga och man ändå vill ha enklare kod, koden är på ca 16kb bara för grundfunktionaliteten. Grundkoden finns i en lättläst och en komprimerad variant för att man inte ska behöva använda den 46kb stora filen för produktionsmiljöer.

Prevel och dess dokumentation finns på github: []

Head.js
Av: Anatoly Mironov

Head.js är ett litet javascript-bibliotek som främst används för att ladda javascript-filer parallelt i stället för sequentiellt som det är standard. Speciellt användbart är det när man använder sig av externa källor som CDN för att ladda jQuery, jQuery UI med mera. Förutom att snabba upp nedladdningen av javascript-filer kan head.js användas för att upptäcka vilka funktioner som stöds av webbläsaren (den mest kända "konkurrenten" är Modernizr), för att dynamiskt lägga till css-klasser beroende på webbläsare och skärmstorlek. [|Head.js är öppen källkod och finns på github]. Här är ett exempel på kod som kommer ladda javascript-filer samtidigt men exekvera dem i ursrunglig ordning:

code format="javascript" head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "./bootstrap/js/bootstrap.min.js",  "http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js",  "./scripts/XMLWriter-1.0.0-min.js",  "./scripts/my-script.js");

code

jQuery eller YUI? ... eller välja ramverk [2012-03-10: Under utveckling]
Av: Björn Persson (bjpe0800)

Det finns ett antal ramverk att välja på, men vilket ramverk bör man använda? Min första kontakt med ramverk var Prototype, men dess syntax (och min motivation) fick mig att inte vilja gå vidare med den (och idag så verkar det inte vara så populärt). Något år senare så valde jag att titta på jQuery, då det verkade var det mest använda, för att sen titta på YUI, då det var det ramverk som hänvisades till i kursliteratur till kursen Web 2.0 med AJAX.

På min webbplats, Björns studiewebb, har jag försökt (och fortsätter att försöka) beskriva hur man använder jQuery och YUi.

jQuery och [|YUI] på Björns studiewebb.