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

Name: Proteket – ”Fremtiden i våre tenner” med Java og Flex
Uploaded: 2017-10-20T09:27:30+00:00
Duration: PTM20S33
Channel: Grethe Abrahamsen
Description: Proteket – ”Fremtiden i våre tenner” med Java og Flex

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

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

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

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

PDF generering av ordrenota, ordresedler, klager og forsendelsesdokumenter. Logistikkhåndtering av ordre og forsendelser med håndholdte skannere.

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

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 

Prosjektgjennomføring Scrum metodikk Antall utviklere fra 4-8 Timeforbruk ca Sprinter

Arkitektur

Demo

Flex er en samling teknologier for utvikling av RIA, basert på Flash plattformen til Adobe.

Klient kjøremiljøer Flash player, nettleser Adobe Air, desktop Acrobat Reader Flash Lite, mobile enheter (Flex 4?) Akkurat som i Javamiljø, trenger Flex et kjøremiljø. Flash player brukes for å kunne kjøre Flex appliaskjoner i en nettleser, akkurat som alle andre flashfiler. () Adobe Air er et kjøremiljø for Flex desktop applikasjoner (ca 14Mb). Acrobat reader, kan legge ved små Flex applikasjoner i en PDF.

Flex SDK Flex SDK MXML Action Script Flex klasse biblioteker Åpen kildekode, gratis Består av en kompilator og Flex klassebiblioteketer. Kildekode kan være skrevet i: MXML ActionScript Kompileres til bytekode i form av flash fil, .swf MXML er et XML-basert tag språk, som primært blir brukt til å sette opp grafiske komponenter. Deklarativt, altså beskriver hva som skal vises, ikke hvordan. Magic eXtensible Markup Language (eller MX et akronym for Macromedia) ActionScript er et objektorientert språk, som primært blir brukt til å håndterer logikk og datamodeller i applikasjonen. Likt som Java. Hvor man har klasser, interfaces, metoder, variabler, scope defineringer osv som i Java. Alt kan skrives i Actionscript men ikke omvendt. Ettersom MXML blir gjort om til ActionScript før det kompileres. Kompilere .swf

Flex Builder 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. Når man oppretter et nytt prosjekt i Flex har man mulighet å velge om det skal være en: Desktop applikasjon (Adobe AIR) Web applikasjon (Flash player) Støtter ikke

Flex demo

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

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

Flex og Java Klient nettleser Flash Player Flex kan integreres med Java backend på mange forskjellige måter via HTTP. SOAP Webservicer HTTPServicer, RESTful tilnærming. GET, POST, osv. BlazeDS Applikasjonsserver Web Services/JSP,PHP,XML WSDL, kontrakt, sikkerhet HTTPServices, kan gjøre kall direkte på URL, hvor server side teknologier som PHP, JSP, Servlet, Ruby on Rails, ASP hvor XML kan sendes som respons. BlazeDS er et set av open source data servicer fra Adobe som kan deployes på en Applikasjonsserver, støtter følgende: RPC kall direkte mot java metoder Data overføres binært (AMF Action Msg Format), ikke textbasert XML. Mye raskere overføring Tjenestelag

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

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

Flex klient public function ProductService() { _service = new WebService(); _service.wsdl = ” _service.loadWSDL(); } public function getProducts(employeeDepartmentId:int):void { _service.getProducts.addEventListener(ResultEvent.RESULT, productsResultHandler); _service.getProducts(employeeDepartmentId); private function productsResultHandler(event:ResultEvent):void { ProductDataModel.getInstance().products = _service.getProducts.lastResult;

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>

Server Produkt service interfacet @WebService public interface ProductWebService { public List<Product> getProducts(int employeeDepartmentId); public Product getProduct(int productId); }

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(..)

Crossdomain sikkerhet Flex applikasjoner (SWF fil) kan ikke referere til andre domener enn domenet den opprinnelig ble forespurt på. Opprett en cross-domain policy fil på webserveren, for å tilgjengeliggjøre data fra andre domener. Legges i rot-katalogen til webserveren. <?xml version="1.0"?> <cross-domain-policy> <allow-access-from domain="*.proteketonline.no" /> <allow-access-from domain="*.proteketonline.se" /> <allow-access-from domain="*.proteketonline.com" /> </cross-domain-policy> Under utvikling og testing av Flex applikasjonen lokalt på filsystemet, må man legge til prosjektet under ‘Trusted Files’:

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.

I18n, Internasjonalisering Språkfiler legges i f.eks locale/nb_NO/proteketResources.properties i prosjektkatalogen Hvis Flex Builder brukes, kan denne katalogen legges til Source Path (locale/{locale}), og automatisk kompileres med applikasjonen: locale=nb_NO,en_US,sv_SE -allow-source-path-overlap=true

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

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

MVC i Flex Flex legger opp til MVC designmodell Modell POJO’s i form av ActionScript. Presentasjon MXML UI komponenter Kontroller ActionScript logic 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

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

Linker og ressurser Flex 3 dok Flex 3 API dok Nyheter, forum, showcases Cairngorm Security settings Advanced ActionScript 3 with Design Patterns Adobe Press Programming Flex 3 O’Reilly

Andre norske prosjekter med Flex Fotoknudsen Sats, Min side

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

Liknende presentasjoner

Presentasjon om: "Proteket – ”Fremtiden i våre tenner” med Java og Flex"— Utskrift av presentasjonen:

Liknende presentasjoner

Om prosjektet

Tilbakemelding

Logg inn

Logg deg på via sosiale nettverk:

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

Liknende presentasjoner

Presentasjon om: "Proteket – ”Fremtiden i våre tenner” med Java og Flex"— Utskrift av presentasjonen:

Liknende presentasjoner

Om prosjektet

Tilbakemelding