 |
|
 |
 |
||||||||||||||||||||||||||||||||||||||||||||
|
 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.
|
 |
June 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
|
