 |
|
 |
 |
||||||||||||||||||||||||||||||||||||||||||||
|
 Carla Mott's Blog
jMaki at Community One dayPosted by carlavmott on May 12, 2008 at 03:41 PM | Permalink | Comments (0)Last week at Community One day, the jMaki session included a couple of speakers from the community. It is great to see jMaki used in the real world. We had four speakers at our session and I'll admit it was a lot given we only had an hour. But I was excited to include both Jennifer Myers and Daniel Ziaoure since they are both using jMaki in their projects. The session was divided as follows. I gave a high level overview of jMaki and talked about the framework, widgets and pub/sub bus. It was pretty quick since I wanted to give others time but I was able to squeeze in a short demo. Jennifer who also works for Sun talked about project Miso and the interface that they built using jMaki. Project Miso, provides deep, fast and broad search and indexing services and will initially be integrated into the Communication Suite. Currently the project is focussed on email, calendar and Instant Messaging products from Sun. Jennifer used the Yahoo table to display the list of items found in the search and the dcontainer to display the image that was found. Jennifer mentioned that she had no prior Ajax experience prior to starting on the project and found jMaki a great tool for quickly developing the user interface. Daniel Z, an employee of TravleMuse Inc., covered the architecture of his project and showed how jMaki is used in their site. TravelMuse helps travelers save time and make better decisions at every step of the travel planning process by providing the Web’s most user-friendly travel planning experience. Daniel explained how the jMaki framework is used for developing widgets and for widget to widget communication. The application is JSF based. The site is live now with many enhancements coming in the next month at http://travelmuse.com. And Greg closed with some of the new features like the performance enhancements and the jMaki webtop that is now available in jMaki 1.8.
Adding jMaki wrapped Yahoo widgets to a GWT appPosted by carlavmott on May 12, 2008 at 11:11 AM | Permalink | Comments (0)To prepare for our JavaOne session, GWT and jMaki: Expanding the GWT Universe, I decided I should add a jMaki Yahoo widget to a GWT application. Here is what I did. I wanted to start with an existing application and I chose the Java PetStore demo application which Greg had rewritten using jMaki widgets and GWT. The code for that application is in the jmaki-store project along with a README.txt containing all the build and install instructions. First I checked out the jmaki-store workspace, built and deployed the application to make sure I had a working copy of the app. Follow the instructions in README.txt file to build and deploy but basically you need to go to the jmaki-store/code/gwt/webapp dir and type ant. There also is a target to deploy the application or you can copy the war file to the auto deploy directory. In my case I chose to deploy to GlassFish V3 and deployment was extremely fast. I decided to add the Calendar Yahoo widget to the application because I thought it would be pretty straight forward. The following are steps needed to add the widget to the application. First, I had to add an additional class (Calendar, java) in jmaki-store/code/gwt/widgets/sc/java/jmaki/client. Calendar.java contains the following:
package jmaki.client;
import jmaki.client.JMakiWidget;
/**
* Calendar Widget.
*/
public class Calendar extends JMakiWidget {
public Calendar(int width, int height) {
super(width,height);
}
public String getWidgetName(){
return "yahoo.calendar";
}
}
This class extends JMakiWidget which is a wrapper for the jMaki widgets. The Calendar widget has 2 methods, a constructor and the getWidgetName method which returns the name of the widget. Following the jMaki convention the name of the widget is the toolkit name dot widget name. Next I updated the Widgets.gwt.xml file to list all the dependencies for this widget. It turns out that the list is already in the widgets.json file as that information is needed by the jMaki plugins so I started there. I had to update the paths and reorder the list because here order matters. The Yahoo toolkit CSS files need to appear before jMaki CSS files then the Yahoo toolkit library dependencies and then the jmaki component.js file. jMaki framework will take care of this automatically but in GWT land the list needs to be specified in order. The Widgets.gwt.xml file looks like: <?xml version="1.0" encoding="UTF-8"?> <module> <inherits name="com.google.gwt.core.Core"/> <source path="client"/> <public path="public"/> <script src="resources/jmaki.js"/> <stylesheet src="resources/jmaki/ibrowser/component.css"/> <script src="resources/jmaki/ibrowser/component.js"/> <stylesheet src="resources/jmaki/resources/styles/themes/charcol/theme.css"/> <stylesheet src="resources/jmaki/accordionMenu/component.css"/> <script src="resources/jmaki/accordionMenu/component.js"/> <stylesheet src="resources/jmaki/cart/component.css"/> <script src="resources/jmaki/cart/component.js"/> <stylesheet src="resources/jmaki/feedreader/component.css"/> <script src="resources/jmaki/feedreader/component.js"/> <stylesheet src="resources/yahoo/resources/libs/yahoo/v2.5.1/calendar/assets/skins/sam/calendar.css"/> <stylesheet src="resources/yahoo/calendar/component.css"/> <script src="resources/yahoo/resources/libs/yahoo/v2.5.1/yahoo-dom-event/yahoo-dom-event.js"/> <script src="resources/yahoo/resources/libs/yahoo/v2.5.1/element/element-beta-min.js"/> <script src="resources/yahoo/resources/libs/yahoo/v2.5.1/container/container_core-min.js"/> <script src="resources/yahoo/resources/libs/yahoo/v2.5.1/menu/menu-min.js"/> <script src="resources/yahoo/resources/libs/yahoo/v2.5.1/button/button-min.js"/> <script src="resources/yahoo/resources/libs/yahoo/v2.5.1/datasource/datasource-beta-min.js"/> <script src="resources/yahoo/resources/libs/yahoo/v2.5.1/calendar/calendar-min.js"/> <stylesheet src="resources/yahoo/resources/libs/yahoo/v2.5.1/menu/assets/skins/sam/menu.css"/> <stylesheet src="resources/yahoo/resources/libs/yahoo/v2.5.1/button/assets/skins/sam/button.css"/> <script src="resources/yahoo/calendar/component.js"/> </module> So far I have listed the resources needed for the widget and now I need to copy those files into the web app. All the resources are in the jMaki bundle so I just need to get what is on the list and add it to my application. Here I cheated a little. I created a project using NetBeans and put a single widget (Yahoo calendar) in the page. Doing so copied in the appropriate resources and so I had the directory I needed to copy for my GWT app. The resources/yahoo/calendar/* directory under the new project was copied to the jmaki-store/code/shared/widgets/resource/yahoo directory in the jmaki-store project. The last thing I need to do is to add the new widget to the Main window of my app. Edit jmaki-store/code/gwt/webapp/src/java/jmaki/store/client/MainEntryPoint.java to look as follows:
package jmaki.store.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.Widget;
import jmaki.client.IBrowse;
import jmaki.client.AccordionMenu;
import jmaki.client.Cart;
import jmaki.client.Calendar;
public class MainEntryPoint implements EntryPoint {
/** Creates a new instance of MainEntryPoint */
public MainEntryPoint() {
}
/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
*/
public void onModuleLoad() {
DockPanel dp = new DockPanel();
AccordionMenu am = new AccordionMenu("menu.json", 200,400);
dp.add(am, DockPanel.WEST);
IBrowse ib = new IBrowse(400,400);
RootPanel.get().add(ib);
dp.add(ib, DockPanel.CENTER);
Cart cart = new Cart(250, 400);
dp.add(cart, DockPanel.EAST);
Calendar cal = new Calendar(150, 150);
dp.add(cal, DockPanel.EAST);
RootPanel.get().add(dp);
}
}
Now when you build and deploy the app again you will see the calendar widget in the page. Note that you do not need to change the build files. It really is pretty easy once you figure out the order that the JavaScript dependencies should be in. Using jMaki wrapped widgets means that 3rd party components can easily be added to GWT.
jMaki at JavaOnePosted by carlavmott on April 29, 2008 at 12:47 AM | Permalink | Comments (1)Community One day and JavaOne are just around the corner. Community One day is a free event so we hope you will come out and learn about jMaki, GlassFish and NetBeans. Come to Moscone Center on Monday May 5 for many interesting sessions. Greg and I will be speaking along with some folks from the community.
JavaOne runs Tuesday May 6 - May 9 also at Moscone Center. There's lots of ways to learn about jMaki this year. There are sessions and Hands on labs to help you learn more. Also look for jMaki in the general session on Tuesday.
Loading data into jMaki widgetsPosted by carlavmott on April 16, 2008 at 05:22 PM | Permalink | Comments (0)I've gotten a few questions about how to get datainto jMaki widgets. This blogs describes the different ways in jMaki to load data into widgets. Let's look at the JSP tag for including a jMaki accordionMenu widget in your web application. <a:widget name="jmaki.accordionMenu"
value="{menu : [
{label: 'Links',
menu: [
{ label : 'Sun.com',
href : 'http://www.sun.com'},
{ label : 'jMaki.com',
href : 'http://www.jmaki.com'}
]
},
{label: 'Actions',
menu: [
{ label : 'Select',
action :{topic: '/foo/select',
message: { targetId : 'bar'}}
},
{ label :'Set Content',
action :{topic: '/foo/setContent',
message: { value : 'test.jsp'}}
}
]}
]
}" />
jMaki uses the attributes value and service to pass data to the widgets wrappers. The value attribute is used when the data is located in the page itself and therefore static. We use this feature in the code snippet that is dropped into a page when using an IDE so we don't have to provide a server side component just to get the widget to render correctly. The code snipet allows users to start with a working example which can be easily modified to learn more about the widget and the data model for that widget. In the tag above the value attribute is set equal to the JSON representation of the data described in the data models for that widget. The data model pages describe the format for the different widgets in jMaki. All the code snipets provided for the IDE follow the data models for the supported platforms, Java, PHP and Ruby. The value attribute can also be passed a client side value expression. I described how to use the value expression in my last blog, How to load blog feeds into jMaki widgets. Basically, the data is loaded into a local JavaScript variable which is assigned to the value attribute using the "@" character. Often you will want to load data that is not statically located in the page and in jMaki this is done through the service attribute. The next example shows how to get data from a server side component in your application. The tag above now becomes: <a:widget name="jmaki.accordionMenu"
service="data.jsp" />
As a quick example I will put the data I want to load into the file data.jsp as follows: {menu : [
{label: 'Links',
menu: [
{ label : 'Sun.com',
href : 'http://www.sun.com'},
{ label : 'jMaki.com',
href : 'http://www.jmaki.com'}
]
},
{label: 'Actions',
menu: [
{ label : 'Select',
action :{topic: '/foo/select',
message: { targetId : 'bar'}}
},
{ label :'Set Content',
action :{topic: '/foo/setContent',
message: { value : 'test.jsp'}}
}
]}
]
}
What really is happening here is when data.jsp is processed non-JSP commands are echoed out as they appear in the file. As a result the data I need is returned in JSON format which is what the widget is expecting. This is just an easy way to see how to use the service attribute without having to write a server side component. In reality, you will have to collect the data, format in JSON and print it out. The jMaki 1.1 release contains Java helper classes to create JSON object literals. You can also take a look at Jennifer's blog. The main point is that getting data from a server side component is done using the service attribute. In PHP the same thing can be done as follows: <?php addWidget( array("name" => "jmaki.accordionMenu",
"service" => "data.php"
));
?>
The data is in a file called data.php (notice it looks just like data.jsp).
{menu : [
{label: 'Links',
menu: [
{ label : 'Sun.com',
href : 'http://www.sun.com'},
{ label : 'jMaki.com',
href : 'http://www.jmaki.com'}
]
},
{label: 'Actions',
menu: [
{ label : 'Select',
action :{topic: '/foo/select',
message: { targetId : 'bar'}}
},
{ label :'Set Content',
action :{topic: '/foo/setContent',
message: { value : 'test.php'}}
}
]}
]
}
The jMaki runtime passes the attributes from the tag to the widget constructors. In the case of the service attribute, the widgets make a jmaki.doAjax call to retrieve the data when the widget is initialized. To update the data once the widget has been initialized, you can write a handler which makes additional jmaki.doAjax calls and sends that data to the widget. See my blog on How to implement data pagination in jMaki tables for an example. jMaki also provides an XMLHttpProxy so you can safely and easily access RESTful Web Services outside the application domain. To access a service through the proxy you use the service attribute too. In this case the tag looks like:
<a:widget name="jmaki.accordionMenu"
service="/xhp?id=rss" />
By design you will need to use a token key to identify the service to access. The token key is specified in a file called xhp.json in the resources directory. An entry in the xhp.json file looks like: {"id": "rss",
"url":"http://weblogs.java.net/blog/ludo/index.rdf",
"xslStyleSheet": "rss.xsl"
}
The id is "rss" and this entry specifies the name of the style sheet to apply to the returned data by the proxy. In this example, the data is coming back as XML so we want to convert it to JSON. The current style sheet recognizes RSS 1, RSS2, ATOM 1 and ATOM 2 and converts the XML data to JSON. The style sheet is called rss.xsl and is called by the proxy server before the data is handed to the widget.
See Arun's blog jMaki - Accessing External Services for more details on how to access external services using jMaki.
Using jMaki in your web apps? Get a t-shirt.Posted by carlavmott on March 22, 2008 at 12:19 AM | Permalink | Comments (0)I've noticed a few web sites are using jMaki in their web apps and thought that there are probably a lot more. If you are using jMaki I'd love to here about what you are using and alittle about your application. Let me know if I can post a link to your site on the jMaki site.
Don't forget to send me ( carla dot mott @ sun dot com) your address so I can send the t-shirt. Thanks for using jMaki!
jMaki 1.1 developer release availablePosted by carlavmott on March 22, 2008 at 12:00 AM | Permalink | Comments (2)There's a lot of new functionality in the developer release of jMaki 1.1. Performance enhancements, new widgets, upgrades to Yahoo 2.5 and Dojo 1.0.2, documentation and the new jMaki webtop are just some of what you will find. The team has been busy creating new widgets such as a flow widget, bread crumbs, tag cloud and carousel are new. Thanks to the awesome work by SitePen, all jMaki native widgets have 2 new themes. Default theme is kame and also available is ocean. Finally, we have updated the jmaki-charting widget lib to support Google and Yahoo charts as well. jMaki core has some performance upgrades where CSS is injected in the page along with JavaScript code and caching can be turned on. We see a 20-30% improvement. Also there are security improvements because we use the latest json.org secure json parser and only publish events and data to jMaki managed containers. Yahoo 2.5 and Dojo 1.0.2 toolkits have been integrated and we support both Dojo .4.3 and 1.0.2 widgets in the same page. We also have brought back and improved the widget gallery. We want to add more and more documentation in this release. Currently we have updated the Getting Started Guide for JSP and are working on the JSF version. The PHP version will follow soon. There are some new blogs on loading blog feeds like feedburner into a widget and supporting GWT with jMaki. Also see Arun's blog, jMaki on Rails. Finally much of the website has been translated to Japanese. Of course, we will be writing more documentation before this release goes final.
Finally, we are working on a new widget called jMaki webtop. The code is not yet available but will be soon. For now we have deployed it on jmaki.com so you can play around with jmaki webtop. You will notice that the widgets in webtop are the same widgets that are available to build jMaki applications. You will also notice that events can be sent and received in webtop just like jMaki web applications. Play around with the webtop and let us know what you think.
Glassfish and jMaki at EclipseConPosted by carlavmott on March 21, 2008 at 09:21 AM | Permalink | Comments (0)Today Ludo and I spoke at EclipseCon on Glassfish and jMaki. Our talk was well attended and well received. Here is an overview of the talk and some comments. Ludo started the talk with a discussion about Glassfish V2 and V3. He mentioned that Glassfish v2 is enterprise-centric providing clustering, load-balancing and HA support. He also talked about the world record performance numbers we're seeing, specifically the JSP container and Grizzly siting the performance and scaling improvements there. He said "You no longer need to chose between Open Source and Performance". He also mentioned that GlassFish v3 is coming and is focused on having a small footprint, being modular and fast startup. He followed with a demo of the Glassfish Eclipse plugin using the V3 preview release that is avaliable today. The GlassFish community is active and growing with 5.5 million downloads, dozens of external contributors and over 7000 members. Then I got to talk about jMaki and demo the latest release, jMaki 1.1 developer preview. I talked about what jMaki is and why folks would want to use it. The main points were client server framework, client side runtime to bootstrap widgets and provide publish and subscribe communication bus, the server runtime to inject necessary JavaScript code into web pages and XmlHttpProxy to access external RESTful web services. I got to demo the latest jMaki release using the Eclipse plugin. I then showed jMaki webtop, one of the latest features we are working on. See http://jmaki.com/webtop and I ended the talk with a demo of jMaki running on GlassFish with Comet enabled. This is a demo that ships with the jMaki standalone bundle. I like this demot because the audience can participate and each person's activity is broadcast to all who are connected. Attendees wanted to know when GlassFish v3 will be available and they liked the demos especially the comet demo which I was told was pretty impressive.
I hope we impressed upon others that Sun is committed to providing plugins to Eclipse.
How to load blog feeds into jMaki widgetsPosted by carlavmott on March 07, 2008 at 12:12 AM | Permalink | Comments (0)Recently I wanted to load data from a blog feed into a jMaki widget. Here I describe how to do just that. The feed I want to read is coming from The Aquarium. I want to view the the title and the first 60 characters of each blog entry using the jMaki blockList widget since it automatically handles paging. The Aquarium uses Feedburner to publish blog entries so I looked for a Feedburner API to read the feed. It also needs to support https to avoid security notifications since the page will be on a java.net project. I found an API that returns the data in JSON format which allows me to provide a callback function to handle the data. This is exactly what I needed since jMaki widgets expect data in JSON format. To get the data I added the following call to my page.
<script>
function processTAFeed(_in) {
window.taItems= _in;
}
</script>
<script type="text/javascript"
src="https://api.feedburner.com/format/1.0/JSONP?uri=TheAquarium_en&callback=processTAFeed">
</script>
The data is now available in the variable taItems in the window object. Next I want to get the data in the widget. First I add the tag to the page that specifies the widget and then I use the value binding option to pass the data. Using the @ notation tells the jMaki client runtime that following is a variable that needs to be resolved so the contents of window.taItem is placed in the value attribute. The tag looks like:
<a:widget name="jmaki.blockList"
args="{filter : 'jmaki.widgets.jmaki.blockList.TAFilter'}"
value="@{window.taItems}" />
Notice that I specified the filter jmaki.widgets.jmaki.blockList.TAFilter. Filters are called by the jMaki client runtime and allow me to manipulate the data before it is passed to the widget. Before looking at the filter, let's look at the template file for this widget. The blockList widget displays data in a repeating format as specified by the template in component.htm. I updated that template to include the data I want to display and wrote a filter to load the values in the template. Specifically I will replace link, title and shortContent.
<div id="${uuid}" class="jmk-blocklist jmakiBackround">
<div id="${uuid}_content" class="jmk-blocklist-content">
<ul id="${uuid}_list">
</ul>
</div>
<div id="${uuid}_nav" class="jmk-blocklist-nav">
<div id="${uuid}_previous" class="previous">Previous</div>
<div id="${uuid}_mid" class="mid"></div>
<div id="${uuid}_next" class="next">Next</div>
</div>
<div id="${uuid}_template" style="display:none">
<div class="jmk-blocklist-item">
<a href="@{link}">@{title}</a>
@{shortContent}<br/>
</div>
</div>
</div>
Now let's look at the filter code as the final step.
jmaki.widgets.jmaki.blockList.TAFilter = function(_in) {
var maxLength = 60;
var _rows = [];
for (var _i=0; _i < _in.feed.items.length;_i++) {
var _des = _in.feed.items[_i].body;
var rex = new RegExp("\\\\n", "g");
_des = _des.replace(rex," ");
rex = new RegExp("\\\\\"","g");
_des = _des.replace(rex,"\"");
var rex2 = new RegExp("<p>.*?</p>");
var content = _des.match(rex2)[0];
if (content.length > maxLength) {
content = content.substring(0, maxLength) + "... ";
}
var row = {
title : _in.feed.items[_i].title,
link : _in.feed.items[_i].link,
date : _in.feed.items[_i].date,
body : _des,
shortContent : content
};
_rows.push(row);
}
return _rows;
}
The data returned from the feed has several properties such as link, date, title, body. The link and title properties are used without modification. The body property contains the entire blog but recall that I only want to display the first 60 characters. With Greg's help we figured out how to normalize the data and pickup the first paragraph using regular expressions. The blockList takes each row array and creates an entry in a list. The filter needs a bit more work because there is the case where a link tag can appear in the first 60 characters and the closing tag is after the first 60 characters.
Support for the value binding attribute has been available in jMaki since the 1.0 release. As a result of this exercise, we'll create a feedReader widget.
|
 |
May 2008
Search this blog:CategoriesCommunityCommunity: Java Enterprise J2EE JavaOne Web Applications Archives
May 2008 Recent EntriesAdding jMaki wrapped Yahoo widgets to a GWT app | ||||||||||||||||||||||||||||||||||||||||||
Carla Mott is a contributor on Project jMaki, editor on The Aquarium webblog, a Java Enterprise Community leader on java.net and a committer on Dojo, an open-source JavaScript toolkit. Previously, she was a project owner for Project GlassFish where she helped to open source Sun's application server and to build the GlassFish community. She has been at Sun for 12 years, worked on the application server technologies since 1999 and has had the opportunity to speak at JavaOne for the last 4 years.
 java.net RSS Feeds
|
