Proteket – ”Fremtiden i våre tenner” med Java og Flex

1. Proteket – ”Fremtiden i våre tenner” med Java og Flex av Tor Eric Sandvik, Håken Stark

2. Proteket Online med Java og Flex Om Proteket AS Import av tannproteser fra Kina. • Lokasjon: Ullevål stadion, Oslo • Antall ansatte: 7 • Omsetning 2008: 22 mill nok • Resultat 2008: 5 mill nok • Gaselle listen 06, 07 og 08 (6. og 14. plass) • Åpnet avdeling i Stockholm 02.01.2009

3. Proteket Online med Java og Flex Proteket’s utfordringer Proteket har 700 kunder og sender 500 ordrer til Kina hver uke. Utfordringer: • Logistikk i Excel • Manuelt bestillings system, med rom for mye feil • Tiden går med til å finne ordre og korrekturlese ordreskjema • Vanskelig kundegruppe hvor endring er farlig

4. Proteket Online med Java og Flex Proteket Online • Administrasjon av ordre, forsendelser, produkter, kunder, speditører, produsenter, avdelinger, ansatte og klager/omgjøringer. • Forsendelse og ordreflyt. Sporbarhet, hvor er ordre til enhver tid. • Kommunikasjon/chat mellom produsent og avdeling ved problemer, mangler osv. på en ordre. • Eksport av ordre til eksternt fakturasystem (24SevenOffice). • Ordrestatistikk

5. Proteket Online med Java og Flex Proteket Online • PDF generering av ordrenota, ordresedler, klager og forsendelsesdokumenter. • Logistikkhåndtering av ordre og forsendelser med håndholdte skannere.

6. Proteket Online med Java og Flex • Proteket Online - Kunde • Plassere nye ordre • Se siste ordre • Klage på ordre • Se statistikker • Redigere sin profil • Be om forsinkelses varsling på SMS eller e-post

7. Proteket Online med Java og Flex Status • Gikk i produksjon fra 15. oktober 2008 i forbindelse med årlig tannlegemesse på Norges varemesse. • Tilbakemeldinger fra tannleger og Proteket så langt er positivt. • Prosjektet gikk i rute på tid 

8. Proteket Online med Java og Flex Prosjektgjennomføring Scrum metodikk Antall utviklere fra 4-8 Timeforbruk ca 6000 7 Sprinter

9. Proteket Online med Java og Flex Arkitektur

10. Proteket Online med Java og Flex Demo www.proteketonline.no

11. Proteket Online med Java og Flex Flex • Flex er en samling teknologier for utvikling av RIA, basert på Flash plattformen til Adobe.

12. Proteket Online med Java og Flex • Klient kjøremiljøer • Flash player, nettleser • Adobe Air, desktop • Acrobat Reader • Flash Lite, mobile enheter (Flex 4?)

13. Proteket Online med Java og Flex Flex SDK Flex SDK MXML Action Script • Åpen kildekode, gratis • Består av en kompilator og Flexklassebiblioteketer. • Kildekode kan være skrevet i: • MXML • ActionScript • Kompileres til bytekode i form av flash fil, .swf Flex klasse biblioteker Kompilere .swf

14. Proteket Online med Java og Flex FlexBuilder IDE • Kommersielt produkt • Bygger på Eclipse • Kan kjøre alene eller som en plugin til Eclipse • God støtte for feilsøkning • Generering av html wrapper • Verktøy for generering av WS klient kode. • Alle plugins som Eclipse måtte støtte.

15. Proteket Online med Java og Flex Flex demo

16. Proteket Online med Java og Flex Bakgrunn for valget av Flex • Kompleks produktbestilling, mange valg • Mange av valgene skulle være grafiske • Rask respons på navigasjon og valg • Mye data som skal mellomlagres • Enkelt og grafisk tiltalende å bruke • Tarantell lagde prototypen til ordebestillingen i Flex

17. Proteket Online med Java og Flex Flex vs. • Kjører likt i alle nettlesere som har Flash player • Enkelt å sette opp et komplekse brukergrensesnitt, med mange layout muligheter • Rask respons • Begrenset støtte for backend systemer HTML, Ajax, JavaScript • Nettleser avhengig, delvis standarder. • Utfordrende å bygge komplekse brukergrensesnitt. • Tregere respons, mellomlagring på server. • Kan implementeres med det meste av backend systemer

18. Proteket Online med Java og Flex Klient nettleser Applikasjonsserver Flex og Java Flex kan integreres med Java backend på mange forskjellige måter via HTTP. • SOAP Webservicer • HTTPServicer, RESTful tilnærming. GET, POST, osv. • BlazeDS Web Services/JSP,PHP,XML Flash Player Tjenestelag

19. Proteket Online med Java og Flex Valg – klient/server • Valget ble SOAP Webservices • Ønske om å bruke veletablerte standarder • Tilby fremtide webservicer • Direkte støttet av Flex • Sikkerhet (SOAP Headers), ble likevel et problem

20. Proteket Online med Java og Flex Løsning – klient/server • Flex Builder kan automatisk generere opp Web service klient kode (Stubs), og tilhørende datamodell. • Tools -> Import Web Service (WSDL) • Fungerte ikke med vår CXF løsning på serversiden. • Løsning ble å skrive egne service klient klasser, ved hjelp av Flex API’et. Veldig rett frem • Bakdel, kun generiske objekter returnert

21. Proteket Online med Java og Flex Flex klient publicfunction ProductService() { _service = new WebService(); _service.wsdl = ”http://localhost/proteket/WS/ProductService?wsdl”; _service.loadWSDL(); } publicfunction getProducts(employeeDepartmentId:int):void { _service.getProducts.addEventListener(ResultEvent.RESULT, productsResultHandler); _service.getProducts(employeeDepartmentId); } privatefunction productsResultHandler(event:ResultEvent):void { ProductDataModel.getInstance().products = _service.getProducts.lastResult; }

22. Proteket Online med Java og Flex Server Apache CXF 2.0 web services eksponert i en Spring context <bean id="productWebService" class="com.integrate.proteket.services.ProductWebServiceImpl"> <property name="productService" ref="productService" /> </bean> <jaxws:endpoint id="productWebServiceEndPoint" implementor="#productWebService" address="/ProductService"> </jaxws:endpoint>

23. Proteket Online med Java og Flex Server Produkt service interfacet @WebService publicinterface ProductWebService { public List<Product> getProducts(int employeeDepartmentId); public Product getProduct(int productId); }

24. Proteket Online med Java og Flex Web Service sikkerhet • Flex har ingen direkte innbygd støtte for WS-Security • Har derimot mulighet for å lage SOAP hode. • mx.rpc.soap.SOAPHeader • Lagde egen <wsse:Security> etter OASIS standarden, med brukernavn, passord og tidsstempel som ble lagt til web service kallet. • mx.rpc.soap.WebService.addHeader(..)

25. Proteket Online med Java og Flex Crossdomain sikkerhet • Flex applikasjoner (SWF fil) kanikkerefereretilandredomenerenndomenet den opprinneligbleforespurtpå. • Opprett en cross-domain policy filpåwebserveren, for å tilgjengeliggjøre data fraandredomener. Leggesi rot-katalogentilwebserveren. • Under utviklingog testing av Flex applikasjonenlokaltpåfilsystemet, må man leggetilprosjektet under ‘Trusted Files’: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html <?xml version="1.0"?> <cross-domain-policy> • <allow-access-from domain="*.proteketonline.no" /> • <allow-access-fromdomain="*.proteketonline.se" /> • <allow-access-fromdomain="*.proteketonline.com" /> </cross-domain-policy>

26. Proteket Online med Java og Flex I18n, Internasjonalisering • Flex 3 støtter internasjonalisering, hvor språk kan byttes i runtime.Ikke tilfelle for Flex 2 • Språkfiler kan enten, avhenging av antall språk: • Kompileres sammen med applikasjonen • Kompileres som enkeltstående språk moduler (SWF) • Språkfiler lages på akkurat samme måte som i Java, properties filer med key/value par i UTF-8 format.

27. Proteket Online med Java og Flex I18n, Internasjonalisering • Språkfiler legges i f.ekslocale/nb_NO/proteketResources.properties i prosjektkatalogen • Hvis FlexBuilder brukes, kan denne katalogen legges til SourcePath (locale/{locale}), og automatisk kompileres med applikasjonen: • locale=nb_NO,en_US,sv_SE-allow-source-path-overlap=true

28. Proteket Online med Java og Flex I18n, Internasjonalisering • For å kunne bytte språkfiler i run time, benytter man ResourceManager, hvor ResourceBundle for deklareres: • Følgende metode bytter språkfil: • For å hente lokalisert data fra språkfilene: <mx:Metadata> [ResourceBundle("proteketResources")] </mx:Metadata> resourceManager.localeChain = ”en_US”; <mx:Labeltext="{resourceManager.getString('proteketResources', 'patient.age')}" /> ResourceManager.getInstance().getString('proteketResources', 'patient.age');

29. Proteket Online med Java og Flex Flash variabler • Behov får å lese dynamisk data i runtime, f.ekskundeId, locale, brukenavn, app-props osv. • Lastes inn via Javascript fra Html/JSP siden som innholder SWF filen: • Leses fra ActionScript på følgende måte: • AC_FL_RunContent( • "src", "flex/ProteketFlex-1.3.0", • "FlashVars", "customerId=" +customerId +"&requestLocale=" +requestLocale +"&user=" +user +"&propPath=" +propPath +"&createdByCustomer=" +createdByCustomer, • … ); _requestLocale = Application.application.parameters.requestLocale;

30. Proteket Online med Java og Flex MVC i Flex • Flex legger opp til MVC designmodell • ModellPOJO’s i form av ActionScript. • Presentasjon MXML UI komponenter • KontrollerActionScriptlogic • Utfordring å skille klart kontroller fra presentasjon: • Alle UI kan skrives i ActionScript • Finnes et åpen kildekode rammeverk for å lage Flex applikasjoner basert på MVC • Cairngorm

31. Proteket Online med Java og Flex Erfaringer ved bruk av Flex • Tar mer tid å bygge en robust klient applikasjon i Flex enn å lage presentasjonslaget i en tradisjonell webapplikasjon. • Ville brukt et rammeverk som Cairngorm • Veldig lett å lære seg Action Script for en Java utvikler, og bruke en objektorientert tilnærming. • Robust, lite feil • Kunne vært bedre støtte for Web servicer, sikkerhet

32. Proteket Online med Java og Flex Linker og ressurser • Flex 3 dokhttp://livedocs.adobe.com/flex/3/ • Flex 3 API dokhttp://livedocs.adobe.com/flex/3/langref/ • Nyheter, forum, showcases http://flex.org/ • Cairngormhttp://opensource.adobe.com/wiki/display/cairngorm • Security settings http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html • AdvancedActionScript 3 with Design PatternsAdobe Press • ProgrammingFlex 3 O’Reilly

33. Proteket Online med Java og Flex Andre norske prosjekter med Flex • Fotoknudsen • Sats, Min side