Brug af Silverlight i SharePoint

Størrelse: px
Starte visningen fra side:

Download "Brug af Silverlight i SharePoint"

Transkript

1 Brug af Silverlight i SharePoint IT-Diplomingeniør bacheloropgave udført hos Webtop A/S Frederik Gaarn Kiær s Institut for Matematisk Modellering, IMM Danmarks Tekniske Universitet Kongens Lyngby, 17. september 2009

2 Technical University of Denmark Informatics and Mathematical Modelling Building 321, DK-2800 Kongens Lyngby, Denmark Phone , Fax IMM-B.Eng

3 Indhold 1 Prolog Forord Problemområdet Resume Planlægning Udviklingsmetode Projektplan Teknologi Udviklingsmiljø og værktøjer Introduktion til SharePoint Introduktion til Silverlight Silverlight i SharePoint Kravspecifikation Beskrivelse af problemområde Systemkrav Iterationsplan Analyse Billedbehandling i Silverlight Funktionalitetskrav (Use Cases) Øvrige krav Konklusion af analyse Design Forord Applikationsarkitektur Silverlightapplikationen Konklusion af design i

4 INDHOLD 7 Implementering Forord SharePoint Webservices Silverlightapplikationen Konklusion af implementering Test Forord Graybox-test Whitebox-test Accepttest Konklusion af test Konklusion Projektet Evaluering Appendiks Indhold på vedlagte CD Brugergrænsefladen Deployering Kildekode Figur og Tabel indeks 327 Litteratur 332 ii

5 Kapitel 1 Prolog Indhold 1.1 Forord Problemområdet Resume

6 KAPITEL 1. PROLOG 1.1 Forord Dette projekt er udarbejdet som afslutning på uddannelsen som IT-ingeniør ved DTU. Opgaven er lavet i samarbejde med Webtop A/S, hvor jeg i fællesskab med Peter Gøtterup besluttede at udarbejde en billedbehandlingsapplikation til Microsoft SharePoint. Projektet har været vejledt af Klaus Thiesen fra DTU og Peter Gøtterup fra Webtop A/S. Under projektforløbet har jeg haft god sparring og modtaget hjælp fra Jess Lassen og Araz Yamininia, der begge er konsulenter hos Webtop. I forbindelse med udarbejdelse af projektrapport har Kristine Kiær og Lars Kiær- Christensen været en stor hjælp i forbindelse med korrekturlæsning og indholdsmæssigfeedback. En stor tak til jer alle! 1.2 Problemområdet Konsulenthuset Webtop A/S leverer løsninger baseret på Microsoft SharePoint og ønsker udviklet en billedbehandlingskomponent i Microsoft Silverlight til behandling af billeder i SharePoint. SharePoint (Microsoft Office SharePoint Server) bruges som platform til Intranetløsninger og kan ligeledes bruges som CMS til hjemmesider. I SharePoint gemmes data og dokumenter, her iblandt billeder, i lister, der i store træk fungerer som tabeller i en traditionel database. SharePoint tilbyder kun én billedredigeringsmulighed, der giver brugerne mulighed for at ændre størrelsen på et billede (højde/bredde). Hvis et billede skal ændres på andre måder, må det downloades til en lokalmaskine, åbnes i et billedbehandlingsprogram, hvor det kan manipuleres for til sidst at blive uploadet til SharePoint. Det er ikke nødvendigvis alle medarbejde i en organisation, der har adgang til billedredigeringssoftware på grund af licenser eller intern IT-politik. Dette kan medføre, at billedet skal flyttes til en anden maskine for at blive manipuleret, selvom den ønskede manipulation blot er en lille ændring som f.eks. at skifte farven til sort/hvid, justere røde øjne på et medarbejderfoto eller beskære billedet efter faste mål. Silverlight er Microsofts browserplugin, der giver mulighed for udvikling af rige Internetapplikationer. Silverlight tilbyder en vektorbaseret grafikmotor samt understøttelse af lyd, video og animation. Silverlight kan bruges på de største platforme og integreres i de mest almindelige webbrowsers. Silverlights grafiske faciliteter og animationsfaciliteter giver en oplagt mulighed for at udvikle en attraktiv og brugervenlig billedbehandlingskomponent, der kan integreres i SharePoint. Dette projekt omhandler udviklingen af en Silverlight-billedbehandlingskomponent, der integreres i Microsoft SharePoint. 2

7 KAPITEL 1. PROLOG 1.3 Resume Denne rapport omhandler mit udviklingsarbejde af en Silverlight-billedbehandlingsapplikation der integreres i Microsoft SharePoint, så eksisterende billeder kan manipuleres direkte på SharePoint-serveren. Billedbehandlingsapplikationen kan udføre gængse manipulationer af billeder som beskæring, ændring af størrelse, rotere, spejlvende, ændre farveopsætningen til gråtoner og korrektion af røde øjne. I Silverlight er der udviklet en brugergrænseflade, der giver brugeren en visualisering af manipulationerne, inden de reelt udføres på serveren, og der er derved skabt en What You See Is What You get-applikation. I den indledende fase af projektet opdagede jeg, at billedbehandling i Silverlight på nuværende tidspunkt ikke er muligt. Det har derfor været nødvendigt at udvikle en systemarkitektur, der giver Silverlightapplikationen mulighed for at kommunikere med serveren, hvor det er muligt at udføre billedmanipulationerne. Kommunikationen mellem server og Silverlight er sat op med en WCF-webservice. Med brug af en specielbygget SharePoint-webservice er der skabt adgang til SharePoint-serverens API, og dette medfører at billeder kan hentes og gemmes. Med denne systemstruktur har jeg opfyldt målsætningen om manipulation af eksisterende billeder direkte i Microsoft SharePoint. 3

8 Kapitel 2 Planlægning Indhold 2.1 Udviklingsmetode Iterativ og inkrementerende udvikling Organisering af et UP projekt UML Projektplan

9 KAPITEL 2. PLANLÆGNING 2.1 Udviklingsmetode Til dette projekt har jeg valgt at benytte Unified Process-udviklingsmetoden (UP). UP er en udbredt metode, som bygger på en iterativ og inkrementerende udviklingsproces. UP er drevet af brugerscenarier (herefter betegnet som use cases) og beskrives ofte ved brug af UML (Unified Modeling Language). Metoden er blevet populær på grund af dens fleksibilitet og brugbarhed i forbindelse med objektorienterede softwareudvikling. Det er min ambition at bruge UP metoden under udvikling af dette projekt Iterativ og inkrementerende udvikling Med en iterativproces menes en proces, der gentages, og når den er inkrementerende, menes der, at næste iteration starter på et højere niveau. Den iterative proces er organiseret i korte mindre projekter (kaldet iterationer), og hver iteration har sin egen; Kravspecifikation, analyse, design, implementering og test. Denne fremgangsmåde gør udviklingsprojektet mere fleksibelt overfor f.eks. ændringsønsker eller uforudsete hændelser. Hver iteration beskæftiger sig med nye krav og udvider systemets funktionalitet. Når en iteration er afsluttet, vil resultatet være et færdigt udviklet og kørbart program. Dog vil det mangle funktionalitet, indtil den sidste iteration er gennemført. I figur 2.1 er aktiviteterne i en iteration vist. Figur 2.1: UP-iterationstruktur Den iterative fremgangsmåde vil være en fordel i forbindelse med dette eksamensprojekt og den faste deadline, da jeg vil have et kørende produkt ved projektets afslutning. Dog muligvis uden alle de ønskede funktionaliteter. Denne fleksibilitet ville ikke være mulig med udviklingsmetoder som f.eks. vandfaldsmodellen. Jeg vil prioritere systemkravene og udarbejde en iterationsplan i samarbejde med Webtop og forsøge at nå så langt som muligt. Efter hver iteration samles de nyeste ændringer og erfaringer i projektet. Fremtidige iterationer kan justeres, og erfaringer kan tages i betragtning. Det er netop disse muligheder, der adskiller den iterativeudvikling fra den evolutionæreudvikling. 5

10 KAPITEL 2. PLANLÆGNING Organisering af et UP projekt Et UP-udviklingsprojekt organiserer arbejde og iterationer over fire faser [1, s. 19] Forberedelse [Inception] er fasen, hvor projektets omfang etableres, potentiel risici vurderes og vigtige krav specificeres på baggrund af kritisk evaluering af use cases. Desuden skitseres en plan for systemets arkitektur og en plan for selve projektforløbet. Formål med forberedelsesfasen er [2]: Forstå hvad der skal bygges Identificer nøglefunktioner i systemet og beskriv dem som use cases Design en prototype af systemets arkitektur Identificer og forstå projektets omkostninger, plan og risici Vælge udviklingsproces og udviklingsværktøjer hertil Etablering [Elaboration], her skabes en bedre forståelse for risici, hvilket fører til en mere stabil arkitektur. Dette gøres ved at implementere dele af arkitekturen, der har største risici for projektet. Derefter revurderes projektplanen, og det burde give et bedre overblik over, hvor mange og hvilke iterationer, der skal til for at gennemføre projektet. Formål med etableringsfasen er [2]: Design use cases Konstruere en arkitekturprototype Granske og revidere risikoliste Udarbejde projektplan Konstruktion [Construction] er normalt den længste fase, da det er her de øvrige use cases og øvrige krav beskrives, implementeres og testes. Dette gøres i en række iterationer, hvor hver iteration resulterer i en øget programfunktionalitet. Overdragelse [Transition] er den sidste fase, før det endelige produkt frigives. Denne fase består hovedsageligt af test, udførelse af mindre justeringer samt ibrugtagningsarbejde, som installationsprocedure og brugermanual. Da mit projekt er tidsbegrænset med fast deadline samt at ikke nødvendigvis alle krav bliver implementeret, vil det betyde, at jeg med stor sandsynlighed kun kommer til at arbejde i de første tre faser: Forberedelse, Etablering og Konstruktion. Jeg har valgt at sætte to uger af til aktiviteter i forbindelse med overdragelse. Jeg er dog bevist om, at denne tid kan ende med at blive brugt som en del af afslutningen (rapportskrivning etc.) I figur 2.2 er vist en model for, hvordan et UP-projekt normalt vist vil være opbygget. Modellen viser, hvordan timefordelingen er mellem de forskellige aktiviteter i de fire faser. 6

11 KAPITEL 2. PLANLÆGNING UML Figur 2.2: UP faser, iterationer og aktiviteter [1, s. 22] Unified Modeling Language er blevet standardmodelleringssproget indenfor softwareog systemudvikling. Jeg har valgt at benytte mig af dette formelle modelleringssprog, da det er det absolut mest udbredte, og fordi det går hånd-i-hånd med UP-udviklingsmetoden. 2.2 Projektplan Projektstart den 15. juni 2009 og afslutning den 18. september. En overordnet projektplan kan ses i tabel 2.1. En iterationsplan kan ses i tabel 4.3, der er placeret i sektion 4.3. UGENUMMER Aktivitet Forberedelse Etablering Konstruktion Test Overdragelse Afslutning Tabel 2.1: Projektplan 7

12 Kapitel 3 Teknologi Indhold 3.1 Udviklingsmiljø og værktøjer Introduktion til SharePoint Webparts Lister Feature Introduktion til Silverlight Silverlight i SharePoint

13 KAPITEL 3. TEKNOLOGI 3.1 Udviklingsmiljø og værktøjer Systemet er udviklet på en Microsoft Windows Server 2008 vers. 6.0 (Build 6001: Service Pack 1) med IIS 7.0 og en Microsoft Office SharePoint Server 2007 standard edition med Service Pack 1 installeret. Udvikling er foretaget med Visual Studio 2008 med Service Pack 1 med to tilføjelsespakker; Visial Studio Extensions for Windows SharePoint Services 1.2 og Silverlight 2 Tools for Visual Studio Desuden er Microsoft Expression Blend brugt i forbindelse med design af brugergrænsefladeelementer. 3.2 Introduktion til SharePoint SharePoint er Microsofts enterpriseinformationsportal, der kan blive konfigureret til at køre Intranet, Extranet og Internetsider. Det er et omfattende produkt, og jeg vil kun introducere de elementer, der har haft betydning for dette projekt Webparts En webpart er en ASP.NET-komponent, der kan placeres i en Webpartzone på en webpartside. En side kan altså opbygges af webparts, og teknologien giver brugeren mulighed for at tilføje og fjerne webparts efter behag. En webapplikationen, der bruger webparts, sætter en række webparts til rådighed, og brugeren kan frit vælge, hvor på webpartsiden de forskellige webparts skal placeres. Et eksempel på dette er igoogle, hvor man som bruger selv kan bestemme, hvilke webparts man ønsker vist på sin side. Eneste begrænsning er den fastsatte layoutstruktur. Dette er vist i figur Lister En liste er et af kerneelementerne i SharePoint. En liste er essentielt en beholder, der bruges til at håndtere data - som en tabel i en database. En liste kan indeholde både traditionelt data som tal, strenge etc. men også dokumenter, billeder og lignende. Desuden understøttes tilføjelse af metadata. En liste skabes normalt på baggrund af en række af listeskabeloner, der definerer, hvordan dataen skal repræsenteres, beskrives og præsenteres til brugeren. Det er muligt at skabe lister både via programmering men også igennem SharePointinterfacet i en webbrowser. Det er også muligt at skabe lister uden skabeloner. Disse kaldes Custom-lister. En liste består af felter, og hvert felt har en type. Disse felttyper fungerer som datatyper i SharePoint. Det er muligt at definere specielle felttyper (Custom Fields) Feature En feature er en måde at gruppere funktionalitet på når det skal tilføjes SharePoint serveren. En feature består af en række XML-filer, der deployeres til SharePointserveren. XML-filerne kan indeholde deklarative regler samt henvisninger til.dll-filer, 9

14 KAPITEL 3. TEKNOLOGI Figur 3.1: Webparts på igoogle placeret i Global Assembly Cache, og på den måde binde den nye funktionalitet sammen med SharePoint. 10

15 KAPITEL 3. TEKNOLOGI 3.3 Introduktion til Silverlight Silverlight er Microsofts webbrowserplugin, der fasciliterer vectorgrafik, animation og video- og lydafspilning. Første version af Silverlight udkom i september 2007, og i oktober 2008 udkom version 2. Der er udkommet en betaversion af Silverlight 3 i marts 2009 og den endelige version blev udgivet i juli Silverlight kan bruges på de største platforme og af de mest almindelige webbrowsers (Internet Explorer, Firefox, Safari)[3]. Det kræver, at en Silverlightbrowserplugin installeres, før Silverlightapplikationer kan afvikles i browseren. Silverlightapplikationer afvikles ved, at browserplugin downloader en XAP-pakke fra webserveren, der indeholder de compilerede filer og ressourcer for applikationen, og derefter starter kodeafvikling internt i browseren. Silverlight kan betragtes som en kombination af tre forskellige arkiteturer; browserplugin, præsentationsstruktur og.net-frameworket. Kulminationen af disse tillader Silverlight at danne bro mellem brugergrænsefladen (deklerative programmering) og en delmænge af.net-frameworket (funktionel programmering). Silverlightapplikationen afvikles i browseren og derved hos klienten uden det er nødvendigt at opdatere browseren for at opdatere brugergrænsefladen. På grund af den indbyggede delmængde af.net-frameworket kan Silverlightapplikationer integrere serversideservice og kontroller. Silverlights præsentationsframework er en delmængde af Windows Presentation Foundation (WPF) og Silverlight blev kaldt WPF/A (WPF Anywhere), da det var under den indledende udviklingsfase. WPF er baseret på XAMLsproget (extensible Application Markup Language - udtales Zammel), der er en afart af XML-sproget og bruges til at instanstiere.net-objekter, der opbygger brugergrænsefladen i WPF og Silverlight. XAML spiller samme rolle i Silverlight som HTML gør i en traditionel webside. I Silverlight 2 er der implementeret den samme fulde version af CLR (Common Language Runtime) som i.net 3.0, og dette medvirker, at der kan udvikles i alle.net-sprog. 11

16 KAPITEL 3. TEKNOLOGI 3.4 Silverlight i SharePoint Den primære årsag til at bruge Silverlight med SharePoint er til berigelse af brugergrænsefladen. Silverlight er en naturlig tilføjelse til de eksisterende SharePoint-skabeloner og er oplagt at bruge i den sammenhæng. Brug af Silverlight i SharePoint kan klassificeres i to niveauer; Tom og Integration. Tom En tom Silverlightkontainer, der ikke er interaktiv med den aktuelle SharePoint-installation. Selve Silverlightapplikationen er placeret andetsteds og streames til SharePoint serveren. Dette kan være nyttigt i forbindelse med placering af 3. partapplikationer på ens site. Eksempler på dette kan være videoer (youtube), nyheder, små spil etc. Altså alle former for oplysninger/data, der ikke er hentet fra den aktuelle SharePoint-server. Integration Applikationen er placeret på SharePoint-serveren, og der er lav til stor integration med SharePoint-serveren. Dette kan blandt andet bruges på følgende måder: Applikation til repræsentation af en eksisterende SharePoint-liste Ændring af Master- og Layoutsider til at holde Silverlightapplikationer, der f.eks. kan tilbyde alternativ navigation i SharePoint eller specialiseret og beriget branding af en virksomhed Skabelse af specielle felttyper (Custom Fields) der tilbyder specielle funktionaliteter, der kun tilbydes via Silverlight. Dette kan for eksempel være en en grafisk præsentation af andet data, som diagrammer og figurer. Layoutskabeloner (eng. skins) til lister eller andre dataviews for at fremme brugerinteraktion med data i SharePoint. Der skal udføres tilpasninger før Silverlight kan integreres i SharePoint. Dette er omtalt nærmere i kapitel 7 om implementering. 12

17 Kapitel 4 Kravspecifikation Indhold 4.1 Beskrivelse af problemområde Systemkrav Funktionalitetskrav Øvrige Krav Iterationsplan

18 KAPITEL 4. KRAVSPECIFIKATION 4.1 Beskrivelse af problemområde SharePoint (Microsoft Office SharePoint Server) bruges som platform til intranetløsninger og kan ligeledes bruges som CMS til hjemmesider. Brugere med redaktørrettigheder i SharePoint har adgang til den centrale billedliste (SiteContent/Images). Når et billede først er uploadet til listen, kan det ikke ændres, og hvis dette ønskes, skal billedet først downloades, redigeres i andet software og derefter uploades til listen igen. Det er ikke nødvendigvist alle medarbejder i en organisation, der har adgang til billedredigeringssoftware på grund af licenser eller intern IT-politik. Dette kan medføre, at billedet skal flyttes til en anden maskine for at blive manipuleret, selvom den ønskede manipulation blot er en lille ændring som f.eks. at skifte farven til sort/hvid, justere røde øjne på et medarbejderfoto eller beskære billedet efter faste mål. Den nuværende arbejdsproces er beskrevet i figur 4.1, Figur 4.1: Arbejdsprocessen uden billedbehandlingskomponent Konsulenthuset Webtop A/S ønsker at lette denne arbejdsproces og give redaktørerne mulighed for at redigere billeder direkte på serveren via en Silverlightapplikation. Dette skal faciliteres ved, at når en redaktør markerer et billede i den centrale billedliste, skal det være muligt at vælge en redigér-funktion. Herefter vil billedet blive åbnet i Silverlightapplikationen, og det kan redigeres med gængse billedbehandlingsfunktioner. Når redigeringen er fuldendt, skal billedet kunne gemmes i listen. Enten ved at overskrive det tidligere billede eller ved at blive gemt som en ny instans i SharePoint-listen. 14

19 KAPITEL 4. KRAVSPECIFIKATION 4.2 Systemkrav Krav til projektet vil blive kategoriseret i to overordnede kategorier; funktionalitetskrav og øvrige krav. Funktionalitetskrav vil omhandle programmets funktionalitet og vil blive beskrevet med brug af use cases. De øvrige krav vil omhandle de resterende dele af systemet, der ikke er direkte tilknyttet den konkrete funktionalitet. De øvrige krav vil omhandle brugbarhed, udseende og pålidelighed Funktionalitetskrav Funktionalitetskrav vil blive beskrevet med brug af use cases. De vil blive udarbejdet som Black-Box use cases [1, s. 49], hvor funktionens ansvar beskrives i modsætning til at beskrive systemets interne arbejde, komponenter og design. Denne fremgangsmåde lader mig beskrive, hvad funktionaliteten skal gøre, og ikke bekymre mig om hvordan det skal ske. Dette er i overensstemmelse med projektets struktur, hvor analyse efterfølges af design Identifikation af use cases Der er identificeret 11 use cases og én aktør; redaktøren (bruger med redaktør-rettigheder i SharePoint). Navn Hent Billede Gem billede Gem billede som Roter Spejlvend Beskær Ændre størrelse Sort/hvid Røde øjne Zoom Skabeloner Beskrivelse Basis use case, hent et billede ind fra SharePoint og fremvis det i Silverlight. Gemmer det manipulerede billede tilbage i SharePoint listen som en erstatning for det billede, der tidligere blev hentet ind. Gemmer det manipulerede billede i SharePoint som en ny instans i listen. Lader redaktøren rotere billedet med og mod uret. Lader redaktøren spejlvende billedet horisontalt og vertikalt. Lader redaktøren udvælge en delmængde af billedet og skaber et nyt billede på baggrund af den udvalgte delmængde. Lader redaktøren ændre størrelsen på billedet (højde og bredde). Lader redaktøren skifte farve på billedet til sort/hvid. Lader redaktøren udvælge placeringen af røde øjne i billedet og systemet korrigerer farverne. Lader redaktøren zoome i billedet ind og ud i billedet. Lade operatøren oprette og bruge skabeloner, der indeholder specifikationer for højde og bredde af billeder. Tabel 4.1: Identificerede use cases 15

20 KAPITEL 4. KRAVSPECIFIKATION Figur 4.2: use case-model Prioritering af use cases Jeg har prioriteret og kategoriseret projektets use cases for at hjælpe i bestemmelse af udviklingsrækkefølgen samt belyse eventuelle højrisiciområder. Prioriteringen er på en skala fra 1 til 3; hvor 1 er en strengt nødvendigt, 2 er nødvendigt og 3 skal betragtes som rart-at-have funktionalitet. Risiko er kategoriseret i tre trin; høj, middel, lav. UC2 Gem billede fortsætter på næste side use case ID Navn Prioritet Risiko Kommentar UC1 Hent billede 1 Middel Denne use case er fundamental for systemet og afhængig for udførelsen af systemets kernekompetence. Jeg har set eksempler på udtræk af billeder i SharePoint og sætter derfor risiko til middel. 1 Høj Når et billede er manipuleret skal det kunne gemmes i SharePoint-listen. Risiko er sat til høj, da det er forbundet med en del usikkerhed på grund af manglende kendskab til Share- Point udvikling. 16

21 KAPITEL 4. KRAVSPECIFIKATION fortsættelse fra forrige side use case ID Navn Prioritet Risiko Kommentar UC3 Gem billede som Ny 2 Høj Ikke så højt prioriteret som UC2, da det med UC2 muliggør gennemførelse af billedmanipulationen. Risiko er sat til høj på samme begrundelse som UC2. UC4 Roter 3 Lav En rar-at-have funktionalitet, der ikke vurderes til at kunne give problemer i forbindelse med implementering. UC5 Spejlvend 3 Lav Samme som UC4 UC6 Beskær 1 Middel En af de primære funktioner i systemet. Risiko er vurderet til middel men burde ikke volde større problemer. UC7 Ændre størrelse 1 Middel Risiko vurderet til middel, da nogle af de tilknyttede krav kan volde tidsmæssige overskridelser. UC8 Sort/Hvid 3 Lav En mindre vigtig funktion, der ikke burde give besvær. UC9 Røde øjne 3 Høj En mindre vigtig funktion men med høj risiko involveret i implementeringen. Dette skyldes usikkerhed omkring farvekorrektionsalgoritmen. UC10 Zoom 2 Middel Zoom er vigtig, da det vil lette arbejdet for brugeren betydeligt. Risiko er sat til middel, da det er et omfattende arbejde og vil involvere andre funktioner, når der zoomes i billedet. UC11 Skabeloner 2 Middel Skabelonerne skal gemmes på serveren og kunne hentes ind i Silverlight. Dette vurderes til middel risiko og middel prioritering. Tabel 4.2: Prioritering af use cases 17

22 KAPITEL 4. KRAVSPECIFIKATION Øvrige Krav Brugbarhed Med brugbarhed menes, hvor let og brugbart systemet er for brugeren. Der ønskes, at programmet har vejledende kommentarer i burgergrænsefladen. Disse kommentarer skal placeres i forbindelse med knapper, indtastningsfelter o. lign. Udseende Med udseende menes brugergrænsefladens udseende, som dækker over farvevalg, former på knapper, indtastningsfelter etc. Det ønskes, at programmet ikke afviger synderligt fra SharePoints brugergrænseflade samt at opbygningen minder om gængse Microsoft Office-produkter. Pålidelighed Silverlightapplikationen skal returnere et billede til SharePoint, der fremstår præcist, som det blev vist i Silverlight. Der skal desuden håndteres fejl, så brugeren bliver præsenteret for en sigende fejlbeskrivelse, hvis en fejl skulle opstå. 4.3 Iterationsplan Herunder er listet den forventede rækkefølge af iterationer. Iteration Beskrivelse Uger 1 Overordnet arkitektur: Få Silverlight til at kommunikere med serveren via Webservices og hent billede) 2 Brugergrænseflade: Byg overordnet GUI herunder menu 28 struktur og billedkanvas 3 Implementer Høj Prioritet Funktioner; UC1, UC2, UC6, UC Implementer Middel Prioritet Funktioner; UC3, UC10, UC Implementer Lav Prioritet Funktioner; UC4, UC5, UC8, UC Tabel 4.3: Iterationsplan 18

23 Kapitel 5 Analyse Indhold 5.1 Billedbehandling i Silverlight Funktionalitetskrav (Use Cases) UC1 - Hent billede UC2 - Gem billede UC3 - Gem billede som ny UC4 - Roter UC5 - Spejlvend UC6 - Beskær UC7 - Ændre størrelse UC8 - Sort/Hvid UC9 - Røde øjne UC10 - Zoom UC11 - Skabeloner Øvrige krav Brugbarhed Udseende Pålidelighed Konklusion af analyse

24 KAPITEL 5. ANALYSE 5.1 Billedbehandling i Silverlight Da der skal udvikles en applikation til simpel billedbehandling i Silverlight, har jeg undersøgt mulighederne for at udføre manipulationen på klientcomputeren. Silverlight 2 tilbyder en BitmapImage-klasse men denne giver ikke adgang til de enkelte pixels i et billede. I Silverlight 3 præsenteres en ny klasse, WritableBitmap, hvor der er adgang til både at skrive og læse fra de enkelte pixels. Dog er der den begræsning, at man ikke kan få pixeladgang, efter at kilden er sat, og billedet er renderet. Det vil sige, at WritableBitmap kun kan bruges til at generere billeder og ikke til at manipulere eksisterende. Det bliver derfor ikke muligt at udføre billedbehandling på klientcomputeren, men der skal stadigt stræbes efter at give brugeren en WYSIWYG- 1 oplevelse. Selve billedmanipulationen må derfor ske på serveren, da serverside.net giver fuld adgang til billedmanipulation. Ved at forbinde Silverlightapplikationen med serverside ASP.NETfunktionalitet, kan den ønskede funktionalitet opnås. Forbindelsen kan opsættes med en webservice. I ASP.NET er det muligt at behandle billederne på de ønskede måder. Bitmap-klassen giver pixeladgang og muliggør derfor farvemanipulation. Graphic-klassen giver mulighed for transformationer i størrelse, udtagelse af pixeldelmængde, rotationer og spejlvending. For at skabe en WYSIWYG-oplevelse for brugeren kan nogle af Silverlights transformeringsfunktioner bruges. Disse funktioner udfører ikke ændringer på billedet men kun i præsentationen af det. I de efterfølgende use cases har jeg i beskrivelsen knyttet noter til, hvordan WYSIWYG-oplevelsen eventuelt kan realiseres. 5.2 Funktionalitetskrav (Use Cases) I følgende sektion vil jeg beskrive og detaljere use cases fundet i kravspecifikationen Jeg vil desuden udarbejde Systemsekvensdiagrammer [1, s. 118], der beskriver brugerens interaktion med systemet. Systemsekvensdiagrammer er ikke en del af UML men jeg vælger alligevel at bruge dem, da de hjælper med at visualisere de tekstbeskrevne use cases. Jeg har i use case-beskrivelserne afveget en smule fra den gængse metode ved kun at beskrive hvad den består af. Jeg har tilføjet noget umiddelbar viden, der egentligt hører til i design fasen. Jeg mener dog, det er gavnligt for projektet, at jeg får dokumenteret denne viden i forbindelse med analysen af use cases, da det vil hjælpe mig senere i forløbet. Som det fremgår af kravspecifikationen indgår der kun én aktør i problemområdet, og denne aktør har en række use cases tilknyttet. Jeg har valgt ikke at lave et klassediagram for problemområdet, da det kun vil bestå af en enkelt klasse (Redaktør) med en række funktioner, der passer til de use cases, der er fundet. 1 WYSIWYG er en forkortelse for det engelske udtryk, What You Se Is What You Get. 20

25 KAPITEL 5. ANALYSE UC1 - Hent billede Use Case ID: Aktør Prioritet Risiko Beskrivelse Udløser [Trigger] Forholdsregler Efter tilstand - succes Efter tilstand - fejl UC1 - Hent billede Redaktør 1 (Strengt nødvendig) Middel Før Silverlightapplikationen kan startes, skal brugeren vælge et billede fra et dokumentbibliotek i SharePoint. Når billedet er valgt og manipulationen efterspurgt, vil SharePoint starte Silverlightapplikationen. Når billedet hentes fra SharePoint-listen skal SharePoints indbyggede brugerkontrol bruges, ved at reservere filen (Check Out). Brugeren vælger et billedet i SharePoint-listen og vælger at redigere det. Det valgte billede er enten i JPG eller PNG billedformat, da Silverlight ikke understøtter andre formater endnu. Silverlightapplikationen åbner, og det valgte billede vises. SharePoint giver en fejl, der fortæller brugeren, at det valgte billede ikke understøttes af Silverlightapplikationen. Primær flow 1. Vælg billede i listen 2. Vælger Rediger i billedets kontekstmenu 3. Browseren dirigeres til en side, hvor Silverlightapplikationen er tilgængelig sammen med en henvisning til billedet. 4. Silverlightapplikationen startes og billedet vises. Udvidelser 2.1 Det valgte billede er ikke JPG eller PNG format. 2.2 Brugeren præsenteres for en fejlbesked. Tabel 5.1: UC1 - Hent billede Figur 5.1: Systemsekvensdiagram for UC1 21

26 KAPITEL 5. ANALYSE UC2 - Gem billede Use Case ID: Aktør Prioritet Risiko Beskrivelse UC2 - Gem billede Redaktør 1 (Strengt nødvendig) Høj Når billedet er færdigredigeret, vælger brugeren at gemme billedet tilbage i SharePoint-listen. Det redigerede billede gemmes som en erstatning af originalen, der blev hentet ind i UC1. Når billedet gemmes i SharePoint-listen, skal det bruge SharePoints indbyggede brugerkontrol og fjerne den reservering, der tidligere er sat på filen (Check In). Brugeren vælger gem-funktionen i Silverlightapplikationen. Udløser [Trigger] Forholdsregler Efter tilstand - succes Visning af dokumentbiblioteket i SharePoint. Efter tilstand - fejl Primær flow 1. Vælg gem funktionen i Silverlightapplikationen. 2. Billedet gemmes i SharePoint-listen som en erstatning for originalen. 3. Browseren dirigeres til SharePoint dokumentbiblioteket, hvor billedet blev valgt fra. Udvidelser Tabel 5.2: UC2 - Gem billede Figur 5.2: Systemsekvensdiagram for UC2 22

27 KAPITEL 5. ANALYSE UC3 - Gem billede som ny Use Case ID: Aktør Prioritet Risiko Beskrivelse Udløser [Trigger] UC3 - Gem Billede Som Ny Redaktør 2 (Middel) Høj Billedet er redigeret, og brugeren ønsker at gemme det som en ny instans i samme dokumentbiblioteket som det originale billede. Det originale billede er tidligere (UC1) blevet reserveret, og denne reservering skal fjernes (Check In). Brugeren vælger Gem som-funktionen i Silverlightapplikationen. Forholdsregler Efter tilstand - succes Dokumentbiblioteket i SharePoint vises. Efter tilstand - fejl Primær flow 1. Brugen vælger Gem Som-funktionen. 2. Brugeren bliver bedt om at definere et navn til billedet. 3. Billedet gemmes i dokumentbiblioteket. 4. Browseren dirigeres til SharePoint-listen (dokumentbiblioteket). Udvidelser Tabel 5.3: UC3 - Gem Billede Som Ny Figur 5.3: Systemsekvensdiagram for UC3 23

28 KAPITEL 5. ANALYSE UC4 - Roter Use Case ID: UC4 - Roter Aktør Redaktør Prioritet 3 (Rart-at-have) Risiko Lav Beskrivelse Det skal være muligt at rotere billedet med 90 intervaller, både med uret og mod uret. Desuden vil det være ønskværdigt, hvis billedet kan rettes op (±40 ). Dette ønskes visualiseret, så brugeren klart kan se, når billedet er lige. Der bør placeres nogle vertikale og horisontale retningslinjer, så brugeren klart kan bestemme, hvornår billedet er roteret i den ønskede vinkel. Der ønskes også her en visualisering af billedmanipulationen, inden webservicen kaldes. Image-kontrollen i Silverlight kan transformeres til at vise rotationen på de ønskede måder. Udløser [Trigger] Brugeren vælger at rotere billedet med eller mod uret i en 90 vinkel. Eller brugeren vælger at rette billedet op ved at specificere en præcis vinkel. Forholdsregler Efter tilstand - succes Billedet vises i sin nye form. Efter tilstand - fejl Primær flow 1. Brugeren vælger at rotere billedet 2. Der specificeres den ønskede vinkel (±90 eller mellem 40 og +40 ). 3. Billedet roteres og præsenteres for brugeren. Trin 2 og 3 kan gentages, indtil den ønskede vinkel er fundet. 4. Brugeren vælger at acceptere eller afvise rotationen. Udvidelser 4.A Brugeren vælger at acceptere rotationen, og manipulationen udføres. 4.B Brugeren afviser rotationen og eventuelle ændringer fjernes, så billedet står som før trin 1. Tabel 5.4: UC4 - Roter 24

29 KAPITEL 5. ANALYSE Figur 5.4: Systemsekvensdiagram for UC4 25

30 KAPITEL 5. ANALYSE UC5 - Spejlvend Use Case ID: Aktør Prioritet Risiko Beskrivelse Udløser [Trigger] UC5 - Spejlvend Redaktør 3 (Rart-at-have) Lav Det skal være muligt at spejlvende billedet horisontalt og vertikalt. Der ønskes en visualisering af billedmanipulationen, inden webservicen kaldes. Image-kontrollen i Silverlight kan transformeres til at vise spejlvendingen på de ønskede måder. Brugeren vælger at spejlvende billedet horisontalt eller vertikalt. Forholdsregler Efter tilstand - succes Billedet vises i sin nye form. Efter tilstand - fejl Primær flow 1. Brugeren vælger at spejlvende billedet. 2. Der specificeres om det skal være horisontalt eller vertikal spejling. 3. Billedet spejles og præsenteres for brugeren. Trin 2 og 3 kan gentages indtil det ønskede resultat er opnået. 4. Brugeren vælger at acceptere eller afvise spejlingen. Udvidelser 4.A Brugeren vælger at acceptere spejlingen, og manipulationen udføres på billedet. 4.B Brugeren afviser spejlingen og eventuelle ændringer fjernes, så billedet står som før trin 1. Tabel 5.5: UC5 - Spejlvend 26

31 KAPITEL 5. ANALYSE Figur 5.5: Systemsekvensdiagram for UC5 27

32 KAPITEL 5. ANALYSE UC6 - Beskær Use Case ID: Aktør Prioritet Risiko Beskrivelse fortsætter på næste side UC6 - Beskær Redaktør 1 (Strengt nødvendig) Middel Når et billede hentes ind i komponenten, skal det være muligt at beskære den, så der trækkes en delmængde ud, og der skabes et nyt billede på baggrund af disse udvalgte pixels. Det skal være muligt at definere den præcise størrelse på delmængden, der ønskes, og det skal være muligt at proportionere billedet på baggrund af en skabelon eller det originale billede. Definering af den ønskede størrelse kan enten ske på baggrund af en indtastning fra brugeren eller ved at vælge en skabelon. Det er ønskværdigt, hvis brugeren kan få en visualisering af det udvalgte område, inden det endeligt vælges. Det skal være muligt at udvælge delmængden ved en markering på billedet, udført med musen. Når en delmænge af billedet skal vælges, skal det være tydeligt, hvilket område der vælges. Der ønskes en grafisk præsentation af det valgte område, og det skal være muligt at flytte dette område rundt med musen og ændre dets dimensioner. Dette er muligt i Silverlight ved at bruge den indbyggede Canvas-kontrol og placere for eksempel en Rektangel-kontrol oven på billedet. Det skal desuden være muligt at skalere billedet, så det, der vælges på billedvisningen, vil blive presset sammen eller trukket ud, så det passer med de specificerede dimensioner. Denne funktion er en blanding af beskæring og ændring af størrelse, da brugeren bestemmer, hvor stort det endelige billede skal være og samtidigt definerer hvilken delmængde af det originale billede, der skal tilpasses den nye størrelse. 28

33 KAPITEL 5. ANALYSE fortsættelse fra forrige side Use Case ID: UC6 - Beskær Udløser [Trigger] Brugeren vælger at beskære billedet. Forholdsregler Efter tilstand - succes Billedet vises i sin nye form. Efter tilstand - fejl Primær flow 1. Brugeren vælger at beskære billedet. 2. Brugeren beslutter, om beskæringen skal være på baggrund af en skabelon. 3. Brugeren vælger et område med musen eller indtaster højde og bredde. Trin 3 kan gentages indtil det ønskede resultat er opnået. 4. Brugeren vælger at acceptere eller afvise beskræringen. Udvidelser 2.A Brugeren vælger at bruge en skabelon, og skabelonens proportioner vil nu blive overholdt. 2.B Brugeren vælger ikke at bruge en skabelon og kan frit beskære billedet. 3.A Brugeren vælger et område og hvis billedet beskæres på baggrund af en skabelon, vil proportioner blive overholdt af systemet. Tabel 5.6: UC6 - Beskær Figur 5.6: Aktivitetsdiagram for UC6 29

34 KAPITEL 5. ANALYSE Figur 5.7: Systemsekvensdiagram for UC6 30

35 KAPITEL 5. ANALYSE UC7 - Ændre størrelse Use Case ID: Aktør Prioritet Risiko Beskrivelse UC7 - Ændre Størrelse Redaktør 1 (Strengt nødvendig) Middel Den nye størrelse skal kunne defineres fra indtastningsfelter eller en skabelon. Det skal være muligt at ændre størrelsen ved bestemmelse, af hvor mange procent billedet skal være i forhold til den originale billedstørrelse. Det skal samtidigt være muligt at tvinge de originale proportioner til at blive overholdt, uanset hvad der indtastes. Brugeren skal præsenteres for en visualisering af den nye størrelse, før webservicen kaldes. Der vil være en forsinkelse hver eneste gang en webservice bruges. For at gøre udvælgelsesprocessen hurtig skal brugen præsenteres for en visualisering af den nye størrelse, inden webservicen kaldes. I Silverlight kan Imagekontrollen ændres i størrelse, og derved kan resultatet vises inden selve billedmanipulationen aktiveres via webservicen. Brugeren vælger at ændre billedets størrelse. Udløser [Trigger] Forholdsregler Efter tilstand - succes Billedet vises i sin nye form. Efter tilstand - fejl Primær flow 1. Brugeren vælger at ændre størrelsen på billedet. 2. Brugeren beslutter om den nye størrelse skal være på baggrund af en skabelon. 3. Brugeren vælger om proportionerne i billedet skal overholdes. 4. Brugeren indtaster ny højde og bredde på billedet. 5. Brugeren præsenteres for billedet med de nye dimensioner. Trin 4 og 5 kan gentages. 4. Brugeren vælger at acceptere eller afvise ændringen af størrelsen. Udvidelser 2.A Hvis brugeren vælger at bruge en skabelon, vil der hoppes til trin 5. 3.A Hvis brugeren vælger at proportionerne i billedet skal overholdes vil dette automatisk blive overholdt af systemet. Tabel 5.7: UC7 - Ændre størrelse 31

36 KAPITEL 5. ANALYSE Figur 5.8: Systemsekvensdiagram for UC7 32

37 KAPITEL 5. ANALYSE UC8 - Sort/Hvid Use Case ID: Aktør Prioritet Risiko Beskrivelse Udløser [Trigger] UC8 - Sort/Hvid Redaktør 3 (Rart-at-have) Lav Det skal være muligt at ændre billedets farveopsætning, så det bliver i gråtoner (eng. Gray scale). Selve udførelsen af farvemanipulationerne kan kun ske på serveren, da Silverlight ikke understøtter pixeladgang i et eksisterende billede. Derfor kan der på nuværende tidspunkt ikke laves en visualisering af farveændringerne, før efter webservicen har bearbejdet billedet. Brugeren vælger at ændre farverne til sort/hvid, ved at klikke på sort/hvid-knappen. Forholdsregler Efter tilstand - succes Webservice kaldes og returnerer det manipulerede billede. Efter tilstand - fejl Primær flow 1. Brugeren vælger at ændre farverne til sort/hvid. 2. Webservice kaldes. 3. Billede returneres i sort/hvid. Udvidelser Tabel 5.8: UC8 - Sort/Hvid Figur 5.9: System sekvensdiagram for UC8 33

38 KAPITEL 5. ANALYSE UC9 - Røde øjne Use Case ID: Aktør Prioritet Risiko Beskrivelse UC9 - Røde øjne Redaktør 3 (Rart-at-have) Lav Det skal være muligt at udføre en korrektion af røde øjne. Dette kan eventuelt gøres ved, at redaktøren markerer området omkring de enkelte røde øjne, der ønskes korrigeret. Selve udførelsen af farvemanipulationerne kan kun ske på serveren, da Silverlight ikke understøtter pixeladgang i et eksisterende billede. Derfor kan der på nuværende tidspunkt ikke laves en visualisering af farveændringerne, før efter webservicen har bearbejdet billedet. Brugeren vælger at korrigere røde øjne i billedet. Udløser [Trigger] Forholdsregler Efter tilstand - succes Webservice kaldes og returnerer det manipulerede billede. Efter tilstand - fejl Primær flow 1. Brugeren vælger at ændre korrigere røde øjne. 2. Brugeren markerer de røde øjne på billedet. 3. Brugeren vælger at udfører korrektionen af markerede øjne. 4. Webservice kaldes med informationer om, hvor på billedet der skal korrigeres røde øjne. 5. Billede returneres med røde øjne korrigeret. Udvidelser Tabel 5.9: UC9 - Røde øjne Figur 5.10: Systemsekvensdiagram for UC9 34

39 KAPITEL 5. ANALYSE UC10 - Zoom Use Case ID: Aktør Prioritet Risiko Beskrivelse fortsætter på næste side UC10 - Zoom Redaktør 2 (Nødvendig) Middel Det skal være muligt at zoome ind i billedet, så brugeren lettere kan præcisere, hvor manipulationer skal udføres. Det skal være tydeligt, hvor meget der er zoomet i billedet, og det skal hele tiden præciseres hvilke dimensioner det originale billede har. Desuden skal der automatisk kunne zoomes i billedet, når billedet hentes ind, så billedet ikke er større end det tilgængelige område i browseren. Så snart billedet zoomes større end det synlige område i browseren, skal den aktuelle visning specificeres. Der ønskes i denne sammenhæng præsenteret en mindre udgave af billedet, placeret i forbindelse med zoom-komponenten, hvor det synlige område tydeligt kan ses og flyttes. Dette lille billede kaldes herefter for navigationsadorneren. Det skal altså være muligt at flytte det synlige område af billedet ved brug af musemarkøren i navigationsadorneren. Når et billede hentes ind i browseren, skal det automatisk zoomes, så det ikke er større end det synlige område. Denne funktionalitet skal ligeledes bruges, hvis størrelsen af det synlige område ændres. Dette vil ske, hvis browservinduets størrelse ændres. 35

40 KAPITEL 5. ANALYSE fortsættelse fra forrige side Use Case ID: UC10 - Zoom Udløser [Trigger] Brugeren vælger at zoome i billedet, eller størrelsen på browservinduet ændres. Forholdsregler Efter tilstand - succes Billedet er blevet zoomet efter brugerens ønske. Efter tilstand - fejl Primær flow 1. Brugeren vælger at zoome i billedet. 2. Brugeren vælger den procentvise zoom, der skal udføres. 3. Billedet ændres i størrelse. Udvidelser Tabel 5.10: UC10 - Zoom Figur 5.11: Systemsekvensdiagram for UC10 36

41 KAPITEL 5. ANALYSE UC11 - Skabeloner Use Case ID: Aktør Prioritet Risiko Beskrivelse UC11 - Skabeloner Redaktør 2 (Nødvendig) Middel Det skal være muligt at oprette en skabelon bestående af et sæt faste mål for højde og bredde i pixels og en navngivning. Skabelonen skal gemmes, så den er tilgængelig for alle redaktører i SharePoint-installationen. Skabeloner kan gemmes på serveren i en fil, der hentes ind, når komponenten tages i brug, eller i en SharePoint-liste. Oprettelse af nye skabeloner skal ske i forbindelse med, at eksisterende kan vælges. Brugeren vælger oprette en ny skabelon. Udløser [Trigger] Forholdsregler Efter tilstand - succes En ny skabelon er blevet oprettet. Efter tilstand - fejl Primær flow 1. Brugeren vælger at oprette en skabelon. 2. Brugeren bestemmer højde, bredde og navn for skabelonen. 3. Skabelonen gemmes på serveren. Udvidelser Tabel 5.11: UC11 - Skabeloner Figur 5.12: Systemsekvensdiagram for UC11 37

42 KAPITEL 5. ANALYSE 5.3 Øvrige krav Brugbarhed Med et ønske om at gøre programmet så brugbart som muligt skal der udvikles forskellige hjælpekomponenter, der kan lette arbejdet for brugeren i forbindelse med billedmanipulationen Adorners En adorner er en forskønner og dækker over enheder i brugergrænsefladen, der gør arbejdet med billedbehandlingskomponenten lettere og mere flydende. Der ønskes udviklet en adorner i forbindelse med beskæringsfunktionen (eng. Crop), så brugeren tydeligt kan se hvilken del, der vælges. Denne adorner samler information om områdets dimensioner (højde og bredde) samt dets placering i det originale billede. En visualisering af denne adorner er vist i figur Figur 5.13: Beskæringsadorner Der ønskes også udarbejdet en adorner, i forbindelse med at et billede skal rettes op. Der skal placeres nogle lodrette og vandrette streger over billedet, så brugeren let kan bestemme, når billedet er rettet op på den ønskede måde. Det vil være nødvendigt med en automatisk zoom (forstørrelse) af rotationen, da fællesmængden mellem det roterede billede og det originale helst skal være lige så stort som det originale. Hvis ikke der zoomes i det roterende, vil fællesmængden blive for lille. Det skal bemærkes at fællesmængden skal være en rektangel eller kvadrat, for at hele billedet er fyldt. Dette er vist i figur I forbindelse med korrektion af røde øjne skal brugeren kunne markere hvor på billedet, der er et rødt øje. Dette gøres med en adorner, placeret over billedet. Når denne adorner er placeret, skal brugeren kunne markere det område, der ønskes korrigeret. 38

43 KAPITEL 5. ANALYSE Figur 5.14: Automatisk zoom ved rotering af billede Zoom Zoomenheden skal placeres på kanvasområdet sammen med billedet. Komponenten skal bestå af selve zoomfunktionen, hvor der kan zoomes i billedet samt en adorner, der viser hvor, på billedet der er zoomet ind. Brugeren skal kunne flytte det synlige område af billedet på skærmen ved at flytte på det synlige område i navigationsadorneren. Navigationsadorneren skal kun være synlig for brugeren, når der er zoomet så meget i billedet, at hele billedet ikke længere er synligt på skærmen. I figur 5.15 er en visualisering af navigationsadorneren vist. Det grå område symboliserer den del af billedet, der ikke er synligt på skærmen. Figur 5.15: Zoomnavigeringsadorner Hjælp Der ønskes udarbejdet en hjælpfunktion, så brugerne kan få en beskrivelse af, hvordan funktionerne i billedbehandlingskomponenten virker. Hjælpen præsenteres i tekst, og skal kunne vises og fjernes af brugerne. 39

44 KAPITEL 5. ANALYSE Udseende I forbindelse med specificeringen af use cases, opstod der adskillige ønsker omkring brugergrænsefladen. På den baggrund samt at en stor del af udviklingsarbejdet med billedbehandlingskomponenten bliver omkring brugergrænsefladen, har jeg samlet krav og ønsker Struktur Da komponentens funktionalitet handler om billedbehandling, bør størstedelen af brugergrænsefladen tilegnes billedet. Det område, som billedet placeres på, kaldes herefter for kanvasset. Funktionalitet skal bindes til en menu, der skal placeres i toppen af skærmen jf. krav i sektion 4.2.2, som det ses i andre Microsoft-programmer. Der findes ikke en menukomponent i Silverlight, så denne skal udvikles fra bunden. Zoomfunktionaliteten skal styres fra en zoomkomponent, der er placeret på kanvasset sammen med billedet. En samlet oversigt over strukturen kan ses i figur Figur 5.16: Overordnet struktur i brugergrænsefladen Menu Der skal udvikles en menustruktur i Silverlight. Det skal være en traditionel dropdown-menu, hvor en undermenu kommer til syne, når der klikkes på menupunktet. Menupunktet vil være beskrivende over de funktioner, der er bundet i undermenuen. Menuen skal ligne de menuer, man ser i andre Microsoft-softwareprodukter. Hvis nogle af menupunkterne dækker over gængse Windows- eller Microsoftfunktioner, vil det være hensigtsmæssigt at benytte ikoner i stedet for tekst på menupunkterne. Dette kan f.eks. være at bruge et ikon med en diskette i stedet for at bruge ordet Gem. Dette er vist ved eksempel i figur Billedet Billedet placeres centralt i komponenten, og når billedet hentes ind første gang, skal der om nødvendigt automatisk zoomes, så hele billedet er synligt for brugeren. Det samme 40

45 KAPITEL 5. ANALYSE Figur 5.17: Opbygning af menu ønskes, hvis brugeren ændrer størrelsen på sit browservindue Pålidelighed For at sikre at billedkvaliteten gemt i billedfilen er den samme, som der vises på skærmen, skal alle operationer foretages enkeltvist på serveren, og det resulterende billede sendes tilbage til Silverlight. På den måde vil brugeren være forsikret om, at billedet reelt er, som det forventes. Der skal udvikles en historik over operationerne foretaget på billedet, så brugeren kan navigere frem og tilbage, hvis en operation fortrydes. En sådan historik kan realiseres ved at gemme de operationer, der er udført på billedet, og hvis brugeren fortryder en operation, foretages den modsatte operation på billedet. Denne løsning er uhensigtsmæssig i den forstand, at billedets kvalitet kan blive påvirket af fortrydelsesoperationen, og derfor ikke være identisk til billedet før operationen. Hvis billedet eksempelvis gøres mindre for bagefter at fortryde og gøres større, vil pixelopløsningen være dårligere end før operationerne blev udført. En bedre løsning vil være at gemme billederne efter hver udførte operation. Hvis en bruger fortyder en operation, skal der navigeres tilbage i billedhistorikken, og det tidligere billede vil blive sendt til Silverlightapplikationen. 41

46 KAPITEL 5. ANALYSE 5.4 Konklusion af analyse Silverlight, der er et Microsoft browser-plugin, kan bruges til at berige brugergrænsefladen i SharePoint. Målet har været at udvikle en billedbehandlingsapplikation, der kan integreres i SharePoint og bruges til at behandle billeder, som allerede er lagret i dokumentbiblioteks-lister. Silverlight understøtter ikke pixeladgang i et eksisterende billede, så det har været nødvendigt at udvikle en applikationsarkitektur hvor billedbehandlingen stadig er mulig. Da Silverlight understøtter asynkron kommunikation med en server via en WCF-webservice, er det en oplagt mulighed for at realisere billedbehandlingen, der sagtens kan ske på serverniveau. Silverlightapplikationen skal visualisere billedmanipulationerne for brugeren som transformationer, der vil give en WYSIWYG-oplevelse. Med udgangspunkt i use case modellen fra kravspecifikationen er de enkelte use cases blevet analyseret og beskrevet. De funktionelle krav omfatter gængse billedbehandlingsfunktionalitet som ændring af størrelse, beskæring, rotation, spejlvending, rødøje-korrektion og sort/hvid-manipulation. Virksomhedens øvrige krav omfatter brugen af hjælpekomponenter kaldet adorners (red. forskønner), mulighed for at man kan zoome i billedet, brug af skabeloner og en systemhistorik. Det skal være muligt at zoom i billedet, og hvis billedet bliver større end det synlige område på skærmen, skal en navigationsadorner bruges til at navigere rundt i billedet. Et hjælpeelement skal bruges til at give brugeren vejledninger til, hvordan systemet bruges. Der skal derudover også være vejledende tekster i forbindelse med brugergrænsefladeelementer. I Silverlightapplikationen skal adorners bruges som hjælp til brugeren i forbindelse med rød-øje-korrektion hvor røde øjne skal markeres, beskæring hvor brugeren skal præsenteres for en visualisering af det udvalgte område, og når billedet skal rettes op ved hjælp af en rotationsfunktion. I forbindelse med rotationsfunktion vil billedets motiv automatisk zoomes, så det fylder hele billedet ud. Dette er en nødvendighed for at undgå de blanke områder, der ellers vil opstå på billedet. Silverlight har et begrænset udvalg af brugergrænsefladekomponenter, og det har derfor været nødvendigt at udvikle disse selv. Dette omfatter menustrukturen og de adorners, der skal bruges i Silverlightapplikationen. Systemet skal indeholde en historik, så brugeren kan navigere frem og tilbage mellem de udførte manipulationer. Jeg har besluttet at strukturere dette som en liste af billeder, hvor en kopi af billedet gemmes hver gang, der udføres en manipulation. Denne fremgangsmåde blev valgt over en historik bestående af de udførte operationer, da den metode kan betyde forringelse i billedkvaliteten. 42

47 Kapitel 6 Design Indhold 6.1 Forord Applikationsarkitektur Systemflow SilverlightWebservice SharePointWebservice Interaktion mellem Silverlightapplikationen og Webservices Silverlightapplikationen Designmønstre Interfaceoversigt Mediator, UserInterface og MainPage Surface og SurfaceBackground Menu, MenuItem og Submenu Zoomer Helper Dialog SmResize SmCrop og CropSelection SmRotateFlip SmRedEye Abstract Command og operationsobjekter Konklusion af design

48 KAPITEL 6. DESIGN 6.1 Forord Dette designdokument beskriver de forskellige elementer i, systemet samt deres indbyrdes relationer og funktionalitet. Designet er ikke generisk, da der omtales indbyggede Silverlightkomponenter som en del af applikationen. Men designet burde være så generelt, at udviklingen kan gennemføres på en anden udviklingsplatform. Grundet UP-udviklingsmetoden er systemets delelementer præsenteret hver for sig som en delmængde af det konceptuelle design. Hver sektion vil beskrive klasserne og deres indbyrdes forhold. Denne fremgangsmåde understøtter måden, hvorpå de er blevet designet og senere implementeret som komponenter i den samlede applikation. Der vil kun blive præsenteret attributter og funktioner nødvendige for interaktionen mellem de omtalte klasser. Referencer mellem klasser er beskrevet som relationer i UMLdiagrammerne. Der er derfor ikke medtaget variabler til referencer i klassen. Relationen mellem to klasser viser, at den ene eller begge klasser har en reference til den anden. Klasser, der implementerer et interface, vil ikke have de interfacebundede metoder skrevet i klassediagrammet. Det er indforstået, at klassen har disse metoder. 6.2 Applikationsarkitektur Som nævnt i sektion 5.1 er det ikke muligt at udføre selve billedmanipulationen i Silverlight, da der ikke er pixeladgang i et eksisterende billede. Det vil dog være muligt at foretage alle de ønskede manipulationer på serveren. Det er derfor nødvendigt med en applikationsarkitektur, der muliggør billedbehandlingen. Da Silverlight kører på klientsiden, vil det være nødvendigt med et kommunikationslag mellem klient og server. Silverlight understøtter asynkron kommunikation mellem klient og server via WCF-webservices (Windows Communication Foundation). Der skal også kommunikeres med SharePoint, og dette kan kun ske via SharePoints API. Planen er at lave to webservices; en der skaber kommunikation mellem Silverlight og serveren og en anden webservice, der skaber kommunikation mellem serveren og Share- Point API. Den førstnævnte vil blive kaldt SilverlightWebservicen og den vil kommunikere direkte med den anden webservice, der kaldes SharePointWebservicen. Strukturen er vist i figur Systemflow For at give et overblik over systemets opbygning og flow er der i figur 6.2 en oversigt over, hvordan et programforløb er struktureret. Når en bruger navigerer til en SharePoint-liste, hvor nogle af listeelementerne (listitems) indeholder filer af typerne JPG og PNG, vil der i disse elementers kontekstmenu være et menupunkt, der hedder Manipulate Image. Når dette menupunkt aktiveres, navigerer browseren til en ny side (.aspx), der indeholder Silverlightapplikationens XAP-pakke. Når listeelementet vælges, sendes informationer om elementets id og listens id til aspxsiden via Query String 2. Disse værdier tilknyttes initialiseringen af Silverlightapplika- 2 Query String er en række variabler, der kan være en del af en URL. Ved brug af Query String kan værdier transporteres mellem websider. 44

49 KAPITEL 6. DESIGN Figur 6.1: Applikationsarkitektur Figur 6.2: Systemflow tionen og når denne startes vil SilverlightWebservicen blive kaldt med henblik på, at hente billedet ind i Silverlight. SilverlightWebservicen kalder SharePointWebservicen, der via SharePoint API finder billedet og sender det retur til SilverlightWebservicen. Når SilverlightWebservicen har modtaget billedet, vil det blive vist, så brugeren kan starte manipulationen. Manipulationen kan bestå af flere operationer, der udføres i SilverlightWebservicen. Når brugeren er færdig med at manipulere billedet, kan det enten gemmes, gemmes som en ny instans i listen, eller manipulationen kan fortrydes. 45

50 KAPITEL 6. DESIGN SilverlightWebservice Denne webservice sender information til og fra Silverlightapplikationen. Information, der sendes til Silverlight, skal indkapsles i objektet ImageTransporter. Webservicen vil blive kaldt, hver gang brugeren accepterer en manipulation af billedet samt når det hentes, gemmes eller arbejdet med billedet afvises. Der skal holdes historik over manipulationerne på serveren (sektion 5.3.3). Derfor indeholder ImageTransporter informationer om manipulationshistorikken, så der i Silverlightapplikationen kan vise korrekt historikfunktionalitet (undo/redo). History-klassen indeholder billedhistorikken (images) og attributten listpointer, der har placeringen på det nuværende billede samt metoder til at manipulere den. Et klassediagram for webservicen er vist i figur 6.3. SilverlightDataService-klassen vil blive skabt, hver gang webservicen kaldes fra Silverlightapplikationen. Derfor bliver det nødvendigt at gøre WorkingImage- og History-klasserne tilgængelige på tværs af webservicekald, så længe at browsersessionen eksisterer. WorkingImage indeholder to billeder; det originale (master), der bliver hentet fra SharePoint og det nuværende (current). Desuden indeholder det informationer om, hvilken SharePoint-liste (listid) og hvilket listeelement (itemid) billedet blev fundet i. Derfor hentes og gemmes de første instanser af History og WorkingImage i sessionobjektet. Alle manipuleringsfunktionerne i SilverlightDataService vil udføre manipulation på Current i WorkingImage objektet og derefter sende resultatet til prepareimagetransporter funktionen, der sender et ImageTransporter-objekt retur, der så kan sendes tilbage til Silverlightapplikationen. Figur 6.3: Klassediagram for SilverlightWebservice 46

51 KAPITEL 6. DESIGN Billedmanipulations operationer Webservicen indeholder funktioner til manipulation af billedet. De kaldes fra Silverlightapplikationen med parametre, der specificerer manipulationen og returnerer en instans af WorkingImage. De forskellige operationer er vist i klassediagrammet for SilverlightWebservicen (6.3) og vil kort blive introduceret herunder 3. crop(x, y, w, h) Beskærer billedet ved at starte i pixelpunktet (X, Y) og medtage W antal pixels i bredden og H i højden. resize(w, h) Ændrer størrelsen på billedet. Resultatet bliver et billede med samme motiv, men med ny bredde og højde. Dette kan betyde, at billedet bliver strakt horisontalt eller vertikalt. Eller at pixelopløsningen bliver forringet, hvis billedet forstørres betragteligt. RotateFlip(rotate, flip) Funktionen udfører både rotation af billedet samt spejlvending. Rotationen er i grader og spejlvendingen kan enten være horisontal, vertikal eller begge. grayscale Funktionen løber igennem alle pixels i billedet og sætter værdierne for rød, grøn og blå til koncentrationsgennemsnittet, der oversætter farveværdien til en gråtone. pixel.red = pixel.green = pixel.blue = (pixel.red + pixel.green + pixel.blue)/3 redeye(list<redeye>) Funktionen udfører en farvekorrektion på det valgte område og er nærmere beskrevet i sektion getoriginal Funktionen returnerer det første billede i historikken, der er det originale billede modtaget fra SharePoint, og derefter slettes historikken. undo og redo Begge funktioner returnerer et billede fra historikken. redo returnerer det næste billede i historikken og undo returnerer det forrige. Den aktuelle placering styres i Historyklassen, der ligeledes har historiklisten med billeder. Logikken omkring undo og redo styres i Silverlightapplikationen. Derfor sendes information om antal billeder i historikken samt den aktuelle placering i historikken med hvert WorkingImage til Silverlightapplikationen. 3 I.Net kan billeder manipuleres ved brug af Graphics-klassen, der har indbyggede funktioner til rotation, spejlvending, beskæring, ændring af størrelse samt giver pixeladgang, så farver kan manipuleres. 47

52 KAPITEL 6. DESIGN loadimage(itemid, listid) Funktionen kalder først getimage i SharePointWebservicen og modtager et bytearray retur, der omformes til et billede. Derefter initialiseres WorkingImage- og Historyklasserne, der begge tilknyttes sessionobjektet. Til sidst sendes en instans af ImageTransporter retur til Silverlightapplikationen. saveimage Parametrene til SharePointWebservice-funktionen saveimage(itemid, ListId, image) hentes i den globale instans af WorkingImage, inden funktionen kaldes. WorkingImagefunktionen getcurrentasbytearray returnerer det bytearray, der skal bruges til saveimage parameteren image. WorkingImage har ligeledes id-informationer om listen og listeelementet. saveimageas(newname) Parameteren newname skal bruges til at navngive den nye instans i SharePoint-listen. Funktionen kalder SharePointWebservice-funktionen saveimageas(listid, image, name). I WorkingImage hentes listid og getcurrentasbytearray returnerer det aktuelle billede som bytearray. Inden bytearrayet sendes retur, kaldes cancel funktionen, der sikrer, at reservationen af billedet fjernes. cancel Funktionen kalder SharePointWebservice-funktionen cancel(itemid, listid), hvis formål er at finde den billedfil, der blev hentet ind fra SharePoint og fjerne reservationen. loadtemplates Funktionen henter skabeloner og konverterer dem til Template-instanser, der returneres i en liste. Lagringen af skabeloner i dette system vil være hensigtsmæssig at gøre enten som en SharePoint-list, der oprettes første gang systemet skal bruge dem. Eller som en XML-fil i SilverlightWebservicen. Ved en SharePoint-liste kan brugerne tilgå skabeloner uden at bruge Silverlightapplikationen hvor i mod XML-filen vil være placeret på serveren og umiddelbart utilgængelig. Om lagringen af skabeloner skal ske på den ene eller anden måde vil blive afgjort under implementeringen. savetemplates(list<template>) Brugeren kan oprette nye skabeloner via Silverlightapplikationen samt slette eksisterende. Denne funktion modtager en liste med de skabeloner, der skal være i systemet og udfører en sammenligning med de eksisterende i lageret. Skabeloner, der findes i den modtagne liste (M) men ikke i det eksisterende lager(e), skal oprettes (Komplementærmængden, M E = {x M x / E}). Komplementærmængden, E M = {x E x / M}, skal slettes. 48

53 KAPITEL 6. DESIGN SharePointWebservice Webservicen skal bruges til at hente et billede samt give mulighed for at gemme billedet eller gemme billedet som en ny instans i SharePoint-listen. Servicen består af fire funktioner; GetImage, SaveImage, SaveImageAs og Cancel. Alle funktionerne er del af et enkelt objekt, der kun eksisterer under kaldet til webservicen. Når et billede hentes i SharePoint skal det reserveres, så andre brugere ikke kan manipulere det samtidigt. Når billedet er gemt, eller hvis brugeren afbryder billedmanipulationen, skal reservationen fjernes. I figur 6.4 er vist klassediagrammet for SharePointWebservicen, SharePointDataService. Den består af en enkelt klasse der instantieres når servicen kaldes. SharePointDataService har tre funktioner, der alle bliver kaldt fra SilverlightWebservicen, og de er beskrevet herunder. Figur 6.4: Klassediagram for SharePointWebservice GetImage(itemId, listid) Med udgangspunkt i de modtagende parametre laves et opslag i SharePoint API, hvor SharePoint listen trækkes frem, og det efterspurgte listeelement findes. Det aktuelle listeelement indeholder en fil (billede), der skal konverteres til et bytearray og sendes retur til SilverlightWebservicen. Inden filen konverteres bliver den reserveret i Share- Point (check out), så andre brugere ikke kan få adgang til den, samtidigt med at den manipuleres. SaveImage(itemId, listid, image) Som i GetImage findes det efterspurgte listitem i SharePoint-listen og billedet, repræsenteret som et bytearray, erstatter den eksisterende fil. SaveImageAs(listId, image, name) Den aktuelle liste findes, og der oprettes en ny instans i den. Den nye instans navngives med name-parameteren og image (byte []) skrives til en fil og tilknyttes den nye instans. Cancel(itemId, listid) Funktionen finder billedet i SharePoint-listen og fjerner reservation af den tilknyttede fil. Reservationen blev sat i getimage-funktionen. 49

54 KAPITEL 6. DESIGN Interaktion mellem Silverlightapplikationen og Webservices I figure 6.5 er vist et sekvensdiagram fra systemstart til billedet gemmes i SharePointlisten efter manipulationen. Diagrammet viser kun sekvenserne, hvor billedet hentes og hvor det gemmes. Manipulationerne er ikke gennemgået, da disse vil blive beskrevet senere i dette kapitel. Der er ikke medtaget samtlige funktionskald, men kun dem der er nødvendige for at forstå strukturen. Den aspx-side, der indeholder Silverlightapplikationen (XAP-pakken), initialiserer med billedets id (itemid) og information om den liste, det aktuelle billede er gemt i (listid). Herefter kontaktes SilverlightWebservicen via loadimage-metoden, der igen kontakter SharePointWebservicen med getimage. GetImage returnerer billedet som et bytearray, og derefter vil SilverlightWebservicen initialiserer den globale instans af WorkingImage, der udover selve billedet også indeholder SharePoint-informationerne (itemid, listid). Denne instans af WorkingImage vil bruges gennem hele manuipulationsforløbet. Når brugeren er færdig med at manipulere billedet og vælger at gemme det, vil Silverlightapplikationen kalde saveimage i SilverlightWebservicen. Dette skaber en ny instans af SilverlightDataService, der initialiseres med den globale WorkingImage, der holder det aktuelle billede sammen med SharePoint-informationerne (itemid, listid). Herfra kan SharePointWebservicen kaldes og hvis det lykkes at gemme billedet, returneres værdien sand. Når Silverlightapplikationen modtager positivt feedback fra SilverlightWebservicen vil den sende besked til browseren om at navigere tilbage til den liste, der holder det aktuelle billede. 50

55 KAPITEL 6. DESIGN Figur 6.5: Sekvensdiagram for interaktion mellem Silverlightapplikationen og de to webservices. 51

56 KAPITEL 6. DESIGN 6.3 Silverlightapplikationen Som beskrevet i sektion skal brugergrænsefladen i Silverlightapplikationen opbygges af en menu og et område, hvor billedet vises. Ligeledes skal der placeres en zoomkomponent. Derudover skal billedet placeres på en baggrund, så det kan flyttes rundt. I det følgende vil jeg beskrive designet af de enkelte delelementer, der opbygger brugergrænsefladen. I WPF og Silverlight er det muligt at udvikle sine egne brugergrænsefladeklasser (Eng. User Controls), der består af to dele (filer); et brugergrænsefladedesign og den bagvedliggende kode. Når jeg i følgende refererer til design af klasser, skelner jeg ikke mellem User Controls og de almindelige C# klasser. Alle klasser er navngivet på engelsk, og al tekst i brugergrænsefladen er ligeledes på engelsk. I figur 6.6 er et samlet oversigt over Silverlightapplikations objekter og deres indbyrdes relationer. Der er ikke tilføjet attributter og funktioner på figuren, da objekterne vil blive uddybet i følgende sektioner. I de enkelte sektioner vil attributter og funktioner introduceres i det omfang de er relevante for sektionen. De mange én-til-én-aggregeringer kunne være årsag til, at samle klasserne. Men adskillelsen giver en indkapsling af attributter og funktionalitet samt brugergrænsefladegrafik, der gør applikationen mere struktureret og modulær. Adskillelsen giver desuden mulighed for en iterative udvikling af systemet. Herunder følger en introduktion til de mest omtalte klasser (objekter) i Silverlightapplikationen der er navngivet for, at lette forståelsen. Surface Billedet der manipuleres samt det bagvedliggende Kanvas. Singleton-klasse. SurfaceBackground Området Surface er placeret på. Singleton-klasse. Mediator Central kontrolenhed, der styrer interaktion mellem objekter i Silverlightapplikationen. Singleton-klasse. Menu Menu-objektet, der indeholder MenuItems, der er menupunkter. Singleton-klasse. MenuItem Menupunkt, der er placeret i Menuen og kan indeholde en Submenu. Abstract Submenu Abstrakt klasse der arves til undermenuer af menupunkter. Undermenuer indeholder en dialog til udførelse af en specifik manipuleringsoperation på billedet. Zoomer Zoomkomponent, der kan zoome i billedet. Singleton-klasse. 52

57 KAPITEL 6. DESIGN Figur 6.6: Klassediagram for Brugergrænsefladen Helper Vindue der indeholder vejledende tekst omkring funktionaliteten i Silverlightapplikationen. Singleton-klasse. Dialog Et objekt, der inaktiverer brugergrænsefladen og indeholder et DialogContent objekt. Singleton-klasse. DialogContent Indeholder en besked til brugeren eller en dialog, der skal tages stilling til, inden systemet kan fortsætte. 53

58 KAPITEL 6. DESIGN Designmønstre I denne sektion beskrives de designmønstere (Eng. Design Patterns), der bruges i Silverlightapplikationen Mediator Jeg har valgt at bruge et Mediator-designmønster [4, s. 273] til at styre interaktionen mellem de forskellige elementer i brugergrænsefladen. I praksis betyder det, at en central klasse (Mediator) har referencer til alle elementer i brugergrænsefladen, og al interaktion sker igennem funktioner i den centrale klasse. I mønsteret skelnes der mellem Mediator, som den centrale kontrolenhed, og de kontrollerede enheder omtales som kollegaer. Figur 6.7 viser hvordan Mediator-klassen samler al interaktion centralt, så de enkelte kollegaer ikke interagerer med hinanden på kryds og tværs, hvilket kan gøre programkoden unødvendigt kompliceret. Figur 6.7: Silverlight Observer Observatørmønstret [4, s. 293] beskriver en struktur, hvor én klasse observeres af én til flere andre klasser. De observerende klasser kaldes Observatører, og den observerede kaldes Subjekt. Klassestrukturen for observatørmønstret er vist i figur 6.8 Figur 6.8: Forholdet mellem Subject og Observer i Observatørmønstret Observatørmønsteret fungerer som et interface, hvor nogle klasser i programmet implementerer enten Observer eller Subject. Jeg vil bruge mønstret til at skabe en kommunikation mellem mine klasser, der fungerer på samme måde som et interrupt. Mediatorklassen vil være det øverste subjekt og vil blive observeret af menuen. Menuen vil igen implementere observatørmønsteret og blive observeres af sine menuelementer, der igen observeret af undermenuer. Jeg vil gå mere i detaljer omkring brugen af Observatørmønstret i de følgende sektioner. 54

59 KAPITEL 6. DESIGN Command og CommandHolder Kommandomønsteret [5, s. 292] tager operationer og indkapsler dem i objekter. Disse objekter er generaliseret ved interfacet Command og indeholder Execute-metoden. Operationsobjekterne kan så refereres til i andre objekter, der ikke skal have viden om hvilken operation, der udføres, men blot kalde Execute-metoden. Kommandomønsteret implementeres på alle operationer, der kommunikerer med serveren via webservice. Menupunkter vil bruge KommandoHoldermønsteret og få tilknyttet et Command-objekt. Når menupunktet aktiveres vil Execute-metoden kaldes. I figur 6.9 er Kommando- og KommandoHolder-mønstrene vist. Figur 6.9: Kommando- og KommandoHolder-mønsteret Singleton Singleton-mønsteret [4, s. 127] sikrer, at en klasse kun eksisterer i netop én enkelt instans samt at der er global adgang til den. Dette skal bruges på alle de objekter i systemet, der kun må eksisterer en instans af. I.Net verden kan dette let implementeres med følgende kode, public class Singleton { // Den enkelte instans Private static _instance = new Singleton(); // Globale tilgang Public static Singleton Instance() { return _instance; } } // Privat konstruktør private Singleton() { } 55

60 KAPITEL 6. DESIGN Interfaceoversigt iobserver update Indeholder de operationer, der skal udføres, når det observerede objekt ændrer sig. isubject notify Kalder en update på alle iobserver-objekter, der observerer isubject-instansen. attach(iobserver) Tilknytter et iobserver-objekt til den aktuelle isubject-instans. detach(iobserver) Fjerner et tilknyttet iobserver-objekt fra den aktuelle isubject-instans. icommand Execute Metoden indeholder de operationer, der skal foretages, når objektet eksekveres. icommandholder getcommand : icommand Metoden returnerer icommand-instansens tilknyttede icommandholder-instans. setcommand(icommand) Tilknytter en icommand-instans til den aktuelle icommandholder-instans. isubmenu open Metoden kaldes af MenuItem, når isubmenu åbnes. Dette bruges til at forberede eventuelle data, inden isubmenu vises. close Metoden kaldes af MenuItem, når isubmenu lukkes. Den bruges til at udføre arbejde, lige inden undermenuen lukkes. idialogcontent open Metoden kaldes af Dialog, når idialogcontent åbnes. Dette bruges til at forberede eventuelle data, inden idialogcontent vises. close Metoden kaldes af Dialog, når idialogcontent lukkes. Den bruges til at udføre arbejde lige inden Dialog lukkes. 56

61 KAPITEL 6. DESIGN Mediator, UserInterface og MainPage Mediator-klassen samler referencer til objekter i brugergrænsefladen som beskrevet i sektion Udover at styre interaktionen mellem objekterne i brugergrænsefladen samler Mediator også objekterne i en instans af klassen UserInterface. UserInterface opbygger den reelle brugergrænseflade- og denne vises i MainPage klassen, der instantieres, når applikationen startes. I figur 6.10 vises forholdet mellem Mediator, UserInterface og MainPage. MainPage instantierer en instans af Mediator-klassen og kalder dens funktion assembleui. Denne funktion samler brugergrænsefladen, dvs. placerer Surface på Surfacebackground, fylder menuen med menupunkter etc. Resultatet af assembleui er en instans af UserInterface-klassen med den samlede brugergrænseflade. Denne modtager MainPage og placerer den i outputtet til browseren. Figur 6.10: Forholdet mellem Mediator, UserInterface og MainPage Det ønskes, at brugeren skal se resultatet af manipulationerne, inden de reelt udføres på billedet. For at kunne vise brugeren resultatet, inden det reelt udføres, skal billedet transformeres i Silverlight, og når brugeren er tilfreds med manipulationen, kan der vælges, om det reelt skal udføres eller ej. For at sikre, at der kun foretages en bestemt manipulation ad gangen skal der opbygges en tilstandsmaskine for programmet. Dette er en nødvendighed, da det resulterende billede ellers ikke med sikkerhed vil fremstå som det billede, der vises på skærmen. Det er også hensigtsmæssigt, når der vises en dialog; for eksempel når et billede skal gemmes som en ny instans, hvilket kræver en navngivning. Når navngivningsdialogen vises, skal det ikke være muligt at udføre manipulationer på billedet. Programmet kan være i seks tilstande; Base, Rotate, Resize, Crop, RedEye, Dialog. Tilstandsmaskinen styres af Mediator-klassen og er vist i figur Tilstandsskift sker ved aktivering og deaktivering af MenuItems og Dialoger. 57

62 KAPITEL 6. DESIGN Figur 6.11: Tilstandsmaskine styret af Mediator Surface og SurfaceBackground Det vil være nødvendigt at vide, hvor på billedet musen er placeret, når et billede skal beskæres. Det vil derfor være nødvendigt at lave en integration mellem billedet og en Silverlight Canvas-kontrol. Det vil give mulighed for at fange musens placering. Denne integration samles i klassen Surface. Surface placeres på SurfaceBackground, der er en Silverlight Canvas-kontrol og vil gøre det muligt at flytte billedet rundt på baggrunden. Dette vil være nødvendigt i forbindelse med zoomfunktionaliteten. Når der skal placeres en adorner over billedet, kan den tilføjes Surface-klassen, hvor adorneren vil blive placeret på Canvas-kontrollen men med et højere niveau i visningshierakiet end billedet. På den måde vil adorneren være synlig over billedet. I figur 6.12 er vist et klassediagram for Surface og SurfaceBackground. Surface har blandt andet funktioner til at tilføje billedet og eventuel adorner. SurfaceBackground kan med add(uielement)-funktionen tilføje enheder til sit kanvas. UIElement er en basisklasse som alle burgergrænsefladeobjekter (User Controls) nedarver fra. Ved at lade SurfaceBackground tilføje enheder af typen UIElement, gøres funktionsinputtet generelt, og det er ikke nødvendigt at skelne mellem de forskellige typer af brugergrænsefladeelementer. Figur 6.12: Forholdet Surface og SurfaceBackground 58

63 KAPITEL 6. DESIGN Menu, MenuItem og Submenu Da Silverlight ikke tilbyder en indbygget menukomponent skal en sådan designes. Menuen vil være opdelt i tre delelementer; den overordnede menu, menupunkter og undermenuer. Forholdet mellem delelementerne er vist i klassediagrammet i figur Figur 6.13: Klassediagram for menustrukturen Menu Menu-klassen er en Singleton, der implementerer interfacet isubject. Menu indeholder en række iobserver-instanser lig med antallet af MenuItems, der er tilføjet menuen. Menu kan tilføje enheder til menuen med add(uielement)-funktionen. Ved at tilføje et UIElement skal Menu ikke bekymre sig over, hvilken type element der tilføjes, så længe det nedarver fra UIElement (som omtalt i sektion 6.3.4). Udover MenuIteminstanser kan der også tilføjes andre elementer til menuen. Dette er omtalt nærmere i sektion I add(uielement) undersøges der, om det tilføjede element er af typen MenuItem, og i givet fald tilføjes det til listen af observatører. 59

64 KAPITEL 6. DESIGN MenuItem Alle instanser af MenuItem skabes i Mediator-funktionen assemblemenu og kan indeholde en tekst eller et ikon, der vises i menuen. Dette bestemmes ved konstruktion af MenuItem instansen. Metoderne enable og disable afgører, om menupunkterne skal være mulige at aktivere eller ej. Disse metoder bruges blandt andet i forbindelse med historikken, hvor Undo- og Redo-operationerne er tilgængelige eller ej, afhængigt af hvor i historikken det aktuelle billede befinder sig. Metoderne activate og deactivate bliver brugt, når et MenuItem aktiveres eller deaktiveres. Aktiveringen sker, når brugeren klikker på MenuItem med musen. I tilfælde hvor MenuItem har reference til en isubmenu, vil denne vises ved aktivering og skjules ved deaktivering. Hvis MenuItem indeholder en icommand, vil denne blive eksekveret ved aktivering. Det er også ved aktivering, at Mediator skifter tilstand. MenuItem får ved konstruktion besked af Mediator, om hvilken tilstand der skal skiftes til ved aktivering. Det er kun MenuItem med isubmenu, der får Mediator til at skifte tilstand. Ved deaktivering vil Mediator skifte tilstand til den foregående, hvilket altid vil være Base (figur 6.11). Submenu Den abstrakte klasse Submenu nedarves til de forskellige Submenu-underklasser i systemet. Disse er alle navngivet med Sm som de to første bogstaver. Submenuerne arver fem funktioner fra AbstractSubmenu; open, close, ok, cancel og reset. Funktionerne open og close aktiveres, når MenuItem med en reference til Submenu-instansen aktiveres eller deaktiveres. Det giver undermenuen en chance for at reagere på, at den bliver åbnet eller lukket. Funktionerne ok, cancel og reset bliver alle aktiveret af brugergrænsefladeknapper med samme navn (se figur 6.14). Funktionen ok kaldes når brugeren vælger at udføre de manipulationer, der er foretaget på billedet fra den aktuelle Submenu ved at eksekvere den icommand instans, der er tilknyttet. Funktionen cancel kaldes når brugeren fravælger at udfører manipulationer af den type, som undermenuen tilbyder. Funktionen fjerner eventuelle transformationer på billedet og deaktiverer det MenuItem, som undermenuen er tilknyttet. Funktionen reset nulstiller eventuelle transformationer, så billedet fremstår, som inden den aktuelle Submenu blev åbnet Udseende I menuen bruges ikoner for Save, Save As, Undo og Redo. Disse er alle almindelige kommander i Microsoft-produkter og de benyttede ikoner ligner dem, der bruges i Microsoft Office. I figur 6.14 er vist, hvordan menuens udseende er designet. I menuen er lodrette streger brugt til at indramme relaterede funktionaliteter som undo/redo, save/save as etc. En Submenu vil i programmet være placeret under menupunktet, der åbner dem. Men i figur 6.14 er de vist over og under menuen for at få plads til at vise dem alle. I programmet er kun muligt at se ét menupunkt ad gangen. Ved at bruge Observer-designmønsteret (sektion ) kan der skabes en kommunikationsstruktur mellem menuelementer. Menu-klassen vil være subjekt og blive observeret af MenuItem, der selv er subjekt og observeres af eventuel Submenu. MenuItem bruger KommandoHoldermønstret til at holde eventuel icommand-klasse. Ideen er, at et MenuItem enten indeholder en Submenu eller et icommand-objekt. Når 60

65 KAPITEL 6. DESIGN Figur 6.14: Menuens opbygning brugeren aktiverer MenuItem vil klassen enten vise sin Submenu eller udføre den icommand, som den holder. Menuen skal bestå af følgende menuelementer. Save Kommando til at gemme billedet. Save As Undo Redo Kommando til at gemme billedet som ny instans i SharePoint-liste. Kommando til at hente forrige billede i historikken fra serveren. Kommando til at hente næste billede i historikken fra serveren. Rotate / Flip Resize Crop Undermenu med dialog. Undermenu med dialog. Undermenu med dialog. Gray Scale Kommando til at ændre billedet til gråtoner. 61

66 KAPITEL 6. DESIGN Red Eye Reset Cancel Undermenu med dialog. Kommando til at hente det originale billede fra serveren. Kommando til at fjerne reservationen af billedet og navigere tilbage til den SharePoint-liste, hvor billedet blev valgt Zoomer Det skal være muligt at zoome i billedet (sektion ), og selve operationen kan realiseres ved at ændre størrelsen på Surface. Den klasse, der styrer zoomfunktionaliteten, kaldes Zoomer, og den bestemmer størrelsen på Surface via Mediator. Enheden for zoom er procent; procent af størrelsen på det originale billede i Surface. I figur 6.15 er vist et klassediagram for interaktionen mellem Zoomer, Mediator og Surface. Dette er beskrevet nærmere i sektion Figur 6.15: Klassediagram for Zoomers interaktion med Surface og Mediator. 62

67 KAPITEL 6. DESIGN Udseende Selve zoomkomponentens udseende kan ses i figur Den består af tre områder, hvor det øverste består af en overskrift og Surface originale størrelse (bredde x højde). Under overskriften er selve zoomfunktionen, hvor der kan zoomes i billedet ved enten at flytte på potentiometeret eller trykke på en af knapperne med plus og minus symboler på. Sidstnævnte vil ændre zoomprocenten med ±10 %. Zoomprocenten er vist til højre for potentiometeret. Nederst i zoomkomponenten er en mindre udgave af Surface-billedet med en adorner. Adorneren og billedet vil sammen kaldes for navigationsadorneren. Navigationsadorneren skal kun vises, når Surface zoomes større end SurfaceBackground og kan bruges til at navigere rundt i billedet. Figur 6.16: Layout for Zoomer Størrelsen på navigationsadorneren findes udfra proportionerne af Surface. Det bliver nødvendigt at begrænse størrelsen af navigationsadorneren og derfor bestemmes bredden til at være konstant (140 pixels). Højden bestemmes ud fra forholdet mellem Surface-bredde og de 140 pixels. Hvis et billede er 800x600 pixels vil størrelsen på navigations adorneren være, 140x(600 (140/800)) = 140x105pixels. I forbindelse med brug af rotationsfunktionerne skal navigationsadorneren roterer med Surface. Dette håndteres af Mediator-klassen. Submenuen for rotation giver besked om at udføre rotationstransformationen på Surface og derved også navigationsadorneren. Når der zoomes i billedet, og hele billedet derved ikke længere er synligt på skærmen, skal navigationsadorneren vises. Den består af en mindre kopi af billedet fra Surface samt en adorner, der er placeret over billedet. Adorneren består af to områder. Det ene er proportionelt i størrelsen med det synlige område på skærmen, herefter kaldet Viewzone, og det andet er proportionelt med den del af billedet der ikke er synligt. Viewzoneområdet er gennemsigtigt mens det andet er tonet mørkere. I takt med der zoomes ind eller ud, vil Viewzone bliver mindre eller større. Når enten bredden eller højden på Surface bliver større end bredden eller højden på SurfaceBackground, vil navigationsadorneren blive vist, og størrelsen af Viewzone 63

68 KAPITEL 6. DESIGN skal beregnes. Størrelsen på Viewzone bestemmes ved forholdet mellem navigationsadornerens og forskellen mellem Surface og SurfaceBackground. Herunder er et eksempel for bestemmelse af bredden for Viewzone. V iewzone.bredde = navigationsadorner.bredde Surface.bredde SurfaceBackground.bredde Med andre ord: hvis Surface er dobbelt så stor som SurfaceBackground, skal Viewzone være halvt så stort som navigationsadorneren. Når størrelsen på Viewzone, ændres skal det ske omkring dens centrum. Dette gøres for at give brugeren en præcis zoom i midten af det synlige område på skærmen. Derfor skal Viewzones placering justeres, så centrum ikke flyttes Funktionalitet Der skal zoomes i billedet under følgende omstændigheder, Brugeren vælger at zoome ved at ændre den procentvise størrelse på zoomkomponenten Et billede hentes, og det er større end SurfaceBackground Browservinduet ændrer størrelse, og billedet bliver for stort til SurfaceBackground. Der skal kun reageres på denne hændelse, hvis der ikke alledere er zoomet i billedet. I figur 6.17 vises sekvensdiagram for situationen, hvor browservinduets størrelse ændres og derved ændrer størrelsen for SurfaceBackground. Hændelsen udløser et funktionskald til Mediator-klassen, der allerede har informationer om billedets originalstørrelse samt den nye størrelse på SurfaceBackground. PlaceImage(Width, Height) kalder CalculateProcent(Width, Height), der beregner, hvor meget billedet eventuelt skal zoomes, for det hele er synligt. ResizeImage(procent) ændrer størrelsen på billedet ved at gange den beregnede procentsats med billedets originale dimensioner. CenterSurface(Location) placerer midten af Surface på midten af SurfaceBackground. Placeringen beregnes af Mediator og sendes til Surface, der placerer sig selv. Til sidste placeres Zoomer. Kaldet PlaceZoomer(Width, Height) beregner samtidigt, om navigationsadorneren skal vises, og hvordan navigationsadorneren skal proportioneres. PlaceImage(Width, Height)-funktionen kaldes også, når et nyt billede hentes ind i systemet, og det er derfor, Zoomer skal have informationer om billedets højde og bredde. Med musen kan brugeren navigere i billedet ved at trække Viewzone rundt på det lille billede. Dette er vist i figur Når Viewzone flyttes i navigationsadorneren, vil Surface flyttes rundt på SurfaceBackground, så det synlige område i navigationsadorneren hele tiden er synkront med det synlige område i browservinduet. I figur 6.19 er vist et sekvenssdiagram for forholdet mellem Zoomer, Mediator og Surface. Deres indbyrdes interaktionen er afspejlet, i forbindelse med billednavigation via Viewzone. Hvis venstre knap på musen trykkes ned vil den boolske variabel Dragging blive sat til sand. Når musen trækkes med venstre knap holdt nede, vil Viewzone flyttes. Hændelsen 64

69 KAPITEL 6. DESIGN Figur 6.17: Sekvensdiagram for zoomoperationen der udløses, når musen bevæger sig, undersøger om Dragging er sand og beregner i givet tilfælde om flytningen af Viewzone er inden for navigationsadornerens grænser. Hvis ikke den er det, vil placeringen blive justeret, så den går præcist til navigationsadornerens grænse. Når den endelige placering er fundet, kaldes Move(Location) med den nye placering. Move flytter Viewzone og giver Mediator besked om placeringsændringen ved at kalde ViewZoneMoved(Location). ViewZoneMoved(Location) beregner, hvor Surface skal placeres ud fra Viewzones placering. Mediator har informationer om størrelsesforholdet mellem navigationsadorneren og Surface og kan på den baggrund bestemme, hvor billedet skal placeres. Når den nye placering er fundet, gives besked til Surface om at placere sig selv ved at kalde MoveSurface(Location). Figur 6.18: Screenshot af navigationsadorneren 65

70 KAPITEL 6. DESIGN Placeringen af Viewzone 4 er underlagt en enkel begrænsning: Den må ikke placeres uden for navigationsadorneren. Dette skal håndteres i følgende situationer; Brugeren forsøger at flytte Viewzone uden for navigationsadornerens grænser. Viewzone er placeret op mod en grænse, og der zoomes ud (Viewzone forstørres). Hvis den nye placering er uden for navigationsadornerens grænser, skal den placeres direkte på grænsen. Størrelsen på Viewzone vil ændres omkrings dens centrum. Hvis den skal vokse med to pixels i bredde og højde, vil den også ændre sin placering så centrum er det samme sted som før ændringen. I det normale tilfælde, hvor begge begrænsninger er overholdt, vil Viewzones placering blive justeret ved at tage den tidligere placering og addere den med forskellen i Viewzones størrelse før og efter zoom. Herunder er et pseudokodeeksempel, hvor den nye placering beregnes. ny.placering.x = gammel.placering.x + ((gammel.bredde - ny.bredde) / 2) I tilfældet hvor der zoomes ud, mens Viewzone er placeret på en grænse, skal Viewzone ikke vokse omkring sit centrum men i modsatte retning end grænsen eller grænserne. Figur 6.19: Sekvensdiagram for navigation med navigationsadorneren 4 Når enheder placeres på et Silverlight Canvas, er det ud fra koordinater (X, Y). Koordinaterne bestemmer, hvor enhedens øverste venstre hjørne bliver placeret. Koordinatsystemet har nulpunkt i Canvas øverste venstre hjørne og X- og Y-akserne har stigende værdier der fra. 66

71 KAPITEL 6. DESIGN Helper Det yderste menupunkt på menuen er en kontakt, der henholdsvis viser og skjuler en hjælpedialog, Helper-objektet. Indholdet er vejledende tekst i brug af systemets funktioner og skifter, afhængigt af hvilken tilstand programmet er i. Eksempelvis vil Helper indeholde en vejledning i, hvordan et billede beskæres samtidigt med, at undermenuen for beskæring vises. Helper er observatør af Mediator. Når Mediator skifter tilstand, vil notify kaldes, og den giver alle iobservers besked om at opdatere sig selv (Update). Når update-funktionen kaldes i Helper, vil den relevante vejledning blive fundet frem i List<text>, og vist. Mediator fjerner og tilføjer Helper til/fra SurfaceBackground ved kald til showhelp(helper)- og hidehelper(helper)- metoderne. Derfor har Mediator både en direkte reference til Helper og en reference via iobserver-interfacet. Forholdet mellem Helper og Mediator er vist i figur Figur 6.20: Forholdet mellem Helper og Mediator Helper er placeret i øverste venstre hjørne af SurfaceBackground. Den indeholder en overskrift samt den vejledende tekst. Helper har også selv en knap i øverste højre hjørne, der kan skjule den. I figur 6.21 er vist, hvordan Helper ser ud. Figur 6.21: Helper-klassens udseende Dialog Dialog er et objekt, der kan deaktivere hele skærmbilledet i en situation, hvor det ikke er hensigtsmæssigt, at brugeren er interaktiv med grænsefladen. Disse situationer opstår, når en webservice kaldes, og systemet venter på svar, eller hvis der skal indtastes oplysninger fra brugeren, før systemet kan fortsætte. Dialog styres fra Mediator og kan aktiveres med opendialog- og closedialog-metoderne. Dialog klassen får sit indhold 67

72 KAPITEL 6. DESIGN fra DialogContent-klasserne, hvis navn starter med Dc via idialogcontent-interfacet. Dialog er en Singleton-klasse, og dens indhold kan skiftes løbende af Mediator, der har referencer til de eksisterende idialogcontent-instanser. Et klassediagram for forholdet mellem Dialog, idialogcontent og Mediator er vist i figur Figur 6.22: Forholdet mellem Dialog og Mediator En af de idialogcontent-instanser, der er faste i applikationen, viser, at systemet arbejder. Denne er vist i figur Dialog-klassen indeholder et stort rektangel, der fylder hele skærmbilledet og er delvist transparent. Rektanglet er placeret over brugergrænsefladen, så brugeren ikke kan interagere med den. Dette ses i figur 6.23, hvor menupunkterne er sløret, og det ikke er muligt for brugeren, at aktivere dem. Figur 6.23: Load-dialogen 68

73 KAPITEL 6. DESIGN SmResize Figur 6.24: Undermenuen SmResize Undermenuen SmResize kan ses i figur Den består af to indtastningsfelter for billedets bredde og højde, en checkbox for at bruge procent i stedet for pixel, en checkbox for at holde proportionerne mellem bredde og højde og de tre knapper; OK, reset og cancel. Desuden er der et område for skabeloner (Eng. Templates). Indtastningsfelterne accepterer kun heltal og justeres automatisk til procent, hvis Use Procent-checkbox aktiveres. Procentværdien er på baggrund af billedets størrelse, inden undermenuen bliver vist, og lagres i Mediator. Når værdien i et indtastningsfelt skifter, vil billedet (Surface) automatisk tilpasse sig den angivende bredde og højde. Denne transformation giver brugeren mulighed for at se billedet i de nye dimensioner, inden billedet reelt manipuleres. Når Keep Proportions-checkbox aktiveres, registreres forholdet mellem den aktuelle bredde og højde (P roportion = width ), og dette forhold vil automatisk height blive opretholdt. Hvis der indtastes en ny højde, vil bredden blive justeret, så proportionen overholdes og omvendt. Skabeloner bruges til at sætte faste mål for bredde og højde på billedet. Når en skabelon tages i brug ved at vælge en i listen, vil skabelonens værdier for højde og bredde blive fyldt i indtastningsfelterne samt Keep Proportionscheckboxen vil blive aktiveret. 69

74 KAPITEL 6. DESIGN Figur 6.25: Aktivitetsdiagram for indtast i SmResize-undermenuen I figur 6.25 er vist et aktivitetsdiagram for, hvad der sker, når brugeren indtaster en værdi i et af de to indtastningsfelter i SmResize. I figur 6.26 kan ses forholdet mellem SmResize, Mediator og Surface. Eftersom SmResize transformerer billedet til nye størrelser og ikke ændre den reelle størrelse, før OK - knappen aktiveres, er det nødvendigt at adskille det transformerede billede med det reelle. Derfor har SmResize variabler, der holder de transformerede dimensioner samt en alternativ zoomprocent, som definerer, hvor meget der er zoomet i det transformerede billede. Disse variabler er navngivet efter dem, der holder information om det originale billede, men med en underscore foran. Metoden adjustvalues kaldes, når der ændres i værdierne i et af indtastningsfelterne eller en af de to checkbox aktiveres. Metoden justerer værdier, så eventuel proportion overholdes. Metoden syncimage kaldes af adjustvalues, og den beregner, hvor stort billedet på Surface skal være og kalder Mediator funktionen adjustimagetoresize(width, Height, Procent) med billedets nye dimensioner samt hvilken procent billedet skal zoomes. Til sidst opdateres Zoomer med kald til funktionerne setpercentagelabel(percentage) og setdimensionslabel(width, Height), der ændrer brugergrænseflade værdierne for procent og billedets dimensioner. 70

75 KAPITEL 6. DESIGN Figur 6.26: Klassediagram for forholdet mellem Mediator, Surface og SmResize Et sekvensdiagram over situationen kan ses i figur 6.27 Figur 6.27: Sekvensdiagram for ændring af billedets størrelse Når systemet betragter det transformerede billede bruges attributterne _originalwidth og _originalheight. De indeholder dimensionerne på det transformerede billede, og _procent har zoomfaktoren. Derved får brugeren mulighed for at se resultatet af en eventuel manipulation, inden den reelt udføres. 71

76 KAPITEL 6. DESIGN SmCrop og CropSelection I denne section vil undermenuen SmCrop samt beskæringsadorneren CropSelection blive beskrevet. Figur 6.28 viser beskæringsundermenuen, og figur 6.29 viser et billede af beskæringsadorneren. Figur 6.28: Undermenuen SmCrop Figur 6.29: Beskæringsadorneren CropSelection Menuen består af to indtastningsfelter til bredde og højde samt en checkbox til en skaleringsfunktion. Skaleringsfunktionen er en kombination af beskæring og ændring af billedets størrelse. Når skalering aktiveres, vil billedets størrelse ikke blive påvirket af beskæringsadorneren. Beskæringsadorneren kan stadigt ændres i størrelse, men proportionerne fra indtastningsfelterne vil blive holdt. Det område, som beskæringsadorneren viser, vil blive skaleret til at passe ind i de specificerede dimensioner, der er defineret i indtastningsfelterne. Udover de tre standardknapper, der er brugt i alle undermenuerne, er det muligt at benytte skabeloner i SmCrop. Brug af skabeloner fungerer på samme måde som i SmResize, dog vil skalering automatisk aktiveres, når en skabelon vælges. Beskæringsadorneren fylder hele billedet og består af fem områder: Top, Bund, Højre, Venstre og Midt. De fire første områder er alle delvist transparente, mens midten er helt transparent. Dette er gjort for at vise brugeren, hvilken del af billedet der vil være tilbage, når billedet beskæres. Midten har fire kanter, der alle kan flyttes samt fire hjørner, der kan flytte de to hosliggende sider. Kanter og hjørner flyttes ved at klikke på dem med musen og trække i den ønskede retning. Når en kant flyttes, vil den eller de omkringliggende områder 72

77 KAPITEL 6. DESIGN mindskes eller udvides, og det vil give brugeren et præcist overblik, inden billedet manipuleres. Hvis der klikkes, knappen holdes nede, og musen flyttes i det midterste område, vil området flyttes sig i takt med musemarkøren. SmCrop og CropSelection er forbundet via Surface og Mediator, så når der ændres værdi i indtastningsfelterne, vil CropSelection automatisk tilpasse sig, og ligeledes hvis beskæringsadorneren ændres, vil værdierne i indtastningsfelterne blive tilpasset. Figur 6.30: Klassediagram for SmCrop og CropSelection I figur 6.30 er vist et klassediagram for forholdet mellem SmCrop og CropSelection. CropSelection tilføjes Surface, når undermenuen SmCrop åbner. Dette udløser et kald til SmCrop.open-metoden, der via Mediator-metoden addcropselection får kaldt Surface addcropselection. Mediator og Surface indeholder begge get-metoder for bredde og højde i både SmCrop og CropSelection. Disse bruges, når CropSelection og SmCrop opdaterer sig selv jf. observatørmønsteret. SmCrop opdaterer sig selv når besked gives af MenuItem via Menu, der observerer Mediator. Surface observerer ligeledes Mediator. Følgende hændelser (i denne sammenhæng) får Mediator til at give sine observatører besked om at opdatere sig selv: Værdien i et indtastningsfelt ændres (SmCrop). Det midterste felt i CropSelection ændrer størrelse. Hvis der zoomes i billedet, samtidigt med at en CropSelection er placeret på Surface, skal CropSelection ændre sin størrelse, så den fortsat fylder hele billedet. Det midterste felt skal ligeledes holde sin proportionelle størrelse i forhold til billedet. Dette opnås ved, at CropSelection får besked på at opdatere sig selv, når Surface flyttes. Mediator-attributten percentage bruges når CropSelection skal tilpasse sig zoom. Når dimensionsproportionerne skal holdes i forbindelse med skalering, bruges proportion-attributten i SmCrop, der fungerer ligesom proportion attributten i SmResize (6.3.9). I figur 6.31 er vist et sekvensdiagram over interaktionen mellem CropSelection og SmCrop, når CropSelection ændres i størrelse. 73

78 KAPITEL 6. DESIGN Figur 6.31: Sekvensdiagram for interaktionen mellem SmCrop og CropSelection Situationen hvor værdien ændres i et SmCrop indtastningsfelt, vil interaktionen ske efter samme mønster. Indtastningen udløser et notify-kald til Mediator, der beder sine observatører update. Surface er observatør af Mediator og vil i sin update synkronisere størrelsen af CropSelection med SmCrop-indtastningsfelterne. Metoderne notify og update er en del af observatørmønsteret og er derfor ikke angivet i klassediagrammet. Detaljer om observatørmønsteret kan læses i sektion på side

79 KAPITEL 6. DESIGN SmRotateFlip Figur 6.32: Undermenuen SmRotateFlip Undermenuen SmRotateFlip er vist i figur Undermenuen indeholder to områder, hvor det ene indeholder transformationsfunktionerne, og det andet har de tre knapper; Ok, Cancel og Reset, ligesom de øvrige undermenuer. I transformationsområdet er det muligt at rotere billedet ved at klikke på rotationsknapperne, i 90 intervaller enten med uret eller mod uret afhængigt af knap. Desuden kan billedet spejlvendes horisontalt og vertikalt ved at klikke på Flip-knapperne. Nederst i transformationsområdet er placeret et potentiometer, der kan udføre en gradvis rotation af billedet. Potentiometeret har værdier mellem ±40. Denne funktion er beregnet til fin rotation af billede i 0, 1 nøjagtighed. Når undermenuen åbnes, vil der automatisk placeres en adorner, straightenadorner, over hele SurfaceBackground. Denne adorner består af fem felter, hvor det midterste er transparent og har samme dimensioner som det originale billede. De øvrige har samme farve som SurfaceBackground. Figur 6.33: Klassediagram for SmRotateFlip Når et billede transformeres af brugeren fra SmRotateFlip, gives der besked til Mediator, der kalder rotateimage eller flipimage i både Surface og Zoomer. I Surface udføres transformationen på billedet, og i Zoomer udføres det på navigationsadorneren. Når transformationerne skal udføres på billedet, skal udførelsen af den næste transformation være oprigtig. Med dette menes, at når for eksempel billedet er roteret 90, og der vælges en horisontal spejlvending, vil det reelt være en vertikal spejlvending der 75

80 KAPITEL 6. DESIGN skal udføres, da selve billedet endnu ikke er manipuleret men blot er roteret. Mediatorfunktionen isimageupright bruges i denne sammenhæng og kan ses i pseudokoden i figur Funktionen betragter den vinkel, som billedet er roteret med, og bestemmer om billedet er vist med de originale dimensioner, eller om dimensionerne er ombyttet (roteret). Funktion er placeret i Mediator, da den bruges i både SmRotateFlip og Zoomer. 1 bool isimageupright ( int a n g l e ) 2 { 3 i f ( a n g l e > 45 && a n g l e <= 45 4 a n g l e > 135 && a n g l e <= a n g l e > a n g l e < 135 && a n g l e >= 225) // Upright 7 return true ; 8 else // Turned 9 return f a l s e ; 10 } Figur 6.34: Pseudokode for isimageupright SmRotateFlip holder styr på, hvor meget billedet er roteret, og hvilken spejlvendiger der er foretaget med attributterne; rotateangle, straightenangle og flipped. StraightenAngle indeholder hvor mange grader billedet er rettet op (±40 ) og flipped, vil have to værdier, én for horisontal spejlvending og én for vertikal spejlvending. Hvis en spejlvending er udført vil værdien være 1, ellers 0. Funktionen directiontoflip bestemmer, om der skal spejlvendes horisontalt eller vertikalt for at vise brugeren den ønskede transformation. Logikken for funktionen er vist som pseudokoden i figur void d i r e c t i o n T o F l i p ( {x, y}) 2 { 3 i f ( mediator. isimageupright ( r o t a t e A n g l e ) ) 4 { 5 i f ( x == 1) 6 f l i p p e d.x = ( f l i p p e d.x == 1)? 1 : 1 ; 7 8 i f ( y == 1) 9 f l i p p e d.y = ( f l i p p e d.y == 1)? 1 : 1 ; 10 } 11 else // Image i s r o t a t e d 12 { 13 i f ( x == 1) 14 f l i p p e d.y = ( f l i p p e d.y == 1)? 1 : 1 ; i f ( y == 1) 17 f l i p p e d.x = ( f l i p p e d.x == 1)? 1 : 1 ; 18 } Figur 6.35: Pseudokode for directiontoflip StraightenAdorner og fin rotation af motiv Når en bruger vælger at trække i potentiometeret, roterer motivet omkring billedet og motivets fælles centrum. Dette vil skabe nogle blanke områder i billedet, der ikke dækkes af motivet. For at undgå disse områder skal motivet automatisk zoomes, så hele billedet fyldes ud. I figur 6.36 er vist det roterende motiv over billedet samt hvilke 76

81 KAPITEL 6. DESIGN størrelser, der bruges til at beregne, hvor meget der skal zoomes for at dække de blanke områder, der er fremhævet med lysegrå farve. Figur 6.36: Rotation af motiv på billedet For at bestemme hvor meget der skal zoomes, må højden h bestemmes. Som udgangspunkt kendes billedets dimensioner, hvor den længste side er betegnet med A og den korteste B. Desuden kendes vinklen α hvormed motivet er roteret. Ved brug af regneregler for retvinklede trekanter kan h bestemmes ved, h = a1 sin(α) For at bestemme linjestykket a1, skal først a2 findes. Ligeledes ved brug af regnereglerne for retvinklede trekanter kan størrelsen a2 kan bestemmes ved, Størrelsen a1 kan bestemmes ved, a2 = B 2 tan(α 2 ) a1 = A 2 a2 = A 2 B 2 tan(α 2 ) Og længden af h kan således bestemmes ved formlen, Den nødvendige zoomstørrelse findes ved, h = A 2 B 2 tan(α 2 ) sin(α) ZoomP rocent = B + 2h B Den korteste af billedets dimensioner, B, bruges til at finde den proportionelle forskel, da det derved sikres, at billedet bliver fyldt helt ud af motivet. 77

82 KAPITEL 6. DESIGN SmRedEye Undermenuen for SmRedEye indeholder en tekstbeskrivelse og de tre standard knapper; OK, Reset og Cancel. Tekstbeskrivelsen præsenterer konceptet for brugeren, hvilket omfatter, at alle røde øjne på billedet markeres med musen. Når musen klikkes og med knappen nede trækkes over billedet, vil der tegnes en firkant. Brugeren kan tegne så mange firkanter, som der ønskes. Når brugeren har markeret de ønskede øjne og der klikkes på OK -knappen, vil SilverlightWebservicen modtage en liste med alle markeringerne, og pixel for pixel undersøge billedet for høj koncentration af rød. Intensiteten af rød i en pixel kan findes i forhold til den gennemsnitlige koncentration af grøn og blå. redintensity = pixel.r pixel.g+pixel.b 2 Og hvis intensiteten er over den ønskede margin kan den røde farve erstattes med gennemsnittet af grøn og blå. SetP ixel( pixel.g + pixel.b, pixel.g, pixel.b) 2 Om det er nok kun at jusere farveren må verificeres i implementeringsfasen. Figur 6.37: Klassediagram for SmRedEye I figur 6.37 kan ses et klassediagram for SmRedEye. De selektioner brugeren tegner på billedet er instanser af klassen RedEyeSelection, der er placeret i Surface-listen redeyeselection. Fra SmRedEye kan brugeren fjerne alle de tegnede RedEyeSelection ved at klikke på Reset-knappen. Denne handling kalder metoden resetredeyeselections i Surface via metoden med samme navn i Mediator. Når en RedEyeSelection placeres på Surface, kaldes Surface metoden placeredeyeselection, der sætter bredde, højde samt x og y koordinator for, hvor på billedet selektionen er placeret. Når brugeren aktiverer korrektionen, vil samtlige RedEyeSelection-instanser blive sendt til SilverlightWebservicen. Her gennemgås hver pixel for hvert valgt område og den røde farve justeres hvis nødvendigt. Hvis der zoomes i billedet, skal samtlige RedEyeSelection instanser have kaldt deres adjusttozoom-metode. Denne justerer højde, bredde og placering i forhold til, hvor meget der er zoomet i det originale billede. 78

83 KAPITEL 6. DESIGN Abstract Command og operationsobjekter Den abstrakte klasse Abstract Command har to funktioner, der er tilgængelige til alle operationsobjekterne, der nedarver fra den. Den ene funktion er displayimage, der kaldes, når billedet modtages fra SilverlightWebservicen, og den anden er getproxy, der opsætter forbindelsen til SilverlightWebservicen. Alle operations objekterne, der nedarver fra Abstract Command, implementerer icommand-interfacet. De har derfor alle Execute-metoden, der kalder SilverlightWebservicen. displayimage(imagetransporter) Funktionen udfører de operationer, der skal bruges, når et nyt billede kommer ind i Silverlightapplikationen og skal vises på skærmen. Dette omfatter konvertering fra bytearray til bitmap, at billedet placeres, centreres og eventuelt zoomes, hvis det er større end det tilgængelige område på SurfaceBackground. Desuden sættes historikattributterne i Mediator. getproxy Opsætter de bindinger, der er nødvendige for at kommunikere med SilverlightWebservicen. Dette vil varierer afhængigt af hvilken type webservice der bruges, og vil derfor blive beskrevet i kapitlet om implementering Crop Dette objekt kalder crop-funktionen i SilverlightWebservicen. Objektet har fire attributter, der skal sættes, inden Execute kan kaldes. De fire attributter er: width, height samt x- og y-koordinater. Funktionen validerer de angivede værdier, så beskæringen er inden for billedets dimensioner. Dette objekt holdes af SmCrop-undermenuen Resize Dette objekt kalder resize-funktionen i SilverlightWebservicen. Resize har to attributter, width og height, der begge skal sættes, før Execute kaldes. Begge attributter skal være større end nul, før SilverlightWebservicen kaldes RotateFlip Dette objekt kalder rotateflip-funktionen i SilverlightWebservicen. Objektet har tre attributer; degrees, x og y. Degrees specificerer, hvor mange grader billedet skal roteres. x og y bestemmer, om billedet skal spejlvendes horisontalt og/eller vertikalt. En instans af RotateFlip er placeret i SmRotate-undermenuen GrayScale Dette objekt kalder grayscale-funktionen i SilverlightWebservicen. GrayScale har ingen attributer. Objektet kalder webservicen og returnerer det manipulerede billede. En instans af GrayScale holdes af et menupunkt med titlen Gray Scale. 79

84 KAPITEL 6. DESIGN Undo og Redo Disse objekter kalder henholdsvis undo- og redo-funktionerne i SilverlightWebservicen. Hverken Undo- eller Redo-operationsobjekterne har nogle attributter. De kalder deres tilsvarende funktion i SilverlightWebservicen, der behandler historikken og returnerer et billede Load Dette objekt kalder load-funktionen i SilverlightWebservicen. To attributter skal sættes, før webservicen kan kaldes. Disse er itemid og listid, der begge bruges til at finde det rigtige billede. Værdierne skal valideres, da brugeren har mulighed for, at ændre den i Query String og derved også i Silverlightapplikationen. Valideringen vil ske i Share- PointWebservicen, og en eventuel fejl må sendes retur igennem systemet, så brugeren kan præsenteres for en sigende fejlbesked. En instans af Load vil automatisk blive kaldt som en del af applikationsinitialiseringen Save Dette objekt kalder save-funktionen i SilverlightWebservicen. Objektet har ingen attributer, da de nødvendige informationer allerede er i SilverlightWebservicens globale instans af WorkingImage. En instans af Save bliver holdt af et menupunkt hvor funktionaliteten ved et klik, er vist med et ikon SaveAs Dette objekt kalder saveas-funktionen i SilverlightWebservicen. Attributten filename skal sættes før Execute kan kaldes. Når den nye instans af billedet er oprettet i SharePoint-listen, skal reservationen af det originale billede fjernes. Dette gøres ved at kalde en instans af Cancel-operationsobjektet. En instans af SaveAs bliver holdt af et menupunkt, hvor funktionaliteten ved et klik er vist med et ikon Cancel Dette objekt kalder Cancel-funktionen i SilverlightWebservicen. Operationsobjektet har ingen attributter, da de nødvendige informationer allerede er i instansen af WorkingImage i SilverlightWebservicen. I webservicen fjernes reservationen af det originale billede. Cancel holdes af et menupunkt med samme navn GetTemplates Dette objekt kalder loadtemplates-funktionen i SilverlightWebservicen. Klassen har ingen attributer og modtager en liste Template-instanser fra SilverlightWebservicen. En instans af GetTemplates kaldes automatisk som en del af applikationsinitialiseringen. Webservicen returnerer et liste med Template-instanser, der gemmes i Mediator, så undermenuerne kan bruge dem. 80

85 KAPITEL 6. DESIGN ResetToOriginal Dette objekt kalder getoriginal-funktionen i SilverlightWebservicen. Objektet har ingen attributter og når resultatet, det originale billede, fra webservicen modtages, vil historikken i applikationen opdateres, da getoriginal-funktionen nulstiller historikken. 81

86 KAPITEL 6. DESIGN 6.4 Konklusion af design Dette designdokument indeholder en beskrivelse af systemarkitekturen samt hvordan de forskellige klasser er struktureret og interagerer i Silverlightapplikationen. Den overordnede arkitektur for systemet er designet og består af to webservices og en Silverlightapplikation. Den ene webservice, kaldet SilverlightWebservicen, forbinder Silverlightapplikationen med serveren, og den anden, kaldet SharePointWebservicen, forbinder SilverlightWebservicen med SharePoints API. Silverlightapplikationen er brugergrænsefladen til systemet og udfører ingen manipulationer på billedet. Applikationen beder SilverlightWebservicen om at udføre manipulationerne og modtager det manipulerede billede retur. Det originale billede er en fil på SharePoint-serveren og derfor bruges SharePointWebservicen til at hente og gemme billedet i den relevante SharePoint-liste. I designet af Silverlightapplikationener er der brugt designmønstre, der giver et generaliseret og forhåbentligt genkendeligt design i dele af applikationen. Mediatormønsteret er brugt i forbindelse med en central kontrolenhed, Mediator, der styrer interaktionen mellem objekter i brugergrænsefladen. Desuden er et observatørmønster brugt i situationer, hvor flere objekter overvåger det samme objekt. Command- og CommandHoldermønstrene er brugt i forbindelse med operationsobjekter og deres kommunikation til SilverlightWebservicen. Jeg har designet en menustruktur til Silverlightapplikationen, da en sådan ikke er en del af Silverlight-komponentbiblioteket. Menuen består af menupunkter og undermenuer. Menupunkter og undermenuer er en del af CommandHolder-mønsteret og kan indeholde operationsobjekter, der kalder SilverlightWebservicen og modtager et manipuleret billede retur. Der er designet adorners som hjælp til brugeren i forbindelse med finrotation af billedet, beskæring og korrektion af røde øjne. Når billedets motiv skal finroteres, vil der opstå blanke områder på billedet, og dette er løst ved at udføre en automatisk zoom, der zoomer billedet præcist så meget, så de blanke områder bliver dækket. En adorner er designet i forbindelse med beskæringsfunktionaliteten. Adorneren placeres over billedet og giver brugeren mulighed for visuelt at vælge det område af billedet, der skal beskæres til det nye billede. Når røde øjne skal korrigeres, kan brugeren markere områder på skærmen, hvor korrektionen skal udføres. Hvert af disse områder er en rektangulær adorner. Ved at placere billedet oven på et Silverlight Canvas kan pixelplaceringen i billedet findes. Dette bruges i forbindelse med adorners, da visualiseringen kan omsættes til pixelkoordinater og bruges som input til operationsobjekterne. I forbindelse med brug af skabeloner er der to muligheder. Enten implementeres de i en SharePoint-liste ellers i en XML-fil. Jeg har udskudt denne beslutning til implementeringen, da valget vil være afhængigt af tidsplanen. 82

87 Kapitel 7 Implementering Indhold 7.1 Forord SharePoint Custom Action Feature ImageManipulation.aspx Webservices SharePointWebservice SilverlightWebservice Silverlightapplikationen MainPage og Mediator Menu, MenuItem og Submenu Surface og SurfaceBackground Zoomer Helper og Dialog isubmenucontent AbstractCommand og operationsobjekter Skabeloner Fejlhåndtering Konklusion af implementering

88 KAPITEL 7. IMPLEMENTERING 7.1 Forord Jeg har implementeret en Silverlightapplikation til billedmanipulation, der er integreret i Microsoft SharePoint. Jeg har desuden implementeret to webservices, der hjælper Silverlightapplikationen med kommunikationen mellem server og SharePoint. Den ene webservice kaldes SilverlightWebservicen og forbinder Silverlightapplikationen, der køres i klientens browser, med serveren, hvor manipulationerne kan udføres. Denne struktur har været en nødvendighed, da Silverlight ikke understøtter pixeladgang i et eksisterende billede. Den anden webservice kaldes SharePointWebservicen og forbinder SilverlightWebservicen med SharePoint APIet. SharePointWebservicen henter og gemmer billedet i SharePoint listen samt håndterer SharePoints versionshåndtering, hvor filer kan reserveres (eng. check out). Følgende kapitel omhandler implementeringen af systemet og belyser også deployering. I starten af hver sektion er der en henvisning til relevant kildekode samt eventuel andet supplerende materiale, der er placeret i appendiks. Jeg har valgt at fremhæve de dele af implementeringen, der afviger fra designet samt områder der er grundlæggende for systemet eller er særlig interessante. 7.2 SharePoint Kildekode: sektion , side 150. Denne sektion omhandler integrationen i SharePoint. Det er nødvendigt at tillade brugen af Silverlight i SharePoint ved at tilføje egenskaber til SharePoint web.config-filen. web.config-filen indeholder alle nødvendige konfigurationsindstillinger for SharePointWebapplikationen. Derfor skal det sikres, at SharePoint understøtter Silverlightapplikationer, hvilket den ikke gør som standard. Den opdaterede web.config-fil er vist i appendikssektion , side 151. Udover ændringerne til SharePoint web.config-filen skal det sikres, at en kopi af Silverlight.dll eksisterer i SharePoint-serverens GAC (Global Assembly Cache). Når disse to indstillinger er udført, vil SharePoint-serveren være klar til at køre Silverlightapplikationer Custom Action Feature Den implementerede feature tilføjer et menupunkt til kontekstmenuen for listeelementer i dokumentbiblioteker 5, hvor filen er af type JPG eller PNG. Det ekstra menupunkt henviser browseren til ImageManipulation.aspx og tilføjer information om dokumentbibliotekets GUID 6, der er en unik identifikationsnøgle, samt det valgte listeelements id. Featuren består af to filer: feature.xml og ManipulateImageFeature.xml. 5 Et dokumentbibliotek er en SharePoint-liste, der indeholder en samling af filer med tilhørende metadata. 6 GUID står for Global Unique Identifier, og bruges som unikt referencenummer til bl.a. lister og listeelementer i SharePoint. 84

89 KAPITEL 7. IMPLEMENTERING Feature.xml er en metadatafil for featuren, der navngives efter SharePoints featurekonvention og indeholder titlen på featuren, dens GUID og en række attributter samt en henvisning til ManipulateImageFeature.xml, der indeholder selve featuren, der er beskrevet med deskriptiv xml. Den definerer, at der skal tilføjes et menupunkt (Custom Action) til kontekstmenuen (EditControlBlock), og når menupunktet aktiveres, skal der henvises til ImageManipulation.aspx. Desuden skal informationen om listeelementet (id), listen, filens placering og serverstien til listen medtages som en del af Query String. Filens placering skal bruges i forbindelse med Gem Som-funktionaliteten og serverstien til listen skal bruges, når der skal navigeres tilbage fra Silverlightapplikationen. Når begge featurefiler er placeret i feature-mappen på SharePoint-serveren, skal den tilmeldes og aktiveres. Dette gøres via SharePointapplikationen stsadm, der kaldes i en kommando prompt fra stien, %COMMONPROGRAMFILES%\microsoft shared\web server extensions\12\bin} Kommandoer for installering og aktivering kan ses herunder, stsadm -o installfeature -name <FeatureFolderName> stsadm -o activatefeature -name <FeatureFolderName> -url Hvis der skal ændres i featuren er det nødvendigt, at installere og aktivere den igen, da SharePoint cacher features. Dette kan kun ske, hvis den først er blevet deaktiveret og afinstalleret. stsadm -o deactivatefeature -name <FeatureFolderName> -url stsadm -o uninstallfeature -name <FeatureFolderName> ImageManipulation.aspx ImageManipulation.aspx benytter sig af silverlight.master, der er et sidelayout tilpasset visningen af Silverlightapplikationen. Selve Silverlightapplikationen deklareres i et object-tag, hvor attributten source henviser til XAP-pakkens fysiske placering på serveren. Attributten initparams definerer Silverlightapplikationens opstartsparametre, og disse hentes fra Query String. 85

90 KAPITEL 7. IMPLEMENTERING 7.3 Webservices I følgende sektion vil implementering og deployering af de to webservices blive beskrevet SharePointWebservice Kildekode: sektion , side 161. Webservicen består af fire metoder; GetImage, SaveImage, SaveImageAs og Cancel. Alle metoderne udfører deres arbejde med højeste sikkerhedsindstilling, hvilket er en nødvendighed, da de kaldes af en webservice, der ikke har rettigheder i SharePoint. Ved at definere en delegate (en funktions pointer i bl.a. C++), der sættes som parameter til funktionen RunWithElevatedPrivileges, vil der ikke opstå sikkerhedsproblematikker i forbindelse med indsættelse i lister etc. Implementeringen af selve funktionaliteterne har været uproblematiske og afviger ikke fra designet Deployment Servicen er implementeret som en custom webservice i SharePoint. Dette gøres ved at placere den kompilerede.dll-fil i GAC (Global Assembly Cache), der normalt er placeret i mappen C:\Windows\assembly. Derudover skal wsimsharepoint.asmx placeres i Layouts-mappen på SharePointserveren. wsimsharepoint.asmx indeholder en henvisning til.dll-filen og skal registreres i SharePoint via Visual Studio kommandoprompt fra placeringen, %COMMONPROGRAMFILES%\microsoft shared\web server extensions\12\template\layouts køres, disco Denne operation opretter to nye filer; wsimsharepoint.disco og wsimsharepoint.wsdl. Filerne indeholder information om indstillinger for webservicen samt hvilke metoder, der er tilgængelige udefra. Begge filer skal have erstattet deres headerkode, og derudover skal der udføres små ændringer i begge filer. Ændringerne kan ses i appendiks-sektion side SilverlightWebservice Kildekode: sektion , side 163. Når en WCF-webservice designes, skal det afgøres, hvordan den skal kommunikere med sine klienter. Kommunikationsforbindelsen kaldes en binding, og Silverlight understøtter kun basichttpbinding. Det er derfor nødvendigt at få ændret WCF-projektets web.config-fil til at understøtte dette samt få bindingen sat til at referere til den primære klasse i webservicen. I dette tilfælde er den primære klasse eller service contract, jf. 86

91 KAPITEL 7. IMPLEMENTERING WCF-terminologi, wsdata. I wsdata er alle metoder, der skal være tilgængelige til klienter, markeret med [OperationContract] før metodedefinitionen. Ligeledes vil alle dataklasser, der skal være tilgængelige på begge sider af webservicen, markeret med [DataContract] før klassedefinitionen og [DataMember()] før eventuelle egenskaber (eng. properties). Dette omfatter tre klasser, der bruges til at transportere data mellem SilverlightWebservicen og Silverlightapplikationen, nemlig; ImageTransporter, RedEye og Template. Disse klasser kan derfor også bruges i Silverlightapplikationen, når først denne er bundet til webservicen Funktionalitet Funktionaliteten i SilverlightWebservicen afviger ikke fra designet. Dog har jeg valgt at organisere operationerne med Command-mønsteret for at give en mere overskuelig kode. Manipulation af billede Alle manipulationer af billedets motiv er udført ved hjælp af Graphics-klassen i.net, der giver mulighed for beskæring, ændring af størrelse samt rotation af billedet. Dette kan ses i operationsklasserne; Crop, Resize og Rotate. I figur 7.1 er vist et eksempel fra Execute-metoden i operationsklassen Crop, 1 public void Execute ( ) 2 { 3 newimg. S e t R e s o l u t i o n ( 7 2, 72) ; 4 5 Graphics g = Graphics. FromImage ( newimg ) ; // Nye b i l l e d e der s k a l a r b e j d e s på 6 g. SmoothingMode = SmoothingMode. HighQuality ; 7 g. InterpolationMode = InterpolationMode. HighQualityBicubic ; 8 g. PixelOffsetMode = PixelOffsetMode. HighQuality ; 9 10 g. DrawImage ( 11 workingimage. currentimage, // O r i g i n a l e b i l l e d e 12 new Rectangle ( 0, 0, w, h ), // S t ø r r e l s e n på d e t nye b i l l e d e 13 x, // Hvor på b i l l e d e t s k a l der s t a r t e s (X) 14 y, // Hvor på b i l l e d e t s k a l der s t a r t e s (Y) 15 w, // S t ø r r e l s e n der s k a l t a g e s f r a d e t gamle b i l l e d e (W) 16 h, // S t ø r r e l s e n der s k a l t a g e s f r a d e t gamle b i l l e d e (H) 17 GraphicsUnit. P i x e l ) ; g. Dispose ( ) ; 20 } Figur 7.1: Execute-metoden for Crop-operationsklassen DrawImage-metoden i Graphics-klassen har 30 overloadmetoder og kan udføre mange manipulationer på et Bitmap-billede. I overstående eksempel tages der udgangspunkt i det nuværende billede (workingimage.currentimage) og der defineres, hvor stort det nye billede skal være samt hvilken del af det nuværende billede, der skal vises på det nye. Inden DrawImage defineres forskellige indstillinger for Graphics instansen, så billedekvaliteten bliver så høj som muligt. Pixel adgang Pixel adgang i forbindelse med farvejusteringer er opnået ved GetPixel- og SetPixelmetoderne i Bitmap-klassen. Dette bliver gjort i operationsklasserne; RedEyeCorrection og GrayScale. I figur 7.2 følger Execute-metoden i GrayScale-operationsklassen. 87

92 KAPITEL 7. IMPLEMENTERING 1 public void Execute ( ) 2 { 3 for ( int j = 0 ; j < workingimage. currentimage. S i z e. Height ; j++) 4 { 5 for ( int i = 0 ; i < workingimage. currentimage. S i z e. Width ; i ++) 6 { 7 Color c o l ; 8 c o l = workingimage. currentimage. GetPixel ( i, j ) ; 9 workingimage. currentimage. S e t P i x e l ( i, j, 10 Color. FromArgb ( ( c o l.r + c o l.g + c o l.b) / 3, 11 ( c o l.r + c o l.g + c o l.b) / 3, 12 ( c o l.r + c o l.g + c o l.b) / 3) ) ; 13 } 14 } 15 } Figur 7.2: Execute-metoden for GrayScale-operationsklassen Metoden itererer igennem billedet pixel for pixel og udfører farvemanipulationen på hver enkel pixel. Hver farve sættes til gennemsnittet af farvekoncentrationen for henholdsvis rød, grøn og blå, der giver et passende gråtoneniveau. Forbindelse til SharePointWebservicen Forbindelsen til SharePointWebservicen er sat op i SilverlightWebservice-projektet som en webreference og benyttes i operationsklasserne; LoadImage, SaveImage, SaveImageAs. Når SharePointWebservicen skal bruges, oprettes en instans af serviceklassen SharePointDataService, og fra denne kan SharePointWebservicens metoder kaldes. Skabeloner Skabeloner er implementeret som XML. Grundet tidspres blev denne løsning valgt selvom det måske havde været mest hensigtsmæssigt med en SharePoint-liste. Listen giver mulighed for et højere niveau af sikkerhed i forbindelse med flere brugere, der samtidigt opretter eller ændrer skabelonerne. Metoden loadtemplates, kaldes når Silverlightapplikationen startes og henter de eksisterende skabeloner fra et XML-dokument placeret i webservicen. Skabelonerne trækkes ud af XML-dokumentet og organiseres i en liste bestående af Template-instanser. Denne liste sendes til Silverlightapplikationen, der så kan bruge skabeloner. Metoden savetemplates modtager to lister fra Silverlightapplikationen; den ene med de Template-instanser der skal oprettes, den anden med dem der skal slettes. Et eksempel på XML-strukturen for skabeloner er vist i appendiks sektion på side Deployering af SilverlightWebservice Servicen er oprettet på SharePointserveren som en særskilt service og er sat op i IIS (Internet Information Services) som en webapplikation. I Silverlightprojektet skal servicen tilknyttes, før projektet kompileres og kopieres ud på serveren. Dette er en nødvendighed, da tilknytningen overfører informationer om serviceklasser ([DataContract]), så de kan benyttes i Silverlightapplikationen. En trinvis guide er beskrevet i appendiks side

93 KAPITEL 7. IMPLEMENTERING 7.4 Silverlightapplikationen I følgende sektion vil delkomponenter fra designet blive gennemgået. Ændringer og væsentlige detaljer omkring implementeringen bliver beskrevet og kommenteret. Screenshots af brugergrænsefladens elementer er placeret i appendiks-sektion side 142. I figur 7.3 kan ses en opdateret udgave af objektmodellen for Silverlightapplikationen. Figur 7.3: Klassediagram for den opdaterede objektmodel 89

94 KAPITEL 7. IMPLEMENTERING MainPage og Mediator Screenshot: , s. 142 MainPage.xaml: (s. 184) MainPage.xaml.cs: (s. 185) Mediator.cs: (s. 186) Klasse UserInterface er ikke blevet implementeret, og dens formål er blevet integreret i MainPage. MainPage inderholder grundlayoutet for applikationen og har to indholdsområder, der bliver udfyldt af Mediator. Disse er menuholder og SurfaceBackground- Holder. Mediator bliver skabt, når MainPage bliver initialiseret og instantierer alle GUI-elementerne i funktionen initmediator. MainPage slutter sin initialiserering med at kalde Mediator-metoden loadimage, der bruger operationsobjektet LoadImage til at hente det aktuelle billede fra SharePoint. Udover at instantiere alle GUI-elementerne kalder initmediator operationsobjektet GetTemplates, der henter listen med skabeloner fra en XML-fil i SilverlightWebservicen. I MainPage er der tilføjet en statuslinje i bunden af siden. Denne er brugt i forbindelse med fejlrettelse af kode. Statuslinjen bruges delvist til statusbeskeder til brugeren, da der i den sammenhæng også bruges idialogcontent. Mediator-klassen er en singleton og systemets centrale kontrolenhed. Klassen indeholder en lang række funktioner, som systemets objekter bruger, når de skal interagere. Metoderne i Mediator er grupperet i regioner for at gøre koden mere overskuelig. Mediator er samtidigt systemets tilstandsmaskine og har i attributten state, defineret hvilken tilstand systemet aktuelt er i. Systemet kan være i seks tilstande; Base, Rotate, Resize, Crop, RedEye og Dialog. Disse tilstande skiftes, når enten en undermenu åbnes/lukkes eller en dialog vises Menu, MenuItem og Submenu Menu.xaml: (s. 284) Menu.xaml.cs: (s. 285) MenuItem.xaml: (s. 287) MenuItem.xaml.cs: (s. 289) Submenu.xaml: (s. 293) Submenu.xaml.cs: (s. 294) Designet var ikke muligt at implementere, da Silverlight User Controls (klasser med XAML tilknytning) ikke kan nedarve fra andre User Controls. Submenu er redesignet fra en abstrakt klasse til en container, der indeholder det ydre fælleslayout. Submenu indeholder undermenuensgrænseflade, der er en instans af isubmenucontent. isubmenucontent er et interface, som alt undermenuindhold implementerer. Mediator-klassen har referencer til samtlige isubmenucontent-instanser, da de interagerer med Surface- og Zoomer-objekterne. Den strukturelle ændring for menuelementerne er vist i klassediagrammet i figur

95 KAPITEL 7. IMPLEMENTERING Figur 7.4: Klassediagram for den opdaterede menustruktur 91

96 KAPITEL 7. IMPLEMENTERING Dette medfører at undermenuklasserne, der alle før startede med bogstaverne Sm, nu er omdøbt og starter med bogstaverne smc. Der er implementeret genvejstaster til alle punkter i menuen samt de tre standard knapper i undermenuerne. Dette er gjort via en global klasse ShortCuts, der er instantieret i Mediator. Når der klikkes på en tastaturtast, vil MainPage fange hændelsen og kalde Mediator-metoden hit, der kalder shortcuts.keyhit med den aktuelle tast som parameter. I keyhit evalueres hvilken funktionalitet, der skal aktiveres på baggrund af tastningen. Alle menupunkter er referet til i ShortCuts-klassen og kan aktiveres ved et kald til deres hit-funktion. Undermenuerne har også fået tilføjet en hit-metode, der tager indtastningen som argument. Dette bruges til at aktivere knapper i undermenuen med genvejstaster. Genvejstasterne kan ses i appendiks sektion side 146. I alle indtastningsfelter, hvor den forventede indtastning er et ikke-bogstav, er der implementeret en begrænser på, så indtastninger holdes til det forventede. Dette kontrolleres i Mediator-funktionen onlynumbers, der kaldes, hver gang der tastes i et indtastningsfelt, hvor tal forventes. Funktionen undersøger indtastningen og returnerer en boolsk værdi for, om hændelsen er håndteret eller ej. Hvis der modtages falsk retur, vil indtastningen blive placeret i indtastningsfeltet. Hvis sandt returneres, vil indtastningen ikke blive udført på indtastningsfeltet. onlynumbers håndterer også genvejstastninger, der udføres, når brugeren taster i et indtastningsfelt, ved at sende indtastningen videre til ShortCuts-metoden keyhit og samtidigt fjerne fokus fra indtastningsfeltet. Dette er muligt, da feltet kun forventer og accepterer tal. Metoden onlynumbers kan ses i figur public bool onlynumbers ( KeyEventArgs e ) 2 { 3 i f ( ( Key. D0 <= e. Key && e. Key <= Key. D9) 4 ( Key. NumPad0 <= e. Key && e. Key <= Key. NumPad9) 5 e. Key == Key. Back 6 e. Key == Key. Tab 7 e. Key == Key. D e l e t e ) 8 return f a l s e ; 9 10 else i f ( Keyboard. M o d i f i e r s == ModifierKeys. S h i f t ) 11 { 12 // S h o r t c u t s h i t i n s i d e t e x t b o x 13 s h o r t c u t s. k e y h i t ( e. Key ) ; // remove f o c u s from t e x t b o x 16 i f ( s t a t e == S t a t e s. Crop ) 17 smc_crop. dofocus ( ) ; 18 else i f ( s t a t e == S t a t e s. R e s i z e ) 19 smc_r e s i z e. dofocus ( ) ; 20 else i f ( s t a t e == S t a t e s. Rotate ) 21 smc_r o t a t e. dofocus ( ) ; return true ; 24 } else 27 return true ; 28 } Figur 7.5: onlynumbers-metoden 92

97 KAPITEL 7. IMPLEMENTERING Surface og SurfaceBackground Surface.xaml: (s. 225) Surface.xaml.cs: (s. 226) SurfaceBackground.xaml: (s. 230) SurfaceBackground.xaml.cs: (s. 231) Surface-klassen holder billedet samt det Canvas, billedet er placeret over. Ved at placere Canvas under billedet, kan pixelplacering fanges, når musen bevæger sig over billedet. Canvas og billedet er derfor præcis samme størrelse. Surface benytter sig af Mediator attributten state til at afgøre, hvordan brugerens interaktion med musen skal håndteres. I metoden surface_mouseleftbuttondown håndteres situationen, hvor brugeren klikker på billedet og kan ses i figur private void s u r f a c e_mouseleftbuttondown ( object sender, MouseButtonEventArgs e ) 2 { 3 //SELECTION 4 i f ( mediator. S t a t e == Mediator. S t a t e s. Crop &&! mediator. s c a l e ) 5 a d d S e l e c t o r = true ; 6 7 else i f ( mediator. S t a t e == Mediator. S t a t e s. RedEye ) 8 { 9 RedEyeDrag = true ; 10 r e c t S t a r t = e. G etposition ( this ) ; 11 r e d e y e s e l e c t i o n = new RedEyeSelection ( e. G etposition ( this ), this ) ; 12 } 13 } Figur 7.6: surface_mouseleftbuttondown-metoden Hvis Mediator er i beskæringstilstand (crop), sættes den boolske variabel addselector til sand. Denne bruges, hvis brugeren efterfølgende trækker musen over Surface, mens venstre museknap stadigt er holdt nede. Denne situation udløser placeringen af en ny CropSelection på Surface. CropSelection dækker hele Surface og fanger derfor alle klik med musen. Men når der klikkes på yderområderne i CropSelection, lades hændelsen passere videre i elementhierarkiet og kan derfor fanges af Surface. Hvis Mediator er i RedEye,tilstand, vil musens aktuelle placering blive gemt i variablen rectstart. Denne skal bruges, når brugeren efterfølgende trækker rektanglet, så det dækker området med eventuelle røde øjne. Når en ny instans af RedEyeSelection oprettes, er det med en reference til Surface. Dette er en nødvendighed når rektanglet skal flyttes rundt på Surface, da dets aktuelle placering kun kan bestemmes med en reference til kanvaset. Når musen bevæger sig over Canvas, vil hændelsen blive fanget, og surface_mousemovemetoden blive kørt. Metoden er vist i figur 7.7. Hvis den boolske variabel RedEyeDrag er blevet sat til sand, og surface_mousemovemetoden kaldes, vil rektanglet blive oprettet, hvis det ikke allerede eksisterer. Rektanglet tilføjes Surface, så det er synligt for brugeren samt listen redeyeselections, der bruges, når SilverlightWebservicen kaldes med henblik på at korrigere røde øjne. Udover at blive tilføjet bliver rektanglet også placeret og dimensioneret. SurfaceBackground bruges som container til andre GUI-elementer, der skal være synlige for brugeren. Surface og Dialog bliver placeret på SurfaceBackground. Det er 93

98 KAPITEL 7. IMPLEMENTERING 1 private void s u r f a c e_mousemove ( object sender, MouseEventArgs e ) 2 { 3 i f ( a d d S e l e c t o r ) 4 { 5 addcropselection ( e. G etposition ( this ) ) ; 6 a d d S e l e c t o r = f a l s e ; 7 } 8 9 i f ( c r o p S e l e c t i o n!= null ) 10 c r o p S e l e c t i o n. move ( e. G etposition ( this ) ) ; // When s i z i n g t h e s e l e c t i o n i f ( RedEyeDrag ) 13 { 14 i f (! s u r f a c e. Children. Contains ( r e d e y e s e l e c t i o n ) ) 15 { 16 s u r f a c e. Children. Add( r e d e y e s e l e c t i o n ) ; 17 r e d E y e S e l e c t i o n s. Add( r e d e y e s e l e c t i o n ) ; 18 Canvas. SetZIndex ( r e d e y e s e l e c t i o n, 15) ; 19 } Point ptcurrent = e. GetPosition ( this ) ; 22 Point ptnew = new Point ( ) ; // Set Width (X) 25 i f ( r e c t S t a r t.x < e. G etposition ( this ).X) // Højre 26 r e d e y e s e l e c t i o n. setwidth = ptcurrent.x r e c t S t a r t.x; 27 else 28 r e d e y e s e l e c t i o n. setwidth = r e c t S t a r t.x ptcurrent.x; // Set Height (Y) 31 i f ( r e c t S t a r t.y > e. G etposition ( this ).Y) // Over 32 r e d e y e s e l e c t i o n. s e t H e i g h t = r e c t S t a r t.y ptcurrent.y; 33 else 34 r e d e y e s e l e c t i o n. s e t H e i g h t = ptcurrent.y r e c t S t a r t.y; // Adjust S e l e c t i o n s l o c a t i o n 37 ptnew.x = ( r e c t S t a r t.x < ptcurrent.x)? r e c t S t a r t.x : ptcurrent.x; 38 ptnew.y = ( r e c t S t a r t.y > ptcurrent.y)? ptcurrent.y : r e c t S t a r t.y; 39 r e d e y e s e l e c t i o n. s e t L o c a t i o n ( ptnew ) ; // Adjust s e l e c t i o n s l o c a t i o n on Surface 42 Canvas. S e t L e f t ( r e d e y e s e l e c t i o n, ptnew.x) ; 43 Canvas. SetTop ( r e d e y e s e l e c t i o n, ptnew.y) ; 44 } 45 } Figur 7.7: surface_mouseleftbuttondown-metoden ligeledes SurfaceBackground, der bruges til at registrere, hvis browservinduet ændrer størrelse. Denne hændelse fanges, og Mediator-metoden background_sizechanged kaldes. Metoden placerer centrum af Surface, og derved billedet, i centrum af SurfaceBackground og justerer zoomniveauet, så hele billedet er synligt. 94

99 KAPITEL 7. IMPLEMENTERING Surface og CropSelection Screenshot: , s. 144 CropSelection.xaml: (s. 254) CropSelection.xaml.cs: (s. 257) CropSelection består af otte områder, der alle kan ændre størrelsen på midten. Disse otte områder består af fire kanter og fire hjørner, der kan ses i figur 7.8. Figur 7.8: Opbygning af CropSelection Brugergrænsefladen for CropSelection er opbygget af et stort Grid (Silverlight Control), der fungerer som en tabel, hvor de yderste felter er fyldt med en semitransparent rektangel, og det midterste består af endnu et Grid, hvor de yderste felter indeholder kanter og hjørne, og det midterste er transparent. CropSelection kan være i elleve tilstande; fire tilstande for at trække i hjørnerne, fire tilstande for at trække i kanterne, en tilstand for at flytte det midterste område, en tilstand for at genskabe midten samt en basistilstand der bruges, når ingen af de førnævnte er i brug. Hvis brugeren klikker på ydreområdet og trækker musen, vil midten genskabes. Dette sker ved at lade klikket være uhåndteret i OuterRectangle_MouseLeftButtonDown, og hændelsen vil fortæstte til Surface, der fanger den og laver en ny instans af CropSeletion. Tilstand vælges, når brugeren klikker på en kant, et hjørne, midten eller ydreområdet. Når musen efterfølgende flyttes, vil move-metoden i CropSeletor blive kaldt. Metoden indeholder tilstandsmaskinen for CropSelection og kan ses i figur

100 KAPITEL 7. IMPLEMENTERING 1 public void move ( Point ptcurrent ) 2 { 3 mediator. c a l c u l a t e P r o p o r t i o n s ( ) ; // Needed to maintain p r o p o r t i o n s when s c a l i n g 4 5 switch ( s e l e c t o r S t a t e ) // Which p a r t o f t h e border i s b e i n g dragged? 6 { 7 case s e l e c t o r S t a t e s. Moving : 8 ptlocation.x = p t S t a r t.x + ptcurrent.x ptmousestart.x; 9 ptlocation.y = p t S t a r t.y + ptcurrent.y ptmousestart.y; 10 a d j u s t O u t e r R e c t a n g l e s ( ) ; 11 break ; case s e l e c t o r S t a t e s. S i z i n g : // The s e l e c t i o n i s b e i n g c r e a t e d 14 s i z e ( ptcurrent ) ; 15 break ; case s e l e c t o r S t a t e s. Bottom_L e f t : 18 adjustwidthfromleft ( ptcurrent, s e l e c t o r S t a t e s. Bottom_Right ) ; 19 i f (! mediator. s c a l e ) 20 adjustheightfrombottom ( ptcurrent, s e l e c t o r S t a t e s. Top_L e f t ) ; 21 break ; case s e l e c t o r S t a t e s. Bottom_Middle : 24 adjustheightfrombottom ( ptcurrent, s e l e c t o r S t a t e s. Top_Middle ) ; 25 break ; case s e l e c t o r S t a t e s. Bottom_Right : 28 i f (! mediator. s c a l e ) 29 adjustwidthfromright ( ptcurrent, s e l e c t o r S t a t e s. Bottom_L e f t ) ; 30 adjustheightfrombottom ( ptcurrent, s e l e c t o r S t a t e s. Top_Right ) ; 31 break ; case s e l e c t o r S t a t e s. Middle_L e f t : 34 adjustwidthfromleft ( ptcurrent, s e l e c t o r S t a t e s. Middle_Right ) ; break ; case s e l e c t o r S t a t e s. Middle_Right : 37 adjustwidthfromright ( ptcurrent, s e l e c t o r S t a t e s. Middle_L e f t ) ; break ; case s e l e c t o r S t a t e s. Top_L e f t : 40 i f ( mediator. s c a l e ) 41 adjustheightfromtop ( ptcurrent, s e l e c t o r S t a t e s. Bottom_Right ) ; 42 else 43 { 44 adjustwidthfromleft ( ptcurrent, s e l e c t o r S t a t e s. Top_Right ) ; 45 adjustheightfromtop ( ptcurrent, s e l e c t o r S t a t e s. Bottom_L e f t ) ; 46 } 47 break ; case s e l e c t o r S t a t e s. Top_Middle : 50 adjustheightfromtop ( ptcurrent, s e l e c t o r S t a t e s. Bottom_Middle ) ; break ; case s e l e c t o r S t a t e s. Top_Right : 53 i f (! mediator. s c a l e ) 54 adjustwidthfromright ( ptcurrent, s e l e c t o r S t a t e s. Top_L e f t ) ; 55 adjustheightfromtop ( ptcurrent, s e l e c t o r S t a t e s. Bottom_Right ) ; 56 break ; 57 } 58 } Figur 7.9: CropSelection metoden move 96

101 KAPITEL 7. IMPLEMENTERING Når størrelsen på midten ændres, bruges fire hjælpefunktioner; adjustwidthfromleft, adjustwidthfromright, adjustheightfrombottom og adjustheightfromtop. Alle fire funktioner kaldes med musens aktuelle placering på billedet samt hvilken tilstand, der skal skiftes til, hvis der opstår en undtagelse (Eng. Exception). Dette bruges, når brugeren trækker musen over den modsatte side af midten. For eksempel, hvis højre kant trækkes forbi den venstre kant, skal tilstanden skiftes fra Middle_Right til Middle_Left. I figur 7.10 er vist koden for adjustwidthfromright. 1 private void adjustwidthfromright ( Point ptcurrent, s e l e c t o r S t a t e s stateonexception ) 2 { 3 try 4 { 5 cropmiddle. Width = ptcurrent.x ptlocation.x; 6 } 7 catch ( ArgumentException ) 8 { 9 // Transfer to Bottom L e f t 10 cropmiddle. Width = whstart.x = ptlocation.x ptcurrent.x; 11 ptlocation.x = p t S t a r t.x = ptcurrent.x; 12 s e l e c t o r S t a t e = stateonexception ; 13 } 14 f i n a l l y 15 { 16 i f ( mediator. s c a l e ) 17 a d j u s t S c a l e H e i g h t ( ) ; 18 a d j u s t O u t e r R e c t a n g l e s ( ) ; 19 } 20 } Figur 7.10: CropSelection metoden adjustwidthfromright I koden forsøges at sætte bredden på den midterste område (cropmiddle) ved at trække den aktuelle placering fra den forhenværende. Hvis værdien bliver negativ, vil der opstå en undtagelse, der fanges i Catch-delen, hvor der justeres værdier, og tilstanden ændres. Tilsidst justeres de yderste rektangler, der markerer ydreområdet. Dette sker i metoden adjustouterrectangles og udføres altid, når størrelsen på det midterste område ændres. Når størrelser er bestemt, kaldes Mediator-metoden notify, der informerer alle Mediators observatører om, at der er foretaget en ændring. smccrop vil modtage opdateringen og tilpasse værdierne i sine indtastningsfelter. Skaleringsfunktionaliteten håndteres ligeledes i move og de fire hjælpemetoder. Hvis skalering er aktiveret, og der for eksempel ændres på bredden, vil højden automatisk tilpasses, så proportionerne mellem bredde og højde, defineret i indtastningsfelter i smccrop, overholdes. 97

102 KAPITEL 7. IMPLEMENTERING Surface og RedEyeSelection Screenshot: , s. 144 RedEyeSelection.xaml: (s. 264) RedEyeSelection.xaml.cs: (s. 265) I situationen, hvor brugeren opretter en rektangel i forbindelse med rød-øje-korrektion ved at holde musens venstre knap nede samtidigt med at musen flyttes, vil rektanglen formes som forventet, uanset hvilken retning musen bevæges. Koden for dette er placeret i Surface.metoden surface_mouseleftbuttondown vist i figur Rektanglens bredde sættes som forskellen mellem den nuværende position (ptcurrent) og startpositionen (rectstart), dér hvor knappen blev trykket ned. Højden bestemmes på samme måde. Når et GUI-element placeres på et Silverlight Canvas, bliver det placeret efter sit øverset højre hjørne. Derfor skal rektanglens position ændres, hvis musen aktuelle placering (ptcurrent) er større end startpositionen (rectstart). Canvas.SetLeft og Canvas.SetTop positionerer rektanglen på Canvas. Alle rektangler definerer et område, og områdets position gemmes i redeyeselectioninstansen af RedEyeSelection. Samtlige instanser af RedEyeSelection gemmes i listen redeyeselections. Når en RedEyeSelection er oprettet på Surface, kan den flyttes ved at venstre klikke på den og trække den over billedet. Rektanglet kan slettes ved at klikke på det X, der kommer til syne, når musen kommer ind i den aktuelle RedEyeSelection. Flytning er håndteret i metoderne rect_mouseleftbuttondown og rect_mousemove, der begge er vist i figur private void r e c t_mouseleftbuttondown ( object sender, MouseButtonEventArgs e ) 2 { 3 dragging = true ; 4 p t S t a r t = ptlocation ; 5 ptmousestart = e. GetPosition ( parent ) ; 6 7 // Don t ecco to Surface 8 e. Handled = true ; 9 } private void r e c t_mousemove ( object sender, MouseEventArgs e ) 12 { 13 i f ( dragging ) 14 { 15 ptlocation.x = p t S t a r t.x + e. G etposition ( parent ).X ptmousestart.x; 16 ptlocation.y = p t S t a r t.y + e. G etposition ( parent ).Y ptmousestart.y; Canvas. S e t L e f t ( this, ptlocation.x) ; 19 Canvas. SetTop ( this, ptlocation.y) ; 20 } 21 } Figur 7.11: rect_mouseleftbuttondown og rect_mousemove metoderne Når der klikkes på en RedEyeSelector, registreres rektanglets aktuelle placering i variablen ptstart samt musens aktuelle placering i ptmousestart. Når musen flyttes med venstre knap holdt nede (dragging == true), vil rektanglet flytte sig. Dens nye placering beregnes som summen af startpositionen (ptstart) og den aktuelle position (e.getposition) subtraheret musens startposition (ptmousestart). Funktionen 98

103 KAPITEL 7. IMPLEMENTERING GetPosition kaldes med reference til Surface via parent-referencen og returnerer rektanglets relative placering på Surface. Under implementering og de indledende test opdagede jeg, at en farvekorrektion alene ikke er nok i forbindelse med korrektion af røde øjne. Farvekorrektionen vil også påvirke områder omkring øjet, hvor koncentrationen af rød er høj. Det er derfor nødvendig at tilføje en algoritme, der kan finde samlinger af røde pixels, hvorefter farvekorrektionen kan udføres på disse. Af tidsmæssige hensyn har jeg har ikke påbegyndt dette arbejde. Hvis tiden skulle opstå, vil jeg påbegynde arbejdet; ellers vil det blive tilføjet listen med emner til videreudvikling. 99

104 KAPITEL 7. IMPLEMENTERING Zoomer Screenshot: , s. 142 Zoomer.xaml: (s. 232) Zoomer.xaml.cs: (s. 246) Konceptet med navigationsadorneren er, at placeringen af Surface på SurfaceBackground styres af navigationsadorneren. Når ViewZone, det transparente område i navigationsadorneren, trækkes rundt, vil Surface flyttes på SurfaceBackground, og brugeren kan på den måde navigere i et billede, der er større end det synlige område i applikationen Navigationsadorneren Når billedet placeres på Surface, vil en mindre kopi af billedet blive placeret i navigationsadorneren. Placeringen af billedet sker, hver gang SilverlightWebservicen kaldes og returnerer en instans af WorkingImage. Navigationsadorneren har en fast bredde på 140 pixels, og dens højde vil justeres på baggrund af billedets proportioner, så begge billeder har ens dimensioner. Billedet i navigationsadorneren, i koden kaldet Thumb, er placeret over et kanvas ligesom i Surface, så musens placering kan fanges. Over billedet er placeret et Grid med ni felter, hvor de yderste er fyldt med semitransparente rektangler, og det midterste er helt transparent. Når det midterste felt flyttes eller ændres i størrelse, vil størrelsen på de omkringliggende rektangler blive tilpasset, så navigationsadornerensgrænser ikke bliver brudt Zoom Når der zoomes, vil størrelsen på Surface ændre sig, og ViewZone vil følge Surface størrelse omvendt proportionalt. På baggrund af størrelsesforholdet mellem SurfaceBackground og Surface, bestemmes hvor stor Viewzone skal være i forhold til Thumb. Jo større Surface desto mindre ViewZone. Brugeren kan zoome i billedet ved at trække et potentiometer eller klikke på zoomknapperne, der øger zoomprocenten med henholdsvis -10% og +10%. Aktivering af disse knapper og al automatisk zoom ændrer potentiometerets værdi/placering. Når potentiometeret ændrer værdi vil funktionerne zoomchangedwidth og zoomchangedheight blive kaldt. De fungerer begge efter samme koncept og bestemmer, hvor stor Viewzone skal være. Metoden zoomchangedwidth er vist i

105 KAPITEL 7. IMPLEMENTERING 1 public double zoomchangedwidth ( ) 2 { 3 Point ptlocation = viewzonelocation ; 4 double w = 0, x = 0 ; 5 bool draw = f a l s e ; 6 7 i f ( mediator. S t a t e == Mediator. S t a t e s. Rotate &&! mediator. isimageupright ( ( int ) imgrotate. Angle ) ) { // Image : landscape 8 i f ( mediator. ImageHeight > mediator. getsurfacebackgroundactualsize ( ).X) { 9 // F o r s k e l mellem Image ( Surface ) og SurfaceBackground 10 w = outergrid. Width / ( mediator. ImageHeight / mediator. getsurfacebackgroundactualsize ( ).X) ; 11 draw = true ; 12 } 13 } 14 else { 15 i f ( mediator. ImageWidth > mediator. getsurfacebackgroundactualsize ( ).X) { 16 w = outergrid. Width / mediator. ProportionBackgroundSurface.X; 17 draw = true ; 18 } 19 } i f ( draw ) { 22 x = ( viewzone. Width w) / 2 ; i f ( viewzone. Width > outergrid. Width ) 25 viewzone. Width = outergrid. Width ; 26 else 27 viewzone. Width = (w > 0)? w : 0 ; i f ( ptlocation.x + x < 0. 0) { 30 viewzone. Width += ( 0. 0 ( ptlocation.x + x ) ) ; 31 ptlocation.x = 0. 0 ; 32 } 33 else i f ( ptlocation.x + x + viewzone. Width > outergrid. Width ) { 34 viewzone. Width += ( ptlocation.x + x + viewzone. Width ) outergrid. Width ; 35 viewzone. Width = viewzone. Width > 0? viewzone. Width : 0 ; 36 viewzone. Width = viewzone. Width < outergrid. Width? viewzone. Width : outergrid. Width ; 37 ptlocation.x = outergrid. Width viewzone. Width > 0? outergrid. Width viewzone. Width : 0 ; 38 } 39 else 40 ptlocation.x += x ; 41 } 42 else { 43 viewzone. Width = outergrid. Width ; 44 ptlocation.x = 0. 0 ; 45 } 46 return ptlocation.x; 47 } Figur 7.12: Zoomer metoden zoomchangedwidth 101

106 KAPITEL 7. IMPLEMENTERING Først i metoden afgøres om Viewzone skal tegnes på navigationsadorneren. Hvis Surface (ImageWidth) er mindre end SurfaceBackground, vil navigationsadorneren ikke blive vist, og derfor er det ikke nødvendigt at tegne Viewzone. Hvis Mediator er i tilstanden Rotate, og billedet er blevet roteret (!mediator.isimageupright((int)imgrotate.angle))), så dimensionerne er omvendt, skal denne transformation tages i betragtning. Viewzone vokser og mindskes omkring sit eget centrum. I koden bruges variablen x til at bestemme placeringsjusteringen, og den bestemmes ved at tage halvdelen af differencen mellem den forrige bredde og den nye bredde. Hvis den tidligere placering (ptlocation) adderet med placeringsjusteringen er mindre end nul (udenfor navigationsadorneren), skal den placere på kanten og bredden øges i modsatte retning. Dette sikrer, at venstre side af Viewzone ikke bryder grænserne for navigationsadorneren. I betingelsen (ptlocation.x + x + viewzone.width > outergrid.width) håndteres situationen for højre side af Viewzone. Når placering og størrelse på Viewzone er bestemt, returneres placeringens x-koordinat og samme proces udføres for højden og y-koordinatet. Når Viewzone er flyttet på plads, vil Surface blive informeret om ændringen via Mediator, hvor metoden viewzonemoved bliver kaldt med placeringen af Viewzone som parameter. Her bestemmes Surface-placering på SurfaceBackground med logikken fra Mediator-metoden viewzonemoved, der er vist i figur i f ( ptcurrent.x >= 0. 0 && zoomer. viewzone. Width < zoomer. outergrid. Width ) 2 ptlocation.x = ptcurrent.x proportionimagethumb.x 1. 0 ; 3 4 else i f ( zoomer. viewzone. Width == zoomer. outergrid. Width ) 5 ptlocation.x = ( getsurfacebackgroundactualsize ( ).X img. Width ) / 2. 0 ; 6 7 else // Hit when a new image i s d i s p l a y e d p l a c e in c e n t e r o f background 8 ptlocation.x = g e t S u r f a c e C e n t e r L o c a t i o n ( ).X; i f ( ptcurrent.y >= 0. 0 && zoomer. viewzone. Height < zoomer. outergrid. Height ) 12 ptlocation.y = ptcurrent.y proportionimagethumb.y 1. 0 ; else i f ( zoomer. viewzone. Height == zoomer. outergrid. Height ) 15 ptlocation.y = ( getsurfacebackgroundactualsize ( ).Y img. Height ) / 2. 0 ; else // Hit when a new image i s d i s p l a y e d p l a c e in c e n t e r o f background 18 ptlocation.y = g e t S u r f a c e C e n t e r L o c a t i o n ( ).Y; Figur 7.13: Placering af Surface på SurfaceBackground på baggrund af Viewzone Proportionerne mellem Surface og navigationsadorneren (proportionimagethumb) bruges til at bestemme Surface-placering på SurfaceBackground. Det skal bemærkes, at Surface-placering skal negeres, da det skal være udenfor SurfaceBackground, for at området synligt i Viewzone også bliver det synlige på SurfaceBackground Zoom og Adorners Hvis der zoomes, samtidigt med der er placeret en adorner over Surface (RedEyeSelection, CropSelection eller StraightenAdorner), skal størrelsen på disse ændres i takt med størrelsen på Surface ændres. Størrelsen på adorneren bestemmes på baggrund af Mediator-attributten Procent. I CropSelection justeres til zoom ved at kalde metoden adjustouterrectangles, hvor dimensionerne i det midterste område (cropmiddle) bestemmes som multiplika- 102

107 KAPITEL 7. IMPLEMENTERING tionen af de nuværende værdier med forholdet mellem Surface nye størrelse (ImageWidth/ImageHeight) og hele CropSelections dimensioner (outergrid). Placering af det midterste område vil ligeledes blive beregnet. Beregningerne kan ses i figur cropmiddle. Width = mediator. ImageWidth / outergrid. Width ; 2 cropmiddle. Height = mediator. ImageHeight / outergrid. Height ; 3 4 ptlocation.x = mediator. ImageWidth / outergrid. Width ; 5 ptlocation.y = mediator. ImageHeight / outergrid. Height ; Figur 7.14: Udtræk fra adjustouterrectangles-metoden, der beregning dimensioner og placering for det midterste område i CropSelection Når Surface flyttes, hvilket altid vil ske, når der zoomes, og hvis systemet er i tilstanden RedEye, vil samtlige RedEyeSelections justere deres dimensioner og placering i RedEyeSelection-metoden adjusttozoom, der er vist i figur public void adjusttozoom ( double procent ) 2 { 3 setwidth = o r i g i n a l W i d t h procent ; 4 s e t H e i g h t = o r i g i n a l H e i g h t procent ; 5 ptlocation.x = o r i g i n a l L o c a t i o n.x procent ; 6 ptlocation.y = o r i g i n a l L o c a t i o n.y procent ; 7 8 Canvas. S e t L e f t ( this, ptlocation.x) ; 9 Canvas. SetTop ( this, ptlocation.y) ; 10 } Figur 7.15: RedEyeSelection-metoden adjusttozoom Helper og Dialog Screenshot af idialogcontent dcsaveas: , s. 145 Helper.xaml: (s. 221) Helper.xaml.cs: (s. 223) Dialog.xaml: (s. 270) Dialog.xaml.cs: (s. 270) Helper er implementeret efter designet. Mediator-tilstand bruges til at vælge hvilket indhold, der skal vises i Helper. Tilstandsskift i Mediator sker bl.a. når undermenuer åbnes, og på den måde vil brugeren blive præsenteret for relevant vejledning i funktionalitet. Dialog er implementeret efter designet. Via Mediator-metoder kan nogle af de mest brugte idialogcontent-instanser tilføjes Dialog. Dette sker i openloadingdialog, closeloadingdialog samt openerrordialog, closeerrordialog. 103

108 KAPITEL 7. IMPLEMENTERING isubmenucontent I følgende sektion vil indholdsobjekterne for undermenuer blive beskrevet. De implementerer alle interfacet isubmenucontent smcresize Screenshot: , s. 143 smcresize.xaml: (s. 304) smcresize.xaml.cs: (s. 307) Klassen smcresize har tre offentlige variabler, der bruges, når billedet skal transformeres til den angivne størrelse, inden manipulationen udføres. De tre variabler er; _originalwidth, _priginalheight, _procent. Når Mediator er i tilstanden Resize, vil de tre variabler bruges, når størrelsen på billedet skal vises, og hvis der skal zoomes i det transformerede billede. Når der indtastes værdier i indtastningefelter i smcresize, vil metoden syncimg blive kaldt. Metoden beregner med udgangspunkt i zoom og værdier i indtastningsfelter hvor stort billedet skal være og kalder Mediator-metoden adjustimagetoresize. Hvis procent-checkboxen er aktiveret vil metoderne frompercentage og topercentage blive brugt til at omregne mellem procentværdierne og billedets originale størrelse (altså ikke den transformerede størrelse). Når OK -knappen aktiveres, og hit_ok-metoden kaldes, vil der blive udført en test på, om det indtastede er validt data til operationsobjektet Resize. Hvis det ikke er tilfældet, vil rammen omkring indtastningsfeltet blive markeret med rødt, så brugeren kan se, hvor fejlen er opstået smccrop Screenshot: , s. 144 smccrop.xaml: (s. 295) smccrop.xaml.cs: (s. 297) Indtastningsfelterne i smccrop er forbundet med CropSelection via Mediator-metoderne setcropselectionwidth og setcropselectionheight. Når skalercheckboxen aktiveres, vil den boolske variabel bscale sættes samt CropSelectionattributten proportion, der sættes via Mediator og Surface med metoden setcropproportion. CropSelection vil derefter holde proportionerne mellem højde og bredde, hvis brugeren ændrer størrelsen på det midterste område. Indtastningsfelterne i smccrop bliver valideret som i smcresize, og hvis ikke det indtastede er gyldigt input til Crop-operationsobjektet, vil rammen omkring indtastningsfeltet med den ugyldige værdi blive markeret med rødt, så brugeren kan se, hvor fejlen er opstået. 104

109 KAPITEL 7. IMPLEMENTERING smcrotate Screenshot: , s. 143 smcrotate.xaml: (s. 313) smcrotate.xaml.cs: (s. 316) Når billedet placeret i Surface skal roteres inden manipulationen, kan dette gøres ved at sætte en transformation på billedet. I figur 7.16 er vist transformationsopsætningen i XAML for billedet. imgflip får sat sin ScaleX -attribut til -1, hvis billedet skal spejlvendes horisontalt og ScaleY, hvis det skal spejlvendes vertikalt. Attributten imgrotate ændrer vinklen, billedet er roteret med. Hvis billedet skal roteres omkring sit eget centrum, skal attributten RenderTransformOrigin sættes til {0.5, 0.5}. Hvis ikke denne attribut sættes, vil billedet rotere omkring øverste venstre hjørne. 1 <Image x :Name="img" S t r e t c h=" F i l l " RenderTransformOrigin="0. 5, 0. 5" > 2 <Image. RenderTransform> 3 <TransformGroup> 4 <ScaleTransform x : Name=" imgflip " ScaleX=" 1" ScaleY=" 1"/> 5 <SkewTransform/> 6 <RotateTransform x : Name=" imgrotate " Angle=" 0" /> 7 <TranslateTransform/> 8 </TransformGroup> 9 </Image. RenderTransform> 10 </Image> Figur 7.16: Transformationsattributter for billede Når en transformation sættes på Surface-billedet, vil billedet i navigationsadroneren også få udført samme transformation smcrotate og StraightenAdorner StraightenAdorner.xaml: (s. 268) StraightenAdorner.xaml.cs: (s. 268) StraightenAdorner består af fem rektangler, hvor den midterste er samme størrelse som billedet. Når finrotationen udføres, vil de fire omkringliggende rektangler skjule de områder på motivet, der går udover billedetsgrænser. Når der manuelt zoomes i billedet, vil størrelsen på StraightenAdorner tilpasses med metoden adjust. StraightenAdorner har fået tilføjet vertikale og horisontale linjer med 50 pixels mellemrum. Disse vil hjælpe brugeren, når billedet skal rettes op. Implementeringen af automatisk zoom i forbindelse med finrotation af billedet er implementeret efter designet. C#-programmeringssproget benytter sig af radianer i forbindelse med de trigonometriske funktioner. Derfor er grader omregnet til radianer ved, Grader Π 180 = radianer StraightenAdorner tilpasses zoom ligesom CropSelection. Metoden adjuststraightenadorner i smcrotate bliver kaldt, når zoomprocenten ændres og undersøger, om billedet er blevet påvirket af en rotationstransformation. Derefter kaldes 105

110 KAPITEL 7. IMPLEMENTERING Mediator metoden adjuststraightenadorner med de korrekte parametereværdier. Hvis billedet er roteret ±90 eller ±270, skal der byttes om på højde og bredde, når StraightenAdorner skal tilpasses. Når billedet finroteres, vil transformationen som nævnt også blive udført på navigationsadorneren AbstractCommand og operationsobjekter Den abstrakte klasse AbstractCommand indeholder metoden getproxy, som alle operationsobjekter, der nedarver fra AbstractCommand, benytter sig af, når der skal oprettes forbindelse til SilverlightWebservicen. Metoden kan ses i figur protected S i l v e r l i g h t D a t a S e r v i c e C l i e n t getproxy ( ) 2 { 3 System. ServiceModel. EndpointAddress endpoint = new EndpointAddress ( " http : //wt w2k8 frk 01 : 6630/ s e r v i c e /wsdata. svc " ) ; 4 5 // For l a r g e r t r a n s m i s s i o n s max t h e MaxReceivedMessageSize 6 System. ServiceModel. BasicHttpBinding binding = new System. ServiceModel. BasicHttpBinding ( ) ; 7 binding. MaxReceivedMessageSize = int. MaxValue ; 8 binding. MaxBufferSize = int. MaxValue ; 9 10 return new S i l v e r l i g h t D a t a S e r v i c e C l i e n t ( binding, endpoint ) ; 11 } Figur 7.17: AbstractCommand-metoden getproxy Silverlight understøtter kun basichttpbinding, og attributterne MaxReceivedMessageSize og MaxBufferSize sættes til det maksimale antal bytes (maksimal værdi af Int32 = 2 32 ) for henholdsvis beskeder og buffer. Systemet vil ikke kunne modtage billeder større end 4 GB, hvilket slet ikke burde være aktuelt i et system, der håndterer billeder, der skal vises på hjemmesider. Bindingen til webservicen sættes op direkte, da servicen er placeret på SharePointserveren. Det vil i denne sammenhæng være hensigtsmæssigt, at henvisningen til Share- Point serveren sættes i forbindelse med deployering og ikke hard coded som i koden herover. Port 6630 er specificeret i IIS opsætningen og bør ikke kollidere med andre tjenester jf. IANA portnummer liste [6]. Metoden returnerer en klient til SilverlightWebservicen, der bruges, når webservicen kaldes. I Figur 7.18 er vist et eksempel på, hvordan de asynkrone kald til SilverlightWebservicen realiseres. 106

111 KAPITEL 7. IMPLEMENTERING 1 public void Execute ( ) 2 { 3 mediator. hideimage ( ) ; 4 5 try { 6 // Connect to WebService 7 S i l v e r l i g h t D a t a S e r v i c e C l i e n t proxy = getproxy ( ) ; 8 proxy. loadimagecompleted += new EventHandler<loadImageCompletedEventArgs >( proxy_loadimagecompleted ) ; 9 proxy. InnerChannel. OperationTimeout = TimeSpan. FromSeconds ( 6 0 ) ; 10 proxy. loadimageasync ( mediator. ImageId, mediator. L i s t I d, mediator. Debug, mediator. F i l e E x t e n s i o n ) ; 11 } 12 catch { 13 mediator. openerrordialog ( " There i s a network e r r o r. A p p l i c a t i o n could not connect to w e b s e r v i c e. " ) ; 14 } } void proxy_loadimagecompleted ( object sender, loadimagecompletedeventargs e ) 19 { 20 try { 21 i f ( S t r i n g. IsNullOrEmpty ( ( ( ImageTransporter ) e. Result ). e r r o r ) ) { 22 displayimage ( ( ImageTransporter ) e. Result, true ) ; 23 this. n o t i f y ( ) ; 24 } 25 else 26 mediator. openerrordialog ( "The f i l e i s checkd out to another u s e r. " ) ; } 29 catch { 30 mediator. openerrordialog ( " There i s a network e r r o r. A p p l i c a t i o n could not connect to w e b s e r v i c e. " ) ; 31 } 32 } Figur 7.18: LoadImage metoderne Execute og proxy_loadimagecompleted Når operationsobjektets Execute-metode kaldes, vil en webserviceklient modtages af getproxy-funktionen. Derefter sættes hændelsen, der skal udføres, når det asynkrone kald er fuldført, til proxy_loadimagecompleted-metoden. Webservicekaldets timeout er sat til 60 sekunder. Hvis brugeren sidder med en 2 Mbit netværksforbindelse vil det give mulighed for at downloade et billede på ca. 12 MB, før servicen laver en timeoutundtagelse. I forbindelse med en ethernettransmission vil der være noget overhead (adresse, crc check etc. på de forskellige pakker), der for har jeg regnet med 10-bit på en byte. Det er måske lidt højt sat men skal kun bruges som en verifikationen af timeout tiden. 2Mbps 60s = 120Mbit 120M bit = byte byte = 11.44MByte De billeder, som applikationen forventes at manipulere, vil fylde mindre end 2 MB og størstedelen af dem vil fylde under 1 MB. loadimageasync kalder webservicen med parametre, så billedet kan findes i SharePointlisten. Debugparameteren er boolsk og sættes til sand, når servicen kaldes fra udviklingsmiljøet, hvor der ikke er valgt et billede i en SharePoint-liste. 107

112 KAPITEL 7. IMPLEMENTERING Når det asynkrone kald er aflsuttet, vil metoden proxy_loadimagecompleted blive kaldt, og den modtagede ImageTransporter instans kan gives til displayimage metoden som parameter. AbstractCommand-metoden displayimage (figur 7.19) bruger ImageTransporter-attributten byteimg og en MemoryStream til at skabe et bitmap billede, der kan vises på Surface ved Mediator-metoden setimagesource. Sidst justeres historikken med Mediator-metoden adjusthistory, der afgører om Undo- og Redo-knapperne skal være tilgængelige eller ej. 1 protected void displayimage ( ImageTransporter i t, bool docenter ) 2 { 3 Stream stream = new MemoryStream ( i t. byteimg ) ; 4 5 stream. P o s i t i o n = 0 ; 6 7 BitmapImage b i = new BitmapImage ( ) ; 8 b i. SetSource ( stream ) ; 9 10 mediator. s e t O r i g i n a l I m a g e S i z e ( i t. width, i t. h e i g h t ) ; 11 mediator. setimagesource ( b i ) ; // Show Image 14 mediator. showimage ( ) ; // H i s t o r y 17 mediator. ImagesInHistory = i t. i m a g e s I n H i s t o r y ; 18 mediator. CurrentImageLocation = i t. currentimagelocation + 1 ; 19 mediator. a d j u s t H i s t o r y ( ) ; 20 } Figur 7.19: AbstractCommand metoden displayimage Skabeloner Screenshot: , s. 145 Som nævnt i sektion er skabelonfunktionaliteten implementeret, så skabeloner gemmes i en XML-fil. I Silverlightapplikationen er der udviklet en dialog, der giver brugeren mulighed for at tilføje og fjerne skabeloner. Som i undermenuerne er der validering af indtastningsfelternes værdier. Feltet navn kan indeholde alle typer tegn, mens Bredde- og Højde-felterne kun kan indeholde tal mellem 0 og Fejlhåndtering Screenshot: , s. 146 I Silverlightapplikationen er der udviklet dialoger, der præsenterer brugeren for en sigende besked, hvis en undtagelsestilstand skulle opstå. Der bliver taget hånd om session timeout, der som standard opstår, når et browservindue har været inaktivt i mere end 20 min. Hvis en bruger forsøger at udføre en operation på billedet og derved kalder SilverligthWebservicen, vil en undtagelses tilstand opstå. Undtagelsen skyldes, at WorkingImage og historikken ikke kan hentes fra sessionobjektet, og systemet derfor ikke ved, hvad der er gjort ved billedet før undtagelsen. Silverlightapplikationen håndterer fejlen ved at give brugeren besked, fjerne reservationen fra billedet og navigere browseren tilbage til SharePoint-listen. 108

113 KAPITEL 7. IMPLEMENTERING 7.5 Konklusion af implementering Alle dele af systemet er blevet implementeret. Dette omfatter de to webservices og Silverlightapplikationen. For at bruge Silverlight i SharePoint har det været nødvendigt med nogle tilpasninger. Disse er blevet beskrevet, og vejledninger er vedlagt i appendiks. En Custom Action Feature er implementeret i SharePoint og tilføjer et menupunkt til alle listeelementer, der har tilknyttet en fil af typen JPG eller PNG i lister af typen document library. Når dette menupunkt aktiveres, vil browseren navigere til en aspxside, der indeholder Silverlightapplikationen. Silverlightapplikationen, der kører i klientens browser, kommunikerer med serveren via en WCF-webservice (Windows Communication Foundation) kaldet SilverlightWebservicen. Når Silverlightapplikationen initialiseres starter den med at kalde SilverlightWebservicen, der bruger en anden webservice, SharePointWebservicen, til at finde billedet via SharePoint-API og sende billedet retur som et bytearray. SilverlightWebservicen opretter instanser i sessionobjektet, så en kopi af det originale billede kan gemmes samt kopier af de billeder der undervejs i programforløbet sendes til Silverlightapplikationen. Det er på denne måde, systemets historik er organiseret. Når et billede hentes af SharePointWebservicen, bruges SharePoints eget sikkerhedssystem til at reservere billedet (check out). Ligeledes fjernes reservationen, når billedet gemmes eller ikke skal bruges mere. SharePointWebservicen er oprettet i SharePoint-serveren som en custom webservice, og en vejledning i opsætning og deployering er vedlagt i appendiks. SilverlightWebservicen er deployeret lokalt på SharePoint-serveren som en selvstændig webapplikation. Silverlightapplikationen er implementeret i overensstemmelse med designet. Dog har der været en mindre ændring i forbindelse med menustrukturen. Det er i Silverlight ikke muligt for en User Control at nedarve fra en anden User Control, og derfor er klassen Submenu ændret fra en abstrakt klasse til en kontainer, der indeholder et standardlayout for undermenuerne. Et nyt interface er tilføjet, isubmenucontent. Submenu indeholder en instans af isubmenucontent, der bruges af de fire undermenuklasser; smcrotate, smcresize, smccrop og smcredeye. I forbindelse med implementering af rød-øje-korrektion opdagede jeg, at en farvekorrektion ikke er nok. Koncentration af den røde farve kan være høj i huden omkring øjet og vil derfor give et fejlagtigt resultat. Det vil være nødvendigt at udarbejde en algoritme, der kan finde en samling af pixels med høj koncentration af rød og derefter udføre farvekorrektionen på dem. På grund af den faste deadline har jeg ikke haft tid til at påbegynde dette arbejde, og algoritmen bliver foreslået som en videreudvikling. 109

114 Kapitel 8 Test Indhold 8.1 Forord Graybox-test Test af UC1 - Hent Billede Test af UC2 - Gem Billede Test af UC3 - Gem Billede Som Test af UC4 - Roter Test af UC5 - Spejlvend Test af UC6 - Beskæring Test af UC7 - Ændring af størrelse Test af UC8 - Sort/Hvid Test af UC9 - Røde øjne Test af UC10 - Zoom Test af UC11 - Skabeloner Øvrig funktionalitet Whitebox-test Accepttest Konklusion af test Skalering Finrotation og navigationsadorneren Finrotation og zoom

115 KAPITEL 8. TEST 8.1 Forord For at kvalitetssikre systemet og verificere at kravspecifikationen er opfyldt, er der udført forskellige test på systemet. Formålet med testen er at finde fejl, inden Webtop A/S overtager systemet. Brugergrænsefladen i Silverlightapplikationen samt SilverlightWebservicen er testet ved en Graybox-test. Der er udarbejdet test cases med udgangspunkt i use cases fra kravspecifikationen. SharePointWebservicen er testet med en testapplikationen, der er baseret på en Whitebox testmetode. En accepttest er ligeledes udført af Peter Gøtterup fra Webtop A/S. Testen skal afklare, om systemet opfylder virksomhedens krav og forventninger. 111

116 KAPITEL 8. TEST 8.2 Graybox-test Med udgangspunkt i kravspecifikationen (use cases sektion ) er der udarbejdet en række test cases. Disse test cases er designet med indsigt i systemets tekniske opbygning i modsætning til en Blackbox test, der er designet uden indblik i datastruktur og algoritmer. Graybox-testen bliver udført på brugergrænsefladen i Silverlightapplikationen af udvikleren og omfatter også test af SilverlightWebservicen Test af UC1 - Hent Billede Formål Undersøge om krav fra UC1 er opfyldt. Metode Åbne filer i Silverlightapplikationen og verificere at systemet overholder de begrænsninger, der er samt at der vises en fejlbesked, når en undtagelsestilstand opstår. Forudsætning Et SharePoint-dokumentbibliotek med filer af typerne; JPG, PNG, GIF og evt. andre. Trin Aktivitet Forventet Resultat 1 Åben SharePoint-dokumentbibliotek, vælg billeder af henholdsvis JPG-, PNGog GIF-typen. Verificer at Manipulate Image menupunktet kun vises for JGP og PNG filer. 2 Vælg Manipulate Image-menupunktet for Manipulate Image bør kun vises for filer af typen JPG og PNG. Silverlightapplikationen åbnes, og det valgte et billede af type JPG eller PNG. billede vises. 3 Ændre itemid i Query String og genopfrisk browseren. Billedet med det valgte id vises. Hvis det ikke er tilgængeligt (slettet eller checked out), vil en fejlbesked vises. 4 Naviger tilbage til listen. Det tidligere valgte billede bør nu være markeret som checked out. 5 Vælg Manipulate Image til det samme Silverlightapplikationen viser en fejlbesked, billede selvom det er checked out. og der kan navigeres tilbage til 6 Vælg Manipulate Image på et billede eller fil, der ikke er af type JPG eller PNG. Afvigelser Ingen. Systemet reagerer efter hensigten. Tabel 8.1: Test af UC1 - Hent Billede listen. Manipulate Image vil ikke være tilgængelig i kontaktsmenuen for disse filtyper. 112

117 KAPITEL 8. TEST Test af UC2 - Gem Billede Formål Undersøge om krav fra UC2 er opfyldt. Metode At gemme et billede efter der er udført en manipulation på det. Forudsætning Et billede er åbnet i Silverlightapplikationen og en manipulation er udført. Trin Aktivitet Forventet Resultat 1 Klik på gem-knappen i Silverlightapplikationen. Silverlightapplikationen lukkes, og der navigeres tilbage til den liste, hvor billedet blev valgt. 2 Verificer at billedet ikke er checked out. Billedet bør være frit tilgængeligt, og intet 3 Verificer billedets metadata samt thumbnail at det er identisk med billedet, før det blev gemt. 4 Vælg Manipulate Image på det samme billede igen og verificer at manipulationerne reelt er udført. Afvigelser Ingen. Systemet reagerer efter hensigten. Tabel 8.2: Test af UC2 - Gem Billede checked out ikon er vist. Billedets højde og bredde skal passe samt motivet vist i thumbnailen. Billedet bør fremstår som før det blev gemt i trin

118 KAPITEL 8. TEST Test af UC3 - Gem Billede Som Formål Undersøge om krav fra UC3 er opfyldt. Metode Gemme et billede som en ny instans i SharePoint listen. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Klik på gem som-knappen i Silverlightapplikationen. Gem som-dialogen vises, og brugeren bliver bedt om at indtaste et nyt navn til billedet. 2 Gem billedet uden indtastning. En fejlbesked vises, og indtastningsfeltet fremhæves med rødt. 3 Indtast tilfældige specialtegn og ingen tal eller bogstaver. Fejlbesked vises om at navnet kun må indeholde bogstaver og tal. 4 Indtast navn der indeholder bogstaver, tal og specialtegn. Fejlbesked vises om at navnet kun må indeholde bogstaver og tal. 5 Indtast bogstaver og tal uden andre tegn. Silverlightapplikationen lukkes, og SharePoint-listen vises med det nye billede. 6 Verificer det nye billedes metadata, at dimensioner er korrekt samt at der er noteret stien til original billedet. Afvigelser Fejl i trin 3 og 4. Tabel 8.3: Test af UC3 - Gem Billede Som Det nye billede skal have samme dimensioner som det originale, eftersom der ikke er udførtstørrelses ændrende manipulationer på det. Desuden skal et link til det originale billede være gemt i listekolonnen Original Image. Trin 3: Silverlightapplikationen lukkes, men billedet er ikke blevet oprettet. Share- PointWebservicen fejler, da billedets navn ikke må indeholde specialtegn. Trin 4: Samme som i Trin

119 KAPITEL 8. TEST Test af UC4 - Roter Formål Undersøge om krav fra UC4 er opfyldt. Metode Udfør rotationer på billedet, både med 90 intervaller og fin rotation af billedet. Forudsætning Et billede er åbnet i Silverlightapplikationen og undermenuen Rotate / Flip er åbnet. Trin Aktivitet Forventet Resultat 1 Klik på knappen med rotationspil der peger mod højre. Udfør denne handling fire gange. 2 Klik på knappen med rotationspil der peger mod venstre. Udfør denne handling fire gange. 3 Med billedet i startposition (ingen transformationer) udføres en finjustering af billedets motiv. Træk potentiometeret mellem de to yderstillinger. 4 Klik på knappen med rotationspil der peger mod venstre og udfør derefter en finjustering af billedets motiv (som i Trin 3). 5 Udfør en finjustering ved at trække potentiometeret i en yderstilling og udfør derefter 90 rotation på billedet (Trin 1). Udfør to 90 rotationer og træk derefter potentiometeret tilbage til 0. 6 Klik på knappen med rotationspil der peger mod højre. Klik derefter på OK - knappen. 7 Klik to gange på knappen med rotationspil der peger mod venstre. Udfør en finjustering af motivet. Klik derefter på OK knappen. fortsætter på næste side Hver gang der klikkes på knappen roterer billedet 90 med uret. Efter fire klik er billedet tilbage i samme position som ved start. Hver gang der klikkes på knappen roterer billedet 90 mod uret. Efter fire klik er billedet tilbage i samme position som ved start. Billedet skal rotere, og der må ikke opstå blanke områder på billedet. Verificer at billede ikke zoomes for meget. Motivet vil roteres, hvorefter hele billedet roteres to gange med uret. Herefter roteres motivet tilbage til 0, og billedet bør fremstå som før Trin 5, men på hovedet. Motivet vil roteres, hvor efter hele billedet roteres to gange med uret. Herefter roteres motivet tilbage til 0, og billedet bør fremstå som før Trin 5, men på hovedet. Billedet roterer med uret, og når OK - knappen klikkes, vil undermenuen lukkes, og billedet vil blive opdateret. Efter opdateringen skal det fremstå, som da OK - knappen blev klikket. Undermenuen lukkes, og billedet vil blive opdateret. Efter opdateringen skal det fremstå, som da OK -knappen blev klikket. 115

120 KAPITEL 8. TEST fortsættelse fra forrige side Trin Aktivitet Forventet Resultat 8 Udfør tilfældige transformationer på billedet, hvor der indgår en finjustering af motivet. Klik på Reset-knappen. 9 Udfør tilfældige transformationer på billedet, hvor der indgår en finjustering af motivet. Klik på Cancel-knappen. Tabel 8.4: Test af UC4 - Roter Afvigelser Ingen, funktionaliteten fungerer som forventet. Når Reset-knappen klikkes, skal alle transformationer fjernes fra billedet, og det skal fremstå som da undermenuen blev åbnet. Når Cancel-knappen klikkes, skal undermenuen lukke og alle transformationer fjernes fra billedet. Det skal fremstå, som før undermenuen blev åbnet Test af UC5 - Spejlvend Formål Undersøge om krav fra UC5 er opfyldt. Metode Udføre spejlvendinger på billedet samt rotationer for at sikre spejlvendingerne bliver udført som forventet. Forudsætning Et billede er åbnet i Silverlightapplikationen og undermenuen Rotate / Flip er åbnet. Trin Aktivitet Forventet Resultat 1 Klik på knappen med spejlvendingspil der vender vandret. Udfør denne handling to gange. 2 Klik på knappen med spejlvendingspil,der vender lodret. Udfør denne handling to gange. 3 Med billedet i start position (ingen spejlvendinger) udføres en rotation af billedet (med uret), hvor efter billedet spejlvendes én gang horisontalt og én gang vertikalt. 4 Udfør en vandret spejlvending og roter derefter billedet med uret to gange. Udfør derefter en lodret spejlvending. fortsætter på næste side Hver gang der klikkes på knappen, spejlvendes billedet horisontalt. Efter to klik bør billedet fremstå som før dette trin. Hver gang der klikkes på knappen, spejlvendes billedet vertikalt. Efter to klik bør billedet fremstå som før dette trin. Når billedet er roteret skal spejlvendingen stadigt udføres som angivet. Verificer at billedet først bliver spejlvendt og derefter roteres. Efter den vertikale spejlvending skal billedet fremstå som før dette trin. 116

121 KAPITEL 8. TEST fortsættelse fra forrige side Trin Aktivitet Forventet Resultat 5 Udfør en finjustering ved at trække potentiometeret helt mod højre og udfør derefter en vertikal og en horisontal spejlvending. Træk potentiometeret til modsatte yderstilling og udfør både en vertikal og horisontal spejlvending. 6 Udfør en vertikal og en horisontal spejlvending af billedet og klik derefter på OK - knappen. 7 Udfør tilfældige spejlvendinger på billedet. Klik på Reset-knappen. 8 Udfør tilfældige spejlvendinger på billedet. Klik på Cancel-knappen. Tabel 8.5: Test af UC5 - Spejlvend Afvigelser Ingen, funktionaliteten fungerer som forventet Finjustering af motivet skal holdes, når der spejlvendes, og spejlvending skal holdes, når potentiometeret trækkes fra yderstilling til yderstilling. Når den sidste spejlvending er udført, bør billedet fremstå som før dette trin. Når OK -knappen klikkes, vil undermenuen lukkes, og billedet vil blive opdateret. Efter opdateringen skal det fremstå, som da OK -knappen blev klikket. Når Reset-knappen klikkes, skal alle transformationer fjernes fra billedet, og det skal fremstå, som da undermenuen blev åbnet. Når Cancel-knappen klikkes, skal undermenuen lukke og alle transformationer fjernes fra billedet. Det skal fremstå, som før undermenuen blev åbnet. Trin 3: Når billedet er roteret ±90 eller ±270, og en spejlvending udføres, bliver resultatet det omvendte. Når en horisontal spejlvending aktiveres, vil en vertikal blive udført og omvendt. Dette skyldes, at billedet er transformeret af rotationen og spejlvendingen ikke tager hensyn til denne transformation. Derfor skal spejlvendingsfunktionen undersøge, om en rotationstransformation er udført på billedet, og justere om spejlvendingen skal være horisontal eller vertikal. Denne fejl er blevet rettet ved implementering af Mediator funktionen isimageupright Test af UC6 - Beskæring Formål Undersøge om krav fra UC6 er opfyldt samt designet omhandlende beskræringsadorneren, CropSelection og undermenuen smccrop. Metode Undersøg at interaktionen med CropSelector virker som forventet, og at manipulationen af billedet sker i henhold til, hvad CropSelector viser. Midten af CropSelector refereres til i det følgende som selektionen. Forudsætning Et billede er åbnet i Silverlightapplikationen, og undermenuen Crop er åbnet. 117

122 KAPITEL 8. TEST Trin Aktivitet Forventet Resultat 1 Flyt selektionen ved at klikke, holde musen nede og trække den over billedet. Træk den langs kanterne og prøv at træk den udover. 2 Udvid selektionen ved skiftevis at trække i hver af de fire kanter. For hver kant skal den trækkes over den modsatte kant. 3 Udvid selektionen ved at trække i hvert hjørne. For hvert hjørne skal der trækkes over de modsatte hjørner. 4 Aktiver skaleringsfunktionen ved at sætte flueben i Scale-checkboxen. Gentag derefter trin 2. 5 Aktiver skaleringfunktionen ved at sætte flueben i Scale-checkboxen. Gentag derefter trin 3. 6 I indtastningsfelterne; tast værdier større end billedets dimensioner for henholdsvis højde og bredde. Indtast desuden negative værdier og nul. fortsætter på næste side Midten af CropSelection må ikke forlade billedet. Den skal placeres langs kanterne men ikke yderligere. Når musen placeres over en kant, skal cursor ændres til en pil, der viser i hvilken retning, selektionen kan udvides. Verificer at selektionen udvides, når kanterne flyttes. Når en kant trækkes over dens modsatstående kant, skal musen gribe den modsatte og udvide i den retning. Når musen placeres over et hjørne, skal cursor skifte til en hånd. Når musen klikker på et hjørne, holdes nede og flyttes, skal selektionen følge musen. Både højde og bredde vil justeres i størrelse. Når en kant trækkes over et af de andre hjørner, skal musen overtage det hjørne, der derefter vil følge med bevægelsen. Forholdet mellem højde og bredde skal holdes, mens skalering er aktiveret. Når kanter flyttes, skal en af de hosliggende sider følge med, så proportionerne i billedet holdes. Når der trækkes i hjørnerne, skal proportionerne mellem højde og bredde holdes. Når et hjørne trækkes over midten skal musen overtage kontrol med det modsatte hjørne. Det bør ikke være muligt at indtaste et minustegn, da felterne kun accepterer tal. Hvis der indtastes en værdi, større end hvad der er muligt at se på billedet, skal tallet automatisk sættes til maksimum. Hvis nul indtastes, sker der først en reaktion, hvis OK -knappen klikkes. 118

123 KAPITEL 8. TEST fortsættelse fra forrige side Trin Aktivitet Forventet Resultat 7 Indtast værdier større end nul og mindre end billedets dimensioner. 8 Aktiver skaleringfunktionen og indtast en værdi i et af indtastningsfelterne. Prøv derefter at ændre værdien i det andet. Størrelsen på selektionen skal ændres ved at trække en kant eller et hjørne. 9 Vælg en skabelon fra Templatedropdownmenuen. 10 Vælg et område ved at placere selektionen og klik derefter på OK -knappen. 11 Flyt selektionen og ændr størrelsen på den. Klik på Reset-knappen. 12 Flyt selektionen og ændr størrelsen på den. Klik på Cancel-knappen. Afvigelser Fejl fundet i trin 5, 8 og 9 Tabel 8.6: Test af UC6 - Beskæring Selektionen tilpasses indtastningerne. Hvis værdien af indtastningen er større end den plads, der er tilgængelig, jf. billedets placering, vil billedet automatisk tilpasse sin placering, så længe det ikke er mere end den plads, der er tilgængelig på billedet. Med skaleringfunktionen aktiveret, og der indtastes for derefter at ændre størrelsen på selektionen, skal de indtastede proportioner overholdes. Verificer at dimensionerne fra skabelonen bliver udfyldt i indtastningsfelterne samt at selektionen tilpasser sig. Undermenuen skal lukkes, og det opdaterede billede skal vises. Billedet skal være identisk med det valgte område, før OK -knappen blev klikket. Verificer at selektionen centreres på billedet, og størrelsen sættes til halvdelen af dimensionerne. Undermenuen skal lukkes, og selektionensadorneren (CropSelection) skal fjernes fra billedet. Trin 5: Med skalering aktiveret reagerer selektionen ikke som forventet, når der skaleres fra øverste venstrehjørne. Problemet er, at der justeres på placeringen, når musen flyttes, og igen når proportionerne skal overholdes. Den nuværende algoritme er ikke hensigtsmæssig og bør redesignes. Der er implementeret en løsning, hvor selektionen fungerer og hjørnet reagerer som øverste kant, men løsningen er ikke optimal. Trin 8 og 9: Når skalering er sat, og der efterfølgende benyttes en skabelon, bliver de nye proportioner ikke beregnet. Samme situation opstår, hvis værdierne i indtastningsfelterne ændres efter skalering er aktiveret. Begge fejl er rettet ved at genaktivere skaleringsfunktionen. 119

124 KAPITEL 8. TEST Test af UC7 - Ændring af størrelse Formål Undersøge om krav fra UC7 er opfyldt samt designet omhandlende undermenuen smcresize. Metode Undersøg at interaktionen med Surface virker som forventet, og at manipulationen af billedet sker i henhold til den viste transformation. Forudsætning Et billede er åbnet i Silverlightapplikationen, og undermenuen Resize er åbnet. Trin Aktivitet Forventet Resultat 1 Deaktiver proportioner ved at fjerne fluebenet i Proportions-checkboxen. Indtast nye værdier i begge indtastningsfelter. 2 Aktiver procent ved at sætte et flueben i Percentage-checkboxen. Deaktiver procent ved at fjerne fluebenet. 3 Aktiver proportioner ved at sætte et flueben i checkboxen. Ændr værdien i det ene indtastningsfelt og derefter det andet. 4 Aktiver både proportioner og procent. Ændr værdierne i indtastningsfelterne. 5 Vælg en skabelon i Templatesdropdownmenuen. 6 Aktiver procent og vælg en skabelon i Templates-dropdownmenuen. Deaktiver derefter procent og gentag med proportioner. fortsætter på næste side Billedets størrelse skal tilpasses værdierne i indtastningsfelterne. Når fluebenet sættes, skal begge værdier i indtastningsfelterne omregnes til procent af det originale billede. Når fluebenet fjernes, skal procentværdierne omregnes til pixelværdier. Når proportioner er aktiveret, skal værdierne tilpasse sig hinanden, så proportioner overholdes. Billedet skal stadigt skifte størrelse når værdier ændres. Verificer at værdierne justeres, så proportionerne overholdes, og den procentvise værdi er korrekt. Værdierne i indtastningsfelterne skal ændre sig, så de stemmer overens med skabelonens dimensioner. Desuden skal billedets størrelse ændre sig. Proportioner skal automatisk aktiveres. Værdierne i indtastningsfelterne bør være korrekt procentvise værdier af de originale dimensioner. Når procent deaktiveres, skal værdierne i indtastningsfelterne være identiske med skabelonværdierne. 120

125 KAPITEL 8. TEST fortsættelse fra forrige side Trin Aktivitet Forventet Resultat 7 Ændr størrelsen på billedet og klik på OK - knappen. 8 Ændr størrelsen på billedet og klik på Reset-knappen. 9 Ændr størrelsen på billedet og klik på Cancel-knappen. Afvigelser Fejl fundet i trin 6 Tabel 8.7: Test af UC7 - Ændring af størrelse Undermenuen skal lukkes, og billedet skal fremstå i de nye dimensioner. Transformationen af billedet skal fjernes, og det skal fremstå med de dimensioner det havde, før transformationerne blev påført billedet. Undermenuen skal lukkes, og transformationen skal fjernes fra billedet, så det fremstår med de dimensioner det havde, inden undermenuen blev åbnet. Trin 6: Når en skabelon aktiveres samtidigt med Proportion-checkboxen er sat opstår der en fejl, og dimensionerne bliver ikke korrekte. Fejlen er løst ved at deaktivere proportioner, inden skabelonværdierne sættes ind Test af UC8 - Sort/Hvid Formål Undersøge om krav fra UC8 er opfyldt. Metode Klik på menupunktet Gray Scale. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Klik på menupunktet Gray Scale. Systemet arbejder og returnerer billedet i gråtoner. Tabel 8.8: Test af UC8 - Sort/Hvid Afvigelser Ingen afvigelser, funktionaliteten fungerer som forventet. 121

126 KAPITEL 8. TEST Test af UC9 - Røde øjne Formål Undersøge om krav fra UC9 er opfyldt samt interaktionen mellem billedet og selektionerne. Metode Klik på menupunktet Red Eye og marker områder på skærmen, hvor røde øjne skal korrigeres. Forudsætning Et billede er åbnet i Silverlightapplikationen, og undermenuen Red Eye er åbnet. Trin Aktivitet Forventet Resultat 1 Klik på billedet og træk selektionen ud og rundt i en cirkel omkring punktet, hvor det indledende klik blev sat. Først med uret og efterfølgende mod uret. 2 Lav en selektion og slip museknappen. Kør musen rundt efter knappen er sluppet, og lad den også passere over selektionen. 3 Kør musen over selektionen og klik på den. Hold museknappen nede og flyt musen rundt. Flyt musen udover billedets grænser. 4 Kør musen over selektionen og klik på krydset i øverste højre hjørne. 5 Lav en ny selektion og træk den ud over billedets grænser, inden museknappen slippes. 6 Lav to selektioner på billedet, en der markerer et øje og en der ikke markerer et øje. Klik på OK -knappen. 7 Lav to selektioner på billedet og klik derefter på Reset-knappen. 8 Lav to selektioner på billedet og klik derefter på Cancel-knappen. Afvigelser Fejl fundet i trin 3 og 6. Tabel 8.9: Test af UC9 - Røde øjne Selektionen skal blive synlig og tilpasse sig, når musen bevæges rundt på billedet. Selektionen skal placeres, så musen er over hjørnet modsat det indledende klik. Når museknappen slippes, skal selektionen ikke længere følge med musen. Når musen passerer selektionen, skal et rødt kryds i øverste højrehjørne blive synligt. Når der klikkes på selektionen og musen bevæges, skal hele selektionen flyttes. Selektionen skal blive inden for billedet, selvom musen passerer grænserne. Når der klikkes på krydset, bliver selektionen slettet. Selektionen skal blive indenfor billedets grænser, selvom musen passerer grænserne. Når OK -knappen aktiveres vil der ske en farvejustering i det selekterede område. Hvis øjet er rødt, skal den røde farve rettes. Den selektion, hvor der ikke er et øje, skal fremstå uændret. Når Reset aktiveres, skal alle selektioner på billedet fjernes. Når Cancel aktiveres, skal alle selektioner på billedet fjernes, og undermenuen skal lukkes. Trin 3: Selektionen kan flyttes uden for billedets grænser. Rettet i RedEyeSelection metoden rect_mousemove. 122

127 KAPITEL 8. TEST Trin 6: Farvekorrektionen alene er ikke nok. Der skal udarbejdes en algoritme, der finder samlingen af røde pixels, der former det røde øje Test af UC10 - Zoom Formål Undersøge om krav fra UC10 er opfyldt samt interaktionen mellem zoom og de forskellige elementer (adorners), der er placeret over billedet. Metode Bruge zoom på billedet samt når billedet er påført de forskellige adornerobjekter. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Zoom i billedet og flyt det synlige område ved hjælp af navigationsadorneren. 2 Åben undermenuen Rotate / Flip, billedet roteres og spejlvendes, hvorefter der zoomes i billedet. Brug navigationsadorneren til at navigere i billedet. 3 Åben undermenuen Resize, størrelsen på billedet ændres, hvorefter der zoomes i billedet. Brug navigationsadorneren til at navigere i billedet. 4 Åben undermenuen Crop, flyt det midterste felt i selektionen og zoom ind i billedet. Brug navigationsadorneren til at navigere i billedet. Ændr på selektionen og zoom ud. fortsætter på næste side Billedet bliver større, og navigationsadorneren kommer til syne, når billedet bliver større end det synlige område på skærmen. Det er muligt at navigere rundt i billedet med navigationsadorneren. Når billedet zoomes, skal navigationsadorneren vise transformationerne, der er udført på billedet (rotation og spejlvending). Det skal være muligt at navigere i billedet med navigationsadorneren. Hvis størrelsen bliver ændret til en størrelse større end det synlige område på skærmen, skal billedet automatisk zoomes ud, så det hele er synligt. Hvis billedet er mindre end det synlige område, skal det vises i sin normale størrelse. Det skal hele tiden være muligt at zoome i billedet og bruge navigationsadorneren til navigation. Når der zoomes, skal beskæringsadorneren følge med. På navigationsadorneren skal vises en gul markering, der viser hvor på billedet selektionen er placeret. Hvis der ændres på selektionen, skal det ikke påvirke zoom. Selektionen skal være konstant proportionel med billedet uanset om der zoomes ind eller ud. 123

128 KAPITEL 8. TEST fortsættelse fra forrige side Trin Aktivitet Forventet Resultat 5 Åben undermenuen Red Eye, opret nogle selektioner og zoom ind i billedet. Brug navigationsadorneren til at navigere i billedet. Opret endnu en selektion og zoom ud i billedet. Afvigelser Fejl fundet i trin 2. Tabel 8.10: Test af UC10 - Zoom Når der zoomes i billedet, skal selektionerne følge proportionelt med ændringen i billedets størrelse. Trin 2: Hvis der foretages en finrotation af billedet, bryder det lille motiv på navigationsadorneren sine grænser. Hvis der zoomes og navigeres i billedet efter finjustering, kommer de blanke områder til syne Test af UC11 - Skabeloner Formål Undersøge om krav fra UC11 er opfyldt samt at skabelonerne kan påføres billedet i forbindelse med ændring af størrelse og beskæring. Metode Åbne undermenuerne Resize og Crop og påfør skabeloner. Åben skabelondialogen og henholdsvis opret og slet skabeloner. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Åben undermenuen Resize, aktiver dropdownmenuen og vælg en skabelon. 2 Åben skabelondialogen og opret en ny skabelon. Undlad på skift at udfylde et indtastningsfelt felt og gem skabelonen mellem hvert forsøg. Udfyld alle felter og gem skabelonen. Luk dialogen og påfør billedet skabelonen. fortsætter på næste side 124 Billedet ændrer størrelse i henhold til skabelonens dimensioner, og Proportionscheckboxen er aktiveret. Dialogen åbnes, og de eksisterende skabeloner vises i listen nederst i dialogen. Alle felter skal være udfyldt, før skabelonen kan oprettes. Felterne vil være markeret med rød kant, hvis de ikke er udfyldt. Når alle felter er udfyldt (bredde og højde acceptere kun tal) vil skabelonen blive oprettet og tilføjet listen over eksisterende skabeloner. Når skabelonen er oprettet og dialogen lukkes, skal den nye skabelon være tilgængelig i dropdownmenuen, og den kan aktiveres som de øvrige skabeloner.

129 KAPITEL 8. TEST fortsættelse fra forrige side Trin Aktivitet Forventet Resultat 3 Åben undermenuen Crop og påfør den skabelon, der blev oprettet i trin 2. 4 Åben skabelondialogen, slet skabelonen fra trin 2 ved at klikke på slet skabelonikonet, luk dialogen og aktiver dropdownmenuen. Tabel 8.11: Test af UC11 - Skabeloner Afvigelser Ingen afvigelser, funktionaliteten fungerer som forventet. Når undermenuen Crop åbnes, kan den nye skabelon vælges i dropdownmenuen, og selektionen vil tilpasses. Desuden skal skalering aktiveres, når en skabelon tilføjes. Når skabelondialogen åbnes vil den nye skabelon kunne findes på listen nederst i dialogen. Når skabelonen slettes, fjernes den fra listen, og når skabelondialogen lukkes, er den slettede skabelon også slettet fra dropdownmenuen. 125

130 KAPITEL 8. TEST Øvrig funktionalitet Undo og Redo Formål Undersøge om undo- og redo-funktionaliteten er implementeret i overensstemmelse med designet. Metode Udfør en række manipulationer på billedet og naviger igennem historikken. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Klik på undo- og redo-knapperne. Åben undermenuen Rotate / Flip, roter billedet en gang med uret og klik derefter på OK knappen. 2 Åben undermenuen Resize, ændr billedets størrelse til 50% af originalen og klik derefter på OK -knappen. Inden OK -knappen aktiveres, skal undo- og redo-knapperne være tonet ud og de skal ikke reagere på klik. Efter OK - knappen er blevet aktiveret, vil undoknappen blive tilgængelig og redo skal stadigt være tonet ud. Efter OK -knappen er blevet aktiveret, skal undo-knappen være tilgængelig og redo skal stadig være utilgængelig. 3 Klik på menupunktet Gray Scale. Efter der er blevet klikket på menupunktet, skal undo- og redo-knapperne være uændret siden trin 2. 4 Klik på undo-knappen. Billedet skal gå fra gråtoner til farver. 5 Klik på redo-knappen. Billedet skal gå fra farver til gråtoner. 6 Klik så meget det er muligt på undoknappen og derefter så meget det er muligt på redo-knappen. 7 Klik to gange på undo-knappen og åben derefter undermenuen Crop og klik på OK -knappen. Billedet skal skifte igennem de tre manipuleringer, der blev udført i trin 1, 2 og 3. Og derefter tilbage igen. Når en ny manipulation udføres, vil historikken efter blive slettet. Det vil sige, at ændring i størrelsen samt gråtoner vil blive fjernet fra historikken, og beskæring vil være sidste element. 8 Klik på undo-knappen to gange. Først vil beskæringen blive fjernet og derefter rotationen, så billedet fremstår som originalen. Tabel 8.12: Test af Undo og Redo Afvigelser Ingen afvigelser, funktionaliteten fungerer som forventet. 126

131 KAPITEL 8. TEST Reset Formål Undersøge om Reset-funktionaliteten virker, og billedet fjerner alle manipulationer og fremstår som originalen. Metode Udfør en række manipulationer på billedet og aktiverer Reset. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Udfør en rotation på billedet, klik OK og klik derefter på Reset-knappen 2 Udfør en rotation, gråtoner og ændre størrelsen på billedet. Klik derefter på Resetknappen. Tabel 8.13: Test af Reset Afvigelser Ingen afvigelser, funktionaliteten fungerer som forventet. Efter der er blevet klikket på Resetknappen, skal billedet fremstå som det originale billede hentet fra SharePoint listen. Efter der er blevet klikket på Resetknappen, skal billedet fremstå som det originale billede hentet fra SharePoint listen. 127

132 KAPITEL 8. TEST Cancel Formål Undersøge om Cancel-funktionaliteten virker, og reservationen af filen i SharePoint bliver fjernet. Metode Klik på Cancel-knappen. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Klik på Cancel-knappen. Silverlightapplikationen lukker, og browseren navigeres tilbage til listen. I SharePoint-listen skal reservationsikonet være fjernet fra listeelementet, der tidligere var åbent. Tabel 8.14: Test af Cancel Afvigelser Ingen afvigelser, funktionaliteten fungerer som forventet Session Timeout Formål Undersøge om systemet kan give en fornuftig fejlbesked, når sessionobjektet laver et timeout. Metode Aktivere funktionalitet der er afhængigt af sessionobjektet på skift, når session objektet har lavet en timeout. Forudsætning Et billede er åbnet i Silverlightapplikationen. Trin Aktivitet Forventet Resultat 1 Ændre tiden før sessionobjektet laver en timeout. I denne test er session timeout sat til 1 min. i Silverlightwebservicen (kode). Standard er 20 min. 2 Udfør følgende funktionaliteter efter Silverlightapplikationen har stået urørt i over 1 min. Gem, Gem Som, Undo, Redo, Reset, Cancel, Rotate / Flip, Resize, Crop, Gray Scale og Red Eye. fortsætter på næste side 128 Sessionobjektet laver sin timeout efter 1 min. Når fejlen opstår, skal fejldialogen vises, med information om at sessionobjektet er udløbet.

133 KAPITEL 8. TEST fortsættelse fra forrige side Trin Aktivitet Forventet Resultat 3 I fejldialogen aktiveres Back to listknappen. Tabel 8.15: Test af Session Timeout Afvigelser Ingen afvigelser, funktionaliteten fungerer som forventet. Browseren navigerer tilbage til SharePoint-listen, og det tidligere valgte listeelement er ikke længere reserveret Ugyldig Initialisering af Silverlightapplikationen Formål Undersøge om der bliver vist en fornuftig fejlbesked, hvis Silverlightapplikationen aktiveres forgæves. Metode Undersøge om applikationen kan åbnes, hvis der er valgt et billede, der allerede er reserveret, ved at åbne det samme billede i forskellige browservinduer. Undersøge om applikationen kan åbnes, hvis der ikke er forbindelse til Silverlightwebservicen. Forudsætning At der er et billede i SharePoint-listen. Trin Aktivitet Forventet Resultat 1 Åben en browser og naviger til SharePoint-listen og vælg et billede. 2 Åben en ny instans af en browser og naviger til den samme SharePoint-liste og vælg det same billed. 3 Deaktiver Silverlightwebservicen i IIS på SharePoint-serveren. Silverlightapplikationen åbnes med det valgte billede. Silverlightapplikationen åbnes, og der vises en fejldialog, hvor der står, at billedet er reserveret af en anden bruger. Silverlightapplikationen åbnes, og der vises en fejldialog, hvor der står, at forbindelse til webservicen er fejlet. Tabel 8.16: Test af ugyldig initialisering af Silverlightapplikationen Afvigelser Ingen afvigelser, funktionaliteten fungerer som forventet. 129

134 KAPITEL 8. TEST 8.3 Whitebox-test SharePointWebservicen testes efter Whitebox-metoden, der er baseret på fuld indsigt i programmets opbygning og struktur. Der er udviklet en testapplikationen, der verificerer alle funktioner i webservicen. Testapplikationen er desuden brugt under implementeringen for løbende at teste funktionalitetens korrekthed, inden webservicen blev deployeret. Testapplikationen har et brugerinterface, hvor et SharePoint-listeid og element-id(itemid) kan indtastes, og på den baggrund kaldes de fire funktioner i SharePointWebservicen. Applikationen skriver løbende statusbeskeder til skærmen, så det er muligt at følge med i hvad der sker. Kildekoden til testapplikationen kan ses i appendiks (10.4.5) side Accepttest Accepttesten er en Blackboxtest/funktionstest udført af kunden. Der er udarbejdet en testcase, hvor alle virksomhedens krav bliver testet. Testen er udført af Peter Gøtterup, Webtop A/S. Krav Aktivitet Resultat(+/-) Hent billede Find et dokumentbibliotek i SharePoint og verificer, at Manipulate Image menupunktet bliver vist, når der klikkes på billeder af type JPG og PNG. Hent billede Åben et billede af type JPG eller PNG og se billedet bliver åbnet i Silverlightapplikationen. Roter Åben menupunktet Rotate / Flip og udfør rotation på billedet. Der kan roteres med 90 -intervaller ved at klikke på knapperne eller rotation med 0, 1 nøjagtighed ved at trække i potentiometeret. Spejlvend Åben menupunktet Rotate / Flip og udfør horisontal og vertikal spejlvending af billedet. Prøv også at spejlvende efter en rotation er udført. Beskær Åben menupunktet Crop og udfør beskæring af billedet. Udfør derefter en beskæring med skalering aktiveret. Aktiver en skabelon og se størrelsen på det valgte område ændre sig. Ændre størrelse Åben menupunktet Resize og ændr størrelsen på billedet. Prøv at aktivere procent ved at klikke på Percentagecheckboxen og derefter ændre størrelsen på billedet. Prøv også at fjerne Proportions og ændre størrelsen på billedet. Aktiver en skabelon og se billedet får denne størrelse. fortsætter på næste side

135 KAPITEL 8. TEST fortsættelse fra forrige side Krav Aktivitet Resultat(+/-) Sort/Hvid Røde øjne Zoom Zoom Gem billede Gem billede som Klik på menupunktet Gray Scale og se billedet bliver ændret til gråtoner. Åben menupunktet Red Eye, marker eventuelle røde øjne og udfør korrektionen. Brug zoom-kontrollen til at zoome i billedet. Brug derefter zoomnavigatoren til at navigere rundt i billedet. Åben menupunktet Crop og vælg Add or Delete Template-knappen. Opret en ny skabelon. Verificer at den nye skabelon oprettes i skabelonlisten. Slet derefter en anden skabelon og verificer, at den fjernes fra listen. Luk skabelondialogen og verificer, at den nye skabelon optræder i dropdownmenuen. Klik på Save-knappen og se der bliver navigeret tilbage til SharePoint-listen, og billedet nu er ændret. Klik på Save As-knappen og giv billedet et nyt navn. Se at systemet navigerer tilbage til SharePoint-listen, og en ny instans er oprettet med det specificerede navn og billede. Verificer at kolonnen OriginalImage har en henvisning til det originale billede. Verificer at det originale billede er checked out i SharePoint. Tabel 8.17: Accepttest Fejlbeskrivelse (red. tester har ikke noteret nogle fejbeskrivelser)

136 KAPITEL 8. TEST 8.5 Konklusion af test Whitebox-testen på SharePointWebservicen viste, at webservicen fungerer som forventet. Brugergrænsefladetesten af Silverlightapplikationen samt testen af SilverlightWebservicen resulterede i nogle fejl, der let kunne rettes samt tre større problematikker, der anbefales korrigeret som en del af et eventuelt videreudviklingsforløb. De tre problematikker er beskrevet herunder, Skalering Der er i forbindelse med implementering og test af skalering fundet et problem, der endnu ikke er håndteret. Dette omhandler situationen, hvor øverste venstre hjørne trækkes, samtidigt med skalering er aktiveret. Problematikken er, at når enten højde eller bredde automatisk tilpasses, vil det midterste felt ligeledes flytte sig. Dette sker, da UIElementer placeres på canvas efter øverste venstre hjørne, og hjælpefunktionerne, adjustwidthfromright og adjustheightfromtop, ændrer på placeringen, når midtens størrelse ændres. En løsning kan være at udvikle en ny metode, der ikke benytter sig af adjustwidthfromright og adjustheightfromtop. Dette vil blive rettet, hvis tidsplanen tillader det Finrotation og navigationsadorneren Når motivet roteres, opstår der blanke områder i billedet. På Surface er dette håndteret med en automatisk tilpasset zoom, men det vil ikke være hensigtsmæssigt i navigationsadorneren. Navigationsadorneren bruger ViewZone til at vise zoom og ændrer ikke på størrelsen af det lille billede. Udover de blanke områder vil der også være dele af motivet, der går ud over navigationsadornerens grænser. I Surface er dette håndteret ved at placere de øvrige elementer højere i visningsheirakiet end billedet og derved skjule det for brugeren. Dette er ikke muligt i navigationsadorneren, da den er placeret øverst i visningsheirakiet, så den altid vil være synlig for brugeren Finrotation og zoom Når en finrotation udføres, og billedet samtidigt er zoomet, kan brugeren med navigationsadorneren navigere til yderpunkter på billedet. I disse punkter bliver de blanke områder igen synlige. Finrotationsadorneren er placeret på SurfaceBackground og tager udgangspunkt i Surface størrelse, og når Surface bliver større end SurfaceBackground, vil finrotationsadorneren ikke være synlig. Når dette sker, og Surface roteres, opstår de blanke områder, som brugeren kan navigere til via navigationsadorneren. 132

137 Kapitel 9 Konklusion Indhold 9.1 Projektet SharePoint SharePointWebservice SilverlightWebservice Silverlightapplikationen Evaluering

138 KAPITEL 9. KONKLUSION 9.1 Projektet Projektets mål har været at udvikle en billedbehandlingsapplikation, der kan integreres i SharePoint og bruges til at behandle billeder, som allerede er lagret i lister af typen document library. Silverlight understøtter ikke pixeladgang i et eksisterende billede, så det har været nødvendigt at udvikle en applikationsarkitektur, hvor billedbehandlingen stadig er mulig. Da Silverlight understøtter asynkron kommunikation med en server via en WCFwebservice, er det en oplagt mulighed for at realisere billedbehandlingen, der sagtens kan ske på serverniveau. Systemarkitekturen blev designet, så systemet består af to webservices og en Silverlightapplikationen, der fungerer som den reelle brugergrænseflade. Silverlightapplikationen bruger SilverlightWebservicen til at kommunikere med SharePoint-serveren og SilverlightWebservicen får adgang til SharePoint-serverens API via SharePointWebservicen. De enkelte dele af systemet er opsummeret herunder SharePoint Der er implementeret en SharePoint-feature, der tilføjer et menupunkt (Manipulate Image) til kontekstmenuen for alle listeelementer med filer af typen JPG eller PNG. Silverlight understøtter pt. ikke andre billedformater. Silverlightapplikationen (XAPpakke) er placeret på SharePoint-serveren og åbnes i en.aspx-side, når menupunktet Manipulate Image vælges for et listeelement i en SharePoint-dokumentbibliotek-liste SharePointWebservice I kravspecifikationen blev det bestemt, at billedbehandlingsapplikationen skal kunne hente billeder fra en SharePoint-liste og gemme dem igen bagefter. Desuden skal et billede kunne gemmes som en ny instans i samme liste som originalen. Det var også et ønske, at SharePoints sikkerhedsfunktionalitet omkring reservation af filer skulle bruges. Disse krav er opfyldt ved webservicen SharePointWebservice, der netop har disse funktionaliteter. For at kunne hente et billede ud af SharePoint og efterfølgende gemme det igen, er det nødvendig med en tilgang til SharePoint-serverens API. Denne tilgang er struktureret som en webservice, der er sat op på SharePoint-serveren. Når webservicen henter et billede, bliver det reserveret i listen, så andre brugere ikke kan manipulere det samtidigt. Ligeledes fjernes denne reservation, når billedet gemmes. SharePointWebservicen er testet med en Whiteboxtest, hvor der er udviklet en lille testapplikationen, der har verificeret webservicens funktioner. 134

139 KAPITEL 9. KONKLUSION SilverlightWebservice Når billedbehandlinger skal foretages, er det SilverlightWebservicen, der udfører operationerne. Første gang SilverlightWebservicen tages i brug vil altid være, når Silverlightapplikationen startes, og et billede skal hentes ind. Når dette sker, opretter webservicen to objekter. Det ene indeholder en kopi af det originale billede samt en kopi af det aktuelle. Det andet objekt indeholder manipulationshistorikken. Begge disse objekter placeres i sessionobjektet, så de er tilgængelige i de efterfølgende webservicekald. Dette er nødvendigt, da en ny instans af webserviceklassen instantieres, hver gang den bliver kaldt af Silverlightapplikationen. SilverlightWebservicen indeholder en række operationsobjekter (Command design pattern), der udfører selve billedmanipulationsfunktionerne. Disse operationsobjekter opfylder de krav til funktionalitet, som blev fundet i kravspecifikationen. Det var også et krav, at systemet skulle tilbyde en manipulationshistorik. Denne er organiseret som en liste af billeder, hvor det første billede er identisk med originalen og de efterfølgende hver repræsenterer en manipulationen. En alternativ metode ville være at gemme operationsobjekterne i den rækkefølge, de er udført på billedet. Dette blev dog konkluderet som uhensigtsmæssigt, da billedkvaliteten vil blive påvirket af operationer. Brugen af skabeloner, der specificerer faste højder og bredder, er ligeledes et ønske fra kravspecifikationen. Dette kunne enten implementeres som en SharePoint-liste eller som en XML-fil i SilverlightWebservicen. Den sidste nævnte løsning blev valgt grundet projektets deadline, selvom SharePoint-listen nok havde været den mest hensigtsmæssige, da det på den måde vil være muligt at bruge de indbyggede sikkerhedsfunktioner i forbindelse med sletning og ændring af listeinstanser i et fler-brugersystem som Share- Point. SilverlightWebservicen er testet som en Grayboxtest sammen med Silverlightapplikationen. Webservicen er tæt integreret med applikationen og er skabt til at kommunikere med Silverlight. Derfor var den fælles test oplagt. I forbindelse med testen blev et problem fundet i forbindelse med rød-øje-korrektion, der udføres af et operationsobjekt i SilverlightWebservicen. Operationen udfører en farvekorrektion på det område, som brugeren har specificeret i Silverlightapplikationen, men koncentrationen af rød kan være stor i pixels omkring det røde øje. Der bør derfor udvikles en algoritme, der kan finde en samling af pixels med høj koncentration af rød og korrigere dem i stedet for alle pixels i området. SilverlightWebservicen er deployed på SharePoint-serveren som en selvstændig webapplikationen. 135

140 KAPITEL 9. KONKLUSION Silverlightapplikationen Silverlightapplikationen er systemets brugergrænseflade og er den mest omfangsrige komponent i systemet. Udviklingen er struktureret efter designmønstre (Eng. Design Patterns), hvor det var oplagt. Der er brugt et Mediator-mønster, hvor en central kontrolenhed styrer brugergrænsefladeobjekternes indbyrdes interaktion. Der er brugt et Observer-mønster, hvor flere objekter observerer et subjekt for ændringer, og der er brugt et Command-/CommandHolder-mønster til at organisere operationsobjekterne, der kommunikerer med SilverlightWebservicen i forbindelse med manipulation af billedet. Brugen af designmønstre er gjort for at få en generaliseret struktur, der forhåbentligt også vil være genkendelig for udviklere i forbindelse med videreudvikling. Silverlight har et begrænset udvalg af brugergrænsefladekomponenter, og det har derfor været nødvendigt selv at udvikle en menustruktur samt de hjælpeelementer, der er brugt i forbindelse med specificering af manipulationsparametrene. Hjælpeelementerne er i denne rapport betegnet som adorners, der er engelsk for forskønner. Der er i systemet brugt tre adorners i forbindelse med henholdsvis rød-øje-korrektion, beskæring og rotation. Adornerne placeres over billedet og giver brugeren en visualisering, inden manipulationen udføres. I forbindelse med beskæring giver adorneren brugeren en tydelig visualisering af, hvilket område af billedet der bliver tilbage efter beskæringen. Udover brugen af adorners er der brugt transformationer på billedet i Silverlight, så brugeren kan se resultatet af manipulationen inden det reelt udføres af SilverlightWebservicen. Dette opfylder kravspecificeringen omkring at give brugeren WYSIWYG-oplevelse. Silverlightapplikationen er testet sammen med Silverlightwebservicen ved en Grayboxtest. Der var udarbejdet test cases i overensstemmelse med de krav, der blev beskrevet i analysefasen. Der blev fundet tre uhensigtsmæssigheder/fejl, i forbindelse med test af Silverlightapplikationen. Disse fejl omhandler alle brugergrænsefladen og er ikke blevet rettet på grund af manglende tid. Fejlene omhandler; Skalering af billede i forbindelse med beskæring. Øverste venstre hjørne reagerer ikke hensigtsmæssigt og hele selektionen flyttes. En midlertidig løsning er implementeret, hvor hjørnet reagerer som øverste kant, der fungerer efter hensigten. Når billedet finroteres bryder der navigationsadornerens grænser. I forbindelse med finrotation af det store billede er der placeret en adorner over, så rotationen og blanke områder ikke vises. Dette er ikke umiddelbart en løsning i forbindelse med navigationsadorneren, da den er placeret øverst i visningshierarkiet. En mulig løsning kan være at generere et nyt billede på baggrund af den synlige del af det store billede, men dette vil kræve et redesign af navigationsadorneren. En midlertidig løsning er implementeret, hvor navigationsadorneren ikke viser finrotation og billedet derfor ikke bryder grænserne. Hvis et billede bliver finroteret og der samtidigt er zoomet, vil brugeren kunne navigere sig til kanterne af billedet, hvor blanke områder vil være synlige. Problemet er at den adorner, der ligger over hele baggrunden tilpasser sin størrelse 136

141 KAPITEL 9. KONKLUSION efter hvor stort billedet er, og når der zoomes kan det blive større end det synlige område på baggrunden, og dette medfører at adorneren ikke bliver vist. Løsningen er en implementering, hvor adorneren tilpasser sin størrelse efter hvilken del af billedet der vises foruden selve billedets størrelse. Der er ikke implementeret nogen midlertidig løsning for dette problem. 9.2 Evaluering Jeg valgte at udarbejde dette projekt i samarbejde med Peter Gøtterup fra Webtop. Mit personlige mål med processen og projektet var at udarbejde en applikation, som kan skabe værdi for virksomheden. Samtidigt ønskede jeg at arbejde inden for teknologier, som jeg ikke hidtil har haft berøring med, så min horisont kunne udvides. Jeg havde ikke nogen erfaringer med SharePoint, Silverlight og webservices, inden projektet startede, og det har givet store udfordringer og indfriet min målsætning omkring udvidelse af min horisont. Deployeringen af webservices har taget mere tid end forventet, da jeg har haft svært ved at finde informationer om, hvordan det skal gøres i praksis. Udvikling i Silverlight har fyldt en stor del af udviklingsarbejdet allerede tidligt i projektet. De mange brugergrænsefladeelementer, deres indbyrdes interaktion og koordinering af adorners og zoom har været en stor opgave. Den overordnede tidsplan er i store træk blevet overholdt og de løbende rapport afleveringer til vejleder har uden tvivl været til stor gavn, da rapportskrivning ellers kan have en tendens til at blive negligeret i forhold til udviklingsarbejde. Hvis jeg havde mulighed for at ændre noget i projektforløbet, ville jeg nok have omstruktureret objektmodellen for Silverlightapplikationen, så Mediator var en abstrakt klasse og nedarvede til specifikke kontrolenheder, der håndterer interaktion med en mere afgrænset mængde objekter. En anden fordel ved at dele Mediator i flere kontrolenheder vil være muligheden for at tage dem ud og integrere delene i andre applikationer. At dele Mediator ville give en mere modulær opbygning. Jeg har med dette projekt udviklet en fuldt fungerende Silverlight-integration med SharePoint. De krav, som virksomheden satte i starten af projektforløbet, er alle blevet opfyldt, men der er dog plads til forbedringer, da ikke alle er opfyldt til perfektion. Dette omfatter de fire uhensigtsmæssigheder/fejl, der blev fundet i forbindelse med test og vil efter min mening kunne udvikles inden for nogle få uger. 137

142 Brug af Silverlight i SharePoint - Appendiks - IT-Diplomingeniør bacheloropgave udført hos Webtop A/S Frederik Gaarn Kiær s Institut for Matematisk Modellering, IMM Danmarks Tekniske Universitet Kongens Lyngby, 17. september 2009

143 Technical University of Denmark Informatics and Mathematical Modelling Building 321, DK-2800 Kongens Lyngby, Denmark Phone , Fax IMM-B.Eng

144 Kapitel 10 Appendiks Indhold 10.1 Indhold på vedlagte CD Brugergrænsefladen Screenshots af Silverlightapplikationen Startsiden Navigationsadorneren aktiveret Rotate/Flip undermenuen åbnet Resize undermenuen åbnet Crop undermenuen åbnet RedEye undermenuen åbnet SaveAs-dialogen Template-dialogen Error-dialogen Genvejstaster Skabelon XML Deployering Guide til opsætning af SharePointWebservice Guide til opsætning af SilverlightWebservice Kildekode SharePoint SharePointWebservice SilverlightWebservice Silverlightapplikationen Test Applikationen

145 10.1 Indhold på vedlagte CD På den vedlagte CD er placeret to mapper, hvor den ene indeholder rapporten i pdfformat og den anden mappe indeholder projektets kildekode. Kildekoden er organiseret i fem direktorier, SharePoint Indeholder mappen ManipulateImageFeature, der er den SharePoint-feature, som er brugt til at placere Manipulate Image-menupunktet i listeelementernes kontekstmenu samt filen ImageManipulation.aspx, der holder Silverlightapplikationen. SharePointWebservice Visual Studio-projektet for SharePointWebservicen der bruges til at hente og gemme billeder via SharePoint-serverens API. Silverlight Visual Studio-projektet for Silverlightapplikationen. SilverlightWebservice WCF-webservicen der skaber kommunikation mellem Silverlightapplikationen og serveren. TestApplication Testapplikationen der er brugt til at teste SharePointWebservicen. 141

146 KAPITEL 10. APPENDIKS 10.2 Brugergrænsefladen Screenshots af Silverlightapplikationen Startsiden Navigationsadorneren aktiveret 142

147 KAPITEL 10. APPENDIKS Rotate/Flip undermenuen åbnet Resize undermenuen åbnet 143

148 KAPITEL 10. APPENDIKS Crop undermenuen åbnet RedEye undermenuen åbnet 144

149 SaveAs-dialogen Template-dialogen 145

150 Error-dialogen Genvejstaster Shift+S: Save Shift+C: Crop Shift+E: Resize Shift+O: Rotate Shift+G: GrayScale Shift+Y: RedEye Shift+U: Undo Shift+D: Redo Shift+A: SaveAs Shift+T: Reset Shift+Escape: Cancel Shift+H: Toggle Help Hvis undermenu åben: Shift+Escape: Cancel Shift+Enter: Ok Shift+T: Reset Skabelon XML <?xml version="1.0" encoding="utf-8"?> <templates> <template> 146

PHP Quick Teknisk Ordbog

PHP Quick Teknisk Ordbog PHP Quick Teknisk Ordbog Af Daniel Pedersen PHP Quick Teknisk Ordbog 1 Indhold De mest brugte tekniske udtryk benyttet inden for web udvikling. Du vil kunne slå de enkelte ord op og læse om hvad de betyder,

Læs mere

Dokument- og Sagsstyringssystem

Dokument- og Sagsstyringssystem Dokument- og Sagsstyringssystem Mads Nissen Kongens Lyngby 2010 IMM-B.Eng-2009-36 Technical University of Denmark Informatics and Mathematical Modelling Building 321, DK-2800 Kongens Lyngby, Denmark Phone

Læs mere

Manual for Synkron hjemmesider

Manual for Synkron hjemmesider Manual for Synkron hjemmesider Denne manual tilhører: Brugernavn: (username) Adgangskode: (password) 1 Start med sitetræet: Sitetræet er centralt. Det er her, dit website er. Det er her, du bygger dine

Læs mere

Internet Information Services (IIS)

Internet Information Services (IIS) Internet Information Services (IIS) Casper Simonsen & Yulia Sadovskaya H1we080113 06-11-2013 Indholdsfortegnelse Problemformulering... 2 Hvorfor:... 2 Hvad:... 2 Hvordan:... 2 Problembehandling... 3 Introduktion...

Læs mere

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

Kravsspecifikation til Nationalpark App

Kravsspecifikation til Nationalpark App Kravsspecifikation til Nationalpark App Kravsspecifikation til Nationalpark App...1 1. Introduktion og platform...1 2. Ikke funktionelle specifikationer...2 3. Brugeroplevelse...2 4. Indholdsleverandører...2

Læs mere

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4 Indhold 1 Indledning... 3 1.1 Kompatible browsere... 3 2 Log ind i Umbraco... 3 3 Content-delen... 4 3.1 Indholdstræet... 4 3.2 Ændring af indhold... 5 3.3 Tilføjelse af en side/sektion... 6 3.4. At arbejde

Læs mere

Supermarkedsmodellen for design af brugergrænseflade

Supermarkedsmodellen for design af brugergrænseflade Supermarkedsmodellen for design af brugergrænseflade Denne note er skrevet frit efter Peter Huber, som på et kursus i Efteruddannelsescenteret fortalte om supermarkedsmodellen til design af brugergrænseflader.

Læs mere

Visualisering. Kan opdeles i 2 dele Præsentations værktøj Portal

Visualisering. Kan opdeles i 2 dele Præsentations værktøj Portal Innofactor Plc 2000-2012 Visualisering Stigende krav til visualisering Brugervenlighed - flere brugere skal kunne anvende og lave visualiseringer Dynamisk Æstetisk Flere forskellige former for visualiseringer

Læs mere

Billeder på bibliotek.kk.dk. Hent et billede og gem det på din PC:

Billeder på bibliotek.kk.dk. Hent et billede og gem det på din PC: Billeder på bibliotek.kk.dk Hent et billede og gem det på din PC: I dette eksempel henter vi et billede fra Google. Du kan også hente billeder i Flickr, Picasa etc. (NB! Husk at der er rettigheder knyttet

Læs mere

Billedbehandling. Lær de simple værktøjer at kende. Version: August 2012

Billedbehandling. Lær de simple værktøjer at kende. Version: August 2012 Billedbehandling Lær de simple værktøjer at kende Version: August 2012 Indholdsfortegnelse Dette hæfte...4 Begreber udi billedbehandling...4 Billedstørrelse...4 Sideformat...5 Filformat...5 Hent et billede

Læs mere

SmartFraming Et vindue til nationale sundhedssystemer. Version 3.0

SmartFraming Et vindue til nationale sundhedssystemer. Version 3.0 SmartFraming Et vindue til nationale sundhedssystemer Version 3.0 Infrastruktur i dagens sundheds IT Det sundhedsfaglige personale benytter sig i dag af en række forskellige systemer i forbindelse med

Læs mere

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 TYPO3 manual DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 Det første afsnit, Introduktion til systemet, giver et hurtigt overblik over mulighederne.

Læs mere

T a r g e t G r u p p e n Microsoft SharePoint

T a r g e t G r u p p e n  Microsoft SharePoint T a r g e t G r u p p e n Microsoft SharePoint I n d h o l d s f o r t e g n e l s e Microsoft SharePoint...1 Versioner...1 SharePoints opbygning... 3 Site...3 Indholdselementer...4 Sider...4 Biblioteker...4

Læs mere

Billeder på hjemmeside

Billeder på hjemmeside Billeder på hjemmeside Indholdsfortegnelse Emne 1. Billedredigering (Microsoft Picture Manager) Side 3 a. Komprimer billeder b. Beskæring af billeder 3 9 2. Billeder og tekst ved hjælp af en skabelon (Template

Læs mere

Projekt - Visual Basic for Applications N på stribe

Projekt - Visual Basic for Applications N på stribe Projekt - Visual Basic for Applications N på stribe Mikkel Kaas og Troels Henriksen - 03x 3. november 2005 1 Introduktion Spillet tager udgangspunkt i det gamle kendte 4 på stribe, dog med den ændring,

Læs mere

TMG Webbaseret ressourceallokeringssystem til projektplanlægning

TMG Webbaseret ressourceallokeringssystem til projektplanlægning TMG Webbaseret ressourceallokeringssystem til projektplanlægning Thomas Bergstedt Kongens Lyngby 2007 IMM-B.Eng-2007-69 Technical University of Denmark Informatics and Mathematical Modelling Building 321,

Læs mere

FESD-standardiseringsgruppen Att: Palle Aagaard IT- og Telestyrelsen IT-strategisk kontor Holsteinsgade 63 2100 København Ø

FESD-standardiseringsgruppen Att: Palle Aagaard IT- og Telestyrelsen IT-strategisk kontor Holsteinsgade 63 2100 København Ø FESD-standardiseringsgruppen Att: Palle Aagaard IT- og Telestyrelsen IT-strategisk kontor Holsteinsgade 63 2100 København Ø Høringssvar vedr. FESD GIS-integrationsmodel version 2.0 Geodata Danmark har

Læs mere

Automatisk Vandingssystem

Automatisk Vandingssystem Automatisk Vandingssystem Projektdokumentation Aarhus Universitet Gruppe 6-3. Semester - F15 vejleder: Michael Alrøe dato: 28-05-2015 Lærke Isabella Nørregård Hansen - 201205713 - IKT Kasper Sejer Kristensen

Læs mere

Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune

Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune Manual Version 2 til oprettelse af hjemmesider for landsbyer i Rebild kommune Oversigt: Login Hjemmeside...... side 3 Login Administrationsmodul... side 5 Kategorier.. side 6 Opret/rediger første side...

Læs mere

den rollebaserede brugergrænseflade

den rollebaserede brugergrænseflade WHITE PAPER Rollebaseret brugergrænseflade. Hvordan tilpasses profiler? Du er sikkert allerede bekendt med, hvordan brugergrænsefladerne i moderne ERP-systemer er opbygget, og hvordan de herved, danner

Læs mere

POWERPOINT 2010 LÆR DET SELV POWERPOINT 2010 LÆR DET SELV

POWERPOINT 2010 LÆR DET SELV POWERPOINT 2010 LÆR DET SELV KIRSTEN KRISTENSEN POWERPOINT 2010 LÆR DET SELV Dette hæfte lærer dig at lave velfungerende præsentationer i programmet PowerPoint 2010. Du får en god introduktion til programmets brugerflade og de forskellige

Læs mere

Lavet af Danni jensen og David Olsen

Lavet af Danni jensen og David Olsen Projekt Delfin Lavet af Danni jensen og David Olsen 19/5-2008 Indholdsfortegnelse. Side 1: Indholdsfortegnelse og forord. Side 2: Kravsliste. Side 3: Use Case Model. Side 4: Formandens aktørbeskrivelse

Læs mere

Redaktørmanual TYPO3. LinkFactory TYPO3 MANUAL

Redaktørmanual TYPO3. LinkFactory TYPO3 MANUAL LinkFactory TYPO3 MANUAL Kapitel 1 - TYPO3 CMS - Opbygning... 3 Log ind... 3 Backend... 4 Frontend... 5 Hvor skal jeg klikke?... 5 Gem, gem og vis, gem og luk... 6 Kapitel 2 - Håndtering af sider & menuer...

Læs mere

Grundlæggende OOA - OOD

Grundlæggende OOA - OOD Grundlæggende OOA - OOD Dette kursus henvender sig til personer, der har lille eller ingen erfaring med softwareudvikling. Med udgangspunkt i UML opbygges et solidt kendskab til softwareudviklingens kunst

Læs mere

INDHOLDSFORTEGNELSE. INDLEDNING... 7 Kristian Langborg-Hansen. KAPITEL ET... 9 I gang med App Inventor. KAPITEL TO...

INDHOLDSFORTEGNELSE. INDLEDNING... 7 Kristian Langborg-Hansen. KAPITEL ET... 9 I gang med App Inventor. KAPITEL TO... INDHOLDSFORTEGNELSE INDLEDNING... 7 Kristian Langborg-Hansen KAPITEL ET... 9 I gang med App Inventor Installation af App Inventor... 10 Trådløs installation... 11 Installation af emulator (Windows)...

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

Edb-tekstbehandling, præsentation mm

Edb-tekstbehandling, præsentation mm Edb-tekstbehandling, præsentation mm I denne lektion skal du: - hente kopier et skærmbillede og sætte det ind i et dokument - beskære billedet, så det passer til dit dokument Der findes specielle programmer

Læs mere

Succes med intranet til Office 365. Den 13. august 2014 Webtop A/S s. 1

Succes med intranet til Office 365. Den 13. august 2014 Webtop A/S s. 1 Succes med intranet til Office 365 Webtop A/S s. 1 Hvem er jeg https://twitter.com/jeslas http://www.linkedin.com/in/jesslassen Webtop A/S s. 2 Hvad er Office 365 Office pakken (Word, Excel..) Skyudgaver

Læs mere

Undervisning Version 1.0 redigering af billeder til hjemmesiden

Undervisning Version 1.0 redigering af billeder til hjemmesiden Undervisning Version 1.0 redigering af billeder til hjemmesiden Nødvendigheden for at almindelig god bruger til edb. Her taler jeg ikke om at blive en superbruger men bare en bruger der styr på almindelig

Læs mere

Sådan redigerer du en hjemmeside i Umbraco

Sådan redigerer du en hjemmeside i Umbraco Brugermanual til din boligafdelings hjemmeside Sådan redigerer du en hjemmeside i Umbraco Indhold Introduktion... 2 Log på Umbraco og redigér din hjemmeside... 3 Opret ny side... 7 Gem side uden at udgive/publicere

Læs mere

BYFORNYELSE. IT i byfornyelsen elektronisk borgerinddragelse

BYFORNYELSE. IT i byfornyelsen elektronisk borgerinddragelse BYFORNYELSE IT i byfornyelsen elektronisk borgerinddragelse Socialministeriet 2007 Udarbejdet af Laura Larvig Andersen og Jonas Bjørn Whitehorn, Kvarterløft Nørrebro Park, Københavns Kommune Omslagsfoto

Læs mere

Succes med intranet til Office 365

Succes med intranet til Office 365 Succes med intranet til Office 365 Agenda 8.30 9.00 Morgenmad og registrering 9.00 9.10 Præsentation af Webtop 9.10 9.45 Hvad er Office 365? 9.45 10.15 Hvad skal et moderne intranet kunne? 10.15 10.30

Læs mere

Database for udviklere. Jan Lund Madsen PBS10107

Database for udviklere. Jan Lund Madsen PBS10107 Database for udviklere Jan Lund Madsen PBS10107 Indhold LINQ... 3 LINQ to SQL og Arkitektur... 3 O/R designere... 5 LINQ Den store introduktion med.net 3.5 er uden tvivl LINQ(udtales link): Language-INtegrated

Læs mere

Installation og Drift. Aplanner for Windows Systemer Version 8.15

Installation og Drift. Aplanner for Windows Systemer Version 8.15 Installation og Drift Aplanner for Windows Systemer Version 8.15 Aplanner for Windows løsninger Tekniske forudsætninger Krav vedr. SQL Server SQL Server: SQL Server 2008 Express, SQL Server 2008 R2 eller

Læs mere

Administrator manual

Administrator manual Revision 1 Administrator manual INDHOLD LOG IND 1 OVERBLIK 1 ARBEJDSRUM 1 MEDARBEJDERE 2 OPRET NY MEDARBEJDER 2 TRIN 1 AF 4: NAVN OG OPLYSNINGER 2 TRIN 2 AF 4: LEGITIMATION 2 TRIN 3 AF 4: EFFEKTIVITETSNIVEAU

Læs mere

Forløb kreativ-kommunikativ toning

Forløb kreativ-kommunikativ toning Forløb kreativ-kommunikativ toning C - Interaktive test C/B - Reklamespil B Digitale Billeder B Kvidder/Fjæsbog Interaktive Test 1. Analyse af interaktive test og deres betydning for brugerens valg. 2.

Læs mere

Billedoptimering i indkaldelsesbreve

Billedoptimering i indkaldelsesbreve Billedoptimering i indkaldelsesbreve Af Flemming Madsen I denne vejledning vil vi vise, hvordan du som skoleadministrator optimerer billeder i rtfdokumenter og dermed kan generere breve med skolens logo

Læs mere

PORTFOLIO Version 2.0

PORTFOLIO Version 2.0 Nikolaj Lisberg Hansen Løsningsarkitekt og partner nikolaj.hansen@empisto.dk Tlf. 22 90 91 22 PORTFOLIO Version 2.0 Kvalitetsstyring med sags og dokumenthåndtering Teknisk revision af energimærker Portfolio

Læs mere

PHP kode til hjemmeside menu.

PHP kode til hjemmeside menu. PHP kode til hjemmeside menu. Home Hovedmenu 1 Hovedmenu 2 Hovedmenu 3 Hovedmenu 4 Undermenu 1 Breadcrumb Her vises indholdet af den valgte side Undermenu 2 Undermenu 3 Undermenu 4 Evt. en mulighed for

Læs mere

Studieordning del 4-2014

Studieordning del 4-2014 Studieordning del 4-2014 Fagbeskrivelser Datamatiker AP Graduate in Computer Science Version 1.1 Revideret august 2014 Side 0 af 8 Indhold del 4 Fagbeskrivelser 1. Faget Programmering (PRO)...2 2. Faget

Læs mere

PID2000 Archive Service

PID2000 Archive Service PROLON CONTROL SYSTEMS Herstedvesterstræde 56 DK-2620 Albertslund Danmark Tlf.: (+45) 43620625 Fax: (+45) 43623125 PID2000 Archive Service Bruger vejledning Juni 2002 Denne manual beskriver brugen af softwaren

Læs mere

Oktober 2013 HLG/XIGA. Opstartsvejledning ATS Engros 1/12

Oktober 2013 HLG/XIGA. Opstartsvejledning ATS Engros 1/12 Oktober 2013 HLG/XIGA Opstartsvejledning ATS Engros 1/12 1. ATS Engros vejledning for aktører Formålet med dette dokument er at beskrive, hvordan du kommer i gang med at anvende ATS til test af certifikat

Læs mere

Manual til WordPress CMS

Manual til WordPress CMS Manual til WordPress CMS 1. Log ind på din Wordpress-side For at arbejde på din hjemmeside skal du først logge ind på administrationsdelen. Muligvis har du et direkte link på siden. Ellers er adressen

Læs mere

Carry it Easy Brugermanual

Carry it Easy Brugermanual Carry it Easy Brugermanual Brugermanual Version 2.0 2004-2006 CoSoSys SRL Carry it Easy Brugermanual Indholdsfortegnelse Indholdsfortegnelse...I 1. Introduktion...1 2. Systemkrav...2 3. Installation...2

Læs mere

1 Ordliste 2. 2 Indledning 3 2.1 Problemstillinger... 3 2.2 Problemformulering... 4 2.3 Problemafgrænsning... 4 2.4 Mål med projektet...

1 Ordliste 2. 2 Indledning 3 2.1 Problemstillinger... 3 2.2 Problemformulering... 4 2.3 Problemafgrænsning... 4 2.4 Mål med projektet... Indhold 1 Ordliste 2 2 Indledning 3 2.1 Problemstillinger.................................. 3 2.2 Problemformulering................................ 4 2.3 Problemafgrænsning................................

Læs mere

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Systemkrav For at kunne bruge Composite kræves: Windows 95 eller nyere (bemærk - kun Windows kan bruges) Browseren Internet Explorer 6.0 eller

Læs mere

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version Wordpress 2.7 Manual for redaktør/blogger Webwoman.dk Denne version er fra Må frit kopieres og distribueres i original version 2 Indhold Gennemgående udtryk, du bør kende... 4 Log ind på din hjemmeside/blog...

Læs mere

BAAN IVc. Brugervejledning til BAAN Data Navigator

BAAN IVc. Brugervejledning til BAAN Data Navigator BAAN IVc Brugervejledning til BAAN Data Navigator En udgivelse af: Baan Development B.V. P.O.Box 143 3770 AC Barneveld Holland Trykt i Holland Baan Development B.V. 1997. Alle rettigheder forbeholdes.

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. oktober, 2013 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13

Læs mere

5. OPSÆTNING DOKUMENTSKABELONER 5.1 TRIN

5. OPSÆTNING DOKUMENTSKABELONER 5.1 TRIN 5. OPSÆTNING DOKUMENTSKABELONER Under fanen Dok. skabeloner kan du arbejde med de skabeloner som du har i systemet, eller du kan oprette nye. I denne vejledning kigger vi på hvordan du kan tilrette selve

Læs mere

Siteloom manual for Comwells webredaktører

Siteloom manual for Comwells webredaktører Siteloom manual for Comwells webredaktører Generelt Hvad er SL: SiteLoom er redigeringsprogrammet bag comwell.com websitet, som gør det muligt for folk uden programmeringskundskaber, at redigere og tilføje

Læs mere

MapInfo Professional v11.0 & v11.0.3 Februar 2012

MapInfo Professional v11.0 & v11.0.3 Februar 2012 MapInfo Professional v11.0 & v11.0.3 Februar 2012 Peter Horsbøll Møller, Systems Engineer Pitney Bowes Software MapInfo for Windows MapInfo Professional Start på Microsoft.NET integration Investeringer

Læs mere

Umbraco installationsvejledning

Umbraco installationsvejledning på et ScanNet ASP Webhotel Indledning Beskrivelse Denne vejledning vil indeholde installation af CMS systemet Umbraco på et ASP Webhotel. Det dansk grundlagt Content Management System (CMS) Umbraco er

Læs mere

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk Mini-guide for opdatering af hjemmesiden for SOIF www.soif.dk Senest opdateret: 03-07-2009 Indholdsfortegnelse 2 Indholdsfortegnelse 2 Lidt generelt om KlubCMS 3 Brugere/Brugergrupper 3 Sideopbygning:

Læs mere

smart-house Web-Server Manual smart-house Web-Server Manual 1 of 15

smart-house Web-Server Manual smart-house Web-Server Manual 1 of 15 smart-house Web-Server Manual CARLO GAVAZZI AS, PB 215, NO-3901 Porsgrunn Telefon: 35 93 08 00 Telefax: 35 93 08 01 Internet: http://www.carlogavazzi.no E-Mail: gavazzi@carlogavazzi.no 1 of 15 Indholdsfortegnelse

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 13. marts, 2014 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13 2.b.

Læs mere

Stifinder er et program til navigere rundt med i dine mapper (biblioteker) på din computers Harddisk.

Stifinder er et program til navigere rundt med i dine mapper (biblioteker) på din computers Harddisk. Stifinder Stifinder er et program til navigere rundt med i dine mapper (biblioteker) på din computers Harddisk. Den bruges også til at Oprette, Slette, Flytte og Omdøbe, samt sortere i dem. Den traditionelle

Læs mere

Microsoft Office Project 2013 DK

Microsoft Office Project 2013 DK T a r g e t G r u p p e n Microsoft Office Project 2013 DK I n d h o l d s f o r t e g n e l s e Lidt om Microsoft Office Project 2013... 1 Hvorfor skal man anvende Microsoft Office Project 2013?... 1

Læs mere

Guide til Umbraco CMS

Guide til Umbraco CMS web Guide til Umbraco CMS Indhold Indledning 3 Kompatible browsere 3 Log ind i Umbraco 4 Content-delen 5 Indholdstræet 5 Tilføjelse af en side/sektion 7 Sortering af indhold 12 Galleri 14 Mediebibliotek

Læs mere

Brugersiderne for renteberegninger. Indhold. 1. Indledning. Anvendelse af. (Version 28. september 2014)

Brugersiderne for renteberegninger. Indhold. 1. Indledning. Anvendelse af. (Version 28. september 2014) Anvendelse af Brugersiderne for renteberegninger. (Version 28. september 2014) Indhold Brugersiderne for renteberegninger.... 1 1. Indledning... 1 2. Forudsætninger... 4 3. Indtastning af udbetaling/skyldigt

Læs mere

xgalleri Mulige filtyper Installation web-version

xgalleri Mulige filtyper Installation web-version xgalleri xgalleri opstod ud fra ønsket om at lægge en større samling billeder på nettet. Der findes mange programmer, som kan bruges til at lægge datafiler på nettet; men de fungerer typisk på den måde,

Læs mere

Skifte til Excel 2010

Skifte til Excel 2010 I denne vejledning Microsoft Excel 2010 ser meget anderledes ud end Excel 2003, og vi har derfor oprettet denne vejledning, så du hurtigere kan komme i gang med at bruge programmet. Læs videre for at få

Læs mere

Karens vejledning til WordPress, september 2014 1

Karens vejledning til WordPress, september 2014 1 Karens vejledning til WordPress, september 2014 1 Karens WordPress vejledning september 2014 INDHOLD Hvad er WordPress 1 Generelt om WordPress 2 Frontend og backend 2 Skrive en blog-tekst (indlæg/post)

Læs mere

Den Talende Bog. version 4.0. Mikro Værkstedet A/S

Den Talende Bog. version 4.0. Mikro Værkstedet A/S Den Talende Bog version 4.0 Mikro Værkstedet A/S Den Talende Bog : version 4.0 Mikro Værkstedet A/S Revision 1.42, 7. maj 2007 Indholdsfortegnelse Den Talende Bog... v 1. Kom godt i gang... 1 1.1. Hjælp...

Læs mere

XProtect-klienter Tilgå din overvågning

XProtect-klienter Tilgå din overvågning XProtect-klienter Tilgå din overvågning Tre måder at se videoovervågning på For at skabe nem adgang til videoovervågning tilbyder Milestone tre fleksible brugergrænseflader: XProtect Smart Client, XProtect

Læs mere

INDHOLDSFORTEGNELSE. En ny og moderne Project... 7 Jørgen Koch. KAPITEL ET... Kom godt i gang. KAPITEL TO... 27 Oprettelse af et nyt projekt

INDHOLDSFORTEGNELSE. En ny og moderne Project... 7 Jørgen Koch. KAPITEL ET... Kom godt i gang. KAPITEL TO... 27 Oprettelse af et nyt projekt INDHOLDSFORTEGNELSE En ny og moderne Project... 7 Jørgen Koch KAPITEL ET... Kom godt i gang Det nye look... 10 Startskærmen... 11 Programvinduet... 12 Visninger... 13 Kolonneoverskrifter... 14 Rækkeoverskrifter...

Læs mere

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)

Læs mere

Digital Print Room Implementering og tilretning. 11. Sep. 2001 TMC Plot-SIG

Digital Print Room Implementering og tilretning. 11. Sep. 2001 TMC Plot-SIG Digital Print Room Implementering og tilretning 11. Sep. 2001 TMC Plot-SIG Agenda. Priser. Forskellen mellem de 3 versioner. Hardware og software. Sikkerheden og opsætning af rettigheder. Opgradering fra

Læs mere

1. HVAD ER HOT POTATOES? 2. HVAD BESTÅR HOT POTATOES AF? 3. HVAD KOSTER HOT POTATOES? 4. SOFTWARE- OG HARDWAREKRAV.

1. HVAD ER HOT POTATOES? 2. HVAD BESTÅR HOT POTATOES AF? 3. HVAD KOSTER HOT POTATOES? 4. SOFTWARE- OG HARDWAREKRAV. Hot Potatoes 1. Hvad er Hot Potatoes?...2 2. Hvad består Hot Potatoes af?...2 3. Hvad koster Hot Potatoes?...2 4. Software- og hardwarekrav...2 5. Versioner....3 6. Indstillinger...3 Ny, Åbn, Gem, Gem

Læs mere

IT-Brugerkursus. Modul 1 - Introduktion til skolens netværk og FC. Modul 1 - Introduktion til FC og Lectio. Printvenligt format. Indholdsfortegnelse

IT-Brugerkursus. Modul 1 - Introduktion til skolens netværk og FC. Modul 1 - Introduktion til FC og Lectio. Printvenligt format. Indholdsfortegnelse Modul 1 - Introduktion til FC og Lectio IT-Brugerkursus Modul 1 - Introduktion til skolens netværk og FC Printvenligt format Indholdsfortegnelse Formål og opbygning Opgave Vejledning til intranettet Åbne

Læs mere

Prezi. Aldrig mere gammeldaws slideshows!? Version: December 2012

Prezi. Aldrig mere gammeldaws slideshows!? Version: December 2012 Prezi Aldrig mere gammeldaws slideshows!? Version: December 2012 Indholdsfortegnelse Hvad er Prezi?...4 Hvordan finder jeg Prezi?...5 Skoletube og Prezi...5 Lav din første Prezi-præsentation...5 Indtast

Læs mere

Undervisningsbeskrivelse

Undervisningsbeskrivelse Undervisningsbeskrivelse Stamoplysninger til brug ved prøver til gymnasiale uddannelser Termin August 2010 Juni 2011 Institution Københavns Tekniske Gymnasium, Vibenhus Uddannelse Fag og niveau Lærer(e)

Læs mere

Elevvejledning til SkoleKomNet - Min egen hjemmeside

Elevvejledning til SkoleKomNet - Min egen hjemmeside Indledning...1 Sådan får du adgang...2 Dit KlasseWeb skrivebord Overblik...2 Dit arbejdsområde...3 Din hjemmeside på nettet...3 Sådan laver du en hjemmeside i 4 trin...3 Trin 1 Dit personlige billede på

Læs mere

Udarbejdelse af grafisk mockup med efterfølgende styling. Tilbud. Oprettelse af site. Kr. 1.500,00. 1. deltager (kan fravælges) Kr. 3.

Udarbejdelse af grafisk mockup med efterfølgende styling. Tilbud. Oprettelse af site. Kr. 1.500,00. 1. deltager (kan fravælges) Kr. 3. PentaCon CMS Responsive sider WYSIWYG editor Skabelon til standard tekstside med overskrift og 1 billede Skabelon til standard tekstside med overskrift og 3 billeder Slideshow på forsiden Nyhedsruller

Læs mere

Sikkerhedsanbefaling. Forholdsregler ved ophør af serviceopdateringer til Windows XP Embedded

Sikkerhedsanbefaling. Forholdsregler ved ophør af serviceopdateringer til Windows XP Embedded Sikkerhedsanbefaling Forholdsregler ved ophør af serviceopdateringer til Windows XP Embedded Juli 2014 Indledning Microsoft har annonceret, at selskabet den 31. december 2016 frigiver den sidste serviceopdatering

Læs mere

Visuel komponent til DSB tog-historik

Visuel komponent til DSB tog-historik Visuel komponent til DSB tog-historik Henrik Christoffersen s083146 Kongens Lyngby 2012 IMM-B.Eng-2012-75 Technical University of Denmark Informatics and Mathematical Modelling Building 321, DK-2800 Kongens

Læs mere

Photo Story 3. Photo Story 3

Photo Story 3. Photo Story 3 Side 1 af 8 Photo Story 3 Introduktion Når jeg tager på ferie, tager jeg altid en masse videoer og billeder, som jeg så efter hjemkomsten redigerer, så jeg selv og andre kan have glæde af at se indtryk

Læs mere

Picto Selector. Lav dine egne flotte symbolark på den nemme måde. Version: Oktober 2012

Picto Selector. Lav dine egne flotte symbolark på den nemme måde. Version: Oktober 2012 Picto Selector Lav dine egne flotte symbolark på den nemme måde Version: Oktober 2012 Indholdsfortegnelse Hvad er Picto Selector?...4 USB?...4 Hent programmet...4 Installer programmet på din computer...5

Læs mere

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress.

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Wordpress manual Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting og funktioner i Wordpress, så du selv kan redigere indholdet eller tilføje

Læs mere

GIS-OIS INTEGRATION BRUGERMANUAL, VERSION 2 I G I S 2 0 0 8

GIS-OIS INTEGRATION BRUGERMANUAL, VERSION 2 I G I S 2 0 0 8 GIS-OIS INTEGRATION BRUGERMANUAL, VERSION 2 I G I S 2 0 0 8 GIS-OIS integration BRUGERMANUAL Udarbejdet for: Titel: Dokumenttype: I GS GIS-OIS integration Brugermanual Software manual Udgave: 1 Dato: 20-05-2008

Læs mere

Rejsekort A/S idekonkurence Glemt check ud

Rejsekort A/S idekonkurence Glemt check ud Rejsekort A/S idekonkurence Glemt check ud 9. marts 2015 1 Indhold 1 Introduktion 4 1.1 Problembeskrivelse........................ 4 1.2 Rapportens opbygning...................... 4 2 Ordliste 5 3 Løsning

Læs mere

At indsætte ord og billeder og brug af hjælpefunktionen.

At indsætte ord og billeder og brug af hjælpefunktionen. Udarbejdelse af kommunikationsbøger Noter og øvelser i forbindelse med at udarbejde kommunikationsbøger vha. programmet Phraseit (Genlyd). Følgende øvelser og instruktion er baseret på at Phrase-it 2.1

Læs mere

Vejledning KPK Online Prøverum

Vejledning KPK Online Prøverum Vejledning KPK Online Prøverum INDHOLD Introduktion side 2 Funktionsliste side 2 Få adgang til systemet side 3 Opload dine billeder side 4 Sådan bruges systemet side 5 Gem dine eksempler side 7 Side 1/7

Læs mere

PDC Helpdesk Brugervejledning

PDC Helpdesk Brugervejledning PDC Helpdesk Brugervejledning PDC Helpdesk November 2013 Indhold 1 Introduktion... 3 2 Brug af browser eller e-mails... 3 3 Log på PDC Helpdesk... 4 4 Oversigts side for sager... 5 4.1 Oversigt over eksisterende

Læs mere

Dygtig.NET / C# udvikler med stor erfaring fra både offentlige organisationer og private virksomheder.

Dygtig.NET / C# udvikler med stor erfaring fra både offentlige organisationer og private virksomheder. .NET UDVIKLER NATIONALITET: DANSK PROFIL Dygtig.NET / C# udvikler med stor erfaring fra både offentlige organisationer og private virksomheder. Stor erfaring omkring databasedesign, datahåndtering og MS

Læs mere

Hjælpeguide til Digitalisér.dk

Hjælpeguide til Digitalisér.dk Hjælpeguide til Digitalisér.dk Hvad er Digitalisér.dk Digitalisér.dk er et socialt netværk og værktøj som du kan anvende på flere forskellige måder. Har du viden som du ønsker at dele og debattere med

Læs mere

1 KOM HURTIGT I GANG 3 HJEMMESIDE & FOTO ALBUM

1 KOM HURTIGT I GANG 3 HJEMMESIDE & FOTO ALBUM BRUGERMANUAL // 25.10.2007 IntroduKtion Med MONO er det super nemt at lave din egen hjemmeside, udbygge dit CV med en personlig profil, lave en hjemmeside til familien eller dit barns helt egen hjemmeside.

Læs mere

Velkommen. I gang med Ondisplay

Velkommen. I gang med Ondisplay Velkommen I gang med Ondisplay Log ind på Ondisplay Tast den URL du har fået af Ondisplay. Det kan være: http://admin.ondisplay.dk eller http://ditfirmanavn.ondisplay.dk (Bemærk: ingen www) På logon-siden

Læs mere

ZoomText 10.1 Hurtig Brugervejledning Tillæg

ZoomText 10.1 Hurtig Brugervejledning Tillæg ZoomText 10.1 Hurtig Brugervejledning Tillæg Dette tillæg til ZoomText 10 kortvejledning dækker de nye funktioner og andre ændringer er specifikke for ZoomText 10.1 til Windows 8.x. For primære instruktioner

Læs mere

Advanced Word Template Brugermanual

Advanced Word Template Brugermanual Advanced Word Template Brugermanual Forord: Advanced Word Template er et værktøj, der anvendes sammen med Microsoft Word til at opbygge ensartet beskrivelser på en mere intelligent måde end Copy and Paste

Læs mere

Adobe Acrobat Professional 11. ISBN nr.: 978-87-93212-08-4

Adobe Acrobat Professional 11. ISBN nr.: 978-87-93212-08-4 Adobe Acrobat Professional 11 ISBN nr.: 978-87-93212-08-4 I n d h o l d s f o r t e g n e l s e Hvad er Adobe Acrobat?... 1 Elektroniske dokumenter... 2 PDF... 2 Acrobat-programmer... 3 Hvor kommer dokumenterne

Læs mere

Testservice med anvendelse af Microsoft software.

Testservice med anvendelse af Microsoft software. Testservice med anvendelse af Microsoft software. Få offentlig nøgle fra installeret signeringscertifikat 1. Klik Start Kør på den pc eller server hvor signeringscertifikatet er installeret. 2. Skriv MMC

Læs mere

DD110 - Detaljeret projektplan

DD110 - Detaljeret projektplan Version: 1.3 Status: Godkendt Godkender: Dokumenthistorik Version Dato Navn Status Bemærkninger 1.0 9-11-2007 Endelig Initiel version 1.1 22-11-2007 Godkendt 1.2 28-11-2007

Læs mere

Drejebog til tractorpulling.dk

Drejebog til tractorpulling.dk Drejebog til tractorpulling.dk Generelt På hjemmesiden benyttes følgende som standard: - Skrifttype: Verdana - Skriftstørrelse: 12px / 9pt. 4. oktober 2011 Moskjær Marketing Falkevej 4 DK-6920 Videbæk

Læs mere

Indhold. Produkter oprettelse og vedligehold v 2.0 23.5.2010 Side 2 af 20

Indhold. Produkter oprettelse og vedligehold v 2.0 23.5.2010 Side 2 af 20 Indhold Introduktion...3 Formål...3 Support...3 0. Systemkrav...4 0.1 Internet browser...4 0.2 PDF Reader...4 0.3 Hvordan tillades pop-up vinduer...4 0.4 Kompatibilitetsvisning i Internet Explorer 8...6

Læs mere

DaTelTek ApS ich 4 SpAPI Telenor Serviceprovider API

DaTelTek ApS ich 4 SpAPI Telenor Serviceprovider API DaTelTek ApS ich 4 SpAPI Telenor Serviceprovider API Release 4.0.0 DaTelTek ApS Birkevej 4 DK-4640 Faxe Denmark CVR: 31 06 05 59 +45 32 22 22 22 www.dateltek.dk info@dateltek.dk Indholdsfortegnelse Ændring

Læs mere

Kom i gang med SAS STPbaserede

Kom i gang med SAS STPbaserede make connections share ideas be inspired Kom i gang med SAS STPbaserede webapplikationer Lars L. Andersson Chefkonsulent Webapplikationer Interaktion med serverbaserede data via skærmbilleder leveret gennem

Læs mere

Synkron Via CMS er en ny generation Content Management System

Synkron Via CMS er en ny generation Content Management System Synkron Via CMS er en ny generation Content Management System De sidste par år er internettet gået fra at være endnu en marketingaktivitet for de fleste organisationer til at blive et strategisk og forretningskritisk

Læs mere