Building Rich Web Applications using jMaki by utg65734

VIEWS: 9 PAGES: 54

									Building Rich Web
  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?
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




                                              4
jMaki Features
• Widgets from popular toolkits
  > Dojo, Yahoo, Script.aculo.us, Spry, Google
• Make JavaScript technology accessible to Java technology,
  Phobos, PHP and Ruby
• Standardize event and data models
  > Consistent programming model
• XmlHttpProxy
  > Access to RESTful web services not in the web app domain
• Integrated Tools support
  > NetBeans and Eclipse plug-in's


                                                               5
Benefits of using jMaki




                          6
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



                                                                                                                                   8
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
                                      9
Client Services API
•   jmaki.publish/subscribe
•   jmaki.Timer
•   jmaki.doAjax
•   jmaki.loadScript/loadStyle
•   jmaki.namespace
•   jmaki.extend
•   jmaki.log


                                 10
Widget Model
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
                                  12
Widget Model



                                        component.htm
                                         HTML Template




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




https://ajax.dev.java.net/widget-model.html

                                                                                         13
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'}” />

                                                             14
Layout and Themes
jMaki Layouts




                16
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




                                                17
demo

       18
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' }
 %>
                                                        20
jMaki on Java
•   Taglibs on Java Server Pages (JSP)
•   Components on Java Server Faces (JSF)
•   Comprehensive Tooling and Runtime support
•   Recipe
    >   Choose a Layout
    >   Add Widgets
    >   Configure Services
    >   Add Glue


                                                21
jMaki & Phobos: Made for each other
• Phobos
  > Lightweight scripting-friendly web application environment
  > Runs on Java platform
  > Primary supported language is JavaScript
     > No impedance mismatch
  > NetBeans IDE plug-in
• Recipe
  >   Choose a Layout
  >   Add Widgets
  >   Configure Services
  >   Add Glue
                                                        22
jMaki & Rails
• Rails
  >   Open source full-stack Ruby-based web framework
  >   Database-backed web application
  >   Model-View-Control pattern
  >   Convention over Configuration
• Recipe
  > Add jMaki Rails plugin
  > Add widgets to Rails View
  > Connect ActiveRecord and jMaki data model


                                                        23
demo

       24
Steps for Writing
jMaki Applications
Steps for Writing jMaki Application

1.Choose a layout
2.Drop widgets into a layout
3.Configure widgets (if necessary)
4.Provide glue if widgets interact
5.Choose a theme




                                     26
jMaki Palette in NetBeans IDE




                                27
Accessing External
Resources
Access External Services




                           29
XMLHttpProxy (XHP)
A Window to the Outside World
                                • Access to RESTful web
                                  services not in the web
                                  app domain
                                  > Yahoo GeoCoder
                                • Provides customizable
                                  XSL-to-JSON
                                  transformations
                                • Access to RSS feeds
                                  > Atom/RSS
                                • Widgets are tuned to
                                  use it
                                                     30
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"
}

                                                         31
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
                                                            32
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("]");
%>                                                                                    33
demo

       34
Event Model
How the widgets talk to each other?
jMaki Events

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

                                               36
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}
] }" />
                                                                      37
jMaki Glue: Publish/Subscribe
• 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                           38
 Publish/Subscribe
 • A means for jMaki widgets to communicate with each
   other in a page using topics
      > Much like server-side messaging system but runs in the
          scope of HTML page
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);
                                                                                         39
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)


                                            40
  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;
 }
                                                        41
 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) + "\"
    }
}                                                     42
demo

       43
jMaki Library Structure
 jMaki Library Structure
• Collection of named components
  > Name if 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

                                                   45
jMaki Library Structure




                          46
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




                                                    47
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.'},

                                                    48
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'
                ]
          }
       }


                                                     49
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
                                                50
jMaki Component Customizer




                             51
jMaki     • Download jMaki NetBeans
            and Eclipse plug-ins
What to   • Watch Screencasts
Do        • Read tutorials
          • Join and contribute!
          • Participate on jMaki forums
          • Create something cool!


                 http://jmaki.com

                                    52
jMaki Resources
• jMaki Project Site: ajax.dev.java.net (jmaki.com)
   > Download binaries, IDE Plugins, Tutorials
• Getting Started: ajax.dev.java.net/getstarted.html
• Samples: ajax.dev.java.net/samples.html
• Wiki: wiki.java.net/bin/view/Projects/jMaki
• Aliases: dev@ajax.dev.java.net
• jMaki Forum: forums.java.net/jive/forum.jspa?forumID=96
• Blogs:
   >   weblogs.java.net/blog/gmurray71
   >   weblogs.java.net/blog/carlavmott
   >   blogs.sun.com/arungupta
   >   weblogs.java.net/blog/ludo
   >   weblogs.java.net/blog/ntruchsess                     53
Building Rich Web
  Applications
   using jMaki

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

								
To top