JMaki es un framework para construir aplicaciones web 2.0 usando las tecnlogías estándar para ellos: css, javascript y html pero además permite vincular de forma transparente estas tecnologías con tus componentes del lado del servidor.
A grandes rasgos, JMaki es solo una librería para usar los widgets principalmente de Dojo (y algunos de scriptaculous, google y yahoo) como tags de jsp o componentes JSF. De hecho su nombre viene de J por javascript y Maki que es "Wrapper" en japonés.
La lista de widgets que se pueden usar la pueden ver en esta galería. Sin embargo, JMaki tiene más características, como un sistema de publicación/subscripción para eventos generados por el widget, un sistema para comunicar los widgets con el código del lado del servidor usando AJAX e incluso una galería de layouts genéricos para sitios web que puedes usar como punto de partida para crear tus aplicaciones.
En el artículo enlazado, Carla Mott que es desarrolladora del proyecto y colaboradora del toolkit de Dojo, enseña a empezar a usar este framework usando netbeans y un plugin para dicho IDE; lo que vuelve sumamente fácil la integración de jMaki con aplicaciones java. Por ahora jMaki es aún Beta pero se espera pronto la versión 1.0
Por mi parte me parece un poco alarmante que ya con años con el hype de la web 2.0 sea hasta ahora que se haya creado una forma sencilla de usar css y componetes javascript para aplicaciones java, basta decir que en JSF se sigue haciendo todo con las viejas tablas html, mientras que en la vida real los diseñadores web hace mucho que migraron a los div y a los estilos css para realizar páginas web.
¿Qué piensan de esta iniciativa? ¿Siguen usando el viejo html o han migrado a formas más sofisticadas propuestas por el paradigma web 2.0, acostumbra usar widgets javascript en sus aplicaciones? ¿Porqué en el mundo java parece que se promueve mucho un código robusto y eficiente del lado del servidor pero se deja a un lado una Vista que sea atractiva y usable para el cliente?
Building web 2.0 apps with jMaki
Posted by carlavmott on January 03, 2007 at 10:03 PM | Permalink | Comments (2)
jMaki is a light weight framework for developing JavaScript centric Ajax-enabled web applications using Java, Phobos and PHP. In this blog I will show how to use one of the layout templates, various widgets, the dynamic container and the glue feature that are part of jMaki to quickly build a web 2.0 application.
I will use the NetBeans plugin to build the app as that makes life even easier but the plugin is not required. I have included the tags I used in the application below, so regardless of the environment you are familiar with, you can build this app too. Also see the JSP tutorial for more information on building an application without an IDE.
The web application I will build uses the standard layout template, the Dojo fisheye widget for navigation, the Yahoo Geocoder and Google map widgets. The fisheye widget comes with default images of some of the contributors to jMaki which I will use even if other images would better fit the application.
Start by downloading the NetBeans plugin 1.6.3 which supports jMaki 1.0 Beta 2. If you have not used the jMaki plugin for NetBeans see this page for pointers to some screencasts to see how to add the plugin and create a simple web app.
In NetBeans, create a new project that is a web application, click next, just use the default web application name for this project, click next, select the jMaki framework and click finish. First thing to do in this project is to create a new file that is a stylized JSP page and call it "index" and select the standard layout. This layout has a a menu bar on top, a left side bar I'll use for navigation and a main content area in the center of the page. See below for details.
Look at the "index.jsp" page that is generated for you by NetBeans. You will see that it contains all the CSS rules needed to display such a page. Now we need to add content to the div tags. In this application I will use the Dojo fisheye widget in the left side bar. Using the jMaki palette on the right drag and drop the fisheye widget to the page in the div tag for the left side bar. Highlight the widget and click on the jMaki item on the menu bar. This will bring up the component editor. For this application I want the fisheye widget to have a verticle orientation and the labels to be displayed on the right of the image. Make those changes using the component editor and save the file.
Next create a new JSP page called "mapit" and in that page add two widgets, the Yahoo Geo coder widget and the Google Map widget and save that file. Note that you will not need the JavaScript code that is generated when the widget is dropped in the page. I have therefore removed it from the application here.
So far I have the pieces of the application and now I need to put them together. There are two parts to this. First, in the "mapit.jsp" page I want the user to type a location in the text box and a map of that location to appear below it. This will be done automatically (no extra code needed) because of the sample JavaScript code that is in the glue.js file provided with the jMaki release. You will find the glue.js file in the resources directory of your web app. Glue code is specific to an application so you can modify what is there or provide action handlers as needed by your application. Because each of the widgets in jMaki pubishes a topic when a user performs some action, developers only need to write action handlers for the events they are interested in. In the case of the Yahoo Geocoder widget, when the user clicks on the button an event is published to the "/yahoo/geocoder" topic along with the latitude and longitude of the specified location. The glue code contains the action handler for that topic. That action handler gets the location data from the Yahoo Geocoder and passes it to any Yahoo or Google maps declared in the page. In this example, I used the Google map widget. See the glue code page for more details on what is happening.
Next we want to load "mapit.jsp" in the main content area of our web app when a user selects the first element in the fisheye widget. This is done behind the scenes using the injector feature. Go back to the index.html file and add the jMaki dcontainer widget to the main content div. By simply adding the dcontainer widget to that section it it tells jMaki to load any JavaScript or CSS content from a page refered to by a url to the current page (in this case in the main content div). Since the "mapit.jsp" page uses Google maps we must use the iframe property on the dcontainer widget. This is because google maps uses document.write when rendering the page which could overwrite the content of the current page so we need to put the widget in an iframe like container for the rendering to happen correctly.
<a:ajax name="jmaki.dcontainer" args="{iframe: true}"/> Finally, to the fisheye widget add the url attribute referring to the "mapit.jsp" page to the first item in the widget. This tells the injector code which page to load in the main content area. Other widgets such as the Dojo tree and jMaki menu have a url attribute for the same purpose.
<a:ajax name="dojo.fisheye" args="{labelEdge:'right', items:[{'iconSrc':'https://ajax.dev.java.net/images/blog_murray.jpg','url':'mapit.jsp', 'caption':'You are here!'},{'iconSrc':'https://ajax.dev.java.net/images/chinnici.jpg', 'url': 'table.jsp', 'caption':'test3'}, {'iconSrc':'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg','caption':'test4'}], orientation:'vertical'}"/> The fisheye widget has the url to the page and now needs to broadcast that url to the dcontainer. To do that add the following code to the glue.js file. Note that this is similar to what was done in the glue.js file for the Yahoo Geocoder described above.
/* Programatically Register the glue */ jmaki.addGlueListener({topic : "/dojo/fisheye",action: "call", target: { object: "jmaki.carla",functionName: "fishEyeEvent"}}); jmaki.carla = { fishEyeEvent : function(args) { alert("sending out dcontainer event to load the url: " + args.target.url); jmaki.publish("/jmaki/dcontainer", args.target.url); } } When the user clicks on the first item it will broadcast an event including the url to the page should be loaded. The dcontainer in the main content area is listening for such events and will load the page there. Save all changes and select run to build and deploy the application. The web application should come up in a browser.
Click on the first item in the fisheye and you will see the "mapit.jsp" page loaded in the main content area. Next type in a location to the Yahoo Geo coder and click the Go button. A map of that location will be displayed.
The only thing left is to resize the containers. It turns out that the fisheye widget doesn't automatically resize to fit the container. To fix this edit the jmaki-standard.css file which contains the application page CSS code for the standard layout we selected. I modified the file as follows.
.content { margin: 0 0 0 100px; border: 1px solid #000000; } .leftSidebar { float: left; width: 50px; height: 150px; border: 1px solid #000000; } Make the above changes and save. Reload the page in your browser and you should see the left side bar now fits the fisheye widget. Notice that the app behaves correctly when you resize your page. Now it turns out that if you look at the fisheye widget you will see that I have added a url attribute to the second item in the widget. In that case, I want to bring up a table when that item is clicked. The glue code that I added for the fisheye widgets handles both cases because it simply broadcasts the url it has. This way you can load either page in the center area depending on what the user clicks.
To complete the application create another JSP page called "table" and add the code below. Here I added an editable Dojo table which allows you to sort the contents by clicking on the different columns.
<a:ajax name="dojo.table" value="{columns: { 'title' : 'Title', 'author':'Author', 'isbn': 'ISBN #', 'description':'Description'}, rows:[['JavaScript 101', 'Lu Sckrepter','4412', 'Some long description'], ['Ajax with Java', 'Jean Bean','4413', 'Some long description']]}" /> Save the "table.jsp" file and reload the application in your browser. This time click on the second item in the fisheye widget and see the table displayed.
The jMaki framework allows you to quickly create complete web 2.0 applications that are based on standards. We think that this is a very useful tool and are always happy to hear your feedback.
jMaki beta 2 outPosted by carlavmott on December 28, 2006 at 12:40 PM | Permalink | Comments (3)
jMaki beta 2 release is out and contains several key improvements and bug fixes over beta 1.
Specifically, the dynamic container which loads pages on demand has been improved overall and with additional fixes when running in IE. There is a new widget model where widgets have a constructor and are now placed in their own namespace to avoid collisions in the global JavaScript namespace. The JSF components are working the same as the JSP components. There are updates to the jMaki ibrowser and Yahoo maps and of course bug fixes.
Let us know what you think about this release. We are planning on pushing a final release early Feb so want to get your feedback soon.
jMaki is a framework that provides a lightweight model for building Ajax enabled web applications using standards-based technologies. jMaki allows you to use widgets from popular toolkits
jMaki beta candidate available
Posted by carlavmott on November 29, 2006 at 10:24 PM | Permalink | Comments (0)
The latest jMaki release is the beta release candidate for the next major jMaki release. It has several new features including
- The addition of containers (Yahoo tabbed view, Dojo tabbed view and jMaki dynamic)
- Templates to define styles
- jMaki glue used to tie widgets together using publish/subscribe mechanism
- Support to load all resources from the classpath for JSF view of jMaki
At the same time there is also a jMaki release available which supports PHP 5. See Greg's blog for examples on how to use jMaki in your PHP application.
This week we're in the process of updating the online documentation and fixing critical bugs. Download a release, try it out and let us know what you think. Beta release is schedule for next week.
No comments:
Post a Comment