JSF AJAX Netbeans

JSF and AJAX withNetbeans 5.5Wanasanan Thongsongkrit(NAS) :)

AJAX2

AJAX’s shortcomingBecause AJAX is new, it has very inconsistentsupport among browsers. Also, to develop with AJAX, you need to havesome knowledge of JavaScript, which is out ofreach for many page authors. 3

Learning AJAX Fast (easy) if you are a JavaScript guruhave memorized the entireDOM APIown and study books onDHTML, JavaScript, CSS,AJAX and useful hacks foreach technology Slow (hard) if you come from a mostly staticHTML/CSS backgroundare comfortable withtraditional web applicationarchitectures built aroundan HTTP POSTprimary use of JavaScriptis cut-and-paste of cuteanimations and other coolin-page behaviors4

AJAX toolkits The complete list indicates some 160 toolkits existKeith provided a pointer to a popularity survey of AJAXtoolkits (as of September 23, 2006) Prototype (48%)Script.aculo.us (33%)Dojo (19%)DWR (12%)Moo.fx (11%)jQuery (7%)Rico (5%)Yahoo UI (5%)Atlas (4%)MochiKit (4%)XAjAX (4%)GWT (3%)5

How to avoid learning javascriptand all toolkits? Use components that encapsulate AJAX insideBenefits Hide functionality behind simple building blocksPage author do not have to write all java scripts themselves butlet the component do the complicated workPage authors have an easier time maintaining their pagesReusable componentsTechnology used: Java Server Faces (JSF) author can just drag and drop the components onto a page usinga tool such as Sun Java Studio Creator or the NetBeans IDE.6

Create Great-Looking GUIs WithNetBeans IDE 5.57

NetBeans Enterprise Pack(Beta version)8

jMaki Framework (plug-in) JavaScript Wrapper framework for the Java platformwraps popular AJAX frameworks into a JSP or JSF tagProvides a common programming model to developersFamiliar to Java EE application developersLeverages the widgets from popular frameworks (See)DojoMochikit FlickrSpryGoogleYahooScriptaculusDHTMLWhat you need is: jMaki 115/41646/org-netbeans-modules-sun-jmaki.nbm9

Basic jMakiApplicationStructurejmaki.js the JavaScriptbootstrapper and utilities thatmanages the loading of jMaki widgetson the client, makes XMLHttpRequests, loads additional resources, provides inter-widgetcommunication using publishand subscribe stores widget instances to beshared across an application. a:ajax name "jmaki.delicious"/ config.json configuration of3rd party libraries used by jMaki10

jMaki: made up of JavaScript Runtime, the Server SideRuntime, and the XmlHttpProxy.11

JavaScript Runtime (jmaki.js) responsible for bootstrapping all widgets and passing parameters provided by aserver-side runtime.makes sure that each widget instance gets the correct parametersthat were passed from the server-side runtime.uses default parameters (if not provided) that may then becustomized for each widget.provides convenient APIs for performing an XMLHttpRequestand loading resources based on JSON with Padding (JSONP).provides APIs for a widget to load extra scripts, styles, andresources needed by a widget.provides a publish subscribe mechanism for widget-basedcommunication.provides a common namespace to store and access widgetsThe key point of the API is that you can program toone API and access widgets from any given toolkit.12

Server-Side Runtime responsible for applying changes and rendering HTML templates.renders all script and CSS references based on whichtype is centrally configured.responsible for serializing parameters (specified asattributes in a JSP or JSF tag) that are passed to theJavaScript runtime.capable of mapping widget values back into serverbased model data, such as managed objects, webservices, or databases.13

XmlHttpProxy provides a generic JSON-based access to awidget range of XML-based services using anHTTP client. services include RSS feeds, Yahoo services such asgeocoding, Flickr image searches, and many more tocome.allows widgets to access services in a uniformway by providing XSL-to-JSON transformationsthat can be easily customized.14

How author configurewidgets’ parameters via jMaki? using JSONjMaki WidgetJSON(parameters)wrappedWidget15

Using Your Own Data With ajMaki Widget to add your own data to a widget (JSON format): Using a static fileUsing a JavaServer Faces managed beanUsing a JSP page or a servlet16

Demo: Publish and SubscribeMechanism with Yahoo Geocoder a:ajax name "yahoo.geocoder" service "/xhp"/ widget script type "text/javascript" Subscribefunction geoCoderListener(coordinates) {var targetDiv document.getElementById("geocoder001 message");var reponseText "";for (var i in coordinates) {reponseText "Latitude " coordinates[i].latitude " Longitude " coordinates[i].longitude " br ";}targetDiv.innerHTML reponseText;}// subscribe to the topic '/yahoo/geocode' to which this widget publishes eventsjmaki.subscribe("/yahoo/geocoder", geoCoderListener); /script div id "geocoder001 message" /div Display location17

Geocoder’sComponent.html (hidden) div id " {uuid}" formonsubmit "jmaki.attributes.get(' {uuid}').getCoordinates();return false;" Location: input type "text" id " {uuid} location" input type "button" value "Get Coordinates"onclick "jmaki.attributes.get(' {uuid}').getCoordinates();" /form /div 18

Geocoder’sComponent.js (hidden)if (typeof jmaki.GeoCoder 'undefined'){jmaki.GeoCoder function( widget) {var topic "/yahoo/geocoder";var uuid widget.uuid;var service widget.service;if (typeof widget.args ! 'undefined' &&typeof widget.args.topic ! 'undefined') {topic widget.args.topic;uses defaultparameters}19

Geocoder’sComponent.js (hidden)var location;this.getCoordinates function() {Wrapped functionlocation encodeURIComponent(document.getElementById(uuid " location").value);var encodedLocation encodeURIComponent("location " location);var url service "?key yahoogeocoder&urlparams " encodedLocation;jmaki.doAjax({url: url, callback: function(req) { var req req;postProcess( req);}});}20

Componet.js (hidden)function postProcess(req) {if (req.readyState 4) {if (req.status 200) {var response eval("(" req.responseText ")");jmaki.publish(topic, response.coordinates);}}Publish}response}}var geocoder new jmaki.GeoCoder(widget);// add to the instance map for later refernecejmaki.attributes.put(widget.uuid, geocoder);21

Referenceshttps://ajax.dev.java.net/ https://ajax.dev.java.net/download.html http://javaserver.org/jmaki/ http://www.netbeans.org/ torial.jsp tro/ http://www.google.com/apis/maps/ 22

Technology used: Java Server Faces (JSF) author can just drag and drop the components onto a page using a