Building Web 2.0 Applications using jMaki

Document Sample
Building Web 2.0 Applications using jMaki Powered By Docstoc
					Building Web 2.0
Applications using
      jMaki

Sang Shin
Java Technology Evangelist
Sun Microsystems, Inc.
www.javapassion.com
                             1
Topics
•   What is and Why jMaki?
•   jMaki Architecture
•   Widget model
•   Layout and Themes
•   Multi-Language support
•   Accessing external resources
•   Event model
•   jMaki Library Structure
                                   2
What is & Why jMaki?
You can try all the
demos yourself!

www.javapassion.com
Origins of jMaki?

• ‘j’ is for JavaScript™ technology
• Maki == to wrap in Japanese
• Started as a way of wrapping JavaScript technology
  functionality
• Project jMaki has evolved to provide more




                                              5
jMaki Features
• Widgets from popular toolkits can be used in simple and
  consistent syntax
  > Dojo, Yahoo, Script.aculo.us, Spry, Google
• Standardize event and data models
  > Consistent programming model
• Widgets can be used with Java technology, Phobos
  (JavaScript), PHP and Ruby
• XmlHttpProxy
  > Access services beyond the security domain of web application
• Integrated Tools support
  > NetBeans and Eclipse plug-in's
                                                               6
jMaki Target Audience
• Java, PHP, and Phobos developers want to use
  JavaScript but may want one level of indirection
  between the script and themselves.
• JavaScript developers who want a simple re-usable
  framework to tie applications together.
• Designers who want access to CSS




                                               7
Benefits of using jMaki




                          8
jMaki Architecture
jMaki Architecture

                Widget Model                         jMaki Client Services                                      jMaki Layouts
     Dojo
                           Html

    Yahoo       CSS               JavaScript              XHR                Publish/Subscribe

                      widget. json                       Injector              Glue/Timers
Scriptaculous
                                                     jMaki Client Runtime
   Google
                        jMaki Server Side Runtime                                                          XmlHttpProxy
     Spry
                   Shared Configuration                   Script/CSS Links                                           XSL Style Sheets
                                                                                                 Service
                   Template Renderer                      UUID Generator                     Configuration           XSL Transformer

                        Runtime to JavaScript Parameter Convertor                                              HTTP Client




                        Enterprise Resources                                                  External Services
                                    Data       Managed          Web                 REST             Yahoo          Flickr         RSS
                 Service
                                    Base       Objects        Services            Services          Services       Services       Feeds


                                                                                                                                   10
Client Services

                  • Glue wires widgets
                    together
                    > Based on publish and
                      subscribe mechanism
                    > Event bus on client
                  • Injector loads the
                    contents of external
                    page in current page
                  • Filter RSS data from
                    web services
                                      11
Client Services API
•   jmaki.publish/subscribe
•   jmaki.Timer
•   jmaki.doAjax
•   jmaki.loadScript/loadStyle
•   jmaki.namespace
•   jmaki.extend
•   jmaki.log


                                 12
Widget Model
jMaki Widget Model
                • Reusable JavaScript
                  technology component
                • Common API for
                  all widgets
                • Described by HTML,
                  CSS, JavaScript
                  technology and
                  JSON files
                • Widget dependency
                  information in
                  widget.json
                                   14
              What Makes Up a Widget?
                 HTML template, CSS, JavaScript



                                   component.htm
                                   HTML Template


                                                             jMaki
                                              component.js   Widget
                          component.css
                            CS Styles          Behavior
                                               Bootstrap
                                                 Code




https://ajax.dev.java.net/widget-model.html
                                                                      15
Hello World Widget
component.htm

<div id=”${uuid}”></div>

component.js                                           id
                                                       value
jmaki.namespace(“jmaki.widgets.hello”);                service
jmaki.widgets.hello.Widget = function(wargs) {         args
var mydiv = document.getElementById(wargs.uuid);       selected
   mydiv.innerHTML = “Hello “ + wargs.args.name;
}

index.jsp

<%@ taglib prefix=”a” uri=”http://jmaki/v1.0/jsp” %>
<a:widget name=”hello” args=”{name: 'world'}” />

                                                             16
Layout and Themes
jMaki Layouts




                18
jMaki Layouts and Themes
•   Provide templates written in CSS and HTML
•   Gives you a place to put your widgets
•   Web designer friendly
•   Easy to customize




                                                19
Template HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="jmaki-standard-footer.css" type="text/css"></link>

<html>
...
    <div class="header">
     <div class="banner">Application Name</div>

      </div> <!-- header -->
...

 </body>

                                                                          20
Template CSS
.header {
  height:100px;
  border: 1px solid #000000;
}
.main {
  position: relative;
  width: 100%;
  height:auto;
  margin-top: 5px;
}
.content {
  margin: 0 0 0 200px;
  height: auto;
  border: 1px solid #000000;
}
...                            21
                      Demo:
                    Use widgets
                   from different
                      toolkits



http://www.javapassion.com/handsonlabs/ajaxjmakiintro/#2.3
                                                             22
Multi-Language Support
jMaki: Multi-Language support
JSP Technology: index.jsp
 <%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
 <a:widget name="hello" args="{name: 'Greg'}" />

PHP: index.php
 <?php require_once 'Jmaki.php'; ?>
 <?php addWidget("hello", null, "{name: 'Greg'}"); ?>

Phobos: index.ejs
 <% library.jmaki.insert({
        component:"hello",
        args: {name: 'Greg'}
 }); %>

Ruby: index.rb
 <%= jmaki_widget 'hello',
     :args => { :name => name },
     :value => { 'Greg' }
 %>
                                                        24
Demo


       25
Accessing External
Resources via
XMLHttpProxy
Access External Services




                           27
XMLHttpProxy (XHP)
A Window to the Outside World
                                • Access to RESTful web
                                  services not in the web
                                  app domain
                                  > Yahoo GeoCoder
                                • Provides customizable
                                  XML-to-JSON
                                  transformations
                                • Access to RSS feeds
                                  > Atom/RSS


                                                     28
Accessing External Services
<a:widget name="jmaki.blockList" service="/xhp?id=rss" />

"rss"configured in the configuration file"xhp.json"

xhp.json:

{ "id": "rss",
  "url":"http://weblogs.java.net/blog/ludo/index.rdf",
  "xslStyleSheet": "rss.xsl"
}

                                                         29
                     Demo:
                    RSS feed


http://www.javapassion.com/handsonlabs/ajaxjmakimashup/#Exercise_1
                                                         30
Access Enterprise Resources
jMaki work with JPA

<a:widget name="yahoo.dataTable" args="{
  columns :[
     {label : 'Company', id : 'company'},
     {label : 'Price', id : 'price'},
     {label : 'Change', id : 'change'},
     {label : '% Change', id : 'pchange'},
     {label : 'Last Updated', id : 'lupdate'}
  ]}"
  service="data.jsp" />

data.jsp provides dynamic data from persistence using JPA
                                                            31
Access Enterprise Resources
data.jsp dynamic data using JPA
<%@ page import="java.util.*" %>
<%@ page import="server.Company" %>
<%@ page import="javax.persistence.*" %>
<%
  EntityManagerFactory emf = Persistence.createEntityManagerFactory("jmaki-jpaPU");
  EntityManager em = emf.createEntityManager();
  List<Company> list = em.createQuery("select c from Company c").getResultList();
  out.println("[");
  for (int i=0; i<list.size(); i++) {
    Company c = list.get(i);
    out.println("['" + c.getCompanyname() + "'," +
        c.getPrice() + "," + c.getChange() + "," +
        c.getPercentchange() + ",'" + c.getLastupdated() +
        "']");
    if (i < list.size()-1)
        out.println(",");
  }
  out.println("]");
%>                                                                                    32
Event Model
How the widgets talk to each other?
jMaki Events

• Publish/Subscribe is much like a server-side
  messaging system but it runs in the scope of an
  HTML page
  > A means for one or more Project jMaki widgets to
    communicate with one another in a page
    using topics
  > Enables mashup
• Action – Simple events that are declarative
• Glue – For processing dynamic events where you
  provide the logic in JavaScript
                                                       34
Event Model:
Publish/Subscribe
 Publish/Subscribe
 • A means for jMaki widgets to communicate with each
   other in a page using topics

Publish                                    Subscribe
icon.onClick = function() {                 function fisheyeListener(item) {
   jmaki.publish(“/dojo/fisheye”, this);       var targetDiv = document.getElementById(“new”);
}                                              var responseText = “”;
                                               var index = Number(item.index);
                                               switch (index) {
                                                 case 1: // set response text
                                                     break;
                                                 ...
                                               }
                                              targetDiv.innerHTML = responseText;
                                           }
                                           jmaki.susbscribe(“/dojo/fisheye”, fisheyelistener);
                                                                                         36
Publish Example

icon.onClick = function (){
  jmaki.publish("/dojo/fisheye/onSelect",
               {type : "onSelect", targetId : id});
}

/dojo/fisheye is the base topic of the widget
(“/onSelect” which is the sub-type gets
appended)


                                             37
  Subscribe Example
jmaki.subscribe("/dojo/fisheye/*", fisheyeListener);

function fisheyeListener(item) {
   var targetDiv = document.getElementById("newpage");
   var responseText = "";
   var index = Number(item.index);
   switch(index){
      case 1: // Set responseText equal to Greg's bio
       break;
      case 2: // Set responseText equal to Roberto's bio
       default: responseText += 'Click on one of the photos above';
       break;
    }
    targetDiv.innerHTML = responseText;
 }
                                                          38
Event Model:
Action
Action

• Declaratively publish a message per a user action
  > The action property will publish a message that can be
    picked up by another widget in the page
• Simplifies widget to widget communication
• Uses Publish/Subscribe underneath




                                                       40
Action Example
 <a:widget name="dojo.fisheye" value="[
{ iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg',
  label : 'You are here!',
  action : { topic : '/foo/select', message : {targetId : 'bar'}}
 },
 { iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg', label : 'test3'}
]"/>

<a:widget name="dojo.tabbedview"
   subscribe="/foo"
   value="{items:[
  {label : 'My Tab', content : 'Some Content'},
  {id : 'bar', label : 'My Tab 2', include : 'test.jsp ', lazyLoad : true },
  {label : 'My Tab 3', content : 'More Content', selected : true}
] }" />
                                                                      41
Demo:
Action


         42
Event Model:
Glue
jMaki Glue
• jMaki widgets communicate within the page
  in JavaScript programming language via jMaki glue
• Glue:
  > JavaScript technology-based and loaded application-wide or
    based on a page
  > JavaScript technology handlers mapped to topic names
• Steps to using the glue mechasim
  > Declare the topic you want to subscribe or listen to
  > Declare the name of the function (listener) which will handle the
    notification
  > Provide the code to handle the notification
• Widgets configured to work by default
                                                                  44
Sample in glue.js
jmaki.namespace("jmaki.listeners");
jmaki.subscribe("/grizzly/message",
                      "jmaki.listeners.sendMessage");

jmaki.listeners.sendMessage = function(message) {
  jmaki.doAjax({
    method : "post",
    url : "words",
    content : {
       callback : "jmaki.CometClient.callback,
       action : "post",
       message: "{message : \"" + escape(message) + "\"
    }
}
                                                        45
        Demo:
Yahoo and Google Map
    (City Locator)



                   46
  Demo:
Craig's List



               47
  Demo:
Travel Map


             48
Injector
What is jMaki Injector?
• A JavaScript Utility for loading content from a URL
  (same domain)
• Loads scripts and CSS styles into the document and
  the contents a into a target element.
• Use cases
  > Build composite widgets
     >Tabbed views
     >Accordions
  > Do partial page refresh

                                               50
Injector: Page Developer View
• index.jsp
     <a:widget name="yahoo.tabbedview"
                  value="{items:[
                  {label : 'My Tab', content : 'Some Content'},
                  {id : 'bar', label : 'My Tab 2', include : 'test.jsp ' },
                  {label : 'My Tab 3', content : 'More Content', selected : true}]
                  }" />
• test.jsp
      <a:widget name="yahoo.calendar" />
      <a:widget name="flickr.favorites" args="{tags:'austrailia', size: 50}" />



                                                                         51
Injector: Yahoo Tabbed View




                              52
 Demo:
Injector



           53
jMaki Library Structure
 jMaki Library Structure
• Collection of named components
  > Name of the directory path of the component
  > A component is component.html, component.js,
    component.css and widget.json
• The toolkit library content
  > For example, dojo or yahoo libs
• Snippets for JSP technology, EJS, PHP, Rails, etc.
• Palette entry names in a bundle file
• All this packaged as a zip file for installation

                                                   55
jMaki Library Structure




                          56
 Demo:
 jMaki
Charting



           57
config.json or widget.json Files

• A central place for defining Project jMaki
  configuration information
  >   JavaScript programming language library dependencies
  >   API keys
  >   CSS dependencies
  >   Project jMaki Glue handler mappings




                                                    58
widget.json for Dojo Clock Widget
{   "name" : "Clock",
    "type" : "dojo",
    'version' : '.8',
    'jmakiVersion' : '.8.2.3',
    "image" : "images/dojo-clock.jpg",
    "description" : "This widget is a clock.",
    "args": [
        {"clockType" : {
           "type":"STRING",
            "description" : "The clock type.",
            "defaultValue" : 'plain',
             'values': [
                {'name' : 'Plain', 'value' : 'plain',
'description' : 'Clock with blue background.'},
                {'name' : 'Black', 'value' : 'black',
'description' : 'Clock with black background.'},

                                                    59
widget.json for Dojo Clock
...
    'config' : {
          'type' :
            { 'id' : 'dojo',
              'libs' : [
                    '../resources/libs/dojo/v.4.2/dojo.js'
                ],
                'preload' : 'if (typeof djConfig
==\'undefined\') djConfig = { parseWidgets: false,
searchIds: [] };',
                'resources' : [
                  '../resources/libs/dojo/v.4.2/src'
                ]
          }
       }

                                                     60
Configure Widgets

• id: You can override the automatic numbering
• value: In-line a value for simple cases
• service: Requires a corresponding server-side
  component
• args: JavaScript programming language Object
  Literal/Associative Array
• publish – topic events are published to
• subscribe – topic to listen to for change events
                                                61
Building Rich Web
  Applications
   using jMaki

Sang Shin
Java Technology Evangelist
Sun Microsystems, Inc.
www.javapassion.com
                             62

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:8
posted:1/7/2012
language:English
pages:62
jianghongl jianghongl http://
About