Generating Application UI from Dynamic Data
Recently we've been asked by multiple customers how they can dynamically control the generation of forms and views based on some data that is determined at runtime.
For example, here are a couple of slightly different scenarios we've been asked about:
- How can I use runtime metadata to control all the rich behavior of form fields, including things like formatting, validation, visibility, UI type (drop-down vs text field vs radio buttons, etc.)?
- How can I create a single application model that generates many different variations based on data structures that are defined at runtime, for example in a database containing metadata describing the fields for the application?
Developers familiar with Web Experience Factory have seen that application UI is typically built at design time using a schema-driven approach. The schema is used to generate a set of page fields, and the Data Field Settings builder or Rich Data Definition builder can then control all the field behavior. For the scenarios above, in order to change the inputs that control this code generation at runtime, you need to use the profiling feature of Web Experience Factory. For portlets, you can tie profiling to portlet preferences which are configured at runtime in the Edit, Edit Shared Settings, and Configure modes. But what may not be obvious is how you can get profile data dynamically at runtime from some other data source, for example from a database or web service.
The answer is with a Profile Values Handler. When you edit a Profile Set, one of the tabbed screens is for "Select Handler." Here you can specify a "Value Setter" Java class that will be called to determine all the profile values for a profile set. Whenever a model is first executed in a session, the Factory engine will call your handler to get the profile values before the model is regenerated.
There's one more useful feature available when implementing this. The Profile Values Handler is a Java class, but suppose you'd like to use some of the Web Experience Factory connectors to retrieve your profile data. For this, you can actually call a Method or Action List in any model from your handler. To do this, use the ModelInstanceCreator object that's passed into your handler to obtain a WebAppAccess object for any model (but not the model that's profiled). Then you can call any method in the model. The method you call should return the profile data, typically String or IXml. It's that simple! In the model you're calling from your handler, you can use any data access builders such as the SQL builders or the REST or Web service builders.
With this mechanism in place, you can use profiling however you want in your models. For scenario #1 above, you would probably have a single profile entry containing a chunk of XML data, and you would use the data to drive an XML input of Rich Data Definition or Data Field Settings. Scenario #2 is more complex, since you have to profile the builder inputs that control the schema generation. In other scenarios you might profile a number of individual String values, using the profile entry name to locate values in your database for example.
We don't yet have a complete sample of these techniques posted on the wiki, but there is a sample showing a profile values handler that gets profile values from a properties file. See below for a link to this sample, which also shows how you can select a profile name from a properties file. This sample could be easily modified to retrieve profile values by calling an action in another model using ModelInstanceCreator.
Hopefully this gives a high-level picture of how you can leverage the flexibility and extensibility of the Web Experience Factory engine in order to implement some very dynamic code generation scenarios. From the very first release of the product, we've tried to make sure that the code generation framework is very extensible and flexible so that you can adapt it to all sorts of needs.
IBM Web Experience Factory 7.0.1 Now Available!
Well, in case you haven't heard, the 7.0.1 release of Web
Experience Factory is now available. Customers can download it from IBM
Passport Advantage, and we'll have a free trial version that should be
posted in the next week or so.
Key new features in Web Experience Factory 7.0.1 include:
- Mobile and multi-channel support, with new builders, wizards,
themes, and more (this is the big one!)
- New IBM Web Content Manager builder allows easy integration of
content and development of custom authoring interfaces
- Improved end-user experiences with new builders such as Data
Layout, Lazy Load, and Page Navigation
- Improved development experience with new editing features and
This page has some slides on all the new features: Announcing
IBM Web Experience Factory 7.0.1
We hope you'll try it out. As I said in my previous blog post, I
really think that the Factory code generation and profiling features are
uniquely suited to support mobile and multi-channel web application
In the coming weeks, we'll be posting a bunch of new resources on the wiki to help you learn to use the new Web Experience Factory.
We'll have a series of videos that demonstrate techniques, some new samples and articles,
an updated "Getting Started" guide, and more. So keep your eye on the wiki,
and I'll also be blogging here about some of the new resources as they become available. If you have
any particular resources you'd like to see, feel free to post a comment here.
My favorite new builder in 7.0.1
Builders are at the heart of the capabilities of Web Experience Factory, and for
each release I usually have a favorite builder. Of course there are always a
number of builders that I really like, so it can be kind of like asking
a Beatles fan to pick just one favorite Beatles song. But it's fun to do anyway.
For this 7.0.1 release, the big new feature is, of course, all the new mobile and multi-channel support, which comes in various
forms including builders, themes, wizards, and more. But in terms of one
particular builder, my favorite builder in 7.0.1 is the Data Layout builder. This
builder makes it really easy to create great-looking data displays for
both mobile and desktop devices. There are a few really cool things
about the Data Layout builder:
- It comes with a bunch of very nice out-of-the-box layouts,
for both mobile and desktop devices.
- It works on an existing display of data and morphs it into
the selected layout. This has a couple big benefits: (1) It can work with
pages that are generated from any existing builders such as View & Form,
Data Services User Interface, or Data Page; and (2) you can turn on/off different layouts without
affecting any other functionality such as navigation links.
- It is
easy to extend the builder with new layouts. To do this you don't have to
write any code at all - you simply create an HTML fragment using a few
documented tags and attributes that tell the builder how to use the
layout, then place the fragment file (called a layout template) into a
particular folder. Optionally you can provide one or more CSS files to
style your layout. Your new layout will automatically appear in the
list of available layouts, and it will work just like any of the
prebuilt layouts. And it's a reusable tool that you can use in any
Here is a short video showing the Data Layout builder:
video showing how to use the Data Layout builder. In the coming weeks we plan to post additional samples and articles on the
use of the Data Layout builder. The Data Layout builder is used in several of the 7.0.1 mobile samples. For more information about the
Data layout builder, see the 7.0.1 product documentation, which includes detailed information on creating new layout templates.
(Regarding my favorite builders for each release... In case you're wondering,
for Portlet Factory version 7.0, my favorite new builder
was Data Field Settings. The Data Field Settings builder makes it really easy to control all the
rich behavior of all your data fields in an automated, centralized way. Though as I
say, it was tough to pick just one favorite for that release, given some of the other really
powerful builders such as SQL Data Services, SQL Table
Create, and Data Service User Interface.)
- Jonathan Booth
Comments on Web Experience Factory, WebSphere Portlet Factory, and the new mobile features
I'm writing this blog shortly before the planned release of Web Experience Factory, which is the new name of WebSphere Portlet Factory. I've been architect of this product since back at Bowstreet in the years before we were acquired by IBM, and I thought I'd share a few thoughts about where we're at now with the product, especially as it relates to the area of mobile web application development.
When the whole smartphone and smart device market really exploded last year, we realized that the model-driven code generation and profiling technology of Portlet Factory was uniquely suited for mobile and multi-channel web application development. So for this release of Web Experience Factory the team worked hard to put together a set of key tools - builders, themes, profiling support, etc. - to support mobile web application development. Recently I've spent quite a bit of time demoing these features to customers, and I have to say that it's been really fun. People really respond well when they see two key capabilities: first, how quickly you can build great-looking mobile applications, drawing on all the existing rapid development features of Portlet Factory; and second, how you can use profiling to generate multiple renderings for different device types (smartphone, tablet, desktop, etc.) from a single model. I suspect that the multi-channel aspect is hitting home with developers because it helps address the scary prospect of supporting the myriad of new smart devices that are coming out.
I won't go into all the details of Web Experience Factory's mobile and multi-channel support here, but if you haven't checked it out yet, the following page on our wiki has links to slides, articles, and downloads to get you started: http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Smart_Phone_and_Mobile_Device_Development
So I'm very excited about the unique value that our technology offers at this particular point in time, and I'm hoping that it will expand the community of developers using the tool. If you've used Portlet Factory, hopefully you've experienced the benefits of things like model-based development, high-level automation using builders, and the ability of dynamic profiling to generate multiple application variations from a single source model. Now we're seeing that in the mobile web application arena, these technologies are even more compelling. For example, in the new product, check out the way you can:
- Apply a Data Layout builder and a Theme to a model to cause a conventional-looking desktop UI to "morph" into a nice looking mobile-optimized UI.
- Use profiling to turn on and off different layouts and themes based on client device, so that a single model renders differently for each device type.
Going forward after this release, we'll continue to expand the tools that we provide for mobile and multi-channel support. We'll be posting samples and code you can learn from and use. We'll post supplementary material such as articles and video demonstrations to help you learn and to show you best practices. We'll keep working with mobile technologies such as the PhoneGap hybrid framework and HTML5 offline features, to show how they can be used with Web Experience Factory. The mobile application development world is rapidly evolving, and we fully intend to continue to move quickly to keep pace.
About the new product name
Just a few words about the product renaming: All of the interest in mobile development has caused more and more customers to consider using Portlet Factory both for their WebSphere Portal-managed web sites (which can be delivered to mobile and desktop devices) and for mobile web applications that are running on WebSphere Application Server. Portlet Factory has always supported the development of stand-alone servlet-based applications, but many customers didn't realize that, in part because of the product name. So now we've taken the word "portlet" out of the name, to help make it clear that the product is good for all of your "web experience" development. You'll probably notice that completing the transition to the new name will take time; for example, when you run the new Web Experience Factory Designer you'll still see the "WebSphere Portlet Factory" name.
About this blog
And lastly, a few words about this blog: We'll be using this blog to post some fairly informal writings from individuals on the Web Experience Factory team. We'll continue to publish articles on the Portlet Factory wiki (hmm, need to get the name of that changed...), but this blog will let us also post writings with more of an informal and personal slant. And we'll try to stay away from product marketing-type content here.
Please feel free to make comments about this blog. If you have suggestions for future blog topics you'd like to see covered, we'd love to hear them.
New Web Experience Factory community and new blog location
From now on, that community is where I'll be posting all my new blog entries. For starters, I have copied my previous blogs over there.
I'm hoping all of you readers of my blog here will add the new community to your bookmarks and join as members!
Just posted - Web Experience Factory 8.0 Beta One
Last week at Lotusphere we announced Web Experience Factory 8.0 Beta One. The key new features in this Beta are in these areas:
- Support for the latest IBM WebSphere Portal Beta
- Support for a client-side mobile web UI architecture, for performance and scalability benefits (see more on this below)
- Automated support for Dojo Mobile, for an enhanced user experience on mobile devices
- Enhancements to the Web Experience Factory Designer IDE and developer tools, for improved productivity
- CMIS (Content Management Interoperability Services) builder, for integration with content management systems such as Filenet and Sharepoint 2010
You can go here for the announcement and a link to the download:
IBM Web Experience Factory 8.0 Beta One now available
About the support for client-side mobile web UI architecture in this Beta
- Reduced server processing.
- Improved caching on client, since HTML Client Template pages can be cached without data.
- Reduced size of downloaded data - only JSON data is downloaded instead of entire HTML page.
This client-side architecture also works well with Dojo Mobile rendering capabilities, and there is automated support for Dojo Mobile in this Beta release. You can see this in some of the samples that are posted on the wiki.
Here is a picture contrasting the server-side rendering mode and the client-side rendering mode.
There are a few caveats that do come with this client-side support:
- The set of builders available for client-side applications is much smaller than the set available for server-side. So if you want the complete set of Web Experience Factory features you will need to stick with the standard server-side mode, which is the default. In your service provider models, however, you can use the complete set of data access, service, and transformation builders. When you have a client-side consumer model (which uses Service Consumer builder), all the data service operations are automatically REST-enabled for use by the client-side code.
- Client-side mode is intended primarily for development of applications for mobile devices, and desktop-based applications are not tested or supported. The list of tested mobile devices is the same as for server-side mobile applications.
- You can't mix client-side mode and server-side mode in a single model. In fact the only way to create a client-side model is to start with one of the two client-side wizards. Then when you're working with a client-side model, the builder picker will only include the builders that support client-side mode.
If you have comments on the client-side features, or on any aspect of the Beta, you can post them as comments here, or you can post to the Web Experience Factory Best Practices developerWorks forum.
IBM Mobile Technology Preview with hybrid toolkit now available
One important component of IBM's mobile support strategy has recently been made available. This is the "IBM Mobile Technology Preview", which includes important mobile application components that you can download and use. This initial preview release includes features such as the Phonegap client runtime for developing hybrid applications, and notification technology for sending notifications to client devices.
You can find more information on the IBM Mobile Technology Preview here
, and some blog postings here
(including one from me on using Web Experience Factory with this technology).
The Web Experience Factory team is working closely with the IBM team that delivered this Mobile Technology Preview, and over the next months we expect to post more examples showing the use of these valuable mobile technologies with Web Experience Factory and with WebSphere Portal.
Using highly-customized UI designs with Web Experience Factory
In this blog I wanted to highlight some new documentation and slides that we've recently published, on customizing application UI and layout. I wanted to make sure that people are familiar with the features for using detailed custom HTML layouts within the automation framework of Web Experience Factory.
There two basic approaches to controlling page layout in Web Experience Factory:
- A data-driven automated approach, where all the data fields are initially generated from a schema and can then be customized using builders and the Design view.
- A custom HTML layout approach, where page layouts are created in an HTML authoring tool or editor.
Anyone who's used Factory is likely familiar with the data-driven approach to UI development: you point one of the high-level UI builders (such as View & Form) at some data, and the forms and views are generated for you based on the data schema. You can then change the layout using builders and the Design view drag-and-drop tools. This approach can give the quickest development, but it doesn't give you complete detailed control of the HTML layout and design.
For complete customization and control you can use the custom HTML layout approach. This can be the best approach in cases where you're given detailed UI designs that can't easily be implemented using the data-driven approach. With this approach you still get the benefit that builders generate all the "code" into the HTML pages. For example, all the rich behavior of data fields is generated by highly automated builders such as Data Field Settings, and you can use the same high-level UI builders such as View & Form, Data Services User Interface, and Data Page to create the application. However, with this approach you can completely customize the HTML using any HTML editor.
If you want to play with the custom layout approach, the easiest way is to open any UI model, then right-click on a page in the "Pages" or "Application Tree" view. Choose the command for "Export HTML for Data Layout." This will generate an HTML file with named elements corresponding to all the data fields on the page. Then you can edit the HTML using any HTML editor, and whenever the model is regenerated, the builders read the HTML file and add all the code elements for the data. Note that in this case you're customizing just the "data" area of a page; if you want to customize the complete page (including the locations of all the navigation buttons, etc.), you would use the "Complete Page" technique discussed in the linked articles.
The main page for the new wiki documents is here: Creating Your Application's UI
And there are some overview slides here: Approaches to UI Design and Layout
Free Trial Version of Web Experience Factory 7.0.1
We recently posted a free trial version of Web Experience Factory 7.0.1 that you can download. This download comes complete with everything you need to try things out, including the Eclipse IDE and the WAS CE (WebSphere Application Server Community Edition) test server.
My recommendation for the simplest way to get up and running is to use the default installation, so that everything's installed and configured automatically, with Eclipse and WAS CE. Later you can switch to running on the Portal server whenever you want. Here's what I'd suggest for getting everything going quickly:
- Run the installer with defaults, so that Eclipse and WAS CE are all installed and configured. You can pick any folder location for the installation.
- Create a new project using WAS CE server as your server, and include the options for Dojo Extension, Mobile, Building Models, and Tutorials. See below for a link to a video of this process.
- Open and run one of the sample models such as samples/gettingstarted/OrdersServiceConsumer, to make sure everything's working. Let the tool start WAS CE when it asks (there's no need to enable the debug mode checkbox).
- Download, import, and run the mobile sample models linked below, to explore the mobile and multi-channel features.
Key links for getting started with the free trial:
Have fun, and remember to use the Web Experience Factory wiki and forums if you need more information or help.
- Jonathan Booth
New introductory demo movies for getting started with learning Web Experience Factory
With the new release of Web Experience Factory, all of the new mobile and multi-channel support is generating interest in the Factory framework from quite a few teams that haven't used Portlet Factory before. To help these teams and others get started, we've been posting a series of introductory videos on our wiki. These are short videos that introduce the model-based development approach, show you how to get started with the tool, and demonstrate some of the key builders. These videos don't go into deep technical topics, but hopefully they can give newcomers to the framework a little jumpstart in getting familiar with the tool..
The videos are listed here: Web Experience Factory Video Gallery
We'll be adding more videos over time, so let us know if you have suggestions for particular topics you'd like to see covered in a video.