Embed Size (px)
Citation preview
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
Demo application using jQuery, page 2
• HEADER<head>
<meta charset="utf-8">
<title>Demo application</title>
<!-- jQuery libs --><script src="http://code.jquery.com/jquery-latest.js"></script>
……….
<!-- jQueryUI libs --><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" />
<!-- CSS style file --><link rel="stylesheet" href="./demo.css">
22CERN GS-AIS-EB
Demo application using jQuery, page 3
<!--JS--><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
Demo application using jQuery, page 4
• BODY<body>
<!-- Page Header -->
<div class="header">Demo application</div>
<hr />
<!-- Autocomplete input -->
<div id="content" class="autocomplete">
<form autocomplete="off">
<p><span>Enter tag:</span> <input size="40" id="email" /></p>
</form>
</div>
<!-- Tabs -->
<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="http://www.mobilelinuxinfo.com/images/nokia-n810.jpg"></div>
<div id="tabs-2">
<p>Put here Tab2 content</p>
<br>
<img
src="http://www.cellphonehits.net/uploads/2008/10/android_openmoko.jpg">
</div>
<div id="tabs-3">
<p>Put here Tab3 content</p>
<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
Demo application using GWT, page 2
• Project structure
29CERN GS-AIS-EB
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);
}
}
30CERN GS-AIS-EB
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");
}
}
31CERN GS-AIS-EB
Demo application using GWT, page 5
• 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/)
