Tjänsteorienterad arkitektur med AJAX

60 Pages·2008·1.16 MB·Swedish

Tjänsteorienterad arkitektur med AJAX
Nils Ekman
EXAMENSARBETE 2008
DATATEKNIK
Tjänsteorienterad arkitektur med AJAX
Service oriented architecture with AJAX
Nils Ekman

Detta examensarbete är utfört vid Tekniska Högskolan i Jönköping inom
ämnesområdet Datateknik. Arbetet är ett led i den treåriga
högskoleingenjörsutbildningen. Författaren svarar själv för framförda åsikter,
slutsatser och resultat.

Handledare: Bengt Ekeberg

Omfattning: 15 poäng (C-nivå)

Datum: 2008-06-02

Arkiveringsnummer:

Postadress: Besöksadress: Telefon:
Box 1026 Gjuterigatan 5 036-10 10 00 (vx)
551 11 Jönköping
Abstract
Abstract
Through the entry of web 2.0 the technologies behind web development has
changed dramatically. Asynchronous JavaScript and XML (AJAX) is the umbrella
term for different techniques that make it possible to build rich and interactive
user interfaces in today’s web browsers. Service Oriented Architecture (SOA)
describes how common services can be bundled and published so they can be
consumed by different systems.
The company SYSteam Evolution AB, which has requested this project, wanted a
web application that shows a graphical activity chart in order to easier view
ongoing projects. The goal for this project is to develop a demo platform that
shows how AJAX and SOA can be used to create flexible and reusable
applications. To reach the goals, many different frameworks and technologies need
to cooperate and work together.
This report will describe the different technologies that have been used and
explain the different steps in the development job.
The result of the work has lead to a demo platform that uses many different
technologies to show a graphical activity chart. The job requestor and the author
are very pleased with the result of the work.
Sammanfattning
Sammanfattning
Genom intåget av web 2.0 har teknologierna bakom webbutveckling ändrats
drastiskt. Asynchronous JavaScript and XML (AJAX) är samlingsnamnet på ett
antal tekniker som gör det möjligt att bygga rika och interaktiva applikationer i
dagens webbläsare. Tjänsteorienterad arkitektur, ”Service Oriented Architecture”
(SOA) talar om hur gemensamma tjänster paketeras och publiceras så att de kan
konsumeras av olika system.
Uppdragsgivaren till detta examensarbete är företaget SYSteam Evolution AB.
Företaget vill ha en webbapplikation som visar en grafisk aktivitetskarta för att
enklare kunna överblicka pågående projekt. Målet med arbetet är att ta fram en
demoplattform som visar hur AJAX och SOA kan användas för att skapa flexibla
och återanvändbara applikationer. För att lyckas med uppdraget måste olika
ramverk och teknologier kombineras och fungera tillsammans.
Denna rapport kommer att förklara de olika teknikerna som använts, samt även
förklara de olika stegen i utvecklingsarbetet.
Resultatet av arbetet har utfallit i en demoplattform som använder många olika
teknologier för att visa grafisk aktivitetskarta. Uppdragsgivare och uppdragstagare
är mycket nöjda med resultatet av arbetet.

Nyckelord
JavaScript
AJAX
.NET
SOA
Web Services
Windows Sharepoint Services
Innehållsförteckning
Innehållsförteckning
1 Inledning ....................................................................................1
1.1 SYSTEAM AB........................................................................................................................1
1.1.1 SYSteam Evolution AB......................................................................................................1
1.2 PROBLEMFORMULERING........................................................................................................2
1.3 SYFTE OCH MÅL.....................................................................................................................2
1.4 METOD...................................................................................................................................2
1.5 AVGRÄNSNINGAR...................................................................................................................3
1.6 DISPOSITION...........................................................................................................................3
2 Teoretisk bakgrund..................................................................4
2.1 XML......................................................................................................................................5
2.2 XSLT.....................................................................................................................................5
2.3 JAVASCRIPT...........................................................................................................................6
2.3.1 Historik.............................................................................................................................6
2.4 DOCUMENT OBJECT MODEL..................................................................................................7
2.5 JAVASCRIPT-BIBLIOTEK.........................................................................................................7
2.6 JAVASCRIPT OBJECT NOTATION............................................................................................9
2.7 .NET FRAMEWORK...............................................................................................................10
2.7.1 CLR.................................................................................................................................10
2.7.2 Framework Class library................................................................................................10
2.7.3 C#...................................................................................................................................11
2.8 OBJEKTORIENTERING...........................................................................................................11
2.8.1 Inkapsling.......................................................................................................................11
2.8.2 Arv..................................................................................................................................12
2.8.3 Polymorfism....................................................................................................................12
2.8.4 Interface..........................................................................................................................13
2.8.5 JavaScript och objektorientering....................................................................................14
2.9 AJAX...................................................................................................................................15
2.9.1 Teknikerna bakom AJAX.................................................................................................15
2.9.2 Hur AJAX fungerar.........................................................................................................16
2.9.3 Nackdelar med AJAX......................................................................................................17
2.10 TJÄNSTEORIENTERAD ARKITEKTUR......................................................................................18
2.11 WEB SERVICE.......................................................................................................................18
2.12 WSDL..................................................................................................................................20
2.13 SOAP...................................................................................................................................20
2.14 ASP.NET WEB SERVICES....................................................................................................20
2.14.1 Anropa ASP.NET Web Services med AJAX...............................................................21
2.15 WINDOWS SHAREPOINT SERVICES 3.0.................................................................................23
2.15.1 Struktur i WSS............................................................................................................24
2.15.2 Programmera mot WSS..............................................................................................24
3 Genomförande........................................................................25
3.1 VERKTYG.............................................................................................................................25
3.2 SYSTEMUTVECKLINGSMODELL............................................................................................26
3.3 FLERSKIKTSARKITEKTUR.....................................................................................................26
3.4 FÖRSTA ITERATIONEN..........................................................................................................26
3.4.1 Datalager........................................................................................................................27
3.4.2 Rita ut gränssnitt............................................................................................................28
3.4.3 Ändra aktivitet................................................................................................................28
3.5 ANDRA ITERATIONEN...........................................................................................................30
3.5.1 Sortera aktiviteter efter felpoäng....................................................................................32
3.5.2 Visa status för användare...............................................................................................32
3.5.3 Övriga ändringar............................................................................................................32
Innehållsförteckning
3.6 TREDJE ITERATIONEN...........................................................................................................33
3.6.1 Datalager........................................................................................................................33
3.6.2 Hämta möjliga val..........................................................................................................34
3.6.3 Presentationslager..........................................................................................................35
4 Resultat....................................................................................36
4.1 UPPKOMNA PROBLEM...........................................................................................................38
4.1.1 Dra och släppa aktivitetsrutor........................................................................................38
4.1.2 Smoothbox och IE7.........................................................................................................38
5 Slutsats och diskussion...........................................................40
5.1 FRAMTIDA ARBETE...............................................................................................................40
6 Referenser................................................................................41
7 Sökord......................................................................................44
8 Bilagor......................................................................................45
Figurförteckning
Figurförteckning
FIGUR 1 - KÄRNVERKSAMHETEN HOS SYSTEAM EVOLUTION AB...................................................................1
FIGUR 2 – OLIKA PROJEKT PÅ WHITEBOARDTAVLA.......................................................................................2
FIGUR 3 – DEL AV ETT HTML-DOKUMENT..................................................................................................5
FIGUR 4 - ETT LITET MEN KOMPLETT XML-DOKUMENT...............................................................................5
FIGUR 5 - RESULTAT AV JAVASCRIPT...........................................................................................................6
FIGUR 6 - DOM STRUKTUR AV WWW.JTH.HJ.SE............................................................................................7
FIGUR 7 – BYT BILD PÅ ELEMENT MED DOM OCH JAVASCRIPT....................................................................7
FIGUR 8 – JSON OBJEKT............................................................................................................................9
FIGUR 9 - EXEKVERINGSFÖRLOPP AV ETT .NET PROGRAM.........................................................................10
FIGUR 10 - “HELLO WORLD” I C#...........................................................................................................11
FIGUR 11 - ENKEL KLASS I C#...................................................................................................................11
FIGUR 12 – ARV I C#................................................................................................................................12
FIGUR 13 – EXEMPEL PÅ POLYMORFISM....................................................................................................12
FIGUR 14 – RESULTAT FRÅN KÖRNING AV PROGRAM..................................................................................13
FIGUR 15 - MANIPULERING AV OBJEKT I JAVASCRIPT................................................................................14
FIGUR 16 - GLOBAL VARIABEL I JAVASCRIPT.............................................................................................14
FIGUR 17 - PRIVATA OCH PUBLIKA MEDLEMMAR I EN JAVASCRIPT FUNKTION.............................................14
FIGUR 18 - ONREADYSTATECHANGE HÄNDELSE..........................................................................................16
FIGUR 19 – OLIKA STADIER FÖR EGENSKAPEN READYSTATE.......................................................................16
FIGUR 20 - ENKEL MODELL ÖVER EN SERVICE OCH DESS INNEHÅLL [24]....................................................19
FIGUR 21 - WEB SERVICE SOM ÄR SKAPAD VIA VISUAL STUDIO...................................................................21
FIGUR 22 - GENERERING AV PROXYKLASS OCH KONFIGURATIONSFIL..........................................................21
FIGUR 23 - KONTROLLOBJEKTET SCRIPTMANAGER...................................................................................22
FIGUR 24 – WEB SERVICEKLASS MED ATTRIBUTEN [SCRIPTSERVICE] OCH [WEBMETHOD].........................22
FIGUR 25 – EN SITE I WSS........................................................................................................................23
FIGUR 26 – HIERARKIER I WSS [28].........................................................................................................24
FIGUR 27 – MODELL ÖVER UTVECKLINGSITERATION..................................................................................25
FIGUR 28 – DATATYPER AV KLASSEN ACTIVITY..........................................................................................27
FIGUR 29 – ”HÅRDKODADE” AKTIVITETER I ETT DICTIONARY-OBJEKT.......................................................27
FIGUR 30 – AKTIVITETER SOM RITATS UT MED JAVASCRIPT........................................................................28
FIGUR 31 – TRANSFORMERA XML PÅ SERVERSIDAN...................................................................................29
FIGUR 32 – JAVASCRIPT-METOD SOM VISAR AKTIVITET I SMOOTHBOX POPUP-FÖNSTER..............................29
FIGUR 33 – POPUP-FÖNSTER SOM SKAPATS GENOM ANVÄNDNING AV SMOOTHBOX.....................................30
FIGUR 34 – NYTT GRÄNSSNITT...................................................................................................................31
FIGUR 35 – JAVASCRIPT-OBJEKT MED ANVÄNDARES AKTIVITETER..............................................................31
FIGUR 36 – VISA STATUS NÄR INFORMATION HÄMTAS.................................................................................32
FIGUR 37 – EN STANDARD ”ATT GÖRA” LISTA I WSS..................................................................................33
FIGUR 38 - WEB SERVICE INTERFACE SOM SKA IMPLEMENTERAS................................................................33
FIGUR 39 – OLIKA VAL FÖR KOLUMNEN STATUS I LISTAN TODO.................................................................34
FIGUR 40 – LOGFIL MED ETT FÅNGAT UNDANTAG......................................................................................35
FIGUR 41 – ARKITEKTUR ÖVER PLATTFORM..............................................................................................36
FIGUR 42 – AKTIVITETSKARTA..................................................................................................................37
FIGUR 43 – DRA AKTIVITETER MELLAN ANVÄNDARE...................................................................................37
FIGUR 44 – IE7 EFTER ATT SMOOTHBOX POPUP-FÖNSTER HAR ÖPPNATS 15 GÅNGER.................................38
FIGUR 45 – REDIGERA AKTIVITET..............................................................................................................39
FIGUR 46 – XML-FIL...............................................................................................................................48
FIGUR 47 – TABELL.XSL............................................................................................................................48
FIGUR 48 – RESULTAT AV TRANSFORMERING.............................................................................................49
FIGUR 49 – KOMPLETT AJAX EXEMPEL....................................................................................................50
FIGUR 50 – TID.ASPX – SKRIVER UT DATUM...............................................................................................51
FIGUR 51 – RESULTAT AV AJAX EXEMPEL.................................................................................................51
Inledning
1 Inledning
Detta examensarbete är det slutliga arbete som utförs på det treåriga
högskoleingenjörsprogrammet: Kommunikation och informationsteknik vid
Tekniska Högskolan i Jönköping. Under utbildningens gång har kurser i
programmering, datakommunikation, system och webbutveckling lästs, vilket har
underlättat detta arbete.
Uppdragsgivare till detta arbete är företaget SYSteam Evolution AB.
1.1 SYSteam AB
SYSteam är ett IT-konsultbolag som startades år 1984. SYSteam är en
helhetsleverantör av IT-tjänster och affärsidén är att "aktivt stödja kundernas
affärsutveckling med effektiva informationssystem" [30]. SYSteam består av ca 50
olika dotterbolag, finns på 50 orter runt om i norden och har drygt 1000
medarbetare. Sedan år 2007 ägs SYSteam av norska Ergo Group [30].
1.1.1 SYSteam Evolution AB
SYSteam Evolution AB är ett av dotterbolagen i SYSteamkoncernen. Företaget
startades år 2007 och har i dagsläget elva medarbetare.
Målet med SYSteam Evolutions verksamhet är att
skräddarsy IT-lösningar åt sina kunder. Företaget ska
kunna möta de snabba förändringar som finns på
marknaden genom att dels erbjuda standardtjänster, Standardportal Integration
men även kundunika hemsidor som portaler, e-
handelslösningar och avancerade
integrationsplattformar. Verksamheten kan förklaras
av Figur 1 där varje cirkel representerar en av
Kundunik utveckling
företagets spetskompetenser. SYSteam Evolution
arbetar med helhetslösningar och är med i alla
utvecklingsstadier, från vision till framställning och
utbildning av produkt [31].
Figur 1 - Kärnverksamheten hos
SYSteam Evolution AB.

1
Inledning
1.2 Problemformulering
På SYSteam Evolution arbetar konsulter med många olika projekt. Aktuella
projekt står uppskrivna på en whiteboardtavla (Figur 2).

Figur 2 – Olika projekt på whiteboardtavla.
Nackdelen med att ha informationen på en whiteboardtavla är att det inte går att
se vem som arbetar med ett specifikt projekt. Det finns heller inte någon möjlighet
att se om något projekt ska prioriteras framför något annat.
1.3 Syfte och mål
Syftet med examensarbetet är att utveckla en webbapplikation som visar en grafisk
aktivitetskarta. Genom användning av applikationen kommer de anställda på
SYSteam Evolution få en bättre överblick över pågående projekt. Olika Web
Services ska utvecklas för att förse webbapplikationen med information. De Web
Services som ska utvecklas, ska utvecklas med tanke på tjänsteorienterad arkitektur
(SOA). Målet med arbetet är att ta fram en demoplattform som visar hur AJAX
och SOA kan användas för att skapa flexibla och återanvändbara applikationer.
1.4 Metod
För att lyckas med uppdraget kommer litteraturstudier bedrivas inom området
webbprogrammering. Sökmotorer på Internet som t.ex. Google och MSDN
kommer att användas för lösa specifika programmeringsproblem. Mycket tid
kommer även spenderas ute på SYSteam Evolution i Huskvarna, där eventuella
problem kan diskuteras med erfarna systemutvecklare.
2
Inledning
1.5 Avgränsningar
Detta arbete innefattar inte några jämförelser av olika utvecklingsmiljöer utan
håller sig till Microsofts .NET-miljö. Olika systemutvecklingsmodeller kommer
heller inte beskrivas då SYSteam Evolutions befintliga utvecklingsmodell kommer
att användas. Trots att arbetet handlar om webbutveckling kommer inte
webbdesign att tas upp i denna rapport.
1.6 Disposition
Denna rapport följer Tekniska Högskolans mall för examensarbete och är
uppdelad nedanstående kapitel.
Teoretisk Bakgrund
I detta kapitel kommer tekniker som ligger till grund för arbetet att beskrivas så att
läsaren vid kapitlen Genomförande och Resultat lättare ska förstå helheten.

Genomförande
Kapitlet beskriver, utifrån den teoretiska bakgrunden och kravspecifikationen,
utvecklingen av demoplattformen.

Resultat
Detta kapitel redovisar resultatet av arbetet och nämner vissa problem och dess
lösningar.

Slutstats och diskussion
I detta kapitel diskuteras arbetet utifrån resultatet. Kapitlet innehåller även
författarens personliga reflektion över arbetet. Förslag till fortsatt arbete kommer
också att tas upp i detta kapitel.

3