Justin McGarvie
by Justin McGarvie, Junior Web Experience Factory Developer
With smart devices emerging as the go-to source for information, mobilizing your web application has become a new obsession. As the need for mobilized web apps grows, so too does the importance of taking advantage of the expanding market. Recognizing this, discussion at conferences such as the Lotusphere and the Exceptional Web Experience has turned to the all-important question—how can IBM based products be used to tap into this growing market?
Being leading experts at Web Experience Factory (WEF), Davalen has already begun work on mobilizing web/portal applications using built-in templates and profiles in WEF. Davalen created a new assignment to publish a portal to a mobile device. No bells and whistles, just a basic portal to show that it could be done quickly with current data. To demonstrate additional business value, Davalen chose me to implement mobility—a newly hired junior developer and recent college graduate. Although I came to Davalen with a good technology background, my only experience with WEF was a week-long self-paced study of portal administration and how to develop web and portal applications using WEF, with Davalen’s WEF course (WPC52) as my study guide. However, combining my knowledge from the course and my own research focused on WEF for mobility, I was able to successfully create an outward facing portal in its basic form.
So, how did I do it?
Luckily, I kept notes on my process in order to share with others. At this point, the solution is not very glamorous but does show how to use WEF to add mobility to a web or portal application. The next stage of the project is to add a mobile-based landing page utilizing style sheets for the organization of data, navigation, and overall look and feel. There are three builders that are essential to creating a mobile portlet using the WEF’s 7.0.1’s mobile themes and templates.
- The View and Form builder (Figure 1) allows data to be organized into tables similar to the Data Page/Page builders, however, it is not as flexible as the Data Page is.
- Figure 1: View and Form Builder.
2. The next builder that is essential is the Data Layout Builder (Figure 2) which allows the choice between several different layout templates. This allows you to map the data from the View and Form page that was created to the certain layout that is chosen. You can also choose different styles from the Styles column.
- Figure 2: Data Layout Builder.
3. The third builder would be the Theme builder to implement one of the Mobile Themes that are included in the WEF or to use a theme that was created.
It is possible to create a Layout Template for the Data Layout Builder by placing it in the data_layout_templates folder. It is possible to view and copy and modify the provided templates (Figure 3).
- Figure 3: The Multi-Line List template.
It is possible to use other builders with these to modify look and feel of the portlets such as using the Text Builder to place a Header text for each page. The final Look and feel of the Customer List and Detail portlets with the use of a modified Multi-Line List layout to add the column headers to the table is shown in Figure 4.
- Figure 4: Completed Customer List and Details Portlets.
As the need for mobilized web apps grows, so too does the importance of taking advantage of the expanding market.Combining my knowledge from the Davalen course and my own research focused on WEF for mobility, I was able to successfully create an outward facing portal. At the conclusion of this stage of the project, I have proof that an IBM based product, IBM Web Experience Factory, can easily be utilized to tap into the growing mobile market, even by those who are new to the toolset.
———————————————————————————————————————————————————————————————-
This article is from our monthly resource e-Newsletter. Did you miss it in your inbox? Visit our eNewsletter archives for past editions or if you want to receive our monthly newsletter automatically, simply write to Ruth Jarvis and request to be added to our E-Newsletter list. Thank you!
