Playing with Workshop and the Dojo Ajax Framework
By james.bayer on Mar 23, 2008
This was originally posted on my dev2dev blog March 23rd, 2008. After posting it, I discovered and it was also reported by others that IE had trouble with the code-as-is. I have not revisited this yet.
The State drop-down is the only one available, the City and the Submit button are disabled.
This is not a normal html select, it is a Dijit FilteringSelect that has enhanced capabilities, such as type-ahead, and the user selects a state.
Once a state is selected, the list of cities is populated and is now enabled.
Once a user selects a city, the submit button is now enabled. This has all happened without a screen refresh and provides a better user experience.
- BEA Workshop 10.2
- Firefox 2
- Firebug - Great Firefox plug-in for debugging client side issues
- Dojo 1.0.2
The Workshop 10.2 projects used for this example (minus Dojo) are available here. Import the projects, extract Dojo 1.0.2 to the WebContent folder of the DynamicSelectWEB project and deploy the DynamicSelectEAR project to a server to get it up and running. This includes a city / state web service in the CitiesStatesWEB project that returns the city and state information. The ServiceControl in the DyanmicSelectWEB project is assuming that web service is deployed to localhost and port 7001, so make sure to adjust that if your server settings are different.
I could have tried using IceFaces, an Ajax-enabled JSF framework, but I think it's important to get the fundamentals down before adding additional layers of complexity. So my first recommendation is to start simple with plain HTML and JSON files. Once you get the basics going, then add in the dynamic pieces (JSPs, etc).
Since Workshop has very nice Apache Beehive pageflow tooling, I just prototyped using that framework. Below is a look at my site-map. You can see how I started with a test.html file. Once I got that working, then I migrated the code over to the index.jsp and added in the dynamic elements. Each drop-down onChange calls a different pageflow action, that return dynamic JSON. You can see that in the getCities action, I'm passing the entire form. This way I can pull out the value of the selected state and only return the cities for that state.
Take note of this css code that the FilteringSelect requires to display properly. I had to use this approach instead of the @import example used on the Dojo site due to an issue in one of the Eclipse plug-ins that caused a hang consistently.
I decided to submit the form with a post when the state is selected since that is most likely how you would do more complex forms. Here's what that function looks like.
I found that Dojo does this with a multi-part submission by default, so an extra annotation is necessary on the Pageflow to allow multi-part.
I had some ambitious plans to create a Workshop facet to add Dojo support to Dynamic Web projects, however that's going to be for another time. Check out Konstantin's presentation if you have curiosity about how to do that.