Portlet factory 101

Exceptional Web Experiences
IBM Web Experience Factory 101

Phillip de Ridder
Technical Sales Lead | IBM Collaboration Solutions | MEA

What is the IBM Web Experience Factory?

Formerly known as Websphere Portlet Factory.

General purpose rapid application development tool for building web and hybrid mobile applications.

Helps developers rapidly produce sophisticated applications that can be deployed into multiple execution environments:WebSphere Portal

WebSphere Application Server / Tomcat / WAS CE

Lotus Notes 8.5.x client / IBM Sametime 8.x client

IBM Mashup Center

And accessed by multiple devices:Smartphones (Android, Iphone, Blackberry etc)

Tablets

Browsers

IBM Web Experience Factory

tool--transparentSupercharges Application DevelopmentKey Features:Automates and simplifies software creation for rapid solution delivery

Creates highly interactive, rich user interfaces by leveraging advanced AJAX techniques and Dojo toolkit widgets and controls

Provides a rich pre-built connector library and transformation capabilities (relational DB, Web and REST services, SAP, Siebel, PeopleSoft, Lotus Domino, Microsoft Excel, WebSphere Process Server, CMIS content management systems)

Includes Dynamic Profiling capability, to create multiple variations from a single source model

Runs on IBM WebSphere Portal or IBM WebSphere Application Server

Dramatically simplifies and supercharges the development, deployment, maintenance and reuse of multi-channel applications that deliver exceptional web experiences

One tool multiple platforms and devices

Smartphones

TabletsDesktopBrowsers

Use one common set of tools, techniques, application code (models)...

...and generate applications for multiple clientdevices

Web Experience Factory

WebSphere PortalWebSphereApplication Server

...deploy to multiple platforms...

Technical Overview

Web Experience FactoryTechnology ConceptsModels

Builders

Profiles

Web Experience Factory automation of design patterns

Web Experience Factory features a model-driven development approach using builders

Each builder has a wizard-like UI and automates a design pattern, generating all the application code and artifacts

Builders are combined in a model and edited using the Web Experience Factory graphical Designer IDE

Librariesand code

Code generation engineApplicationModel Builder 1 Builder 2 Etc.

The model builders' technical overview

Start with some bricks

Build an object with those bricks

Change the object by changing the configuration

At a low level - you're not redesigning a brick you're reusing it in a different way.

Automating the building block analogy

Collection of builders

Factory AutomationEngine

Implementation Patterns

Implementation patterns canbe automation componentsor builders too

Automate Frequently Occurring Development Tasks

Multiple SAP BAPI Call Transaction

Calendar Picker

Print, Export to Excel, Email

Click-To-Action Invocation

Master-Detail Table Drill Down

Applications are comprised of features and design patterns.

1.

Capture features and design patterns as Builders. Developers can easily create Builders to automate their code.

2.

By creating Builders, companies can retain the intellectual property of their developers + ensure consistency and quality of code.

3.

Caching

Automation of your code - With Bowstreet Portlet Factory, developers can create custom automation components (Builders) that encapsulate commonly used design patterns and company-specific business processes. These Builders can then be shared with other developers across the organization, who can easily reuse the functionality without the burden of recreating the same complex code.

Builders

.

../** * Generated Method [_pageDispatcher] * Generated by builder call [bc21] */public void _pageDispatcher(WebAppAccess webAppAccess){ com.bowstreet.webapp.JSPSupport.dispatch(webAppAccess);}/** * Generated Method [getFlights_PagingGetImgName] * Generated by builder call [bc21] */public String getFlights_PagingGetImgName(WebAppAccess webAppAccess, String button, String position){ PagingAssistant asst = (PagingAssistant)webAppAccess.getVariables().getObject("getFlights_Paging"); String img = button + position; if ((button.equals("First") || button.equals("Prev")) && !asst.hasPreviousPage()) img = button + "Disabled"; if ((button.equals("Next") || button.equals("Last")) && !asst.hasNextPage()) img = button + "Disabled"; return webAppAccess.getVariables().getXmlText("getFlights_PagingButtonImages", img);}..

Capture design intelligence and automate the creation of code

Perform specific automation tasks based on inputs or parameters specified by users

Can be easily created to automate any type of software development

Have automatically generated, easy to use, wizard-like interfaces

Increase developer productivity, decrease coding errors, and enforce company coding conventions or standards

Over 150 Portlet Factory Builders

Generate user interfaces

Support SOA

Simplify portal integration

Demonstrate AJAX techniques

Provide Application Integration

Implement REST capabilities

Dojo Framework

Widgets

Mobile Themes/Profiling

IBM WCM enhancements

CMIS integration

Extensible Builder Library Automates Top Tasks

SOA, Enterprise App Integration,

Builders : SOA

Key Benefits Enables reuse of existing assets across projects and departments

Automates back end connectivity

Speeds creation of new applications

Promotes application flexibility

The Data Services Layer provides full support for the service provider & consumer paradigm required in an SOA environment. It enables the definition of clean, well defined service interfaces that separate the user interface from back end data.

Key Features

Create data services that wrap data from any system

Enable quick access to the leading back end systems with Web Experience Factory integration Builders

Utilize one data service to drive the display of multiple portlets

Reuse a single user interface Model by plugging in data from different services

Key Benefits Enables reuse of existing assets across projects and departmentsAutomates back end connectivity Speeds creation of new applicationsPromotes application flexibility

Key FeaturesCreate data services that wrap data from any system Enable quick access to the leading back end systems with Portlet Factory Integration extensions Utilize one data service to drive the display of multiple portletsReuse a single user interface Model by plugging in data from different services

1- One benefit is that you can encapsulate your back end data into a set of well defined services that can then be reused across your dashboard project and even across other types of applications within your organization. You may already have your applications exposed as services. If you dont, you can use a number of different tools to create these services, including the Integration extensions that are part of Portlet Factory. As I mentioned earlier, our integration extensions make application connectivity fast and easy. Using Portlet Factorys SAP capabilities, for example, you can quickly connect to SAP and expose one or more of their APIs or BAPIs as services.2. Another benefit of this architecture is that you can speed the creation of new applications and new portlets by reusing data services. For example, you can use the data service called Bookings to drive the display of multiple portlets that display bookings data. Here we are reusing one service to create a portlet with a status gauge of bookings as well as another portlet that shows a table of that same bookings data.3. The final benefit of this type of architecture is that it promotes application flexibility. You can use reuse the same Portlet User Interface, with different data services. For example, you can easily swap out the data service that drives these portlets, which is a bookings service, with another data service such as opportunities. So, an SOA promotes flexibility by being able to dynamically swap out different services without having to change the user interface.

Building (mobile) web applications using a service architecture

Presentation (consumer) modelService (provider)modelDB or otherback end datasource

Service Interface operations and schemas

Builders for mobile UIData Layout

Mobile UI theme

UI customization builders

DesktopSmartphonePresentation buildersService Consumer

View & Form or
Data Services UI

Data Field Settings

Provider buildersSQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc.

Data transforms and schemas

References to Java classes/libraries

Mobile List & Detail Service Consumer wizard creates this model

Profiles

Are sets of parameters (name/value pairs) that are used to dynamically generate customized software

Enable business users to design, create, and change the applications without requiring additional coding by developers

Enable changes to propagate to all application instances

Eliminate hand-coding of variations

Speeding development the first time is only half the real power of Portlet Factory, however. Profiles allow new versions of existing portlets, without new development cycles. In the past if you needed an portlet for one group, say an Order Summary portlet for internal sales reps that was very detailed, then determined that pushing that out to distributors on an extranet would increase efficiency even more but with less detailed order information, you would do one of two things. You would either add conditional logic to the existing portlet, or you would copy, edit and deploy a new portlet. Both are approaches that will work, but in either case, new development cycles are necessary, as well as lengthy testing and deployment cycles. As youll see in the demo, Profiles eliminate further lengthy development, test and deployment cycles making it even FASTER to build portlets for subsequent requirements.

Thats because developers dont create new portlets each time a new portlet is required, they simply profile a single instance (essentially, a single code base) then apply profiles that allow it to be called by different portals at run-time for use in different contexts. This Regeneration capability, based on Profiles, significantly eases ongoing maintenance by propagating changes on-demand to all portlet instances. Additionally, Profiles may be exposed through the Portals standard Edit, Configure and administration features a powerful capability that allows portlets and variations to be created and customized by any delegated administrator and/or user, with no limits. IT and developers are no longer the bottleneck for much of the varied portlets required as the needs of the business evolve.

Profiles

Profiles can be used to generate multiple applications from a single source Model

During regeneration, values from the selected profile are used for specified builder inputs

Because the entire application is created by Builders, and any Builder inputs can be profiled:There are no limits on what can be modified by profile

Presentation, workflow, logic, services, etc., can all be varied by profile as much as you want

Profile management tool

Profiles

Builders

Powerful Customizer Builders enable developers to more easily extend the configuration of portlets to business users, including portlet look and feel, data, thresholds, process flow, etc.

Portal-based Customizers

Customizers can easily be displayed in portal Configure , Edit, and Edit Defaults Modes

Another feature included in the Dashboard Framework is the ability to very easily create robust, browser-based configuration wizards that enable non-technical users to dynamically personalize and configure their dashboard portlets without having to involve IT. End users can change really any aspect of the portlet exposed by IT, which can include the look and feel of the portlet, the functionality, application flow, and even connectivity to the back end system.

Basic support for creating these browser-based configuration screens is included as part of WebSphere Portlet Factory, but the framework adds some features that makes this even easier. For example, we include a Table Customizer Builder that makes it very straightforward to customize a table, including features such as the ability to reorder columns, rename columns, change column widths and alignments, add sorting, and so on.

With this capability to extend portlet configuration to business users, companies can increase the flexibility of their dashboards and reduce IT maintenance costs

Profile Selection

Extensible Profile Selection capability enables developers to more easily vary the behavior of an application based custom criteria.

Group membership ( Portal or LDAP )

User attributes

Locale

J2EE role

Any custom criteria.

Profile Selection enables the application to vary based on information available at execution time.

Regeneration

Generates software code based upon the inputs passed to the Builders

Is similar to the process of recalculating a spreadsheet,

Enables iterative design and rapid change

Enables unparalleled software flexibility

When a set of Builders (model) is regenerated using a different set of input parameters (profiles), a different set of software objects are automatically generated

Benefits of RegenEnable iterative design and rapid changeImprove customer service and satisfaction Reduce maintenance costs

Models

RegenEngine

Roles

Regions

Products

Profile Sets

Application Instances

Putting it all together

Portlet Factory Components

Developer tool Portlet Factory DesignerPlug-in for Eclipse or Rational Application Developer

Server component Automation EngineRuns as a WAR file on J2EE app server or Portal Server

Executed via Servlet or Portlet API

Note: Core Portlet Factory technology is used by both the design environment and the server. In the runtime, the following pieces support dynamic profiling:Regeneration engine

Models, Builders, and Profiling

Profile Sets

Builders

Models

Traditional code

Java classes

JSP files

Request

Response

Applications folder

Factory application

Automation components

Generated executables

Factory controller

*If necessary

*If necessary

Builders and Models

Model XML file contains a list of calls to BuildersWith all the Builder inputs specified at design time

Builders generate the entire application

Each Builder can:Introspect the application elements

Create new elements in application

Modify any existing elements in application

Invoke any other Builders in the systemThis makes it easy to make higher and higher level Builders

Creating Custom Builders

Extensible architecture makes it easy to create custom BuildersSimple Java interfaces with clean abstractions

Wizard-based User Interface is auto-generated from XML descriptions in Builder Definition files

Custom UI can be created using a java coordinator class

Builders can invoke other Builders Simply combine Builder calls to easily create powerful high-level Builders

Easily create new Builders from an existing model or Builder

Builder Architecture

SAP Function builder

Variable builder

Imported Page builder

Regeneration Engine

Model XML FileBuilder Call 1 - SAP FunctionBuilder Call 2 - Imported PageBuilder Call 3 - Data Page

Action List

2. During regeneration, for each builder call in the model XML, the appropriate builders regeneration method is invoked. All the the builder inputs specified by the user in the editor are passed to the builder.

3. Builders can introspect, create, and modify any parts of the generated application. They can also invoke other builders.

Data Page builder

Variable

Imported Page

Data Page

SAP Function

Action List builder

Builder Definition XML Files

Builder Regen Classes

Factory Eclipse Editor

1. WPF uses Builder Definition files to construct UI for editing builder calls

Generated (Abstract) Application

Pages and controls Variables/Beans Schemas and metadata Actions & Methods Properties

Builder Architecture with Profiling


Variable builder


Regeneration Engine

Data Page builder

Action List builder

A

Profiles


Model XML FileBuilder Call 1 SAP FunctionBuilder Call 2 Imported PageBuilder Call 3 Data Page

Action List

Variable

Imported Page

Data Page

SAP Function


Profile A Application


1. For each builder call in the model XML, the builders class is read from the BuilderDef. Then the builders regeneration code is invoked, passing builder inputs saved from design time.2. From regen class, builders can introspect, create, and modify any parts of the generated application. They can also invoke any other builders.

Builder Architecture with Profiling


Variable builder


Regeneration Engine

Data Page builder

Action List builder

B

Profiles


Model XML FileBuilder Call 1 SAP FunctionBuilder Call 2 Imported PageBuilder Call 3 Data Page

Action List

Variable

Imported Page

Data Page

SAP Function


Profile B Application


1. For each builder call in the model XML, the builders class is read from the BuilderDef. Then the builders regeneration code is invoked, passing builder inputs saved from design time.2. From regen class, builders can introspect, create, and modify any parts of the generated application. They can also invoke any other builders.

Factory and Portal Server

Factory WebAppExecutionController

Profile Selection

Main Factory Dispatcher

Application objects

J2EE Components(JDBC, EJB, JCA, JMS)

Generated WebApp objects, classes, and JSPs

Portlet FactorySupport libraries

Enterprise data sources and web services

= WPF Components

= J2EE App Server

Factory Portlet Adapter

= Application or
customer code

HTTP Request

= Builder-generated
objects

BuilderDef Files

Model XML Files

RegenerationEngine & Cache

Builder

Builder

Builder

Profile Data

Portal Server

Questions?

Quiz:Who am I?

2011 IBM Corporation




Click to add text




R120_G137_B251-200


R120_G137_B251-200



Exceptional Web Experiences


IBM Exceptional Web Experience Conference 2011 - Americas

IBM Corporation 2011