Tworzenie nowoczesnych serwisów internetowych z wykorzystaniem Vine/Flex/BlazeDs

Transkrypt

1 Tworzenie nowoczesnych serwisów internetowych z wykorzystaniem Vine/Flex/BlazeDs Piotr Dziubecki PCSS

2 Agenda Wstęp Rozwiązania portletopodobne ciągle żywe Vine Toolkit case study Kilka słów o framework'u Ewolucja GUI długa droga od html'a do flash'a Przykładowa implementacja projektu HPC wow2green Podsumowanie 2

3 Przykładowy usecase Portal informacyjny o rozległej funkcjonalności. Ogromne zasoby danych z możliwością swobodnego przeszukiwania. Użytkownicy bez doświadczenia 'informatycznego'. Tysiące użytkowników. Możliwość personalizacji konta użytkownika ( dostęp przez login/hasło ). Użytkownik może dostosowywać funkcjonalność portalu do swoich potrzeb. 3

4 [i]google 4

5 Przykładowy usecase Portal wspomagający naukowców w pracach badawczych. Duże, współdzielone zbiory danych. Specjaliści ( niekoniecznie informatycy). Liczba użytkowników <100. Dostęp do danych po 'okazaniu się' odpowiednim certyfikatem. Różne role użytkowników. 5

6 QosCosGrid 6

7 Koncepcja portletów Portlet jest to niezależny komponent stworzony najczęściej w języku Java do umieszczenia na stronie www. Są to programy wyświetlające określoną funkcjonalność na stronie. Portlet jest umieszczany w kontenerze portletów, który agreguje zawartość prezentowanej strony. 7

8 Koncepcja portletów 8

9 Portal oparty na technologii portletów GUI ( layout + portlety ) Flash ( Flex ) BlazeDs Req/Res Serwer: Apache Tomcat Portal: Liferay, Gridsphere Użytkownicy, Autentykacja Autoryzacja, Zarządzanie layout'em, CMS. Vine Toolkit BlazeDs Logika biznesowa, Integracja z usługami: portalu, serwisów zarejestrowanych w Vine. API Usługi dostępne pod postacią pluginów: - zaawansowane repozytoria bazodanowe, - web services, - usługi HPC. 9

10 Vine Toolkit o co tu chodzi? Flex Resources Presentation layer BlazeDs Accounts Tasks Core Vine Authentication Authorization Sessions Files Active Directory LDAP WebDAV Kepler Globus Toolkit 4 Unicore 6 GLite GRIA Groovy Ant XSL SVN kit Plugins Build 10

11 Jak to uruchomić? ANT Environment Software Build Application Build MainApp software env application env software.installer.path=... application.build.path=software.installer.path/build project.build.path= application.build.path/projects/${project.name} WebApp project env MainProject Build PortletProject Build ServletProject Build 11

12 Co tam się dzieje w środku? Initialization SVN update Compilation Annotation Jarring Deployment XSL Database Thank you! 12

13 Ewolucja GUI Dylematy związane z adaptacją standardów GUI. Proces ewaluacji rozwiązań GUI w Vine Toolkit: HTML JSP Tapestry Echo 2 Sportlets YUI DWR Flash Flex BlazeDS JSF 13

14 Tapestry Tapestry jest to zorientowany obiektowo framework używany do tworzenia aplikacji webowych. Wykorzystuje wzorzec projektowy MVC ( model-view-controller ). Zalety: zorienotwany na komponenty, rozwijany jako projekt apache, może być wspomagany bibliotekami Java Script. Wady: długi czas inicjacji, przerost formy, skomplikowany w użyciu. 14

15 Echo 2 Echo jest platformą do tworzenia zaawansowanych interfejsów użytkownika. Aplikacje budowane są przy pomocy technik obiektowych, komponentowych oraz modelu eventów. Ten zestaw pozwala na budowanie aplikacji w sposób zbliżony do np. Java Swing. Programista nie musi znać JavaScript, aplikacje tworzy się w Javie, Echo zajmuje się procesem renderowania strony. 15

16 Echo 2 Zalety: Silnik renderujący wydajny, nie ma problemów z crossbrowser compatibility issues. Brak wymagań odnośnie znajomości JavaScript. Wady: Przejmuje zarządzanie nad całą stroną www, nie ma wsparcia (oficjalnego) dla osadzania aplikacji Echo w portalach etc. GamePane() { super(); Column layoutcolumn = new Column(); layoutcolumn.setinsets(new Insets(30)); layoutcolumn.setcellspacing(new Extent(10)); add(layoutcolumn); layoutcolumn.add(new Label( new ResourceImageReference( "/echotutorial/numberguess/titlebanner.png"))); layoutcolumn.add(statuslabel); layoutcolumn.add(countlabel); layoutcolumn.add(promptlabel); Button submitbutton = new Button("Submit Your Guess"); submitbutton.setactioncommand("submit guess"); submitbutton.setforeground(color.black); submitbutton.setbackground(color.green); submitbutton.setwidth(new Extent(200)); submitbutton.addactionlistener(this); layoutcolumn.add(submitbutton); Button newgamebutton = new Button("Start a New Game"); newgamebutton.setactioncommand("new game"); newgamebutton.setforeground(color.white); newgamebutton.setbackground(color.red); newgamebutton.setwidth(new Extent(200)); newgamebutton.addactionlistener(this); layoutcolumn.add(newgamebutton); } public void actionperformed(actionevent e) { if (e.getactioncommand().equals("new game")) { ((NumberGuessApp) ApplicationInstance.getActive()).startNewGame(); } else if (e.getactioncommand().equals("submit guess")) { processguess(); } } 16

17 Sportlets Framework odpowiadający za warstwę prezentacji stworzony specjalnie z myślą o Vine Toolkit i współpracą z różnymi środowiskami docelowymi. Składa się z: komponentów Yahoo! User Interface Library (YUI) HTML + JavaScript, silnika ajaxowego DWR umożliwiającego eksponowanie metod klas Javy po stronie JavaScriptu. 17

18 Sportlets public class HelloWorld extends AbstractExample { Zalety: private Label helloworldlabel; private TextField helloworldtextfield; private Button helloworldbutton; Engine zoptymalizowany na działanie w różnorakich środowiskach hostujących ( portlety, servlety ) public HelloWorld() { super(); setup(); } private void setup() { Oparty na 2 aplikacjach o dużych możliwościach. settitle("hello World!"); // Add hello world label to jsp layout helloworldlabel = new Label("helloWorldLabel"); helloworldlabel.settext("message: "); add(helloworldlabel); Wady: Do poprawnego działania potrzebne były ingerencje w YUI, problem z kompatybilnością przeglądarek. // Add hello text field to jsp layout helloworldtextfield = new TextField("helloWorldTextField"); helloworldtextfield.setvalue("hello world!"); add(helloworldtextfield); Duże nakłady środków na projektowanie i implementowanie nowej funkcjonalności. // Add hello world button helloworldbutton = new Button("helloWorldButton"); helloworldbutton.settext("update message"); helloworldbutton.putparameter("testme", "now"); helloworldbutton.addlistener(this, ClickEvent.NAME, "dosetmessage"); add(helloworldbutton); add(new LineBreak()); } } public void dosetmessage(event event) { getmessagebox().setmessage( helloworldtextfield.getvalue()); } 18

19 Flash - Flex/BlazeDs Flex SDK Środowisko pozwalające na budowanie interfejsów użytkownika z użyciem kontrolek, systemu eventów oraz zaawansowanych efektów graficznych niezależnych od przeglądarki. 19

20 Flash - Flex/BlazeDs 20

21 Flash - Flex/BlazeDs BlazeDs Data services stworzone z myślą o ułatwieniu komunikacji pomiędzy stroną klienta a serwerem aplikacji. Wsparcie dla remotingu, technologii serverpush. 21

22 Flash - Flex/BlazeDs Zalety: Stabilne środowisko open source wspierane przez Adobe. Wydajne data services z zaawansowanymi modelami komunikacji. Dostęp do potężnej bazy komponentów o ogromnych możliwościach w zakresie UI / wizualizacji. Wady: Do tworzenia aplikacji potrzebna jest znajomość mxml i action script. Aplikacje muszą być kompilowane do binarnej postaci wykonywalnej. 22

23 Flash - Flex/BlazeDs Integracja z Vine Toolkit: Włączenie źródeł flex owych do procesu kompilacji, buildowania i deploymentu Vine Toolkit. Klasa bazowa po stronie klienta oferująca funkcjonalność Vine. Wsparcie dla upload u / download u z wykorzystaniem portal file systemu, Zarządzanie sesjami, użytkownikami, autoryzacją. Renderowanie aplikacji flashowych pod postacią portletów. 23

24 Flex w Vine Toolkit 24

25 Vine Toolkit MVC framework? 25

26 Hello world server model public class HelloWorldAppModel implements Serializable { private static final long serialversionuid = L; private String greetings = null; public String getgreetings() { return greetings; } public void setgreetings(string greetings) { this.greetings = greetings; } } 26

27 Hello world client model package org.vinetoolkit.uitutorials.helloworld { [Bindable] [RemoteClass(alias = "org.vinetoolkit.uitutorials.flex.app.helloworld.helloworldappmodel")] public class HelloWorldAppModel { public var greetings:string; } } 27

28 Hello world resource bundle hw.server_says=server says: hw.client_says=client says: hw.hello_world=hello World!!! hw.greetings_from_server=greetings from server hw.greetings_from_client=greetings from client 28

29 Hello world server = = {"en", "pl"}, values = {"Hello World from uitutorials project", "Witaj Świecie z projektu uitutorials"}) public class HelloWorldApp { protected final static String resourceboundle = = "guest") public HelloWorldAppModel sayhello() { HelloWorldAppModel helloworldappmodel = (HelloWorldAppModel) VineFlexUtilClass.getUIModel(); String localizedmessage = VineFlexUtilClass.getResourceString(resourceBoundle, "hw.server_says") + VineFlexUtilClass.getResourceString(resourceBoundle, "hw.hello_world"); helloworldappmodel.setgreetings(localizedmessage); return helloworldappmodel; } } 29

30 Hello world client view <?xml version="1.0"?> <vine:vineapplication xmlns:mx=" xmlns="org.vinetoolkit.uitutorials.helloworld.* xmlns:vine="org.vinetoolkit.vine.*" creationcomplete="creationcomplete(event)"> <mx:metadata>[resourcebundle("uitutorials")]</mx:metadata> <HelloWorldAppModel id="helloworldappmodelobj"/> <mx:script source="helloworldapp.as"/> <mx:text text="{helloworldappmodelobj.greetings}"/> <mx:hbox> <mx:button label="{resourcemanager.getstring('uitutorials', 'hw.greetings_from_server')}" click="service.sayhello()"/> <mx:button label="{resourcemanager.getstring('uitutorials', 'hw.greetings_from_client')}" click="helloworldappmodelobj.greetings = resourcemanager.getstring('uitutorials', 'hw.client_says') + resourcemanager.getstring('uitutorials', 'hw.hello_world')"/> </mx:hbox> </vine:vineapplication> 30

31 Hello world client logic public function creationcomplete(event:flexevent) : void { setdebugmode(true); bindmodel("helloworldappmodelobj"); } 31

32 Hello world application 32

33 wow2green portal hpc Charakterystyka: Serwis internetowy integrujący funkcjonalność kilku aplikacji. Jako warstwę prezentacji wybrano portal www. Skierowany do grupy osób wspólnie pracujących nad zadaniami projektowymi. Potrzeba zarządzania danymi funkcje CMS. Wizualizacje projektów. 33

34 wow2green implementacja Integracja w warstwie HPC: workflow engine - Kepler, job manager Gria Job manager, data storage Gria data store. Integracja w warstwie portalowej: zarządzanie kontami użytkowników, zarządzanie rolami, dostępem do zasobów, bezpieczeństwo ( autentykacja po Active Directory, certyfikaty ). Interfejs użytkownika. 34

35 wow2green struktura komponentów GUI Client UI - browser Vine Toolkit Kepler W-S Vine W-S Busiiness logic GRMS Job Manager S S Job Manager Job Manager Scheduler Job Manager Middleware Job Middleware Storage S 35

36 Flash - Flex/BlazeDs 36

37 Podsumowanie Alternatywa dla Flexa? - Microsoft Silverlight / Moonlight technologia zdobywająca coraz większą popularność. Problemy z kompatybilnością ( Moonlight, a Silverlight 2 ). - JavaFX uproszczony model budowania interaktywnych interfejsów użytkownika oparty na Javie. Wsparcie dla urządzeń mobilnych. Brak wersji na wszystkie platformy ( obecnie wspierane to Windows, Mac ). 37

38 Dziękuję za uwagę Zasoby: