I. Zapevalov. Creating rich user interfaces for web-based corporate

1CERN GS-AIS-EB

Rich User Interfaces for

Web-Based Corporate

Applications

Ivan Zapevalov,

Software Engineer

2CERN GS-AIS-EB

Outline

• RIA technologies

• AJAX technology

• Widgets

• Demo application in JavaScript

• Demo application in GWT

• Web-catalog in GWT

3CERN GS-AIS-EB

Rich Internet Applications (RIA)

web applications that have the

features and functionality of

traditional desktop applications

4CERN GS-AIS-EB

Why do we need rich Web interfaces?

• Every major company has its own

web-system

• RIA is good combination

• Go with majority

5CERN GS-AIS-EB

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

… … … …

6CERN GS-AIS-EB

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

•Miscellaneous (Hot list, News box)

7CERN GS-AIS-EB

RIA Patterns Examples

• Fly-out Menu

• Slideshow

• Collapsible Panels

• Charts

8CERN GS-AIS-EB

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

9CERN GS-AIS-EB

Common AJAX Architecture

10CERN GS-AIS-EB

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

11CERN GS-AIS-EB

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

12CERN GS-AIS-EB

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

}

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

XMLHttpRequest Object

13CERN GS-AIS-EB

AJAX and MVC architecture

• Model–View–Controller (MVC)

14CERN GS-AIS-EB

Common AJAX Architecture

15CERN GS-AIS-EB

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

16CERN GS-AIS-EB

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

17CERN GS-AIS-EB

Widget as an independent element

18CERN GS-AIS-EB

Advantages of widgets

• Reusable

• Adjustable

• Enforce code/template separation

• Ready-made components

• Ready-made design

19CERN GS-AIS-EB

Demo application, concept

• Two RIA patterns

–Autocomplete box

–Tabs

• Mockup

20CERN GS-AIS-EB

Demo application using jQuery, page 1

• Architecture – MVC pattern

21CERN GS-AIS-EB


• HEADER<head>

<meta charset="utf-8">

<title>Demo application</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

……….

<script type="text/javascript"

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

……….

<link type="text/css"

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

rel="stylesheet" />

<link rel="stylesheet" href="./demo.css">

22CERN GS-AIS-EB


<script type="text/javascript">

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

23CERN GS-AIS-EB


• 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="email" /></p>

</form>

</div>



<div id="tabs">

<ul>

<li><a href="#tabs-1">Tab1</a></li>



</ul>

<div id="tabs-1">

<p>Put here Tab1 content</p>

<br>

<img src="http://www.mobilelinuxinfo.com/images/nokia-n810.jpg"></div>

<div id="tabs-2">


<br>

<img

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

</div>

<div id="tabs-3">


<br>

<img src="http://i.zdnet.com/blogs/apple-logo1.jpg"></div>

</div>

</body>

</head>

24CERN GS-AIS-EB

Demo application using jQuery, Results

25CERN GS-AIS-EB

GWT – an example of corporate web framework

• GWT is a framework to create and

maintain complex JavaScript front-

end applications in Java

GWT cross-compiler

26CERN GS-AIS-EB

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

27CERN GS-AIS-EB

Demo application using GWT, page 1

• Architecture – MVC pattern

28CERN GS-AIS-EB


• Project structure

29CERN GS-AIS-EB


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

}

}

30CERN GS-AIS-EB


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

}

}

31CERN GS-AIS-EB


• 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:

32CERN GS-AIS-EB

Demo application using GWT, Results

33CERN GS-AIS-EB

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

34CERN GS-AIS-EB

• EDH 1998

• EDH NOW

Our experience in web-interfaces

35CERN GS-AIS-EB

Our experience with web-interfaces

• What’s next?

36CERN GS-AIS-EB

Benefits of Java

37CERN GS-AIS-EB

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

38CERN GS-AIS-EB

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

39CERN GS-AIS-EB

CERN Store catalog in GWT

Application which helps to buy goods

at CERN directly

40CERN GS-AIS-EB

Widgets in GWT-Catalog

41CERN GS-AIS-EB

More widgets in GWT-Catalog

42CERN GS-AIS-EB

CERN GWT-Catalog Metrics

• 66 Java classes

• ~200 CSS styles

• 20 widgets

• 10 Java beans

• 16 event handlers

• 20K lines of code

43CERN GS-AIS-EB

Direct Advantages

• Performance (faster and more

responsive)

• Interactivity

• Feeling that updates are happening

instantly

• Increased usability

44CERN GS-AIS-EB

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

45CERN GS-AIS-EB

Overly rich applications also bad

• For mobile and wireless LAN users

• Performance problems

• Too complex for normal user

46CERN GS-AIS-EB

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)

• Ext GWT (http://www.sencha.com/products/gwt/)

http://www.welie.com/patterns/

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

http://code.google.com/webtoolkit/

http://jquery.com/

http://jqueryui.com/

http://balsamiq.com/products/mockups

http://www.sencha.com/products/gwt/

47CERN GS-AIS-EB

Questions?

[email protected]

I. Zapevalov. Creating rich user interfaces for web-based corporate

Documents

Transcript of I. Zapevalov. Creating rich user interfaces for web-based corporate