What's new in IBM Rational Application Developer 8.

5 portal tools
Jaspreet Singh (jaspsing@in.ibm.com) Software Architect IBM Mansi Gaba (mansigaba@in.ibm.com) Staff Software Engineer IBM This article provides detail on all the features that have been introduced or enhanced in Version 8.5 of the IBM Rational Application Developer portal and portlet development tools, including additions for mobile devices. The authors explain use of some of these tools and include code snippets and illustrated examples. Familiarity with Rational Application Developer will be helpful in following the article. 06 November 2012

Introduction
The IBM Rational Application Developer integrated development environment (IDE) for software developers includes tools that help in designing, developing, testing, and deploying portal applications. The workbench provides tools to design and develop portal applications that can integrate with Java Enterprise Edition (JEE) frameworks, including JavaServer Faces (JSF) technologies to access data. Plus, it provides tools and features to integrate seamlessly with clientside JavaScript libraries, such as the Dojo widgets, to visualize data. You can also use it to test your application and publish it to a WebSphere Portal server.

Highlights of the new and enhanced features

The Rational Application Developer portal development tools in Version 8.5 have been enhanced to take advantage of IBM WebSphere Portal Version 8.0 capabilities. You also get revamped support for developing portlets that will be access from mobile devices, including smartphones and tablets.

WebSphere Portal 8.0 runtime support to create and test portlet projects
Rational Application Developer 8.5 has a new server runtime environment (shown in Figure 1), server type (Figure 2), and stubs for WebSphere Portal 8.0 support.
Copyright IBM Corporation 2012 What's new in IBM Rational Application Developer 8.5 portal tools Trademarks Page 1 of 12

developerWorks

ibm.com/developerWorks/

Figure 1. New Server Runtime Environment wizard

You can create portlets targeted to WebSphere Portal Version 8.0 runtime and then publish or deploy to it, as well. This allows creation of portlets that leverage new features in the WebSphere Portal Version 8.0.

What's new in IBM Rational Application Developer 8.5 portal tools

Page 2 of 12

ibm.com/developerWorks/

developerWorks

Figure 2. New Server wizard

JavaServer Faces 2.0 portlets support

Rational Application Developer 8.5 provides tools for creating a JavaServer Faces (JSF) 2.0 portlet application by using the New Portlet Project wizard shown in Figure 3. The portlet project created generates a default Facelet and the entire configuration required for deploying a JSF 2.0 portlet on WebSphere Portal 8.0. The default JavaServer Faces facet version is 2.0 for the Faces portlet project, with target runtime as WebSphere Portal 8.0, as shown in Figure 4 You can drag the standard JSF components and portlet palette items onto the Facelet page to generate Java code automatically, following coding best practices. All new JSF 2.0 features can be used seamlessly in portlet applications created in Rational Application Developer. Note: The JSF 2.0 portlet bridge acts as a broker between a portlet container and a JSF container to render a portlet on a portal page. You can use it to create portlets based on JSF 2.0 specifications and publish them on IBM WebSphere Portal 8.0. The JSF 2.0 portlet bridge is included in WebSphere Application Server Version 8.0.0.3 and later versions.

What's new in IBM Rational Application Developer 8.5 portal tools

Page 3 of 12

developerWorks

ibm.com/developerWorks/

Figure 3. New Portlet Project dialog window

The Manage Features wizard lists the project facets, including all facet names and versions. This makes using all new features of JSF 2.0 on WebSphere Portal very convenient

What's new in IBM Rational Application Developer 8.5 portal tools

Page 4 of 12

ibm.com/developerWorks/

developerWorks

Figure 4. Project Facets page

Rich page Editor for portlet development with CSS3 and HTML5
The browser-based editor introduced in Version 8.5 helps you preview the Facelet or JavaServer Page (JSP), as they would appear in a web browser. The rich page editor provides WYSIWYG (preview) designing capabilities and supports HTML5 and CSS3 editing. It also offers instant preview and Content Assist help. You can create and edit JSP portlet files using the rich page editor. It shows different representations of your portlet page, with Source, Split, and Design view options. The editor uses embedded browsers to produce a visual representation of a page in the design view. For example, you drag any palette item onto a Border Container, as shown in Figure 5, and use the Split view to see both the Design (preview) and Source (code) views.

What's new in IBM Rational Application Developer 8.5 portal tools

Page 5 of 12

developerWorks

ibm.com/developerWorks/

Figure 5. Rich page editor

Single-click enablement of Web 2.0 features

The New Portlet Project wizard has been redesigned (see Figure 6) to provide single-click enablement for various Web 2.0 features that you can use in portlets. This is both intuitive and easier than having to enable these through project facets.

Figure 6. Web 2.0 features in the New Portlet Project creation wizard

Mobile browser simulator

Rational Application Developer provides a fast and easy way to test multichannel portlet applications by using a mobile browser simulator. You can test the output view of the portlet on this simulator without having to install any separate device simulator. You can view the output on various mobile devices in a mobile browser simulator, and you can do all of this by staying within the integrated development environment (IDE). To run a portlet project on a mobile browser simulator, right-click on the portlet project, select Run As, and then select Run on Mobile Browser Simulator (see Figure 7). The mobile browser
What's new in IBM Rational Application Developer 8.5 portal tools Page 6 of 12

ibm.com/developerWorks/

developerWorks

simulator offers other features, such as switching orientation of the device, adding multiple devices simultaneously, mapping devices to their actual physical sizes. It is a very convenient and effective new feature to aid you in mobile portlet application testing.

Figure 7. How to access a mobile browser simulator

Improved smartphone and tablet portlet support

The improved smartphone and tablet support enables you to work on separate views for smartphones and tablets, rather than using a single portlet view page for both of those devices, as in earlier versions. You can also choose support for either or both tablets and smartphones for your portlets, or both. When you select either of those options while creating a portlet project, Rational Application Developer now automatically provides support for selecting the devices as well, as show n in Figure 8. This opens further new options while developing portlets for these devices.

What's new in IBM Rational Application Developer 8.5 portal tools

Page 7 of 12

developerWorks

ibm.com/developerWorks/

Figure 8. Improved smartphone and tablet support

The different portlet view JSPs created for devices as shown in the project structure of a deviceenabled portlet project (see Figure 9).

Figure 9. Different device-enabled portlet project views generated

Dojo Mobile widgets support

You can create interactive, multichannel portal applications with exceptional GUIs for mobile devices by using Dojo Mobile, which is an HTML5 mobile JavaScript framework. It is an optimized set of widgets well-suited for smartphone requirements, such as smaller footprint and a native look and feel for mobile devices. You can drag the Dojo mobile widget from the palette (as shown in Figure 10) onto the portlet JSP and deploy it on WebSphere Portal Server.

What's new in IBM Rational Application Developer 8.5 portal tools

Page 8 of 12

ibm.com/developerWorks/

developerWorks

Figure 10. Dojo Mobile widgets

Dojo markup and other boilerplate content is automatically generated when any Dojo mobile widget is dragged onto a portlet JSP file. Listing 1 shows an example of code generated for Dojo mobile widgets.

Listing 1. Code generated for Dojo mobile widgets

<div id="widgetContainer_<portlet:namespace/>"> <div data-dojo-type="dojox.mobile.View" id="view_<portlet:namespace/>"> <h1 data-dojo-type="dojox.mobile.Heading"data-dojo-props="label:'Heading'" id="heading_<portlet:namespace/>"> <h2 data-dojo-type="dojox.mobile.EdgeToEdgeCategory" id="edgeToEdgeCategory_<portlet:namespace/>"> <div data-dojo-type="dojox.mobile.EdgeToEdgeList" id="edgeToEdgeList_<portlet:namespace/>"> <div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item1''"></div> <div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item2''"></div> </div> </div> </div>

Support for device classes

The multichannel smartphone and tablet support is now enhanced and standardized to include device classes. Earlier versions relied on the user agent string to detect the device from which the incoming request originated. This meant that no new device support could be added at run time, and it was also a non-uniform way of detecting devices. Now, the WebSphere Portal runtime provides a standard API called Client profile information (CC/ PP) for accessing client profiles. These APIs are exposed to the portlet developers as device
What's new in IBM Rational Application Developer 8.5 portal tools Page 9 of 12

developerWorks

ibm.com/developerWorks/

classes, such as smartphone or desktop. These are referred in the portlet class to render the specific page based on the device class, as shown in Figure 11.

Figure 11. Screen capture of code generated automatically for a device class

Summary
Version 8.5 advances Rational Application Developer in both multichannel development capabilities and the tools it provides for developers to create exceptional web experiences for end users. Both the tools and the ease of using them make it a very intuitive and productive to create the next generation of portal applications that give businesses an extra edge.

What's new in IBM Rational Application Developer 8.5 portal tools

Page 10 of 12

ibm.com/developerWorks/

developerWorks

Resources
Learn Browse the Rational Application Developer for WebSphere Software page on developerWorks for links to technical articles and many related resources. Also check these resources related to this article: Read What's new in Rational Application Developer 8.5, and see the Rational Application Developer Version 8.5 information center for documentation. Check the Portal tools overview and the portal tool videos about creating a JSF 2.0 portlet project, mobile device support, plus a viewlet that demonstrates WebSphere Portal 8.0 runtime support for creating and publishing portlet. Explore the Optional software available that can support and enhance your work. Subscribe to the developerWorks weekly email newsletter, and choose the topics to follow. Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics. Attend a free developerWorks Live! briefing to get up-to-speed quickly on IBM products and tools, as well as IT industry trends. Watch developerWorks on-demand demos, ranging from product installation and setup demos for beginners to advanced functionality for experienced developers. Improve your skills. Check the Rational training and certification catalog, which includes many types of courses on a wide range of topics. You can take some of them anywhere, any time, and many of the Getting Started ones are free. Get products and technologies Try Rational Application Developer for WebSphere Software, free. Evaluate IBM software in the way that suits you best: Download it for a trial, try it online, use it in a cloud environment, or spend a few hours in the SOA sandbox learning how to implement service-oriented architecture efficiently. Discuss Check Rational Application Developer wiki and in the Portal tools section there to keep up with news and to contribute. Join the Development Tools forum to ask questions and participate in discussions. Rate or review Rational software. It's quick and easy. Share your knowledge and help others who use Rational software by writing a developerWorks article. Find out what makes a good developerWorks article and how to proceed. Follow Rational software on Facebook, Twitter (@ibmrational), and YouTube, and add your comments and requests. Ask and answer questions and increase your expertise when you get involved in the other Rational forums, cafs.

What's new in IBM Rational Application Developer 8.5 portal tools

Page 11 of 12

developerWorks

ibm.com/developerWorks/

About the authors

Jaspreet Singh Jaspreet Singh is a software architect for the Rational WebSphere Portal tools in ICS. His areas of expertise span the WebSphere Portal domain, Eclipse plug-ins, Java Enterprise Edition (JEE), and Web 2.0 frameworks. He has presented at the Rational Software Development Conference in 2008, Portal Excellence Conference 2009, the Rational software Innovate 2010 conference, and the Exceptional Web Experience Conference in 2011.

Mansi Gaba Mansi Gaba is a staff software engineer at the IBM Software Labs in Delhi, India. Her areas of expertise include JavaServer Faces (JSF) portlet bridge, the JSR-286 Java Portlet specification, and portlet server tools. She has completed Sun Certified Java Programmer, Sun Certified Web Component Developer, and Oracle Certified Professional, Java EE 5 Business Component Developer. Copyright IBM Corporation 2012 (www.ibm.com/legal/copytrade.shtml) Trademarks (www.ibm.com/developerworks/ibm/trademarks/)

What's new in IBM Rational Application Developer 8.5 portal tools

Page 12 of 12