Here's a quick presentation and demo (video) of what's new with the Multi-Channel Feature Pack 2 for Web Experience Factory 8.0
IBM Web Experience Factory Blog
AdamG 110000672C Tags:  websphere-portal portlet digital experience web factory mobile wef mobile-development mobilefirst web-experience-factory 4,982 Views
Sri. 270001WW4Y Tags:  web web-experience-factory wef app jqm mobile jquery 1 Comment 9,128 Views
Finally, I am here. With my first blog post for developerWorks!
I have built a sample Model that uses jQuery Mobile (called JQM hereafter) and builds the UI for mobile app. This sample Consumer Model uses the sample Provider Model (Tutorial_DB_Provider_WASCE.model) that is supplied with WEF. You get this sample Provider Model when you add “Tutorials and Samples” Feature Set to your project (I’ve included the same model here in the attached sample too).
The Consumer Model uses only two Service Operations from the Provider Model. When you run the Consumer Model, you will see the list of employees in a List View of JQM. Once you tap / click on an employee name, details of this employee will be shown.
Create a new project in WEF and extract the JQM library to the WebContent folder.
You can check out the HTML in employeeList Imported Page to see how a basic JQM page is created using HTML. A named tag (empList) has been added to the page to place the Data Page builder. After adding the Data Page builder, I have exported the HTML for Data Layout and modified the HTML to change the auto-generated table into JQM Listview. This can be seen in pages/employeeList MyDBRowSet.html. Here is a screenshot from my desktop browser (Chrome). When accessed from a mobile device browser, it will have the same look and feel. The filter provided on top is an out-of-the-box feature of JQM which is added by using just an attribute. You can filter the list by any of the fields / values shown in the UI.
Then I have added a Link builder which will call an Action List (showEmpDetails) which takes the employee number as input. This Action List passes the employee number to retrieveMyDB Service Operation, gets the employee details and shows the employeeDetails page. Again, this page has been customized using HTML Data Layout to use the responsive table provided by JQM. This responsive design too is OOTB and it can be customized to fit your needs. This feature is really cool and one of my favorites in JQM!
The above screenshot is taken with the browser window size set to simulate a mobile phone size. Now if you view the same UI in a tablet (Android or iPad or any other), you will get a layout like this:
This will really be helpful if you have a lot of records to be displayed in the UI; mobile phones will have a stacked view where all the records will be shown one below the other in two column layout with labels as the first column. And you can leverage the screen size in tablets and mobile phones with larger display by displaying data in the traditional tabular format where the labels are shown in one header row and the data below.
You would see a nice transition when the employee details page is shown after clicking on an employee name and again when you click on the Back button in the details page. This too is given by JQM with the addition of an attribute (data-transition=”slide”) to the anchor tag.
That’s pretty much the sample does. I have attached the WEF export below.
To run the sample:
1. Create a project (no Feature Set is required) and deploy it in WAS CE
2. Import the attached ZIP file to your project
3. Open the Tutorial_DB_Provider_WASCE model and click on Create Table button. (If you get a message that the table already exists, no problem. You can go ahead to the next step)
4. Run jqmConsumer.model
As you might already be aware, Web Experience Factory is a great tool to build highly-customized, rich web applications. With the simplicity and power of jQuery Mobile in WEF, we can build great mobile web apps with good UI & UX.
Hope this helps! Please feel free to ask any questions!
Interesting survey results from Forrester: "Many organizations tell us that they’ve shifted their mobile strategy away from creating specific apps built for iOS and Android devices, unless and until they have a compelling reason to create a custom app experience."
See the article here.
This really highlights some of the power of what IBM are offering with http://ibm.com/webexperience with super strong mobile web and hybrid (IBM Worklight) technology. These are the exact scenarios we've been developing with IBM Web Experience Factory capability, demos and samples in this community.
Streebo Inc 2700054RP4 Tags:  enterprise factory mobile applications strategy streebo experience faq ibm mobility web 6,295 Views
AdamG 110000672C Tags:  websphere-portlet-factory websphere websphere-portal portal worklight mobile portlet 1 Comment 5,709 Views
Summary: IBM® Web Experience Factory is a powerful model-based tool for rapidly developing custom portlets and web applications that are optimized for mobile and desktop devices. IBM Worklight® is a complete mobile enterprise application platform for delivering native, hybrid, and web applications. This article shows how you can use the two together to easily build a highly functional application that can be installed on a mobile device, providing transactional functionality along with access to device features, such as the camera. The resulting example application could be part of a complete multi-channel web site that is built and managed using IBM WebSphere® Portal.
AdamG 110000672C Tags:  web-experience-factory mobile websphere-portal wef multichannel portlet portal worklight 4,618 Views
In todays world, users expect to be able to access their information and applications anywhere, anytime on any device.
There's been a lot of buzz around recently about having a single site / web experience that can drive a OPTIMIZED multi-channel web experience for folk accessing the site and applications using desktop browsers, smartphones and tablets.
When you look at a site it's usually made up of a mish-mash of various content and application sources, including web content management, social software and applications. It's often the applications that are often the critical component that deliver some key value like doing your banking, checking the order status or interacting with some important business process.
Before the mobile revolution, these applications have had the luxury of the desktop browser, with all it's plugins, screen real-estate and desktop capabilities you can develop some easy to use very functional applications. Now with the need to access those same applications in the new disconnected world we live in, you're dealing with limited screen real-estate, many different form factors, fat fingers, mobile operating systems like iPhone, Android, Blackberry and Windows Phone etc and many other new capabilities and restrictions.
Using WebSphere Portal as the backbone for the multichannel web experience, with IBM Web Experience Factory to develop these multichannel applications, it makes it possible to have a single application the uses dynamic profiling to adapt itself to the specific device being used. The application can optimize itself to suite the form factor, operating system of the user. Developing this as single application that knows how to deal with the form factor creates a potential for massive time and cost savings.
A lot of the time, the native mobile/tablet browser will provide you all the capability you need and you have one application that knows how to deal with desktop browsers, mobile and tablet. However in certain situations you need to be able to go beyond the mobile browser's capability to access smartphone and tablet device specific capabilities like the camera, address book, accelerometer etc... Now many organisations have seen this gap and looked to start from scratch and develop completely separate native phone applications.Starting from scratch often means using device specific development environments, APIs which often require new skills, or even new people, not to mention the initial outlay to redevelop existing applications and the massive ongoing cost of maintaining them.
So, a separate native app is one approach, another is to leverage your single multi-channel site and applications you developed with WebSphere Portal and Web Experience Factory and combine it with IBM Worklight to provide the option to deliver your web-applications as a native-like app. I say "native-like" as it is actually a hybrid app, that takes your web-app... you supply special markup (dynamically profiled of course) which allows you to create application that look like and work like native phone/tablet applications.... all from a single core application source. Wow!!!
Check out some of these videos:
Multi Channel Web Experiences Part 1 of 2 - a quick 90 second into on challenges and benefits
Multi Channel Web Experiences Part 2 of 2 - a 7 min demo on actually using Web Experience Factory to create a hybrid IBM Worklight application.
AdamG 110000672C Tags:  web-experience-factory websphere-portlet-factory mobile awards web portal 3,686 Views
I know a lot of you have done some extremely cool stuff with IBM Web Experience Factory creating some incredible mobile applications and sites. Don't be shy please submit what you've done, we'd love to see you recognized for your hard work and incredible ingenuity.
Submit your entry here: http://www.mobile-webaward.org/mwa/
Interesting blog article by Davalen on using Web Experience Factory to add mobility to Web Applications
Nice article by Justin McGarvie of Davalen covering how to use Web Experience Factory to make web application mobile/multichannel. Really cool seeing partners weigh in with examples of how to use the technology.
I think it would be great to get partners to weigh in on this blog... so please take advantage of the group blog and get your entry in :-)
Always stoked to see tweets like this:
"Heading to Austin tomorrow to host a workshop on Web Experience Factory for mobile web sites. WEF makes it so easy."
Follow Darren here https://twitter.com/#!/kcibmer
Also check the blog posting below by Darren, which could be help flu when creating multi-lingual portlets using IBM Web Experience Factory
Enter your site here in the mobile web awards
AdamG 110000672C Tags:  wef sphere web-experience-factory wpf mobile portlet web development mobile-development portal 4,320 Views
In the spirit of a community that helps itself, one of the things we were thinking of doing in this community is providing a place for IBM Web Experience Factory developers to access sample code, share code etc.
For example, perhaps you have done some cool stuff that works with IBM Web Experience Factory that you'd like to share or perhaps you've created a new builder you think others would be keen to use.
What are your thoughts about this?
Please comment below
(Original posting date: October 27, 2011)
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.
(Original posting date: July 26, 2011)
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:
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
(Original posting date: July 18, 2011)
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.
(Original posting date: June 30, 2011)
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:
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 development.
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:
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