Tips For Teams Adopting The Web Experience Factory Framework

Tips for Teams Adopting IBM Web Experience Factory
2012 IBM Corporation
Goals of this presentation
Give you confidence about using Web Experience Factory (WEF) on real projects, small or large Answer questions you may have about how your team works with the WEF framework Provide pointers and short demos for features you should get to know Provide tips for how you can leverage the complete WEF toolkit to get the maximum benefit in terms of:
Rapid development Best practice implementation and high quality code that performs well Automating and enforcing your development standards and practices Good team development practices
IBM Corporation
Agenda
Background - Why WEF Key resources and getting started Developing user interfaces for desktop or mobile/multi-channel Developing services and data access Team development Testing, debugging, and performance Tailoring the automation framework
IBM Corporation
Key challenges facing development teams
How to do more with less? How can I support delivery to a wide range of devices? How do I enable new team members quickly? How do I ensure code quality and enforce standards?
IBM Corporation
In this day and age, we need a more efficient development approach...
Web Experience Factory uses a model-based code generation approach to boost productivity and address those challenges Faster time-to-market and cheaper solution delivery Improved end-user experience for desktop and mobile devices Easier integration with existing technology investments Increased solution flexibility
2012 IBM Corporation 5
What is Web Experience Factory?

Model-based development framework for creating web applications and portlets Out of the box capabilities simplify and speed development Supports multi-channel web sites and applications
Easier and faster than traditional coding to develop exceptional web experiences
Includes 150+ out-of-the-box builders that accelerate development
Dynamic profiling allows you to write once, deploy to many devices
Web Experience Factory automation of design patterns
WEF features a model-based development approach using builders A builder is a tool with a wizard-like configuration UI that automates a design pattern, generating all the necessary application code and artifacts Builders are combined in a model and edited using the Web Experience Factory graphical Designer IDE Application code Web Experience Factory code generation engine Model
Builder 1 Builder 2 Etc.
Libraries and templates
Benefits of the model-based code generation approach

1) Rapid development
Quickly generate fully-functional applications using a data-driven approach based on a service or data source Use complex technologies with no coding or learning curve, such as Ajax, back end data integration, mobile UI construction Customize the generated applications using provided tools and by integrating your code and your UI designs where desired
2) Flexibility and runtime variability using Dynamic Profiling

Support mobile and multi-channel delivery from a single source model Generate multiple variations from single source model for user role, geography, customer/partner, etc. Allow runtime customization of applications
3) Automate and enforce your development standards and practices

Tailor the code generation framework for your standards and practices and design patterns
8
Agenda
Key resources for learning and using Web Experience Factory
Let's start by making sure you know where you can get information and help:
Web resources and community Training IBM services and business partners IBM Support
Web resources the Web Experience Factory wiki
The WEF wiki is the key place where the WEF team publishes information and samples It's our direct path to get material out to our development community, easily and quickly Key wiki pages to visit:
Samples directory see the new categorized directory of over 100 samples! Getting started videos short videos to show concepts and see how WEF works Learning Web Experience Factory page has links to key resources for all sorts of tasks Product documentation all versions, and it's editable
Key Web Experience Factory wiki resources

Samples directory Videos for getting started
Learning Web Experience Factory
Product documentation
Web resources developerWorks
developerWorks forum
This forum is closely monitored by the WEF team Go here to look for solutions to questions, or to post a question
developerWorks community
Includes blogs from the WEF team
New in WEF 8.0: Feeds to the forum and the community blogs are available right from the IDE
Training, services, and support
Training it's a great idea to start with some training, so you get a good introduction to a range of WEF skills
Training is available from IBM and from business partners 2-5 day classes are available Classes are available for introductory, advanced, and mobile/multi-channel topics Training can be remote or on site
Services bringing in WEF experts can be a great way to deliver a project quickly and to help build in-house skills
IBM Software Services for Collaboration IBM Global Business Services Business partners
IBM Support
Use this for problem reports
14
Getting started get familiar with the tool and framework
Install and get up and running Get to know the Designer IDE Learn the edit/test cycle Learn how to download and explore samples Get comfortable with the model-based code generation paradigm Understand what's easy with WEF, what's harder
Install and get up and running
Install is dead simple install with provided Eclipse or into RAD For the simplest quick start, use all the defaults, including WAS CE test server If you have Portal installed, it's easy to configure Publish to point to your Portal server Start by making a project that includes the Building Models samples, to make sure your test server is configured correctly For Portal testing, publish a test portlet and put it on a page A local test server is usually preferred, but remote (with auto-deploy) can work very well also with HTTP update mode
Get to know the Designer IDE

Project files and folders Application Tree and Pages views browse generated artifacts Open Design View Palette
Run Model icon
Open Feeds view
Icons for Add Builder, Regen Model Builder list for this model Problems view (ignore at your peril)
Design View WYSIWYG view of page
Tabs for other views such as Properties
Tabs to switch between Source, Design, Model XML, and Builder Call Editor views
17
Tip: Keep a view of your application while working with models
Clicking OK after making a change in the builder call editor...
...gets you back to viewing the generated application

18
More Designer features to learn
Right-click on a project for several valuable commands:

Properties including Feature Sets used by the project (Dojo, Samples, Mobile, Charting, back end integration, etc.) Publish configure test server and publish Create WAR for deployment (portlet or standalone) Import/Export archives for samples and sharing code
Source View shows generated Java, JSP, schemas, etc. Model XML View shows the XML for model file for each builder used Application Tree shows a tree of all the generated WebApp elements (Pages, Methods, Events, Schemas, Variables, Linked Java Objects, Data Services, etc.)
Learn to have a quick edit/test cycle
When you first configure a server, you publish your project to the server After that, any edited files are automatically copied over to the server where they can be tested immediately
You don't need to re-publish the project in order to test most changes
For most changes, you can simply click run

For running in Portal: save the model you edited, then go to Portal and logout/login, in order to get a new session
Some changes do require a re-publish:

Changing JARs in WEB-INF/lib Changing portlet settings that affect the portlet.xml file, such as adding or editing a Portlet Adapter builder Some properties file changes
20
Download and explore some samples
There are over 100 valuable samples available on the WEF wiki, showing a wide variety of techniques Learn how to download/install these samples, and try some out! To install a sample (.pkg or .zip): Right-click on project, Import, Web Experience Factory Archive Creating an archive to share code is also simple right-click on project and Export, Web Experience Factory Archive
Download Samples from wiki
Import into project
Run
Get comfortable with the model-based code generation paradigm
The builders in a model generate the code of the application Many builders create application elements
E.g., the View & Form builder creates multiple pages with all the supporting code
Many other builders modify application elements

E.g., Data Field Settings changes all the behavior of all the data fields
Some builders bring in external or custom code and inject it into the application
E.g., Linked Java Object builder, Client JavaScript builder, Imported Page
You can't edit the generated code, but you can:

Add and configure builders to change code generation Use builders to inject your own custom code into the generated code Create new builders to generate code for your own patterns
22
You can think of a model-based application as being generated from four main parts:
2. Templates and configuration files that control code generation (themes, RDD libraries, HTML templates, etc.)
1. Model
- Builder Calls that generate the main application - Builder Calls that customize and enhance the application
Generated application
4. Builders (code generators)
3. Supplemental code and artifacts such as Java classes, JS files, custom HTML
23
What's easy with WEF, what's harder
Does the productivity boost of using WEF to build an application depend on the characteristics of the application? Yes. For UI development, the biggest productivity boost is for screens where the UI pattern is supported by one of the high-level builders of WEF
This includes data grids, views, input forms, simple or complex lists, and many other UI patterns
For applications where there's not a lot of high-level builder support:

Implementation takes somewhat longer and involves using more lowerlevel WEF tools or custom code For example, there's no high-level builder in WEF that automates a typical calendar UI lower-level builders are needed Implementation is generally still at least as fast as with standard tools, and many of the WEF benefits can still be realized (such as automated enforcement of project standards)
24
Agenda
Building UI with Web Experience Factory

WEF has a very rich set of tools for UI development...
...for ultra-rapid development using a data-driven approach

Build a fully-functional application from a service in minutes
...for automated control over how UI is generated

Control all field behavior and look and feel from one central place
...for creating mobile and multi-channel UI

Use profiling for device type variations
...for detailed customization

Use custom HTML designs and the rich set of customization tools
Page Automation: generating UI from data
The Page Automation framework within WEF does the work of generating UI from schema-typed data All the UI code is generated based on the fields in the schema There's a rich set of tools that let you control and customize the generated UI
Schema Views and forms
Main parts of portlet UI
Base page the template with placeholders where data and generated elements will be placed Data the Page Automation elements generated from schema, including layout, rich behavior, backing code Added elements added by builders (Link, HTML, Image, Text, etc.)
Search form data section Display data section, with paging controls Text added at placeholder location Buttons added at placeholder locations by high-level builder or with Button builder
Control field UI and behavior automatically with Data Field Settings
From a single Data Field Settings builder, you can easily control the appearance and behavior of all the fields in an application Automatically reference a shared library of Rich Data Definitions
A Dojo library is provided, and libraries can be customized to meet your standards
For each field, you can control labels, visibility, column sorting, validation, field type (drop-down, checkbox, rich text editor, date picker, etc.), and more Generated page
Data Field Settings Builder Rich Data Definition Shared Library

Date (format, picker, validate) Currency (format, validate) US States (select, lookup) Rich Text (edit control)
Top best practices for UI development

1) Use a provider/consumer model architecture leave all the data work to the provider model layer 2) Use Page Automation builders for all data view and input (Data Page, View & Form, Data Services User Interface builders) 3) Use Data Field Settings and RDD (Rich Data Definition) for controlling field behavior 4) Use Data Layout for a variety of nice-looking displays of repeating data 5) Use UI themes for controlling look and feel, with styling that's compatible with your Portal theme 6) Use custom HTML when you need complete control of page layout
Example: Portlet Adapter + Service Consumer + View & Form + Data Field Settings + Theme + Data Layout + Custom HTML
Building multiple application variations with dynamic profiling
Dynamic profiling is used to generate multiple application variations from a single source model Variations can be tied to user groups or other attributes
For different customers, partners, roles, regions, etc. For different device types desktop vs. smartphone, for example
Profiling also supports customization by administrators or end users

Enables business users to customize the application without requiring additional coding by developers
Any aspect of application can be varied by profile: look and feel, level of functionality, services, logic, etc.
Profiles can generate many application variations from one source model
Profiles
Regions Roles
Profiles Sale VP Profiles Sales Sale VP Manager Sales Rep Sales Manager Sales Rep
Application Instances
Source model
Web Experience Factory Engine
Web Experience Factory for mobile devices

Create mobile web applications using standard technologies (HTML, CSS, Javascript) Use model-based automation, eliminating coding and speeding time to market Leverage Dojo Mobile and a client-side architecture, for a native-looking UI with architectural benefits Support a multi-channel strategy, to create once and run on multiple devices (iPhone, iPad, Android, etc.) Leverage all the Experience Factory out-of-the-box features for quickly building exceptional web experiences Leverage HTML5 for features such as geolocation Build hybrid applications using Worklight to support additional device features such as camera
Agenda
Data access and services
WEF has lots of connectors (builders) for various data sources

DB, web services, and REST services get the most use
You can transform data from your back end schema into a UI-friendly schema that's nice to work with on the UI side Data access and transformation is done in a service provider model, separate from the UI or service consumer layer This provider/consumer model architecture has these benefits:
Independently develop back end and presentation layers Automatic support for service testing Develop UI model without any back end access, using a stub provider Reuse service models in multiple presentation models
Service provider/consumer model architecture

Web Experience Factory
Service (provider) model
Provider builders SQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc. Data transforms and schemas References to Java classes/libraries
Presentation (consumer) model

Presentation builders Service Consumer View & Form or Data Services UI Data Field Settings UI customization builders Dojo, Ajax, rich UI Layout
Generated application
DB or other back end data source
Service Interface operations and schemas
Techniques to get to know: services and data access
Using the builders for accessing your back end data (whatever it is) Creating and using schemas and mapping/transforming data between schemas
Use the Service Operation builder, the Transform builders, or LJO code with the IXml API
Defining a public interface, using Service Definition and Service Operation Programming with the IXml API easy-to-use interface for XML data Caching options for cross-user caching: Service Operation, Cache Control
Top best practices for developing services and data access

1) Use a provider/consumer model architecture and create a simple service interface for the UI layer (often with flat data structures) 2) Do any necessary data transformations in the provider layer 3) Use the automatic testing support for easy testing of your back end access and data transformations 4) Follow best practices for performance (use stateless provider, use paged access for large data sets, use caching when possible)
Agenda
Team development: using source code control
Files that you directly edit are stored in source code control:
Models Hand-coded Java, HTML, JavaScript Other files such as RDD base libraries, UI theme files, properties
Generated files are not stored in source code control Eclipse plug-ins are available for SCM systems (SVN, ClearCase, Rational Team Concert, etc.) Compare and Merge for models are available in Designer
Team development: using an automated build process
ANT scripts are provided for doing automated builds These generate WAR files from your project files stored in source code control You can customize these scripts as needed The Web Experience Factory files that go into the WAR are pulled from a factory image taken from your WEF installation
Team development: sharing code within a project

As with any software development, you want to encourage code sharing rather than code copying There are a number of assets that are commonly shared across models in a project:
Service providers Java classes (used as LJOs) UI themes, with CSS, base pages, HTML Templates, etc. RDD libraries for use with Data Field Settings Imported models these are like C++ #include: the builders from another model are copied into the current model context Custom builders
Team development: sharing code across multiple projects
You can't directly access WEF assets (models, UI themes, custom builders, etc.) across different Eclipse projects Instead, you can make your customized WEF assets available as a Feature Set in all of your projects
See wiki document on the details of this
Adding the Feature Set is done with a simple checkbox in the project properties Feature Sets can be automatically updated
Custom feature set Text With Image Builder
Agenda
About testing
The applications you build with WEF are web applications, so you can test them with any standard web application testing tools
Functional test tools Performance and load test tools
For the service layer, you have a generated test harness you can use for testing Your hand-coded Java code can be testing with Java unit test frameworks Upcoming article and sample on wiki on using automated unit testing with WEF models
About debugging and troubleshooting
WEF is a high-level framework, where you work at a level of abstraction above the Java code level Most debugging and troubleshooting is at this higher model level
What actions are called, what are the values of model variables, etc.
You can debug at the Java level, but more often the model level is where you look Java debugging is used primarily for debugging your custom Java code, not for debugging the code from WEF See next slide for debugging tools
Key techniques for testing, debugging, and troubleshooting

Debugging technique Problems view in Designer Model Action Tracing (a.k.a. System Tracing) println from model or Java Debug Tracing builder Service Test support Server stats logging Other logging Java debugging Primary use Use this to find errors in builder inputs Used to see what server actions are occurring invaluable for debugging and performance analysis Used to see the values of any runtime data Useful for tracking the value of a variable during execution Use this to test all your service providers Look at these logs for statistics about what's happening in the WAR and about performance Web services, back end builder logging, etc. - see log4j.properties to enable these Use this primarily for stepping through your handcoded Java
See Debugging Your Web Experience Factory Application on the Web Experience Factory wiki for more information on these 2012 IBM Corporation
47
Agenda
Automating and enforcing development patterns and practices
Builders and models can automate and enforce standards and practices across a project generate code the way you want it This is very valuable for any bigger project or team For example: Rich behavior and appearance of data fields can be defined in a shared RDD (Rich Data Definition) library Look and feel can be centrally defined using UI themes and reusable data layout templates Common features can be automatically included using Imported Model Logging and error handling code can be automatically added Custom builders can automate any desired practices and standards
Key practices for getting the most benefit from the modeling and code generation framework
Use documented best practices for out-of-the-box features Have one or more developers who focus on framework aspects of the project and on defining standard practices for the team Create key shared framework elements for the project, e.g., UI themes, RDD libraries, custom builders Continually review project implementation, and keep an eye out for best practices and for potential additional automation
Use the Model Reporting tool for a quick snapshot of all the models in a project and to find best practice issues Look for common patterns where custom builders would be valuable
Summary
Web Experience Factory is a very rich framework for rapid development and flexible delivery Use it to its maximum advantage! From day one, use the out of the box high-level tools and automation, for rapid development and complete customization control For bigger projects and teams, take advantage of the ability to customize the framework to automate and enforce your patterns and practices
Establish a framework team or center of excellence to lead this
Key resources for developers
New Web Experience Factory Community on developerWorks

http://ibm.co/factorycommunity
Web Experience Factory wiki

http://www-10.lotus.com/ldd/pfwiki.nsf Includes numerous samples and articles, best practices documents, and links to other resources http://www-10.lotus.com/ldd/pfwiki.nsf/dx/learning-websphere-portlet-factory Covers topics from your first installation to advanced topics such as creating builders http://www-01.ibm.com/support/docview.wss?rs=3044&uid=swg27011853 These are very active and are monitored closely by the Web Experience Factory team Go here for specific questions or if you get stuck on anything
Learning Roadmap from the Web Experience Factory wiki
Web Experience Factory forums on developerWorks
Questions?
IBM Corporation 2012. All Rights Reserved.

The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBMs current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBMs sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries. UNIX is a registered trademark of The Open Group in the United States and other countries. Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others.
54

Tips For Teams Adopting The Web Experience Factory Framework

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tips For Teams Adopting The Web Experience Factory Framework

Transféré par

Droits d'auteur :

Formats disponibles

Tips for Teams Adopting IBM Web Experience Factory

2012 IBM Corporation

Goals of this presentation

Key challenges facing development teams

In this day and age, we need a more efficient development approach...

2012 IBM Corporation 5

What is Web Experience Factory?

Includes 150+ out-of-the-box builders that accelerate development

Dynamic profiling allows you to write once, deploy to many devices

Web Experience Factory automation of design patterns

2012 IBM Corporation

Libraries and templates

Benefits of the model-based code generation approach

2) Flexibility and runtime variability using Dynamic Profiling

3) Automate and enforce your development standards and practices

2012 IBM Corporation

2012 IBM Corporation 9

Key resources for learning and using Web Experience Factory

2012 IBM Corporation 10

Web resources the Web Experience Factory wiki

2012 IBM Corporation 11

Key Web Experience Factory wiki resources

Learning Web Experience Factory

2012 IBM Corporation 12

Web resources developerWorks

2012 IBM Corporation 13

Training, services, and support

2012 IBM Corporation

Getting started get familiar with the tool and framework

2012 IBM Corporation 15

Install and get up and running

2012 IBM Corporation 16

Get to know the Designer IDE

Run Model icon

Open Feeds view

Design View WYSIWYG view of page

Tabs for other views such as Properties

2012 IBM Corporation

Tip: Keep a view of your application while working with models

Clicking OK after making a change in the builder call editor...

...gets you back to viewing the generated application

2012 IBM Corporation

More Designer features to learn

Right-click on a project for several valuable commands:

2012 IBM Corporation 19

Learn to have a quick edit/test cycle

For most changes, you can simply click run

Some changes do require a re-publish:

2012 IBM Corporation

Download and explore some samples

Download Samples from wiki

Import into project

2012 IBM Corporation 21

Get comfortable with the model-based code generation paradigm

Many other builders modify application elements

You can't edit the generated code, but you can:

2012 IBM Corporation

4. Builders (code generators)

2012 IBM Corporation

What's easy with WEF, what's harder

For applications where there's not a lot of high-level builder support:

2012 IBM Corporation