Rich User Interfaces for Web-Based Corporate Applications

(1)

Rich User Interfaces for

Web-Based Corporate

Applications

Ivan Zapevalov,

(2)

Outline

• RIA technologies • AJAX technology • Widgets

• Demo application in JavaScript • Demo application in GWT

(3)

Rich Internet Applications (RIA)

web applications that have the features and functionality of

(4)

Why do we need rich Web interfaces?

• Every major company has its own web-system

• RIA is good combination • Go with majority

(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

(6)

RIA Patterns

Drag and Drop Auto Complete Progress Bar

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

(7)

RIA Patterns Examples

• Fly-out Menu • Slideshow

• Collapsible Panels • Charts

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

(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 –Other resources A J A X

(11)

Server Side

• For server side could use any

technology which can receive AJAX-calls and send response

• Popular examples – PHP – .NET – Python – Ruby – Java – No server side

(12)

The keystone of AJAX is the XMLHttpRequest object

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"); }

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 1. Create an

(13)

AJAX and MVC 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

(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

(17)

(18)

Advantages of widgets

• Reusable • Adjustable

• Enforce code/template separation • Ready-made components

(19)

Demo application, concept

• Two RIA patterns

–Autocomplete box –Tabs

(20)

Demo application using jQuery, page 1

(21)

• HEADER

<head>

<title>Demo application</title>

……….

src="http://jqueryui.com/ui/jquery.ui.core.js"></script>

……….

href="http://jqueryui.com/themes/base/jquery.ui.all.css"

rel="stylesheet" />

(22)

$(function() {

function format(mail) {

return mail.name + " <" + mail.to + ">"; }

<!—Autocomplete controller-->

$("#email").autocomplete('http://www.iberica.ru/emails.php', { 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(); }); </script> </head>

(23)

• BODY

<body>

<div class="header">Demo application</div> <hr />

<p><span>Enter tag:</span> <input size="40" id="email" /></p> </form>

</div>

<p>Put here Tab1 content</p> <br>

<img

src="http://www.cellphonehits.net/uploads/2008/10/android_openmoko.jpg"> </div>

(24)

(25)

GWT – an example of corporate web framework

• GWT is a framework to create and maintain complex JavaScript front-end applications in Java

(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

(27)

Demo application using GWT, page 1

(28)

(29)

• 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); }

(30)

• 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());

// Show the 'first' tab initially. tp.selectTab(0);

initWidget(tp);

setStyleName("tabsWidget"); }

(31)

• Keep resources in separate files

– AppConstants.java (can be generated from *. properties)

– AppConstants.properties

package cern.edh.gwtdemo.client;

import com.google.gwt.i18n.client.Constants;

public interface AppConstants extends Constants {

String appTitle();

String searchBoxLabel(); ...

}

appTitle = Demo application searchBoxLabel = Enter tag:

(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

(34)

• EDH 1998

• EDH NOW

(35)

Our experience with web-interfaces

(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

(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

(39)

CERN Store catalog in GWT

Application which helps to buy goods at CERN directly

(40)

(41)

(42)

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

(43)

Direct Advantages

• Performance (faster and more responsive)

• Interactivity

• Feeling that updates are happening instantly

(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

(45)

Overly rich applications also bad

• For mobile and wireless LAN users • Performance problems

(46)

Useful Links

• RIA Design Patterns (http://www.welie.com/patterns/,

http://developer.yahoo.com/ypatterns/)

• Google Web Toolkit (http://code.google.com/webtoolkit/ )

• jQuery and jQueryUI (http://jquery.com/, http://jqueryui.com/)

• Balsamiq Mockups (http://balsamiq.com/products/mockups)

(47)

Questions?