tips for teams adopting ibm web experience factory
TRANSCRIPT
© 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?
© 2012 IBM Corporation5
In this day and age, we need a more efficient development approach...
Web Experience Factoryuses 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 Corporation6
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
What is Web Experience Factory?
© 2012 IBM Corporation7
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
Librariesand templates
Web Experience Factorycode generation engine
Model Builder 1 Builder 2 Etc.
Application code
© 2012 IBM Corporation8
Benefits of the model-based code generation approach1) 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
© 2012 IBM Corporation9
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
© 2012 IBM Corporation10
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
© 2012 IBM Corporation11
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
© 2012 IBM Corporation12
Key Web Experience Factory wiki resourcesSamples directory Videos for getting started
Learning Web Experience Factory
Product documentation
© 2012 IBM Corporation13
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
© 2012 IBM Corporation14
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
© 2012 IBM Corporation15
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
© 2012 IBM Corporation16
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
© 2012 IBM Corporation17
Get to know the Designer IDE
Builder list for
this model
Project files and folders
Application Tree and
Pages views – browse
generated artifacts
Design View – WYSIWYG
view of page
Tabs to switch between Source,
Design, Model XML, and Builder Call
Editor viewsProblems view (ignore at your
peril)
Tabs for other views such as Properties
Open Design View Palette
Open Feeds view
Icons for Add Builder,
Regen Model
Run Modelicon
© 2012 IBM Corporation18
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 Corporation19
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.)
© 2012 IBM Corporation20
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
© 2012 IBM Corporation21
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
Samples from wikiDownload Import into project Run
© 2012 IBM Corporation22
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
© 2012 IBM Corporation23
You can think of a model-based application as being generated from four main parts:
1. Model
- Builder Calls that generate the main application
- Builder Calls that customize and enhance the application
4. Builders (code generators)
3. Supplemental code and artifacts such as
Java classes, JS files, custom HTML
2. Templates and configuration files that control code generation (themes, RDD libraries, HTML templates, etc.) Generated
application
© 2012 IBM Corporation24
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 lower-level 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)
© 2012 IBM Corporation25
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
© 2012 IBM Corporation26
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
© 2012 IBM Corporation27
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
© 2012 IBM Corporation28
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
© 2012 IBM Corporation29
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
Date (format, picker, validate) Currency (format, validate) US States (select, lookup) Rich Text (edit control)
Rich Data DefinitionShared Library
Data Field Settings BuilderGenerated page
© 2012 IBM Corporation30
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
© 2012 IBM Corporation31
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 attributesFor 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.
© 2012 IBM Corporation32
Source model
Web Experience Factory Engine
RolesRegions
Sales Rep
Sales Manager
Sale VP
Profiles
Sales Rep
Sales Manager
Sale VP
Profiles
Sales Rep
Sales Manager
Sale VP
Profiles
Sales Rep
Sales Manager
Sale VP
Profiles
Profiles Application Instances
Profiles can generate many application variations from one source model
© 2012 IBM Corporation33
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
© 2012 IBM Corporation34
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
© 2012 IBM Corporation35
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
© 2012 IBM Corporation36
Web Experience Factory
Service provider/consumer model architecture
Presentation (consumer) model
Service (provider)model
DB or otherback end data
source
Provider builders●SQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc.●Data transforms and schemas●References to Java classes/libraries
Serv
ice
Inte
rfac
e op
erat
ion
s an
d sc
hem
as
Generated application
Presentation builders●Service Consumer●View & Form or Data Services UI●Data Field Settings
UI customization builders●Dojo, Ajax, rich UI●Layout
© 2012 IBM Corporation37
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
© 2012 IBM Corporation38
Top best practices for developing services and data access1) 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)
© 2012 IBM Corporation39
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
© 2012 IBM Corporation40
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
© 2012 IBM Corporation41
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
© 2012 IBM Corporation42
Team development: sharing code within a projectAs 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
© 2012 IBM Corporation43
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
© 2012 IBM Corporation44
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
© 2012 IBM Corporation45
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
© 2012 IBM Corporation46
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
© 2012 IBM Corporation47
Key techniques for testing, debugging, and troubleshooting
Debugging technique Primary useProblems view in Designer Use this to find errors in builder inputsModel Action Tracing (a.k.a. System Tracing)
Used to see what server actions are occurring - invaluable for debugging and performance analysis
println from model or Java Used to see the values of any runtime dataDebug Tracing builder Useful for tracking the value of a variable during
executionService Test support Use this to test all your service providersServer stats logging Look at these logs for statistics about what's
happening in the WAR and about performanceOther logging Web services, back end builder logging, etc. - see
log4j.properties to enable theseJava debugging Use this primarily for stepping through your hand-
coded Java
See Debugging Your Web Experience Factory Application on the Web Experience Factory wiki for more information on these
© 2012 IBM Corporation48
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
© 2012 IBM Corporation49
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
© 2012 IBM Corporation50
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
© 2012 IBM Corporation51
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
© 2012 IBM Corporation52
● 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● Learning Roadmap from the Web Experience Factory wiki
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● Web Experience Factory forums on developerWorks
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
Key resources for developers
© 2012 IBM Corporation54
© 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 IBM’s 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 IBM’s 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.
.