Rich User Interfaces for Web-Based Corporate Applications

Size: px

Start display at page:

Download "Rich User Interfaces for Web-Based Corporate Applications"

Brice Daniel
8 years ago
Views:

1 Rich User Interfaces for Web-Based Corporate Applications Ivan Zapevalov, Software Engineer 1

2 Outline RIA technologies AJAX technology Widgets Demo application in JavaScript Demo application in GWT Web-catalog in GWT 2

3 Rich Internet Applications (RIA) web applications that have the features and functionality of traditional desktop applications 3

4 Why do we need rich Web interfaces? Every major company has its own web-system RIA is good combination Go with majority 4

5 RIA vs. Desktop and Pure-Web Web Desktop Rich Internet Apps Instant Deployment Cross-platform Progressive download Multimedia Standards-based: XML, SOAP, J2EE Interactive UI validation, formatting Fast response times (no page refresh) Drag and Drop Scalable Flexible and reusable Easy to add communications features 5

Cross-platform Progressive download Multimedia Standards-based: XML, SOAP, J2EE

RIA Patterns Navigation (Breadcrumbs, Tab Navigation, etc.) Basic interactions (Paging, Slideshow, etc.) Searching (Site Map, Tag Cloud, Auto complete, etc.

6 RIA Patterns Navigation (Breadcrumbs, Tab Navigation, etc.) Basic interactions (Paging, Slideshow, etc.) Searching (Site Map, Tag Cloud, Auto complete, etc.) Dealing with data (Table Filter, Collapsible Panels, etc.) Personalizing (Customizable Window, Login, etc.) Miscellaneous (Hot list, News box) Drag and Drop Auto Complete Progress Bar 6

) Searching (Site Map, Tag Cloud, Auto complete, etc.

7 RIA Patterns Examples Fly-out Menu Slideshow Collapsible Panels Charts 7

8 RIA Technologies AJAX (JavaScript and XML - embedded) Adobe Flex (via Flash Player) Silverlight (.NET plug-in) JavaFX (Java Virtual Machine) Xul (XULRunner) OpenLaszlo (Flash or HTML) Others 8

9 Common AJAX Architecture 9

10 Client Side Internet Browser with Ajax call support (IE 5.0+, Mozilla 1.0+, Safari 1.2+, Opera 7.6+) Web-page HTML/XHTML JavaScript CSS A J A X Other resources 10

11 Server Side For server side could use any technology which can receive AJAXcalls and send response Popular examples PHP.NET Python Ruby Java No server side 11

12 The keystone of AJAX is the XMLHttpRequest object <html> <head> <script type="text/javascript"> function loadxmldoc() { if (window.xmlhttprequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 1. Create an XMLHttpRequest Object xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="mydiv"><h2>let AJAX change this text</h2></div> <button type="button" onclick="loadxmldoc()">change Content</button> </body> </html> 3. Send request to server 2. Specify call back function 12

Create an XMLHttpRequest Object xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.

13 AJAX and MVC architecture Model View Controller (MVC) 13

14 Common AJAX Architecture 14

15 AJAX Frameworks Java for server-side Google Web Toolkit ZK DWR Echo2 JS libraries (any server-side) jquery Prototype EXT JS Dojo Toolkit Yahoo User interface 15

16 What is a widget? An element of a graphical user interface ( gui ) that displays information or that provides a specific way for the user to interact with the operating system and application 16

17 Widget as an independent element 17

18 Advantages of widgets Reusable Adjustable Enforce code/template separation Ready-made components Ready-made design 18

19 Demo application, concept Two RIA patterns Autocomplete box Tabs Mockup 19

20 Demo application using jquery, page 1 Architecture MVC pattern 20

21 Demo application using jquery, page 2 HEADER <head> <meta charset="utf-8"> <title>demo application</title>  <script src="  <script type="text/javascript" src=" <link type="text/css" href=" rel="stylesheet" />  <link rel="stylesheet" href="./demo.css"> 21

22 Demo application using jquery, page 3  <script type="text/javascript"> $(function() { function format(mail) { return mail.name + " <" + mail.to + ">"; } <! Autocomplete controller--> </script> </head> }); $("# ").autocomplete(' { multiple: true, datatype: "json", type: "GET", parse: function(data) { return $.map(data, function(row) { return { data: row, value: row.name, result: row.name + " <" + row.to + ">" } }); }, <! JS updates View --> formatitem: function(item) { return format(item); } }) $(function() { $("#tabs").tabs(); }); 22

23 Demo application using jquery, page 4 BODY <body>  <div class="header">demo application</div> <hr />  <div id="content" class="autocomplete"> <form autocomplete="off"> <p><span>enter tag:</span> <input size="40" id=" " /></p> </form> </div>  <div id="tabs"> <ul> <li><a href="#tabs-1">tab1</a></li> <li><a href="#tabs-2">tab2</a></li> <li><a href="#tabs-3">tab3</a></li> </ul> <div id="tabs-1"> <p>put here Tab1 content</p> <br> <img src=" <div id="tabs-2"> <p>put here Tab2 content</p> <br> <img src=" </div> <div id="tabs-3"> <p>put here Tab3 content</p> <br> <img src=" </div> </body> </head> 23

24 Demo application using jquery, Results 24

25 GWT an example of corporate web framework GWT is a framework to create and maintain complex JavaScript frontend applications in Java GWT cross-compiler 25

26 Demo application using jquery, Metrics Knowledge (JS, HTML, CSS, PHP, JSON, jquery, jqueryui) 32 resource files loaded Total size 260KB 88 Lines of code or 2KB code 2 CSS styles 26

27 Demo application using GWT, page 1 Architecture MVC pattern 27

28 Demo application using GWT, page 2 Project structure 28

29 Demo application using GWT, page 3 Entry class package cern.edh.gwtdemo.client;... public class gwtdemo implements EntryPoint { public void onmoduleload() { /* Define main panel */ VerticalPanel mainverticalpanel = new VerticalPanel(); mainverticalpanel.setstylename("mainverticalpanel"); /* Add widgets */ mainverticalpanel.add(new HeaderWidget()); mainverticalpanel.add(new HTML("<hr/>")); mainverticalpanel.add(new AutocompleteWidget()); mainverticalpanel.add(new TabsWidget()); } RootPanel.get("mainDiv").add(mainVerticalPanel); } 29

30 Demo application using GWT, page 4 TabsWidget package cern.edh.gwtdemo.client.ui;... public class TabsWidget extends Composite { private TabPanel tp = new TabPanel(); private static final AppConstants constants = (AppConstants) GWT.create(AppConstants.class); public TabsWidget() { tp.add(new HTML(constants.tab1Content()), constants.tab1name()); tp.add(new HTML(constants.tab2Content()), constants.tab2name()); tp.add(new HTML(constants.tab3Content()), constants.tab3name()); // Show the 'first' tab initially. tp.selecttab(0); } initwidget(tp); setstylename("tabswidget"); } 30

31 Demo application using GWT, page 5 Keep resources in separate files AppConstants.java (can be generated from *. properties) package cern.edh.gwtdemo.client; import com.google.gwt.i18n.client.constants; public interface AppConstants extends Constants { String apptitle();... } String searchboxlabel(); AppConstants.properties apptitle = Demo application searchboxlabel = Enter tag: 31

32 Demo application using GWT, Results 32

33 Demo application using GWT, Metrics Knowledge (Java, CSS, PHP, JSON) 10 resource files loaded Total size 85KB 220 Lines of code or 5KB code 6 CSS styles 33

34 Our experience in web-interfaces EDH 1998 EDH NOW 34

35 Our experience with web-interfaces What s next? 35

36 Benefits of Java 36

37 Advantages of GWT No JavaScript syntax errors Can use complex Java on client Can send complex Java types to/from server Standalone test environment Supported by Google 37

38 Disadvantages of GWT Difficult to get used to at first, but very powerful in the long run There is not as much functionality in standard widgets Not search engine friendly Unusual approach 38

39 CERN Store catalog in GWT Application which helps to buy goods at CERN directly 39

40 Widgets in GWT-Catalog 40

41 More widgets in GWT-Catalog 41

42 CERN GWT-Catalog Metrics 66 Java classes ~200 CSS styles 20 widgets 10 Java beans 16 event handlers 20K lines of code 42

43 Direct Advantages Performance (faster and more responsive) Interactivity Feeling that updates are happening instantly Increased usability 43

44 Problems with AJAX You cannot rely on one request finishing before next is triggered Requests can take different lengths of time based on a huge array of factors Can really mess up your application 44

45 Overly rich applications also bad For mobile and wireless LAN users Performance problems Too complex for normal user 45

46 Useful Links RIA Design Patterns ( ) Google Web Toolkit ( ) jquery and jqueryui ( Balsamiq Mockups ( Ext GWT ( 46

47 Questions? 47

MO 25. Aug. 2008, 17:00 UHR RICH INTERNET APPLICATIONS MEHR BISS FÜR WEBANWENDUNGEN

MO 25. Aug. 2008, 17:00 UHR RICH INTERNET APPLICATIONS MEHR BISS FÜR WEBANWENDUNGEN 082 MO 25. Aug. 2008, 17:00 UHR 0 RICH INTERNET APPLICATIONS MEHR BISS FÜR WEBANWENDUNGEN 1 Rich Internet Applications - Definition «Rich Internet Applications (RIAs) are web applications that have the