![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Part 1 of this series gave you an overview of the features and architecture of WebSphere Lombardi V7.1 (hereafter called Lombardi). In Part 2 you learned how to use the most common features of Lombardi, including business process definition (BPD), and integration, human and rule services, to model the sample process. In Part 3 you learned how to use some advanced features of Lombardi to enrich to meet more complex requirements, including nested processes, milestones, event mechanisms, exception handling and Lombardi web services exposure. Part 4 covered how to use Lombardi Coaches to build human services.
In Part 5, you'll learn about advanced Coach features, including dynamic data binding and the runtime rendering mechanism, as well as how to customize the Coach.
Binding dynamic data using an AJAX service
In Part 4, you learned that you can easily bind a Coach control, like input text, with a simple service variable. In this section, you'll learn how to populate a Coach control with dynamic data.
To build a drop-down list using a list variable, do the following:
- Select List variable for Based on in the Dynamic Data section of Presentation property.
- As shown in Figure 1, specify the Dynamic Binding in the
Dynamic Data section to one variable which is list data
type, e.g. tw.local.product[]. After that, it is needed to choose
which property of the variable to be shown in the drop down list for
Dynamic Binding Value, e.g.ID, and which property to be
submitted to the back-end as the value of the drop down list for
Dynamic Binding Display, e.g.Name.
Figure 1. Build a drop-down list using a list variable
- You can also build a drop-down list by selecting Ajax Service
in the Dynamic Data section. The Ajax service needs to provide
one input text control, Department, as shown in
Figure 2.
Figure 2. Build a drop-down list using an Ajax Service
Figure 3 shows the implementation of an Ajax service. In order to use the
Ajax service to build the drop-down list, the output of the Ajax service
should be a list of tw.object.NameValuePair
objects, as shown. tw.local.inputVar is the
input control for the Ajax Service and
tw.local.teamList is the output for the Ajax
service. Here we use the fixed value as example, you can use an Ajax
service to pull data dynamically from a connected data source, such as a
database.
Figure 3. Implementation of an Ajax service
Figure 4 illustrates the resulting drop-down list created using the Ajax service. Initially, the value of Department is empty and the Ajax service output is No Team Assigned. When you select a department, the Ajax service displays the corresponding teams.
Figure 4. Resulting AJAX service drop-down list
Building a table control using a SQL query
In this section, you'll learn how to build a table control in the Coach using a SQL query. Figure 5 illustrates the Coach design. In the Date Retrieval area of the Presentation property, the default data source is jdbc/TeamWorksDB, which corresponds to the TW_PROC database in WebSphere Lombardi Express V7.1. You can access the TW_PROC database using the default username WSLE and the password Lombardi. You can also access the WebSphere Application Server administrative console in Lombardi Express with a username and password of tw_user to define a new data source.
The property names of the custom data structure (tw.local.product in Figure 5) must match the column names in the database table that you want to query. Otherwise, you would need to use column aliases in the SQL statement to perform the correct matching.
Figure 5. Build a table control using a SQL query
Figure 6 shows the resulting table control using SQL query.
Figure 6. Running a table control
In this section, you'll learn about some of the ways you can customize Coaches. Before you customize Lombardi Coaches, you should have a good understanding of how the runtime rendering of the Coach works to ensure that your modifications produce the desired results. The runtime rendering involves the following key technologies, as shown in Figure 7.
Figure 7. The runtime rendering of a Coach
- HTML: The Web browser client renders the HTML that the Coach generates from its XML definition through XSLT processing. You should view the generated HTML result in your web browser.
- CSS: The Cascading Style Sheet. The default Lombardi CSS file, coach_designer.css, instructs the client how to render the HTML output.
- JavaScript®: JavaScript provides the methods and functions that implement runtime Coach features, such as dynamically adding rows to a table or governing the visibility of Coach controls. JavaScript is embedded in the XML definition of a Coach, and is evaluated by the runtime engine before it is rendered to HTML by the web browser client. Both client-side and server-side JavaScript are used to render Coaches.
- XML: The design of a Coach is described in Extensible Markup Language
(XML). As you drag sections and controls to a Coach, Lombardi
automatically generates the XML definition of the Coach.
You can view the XML while you're building a Coach by clicking the Code View icon in the toolbar.
- XSLT: The Extensible Stylesheet Language Transformation (XSLT) transforms the XML definition to the runtime HTML form. The Extensible Stylesheet Language renders a server-side-scriptlet that is executed to generate the HTML.
Best practices for customizing Coaches
In general, you should customize Coaches using the mechanisms available in
the Designer interface, such as using a custom CSS by overriding the CSS
for a particular Coach or control. If the overrides available in the
Designer don't meet your needs, and you are fairly comfortable with XML,
you can use the cssStyleOverride attribute. In
order to use a custom CSS for all Coaches, you need to access and edit the
default Coach CSS located in the Lombardi installation directory.
If these CSS customization options aren't a viable solution to meet your design requirements, you can also edit the CoachDesigner.xsl transformation file to customize the rendered HTML. If you edit the CoachDesigner.xsl file and you notice that your changes are not being applied to the Coaches under development, open your Coach, click on the top section of the Coach (named Lombardi Coach by default), click the Coach option in the properties, and then click Transform Coach XML.
If you modify the XSLT or JavaScript files, you need to be aware of the following implications:
- You should not attempt to use these methods unless you have a high comfort level with XSL and JavaScript.
- The XSLT and JavaScript files are overwritten during the Lombardi upgrade process, without no opportunity to detect or merge possible customizations. If you make modifications to these files, you must manually merge your customizations after each upgrade.
- You must make modifications in all Lombardi environments, including development, test, production, and any others to which you will install and run processes.
Customizing the display of Coach pages
In Part 4, you learned how to build a human service using Coaches and how to bind dynamic data. This section describes just a few of the ways you can customize Coaches.
- You can change the way that columns are displayed on a Coach page
using the Section properties. For example, you can change the
number of columns and column width, as shown in Figure 8.
Figure 8. Customize column display
- You can make an input field on a Coach page required, or specify
whether to show it, by customizing the Visibility properties of
the field. To do this, check Override Parent Visibility, then
select the desired Default Visibility, such as Required
(full access) for everyone, as shown in Figure 9. You can also
use this property to hide some fields.
Figure 9. Make input field required
Figure 10 shows the Coach page with the resulting required field.
Figure 10. Required input field result
- Finally, you can override the default CSS styles for Coach controls by configuring the Customization properties of controls.
You can drag and drop a custom HTML control from the palette onto the design area of a Coach, then add any custom JavaScript, CSS and HTML code in the Presentation properties. It is very useful to render HTML content according to the runtime value of process or service variable. In addition, it is useful to edit the process or service variable in the Custom HTML block. This section shows you how to achieve this.
Suppose you define a String variable in our process or service named
product. You can display its value in the Custom HTML block
using
<# = tw.local.product #>
You can also use <# #> to get the value
of the process variable. The difference is that the result of
<#= #> expression is put into the text,
while the result of <# #> expression is
not put into the text, but is computed dynamically. This is similar to the
way that <%= %> and
<% %> function in JSP.
If you want to edit the process variable in Custom HTML, you can use modify the following HTML element:
<INPUT name='tw#local#product value= '<#=tw.local.product#>'>
The trick is to realize that the Coach uses HTML forms to pass information back to Lombardi, and the name attribute of each form control is used to bind its value to a Lombardi variable. Set the name of the control to the Lombardi variable (replace "." with "#"), and the Lombardi variable will be updated when the form is submitted.
For list of simple variables, such as product is redefined as a list
of type String. Then tw.local.product[0] can be
represented as tw#local#product#0, as the name
attribute of form element.
For a list of complex variables,
tw.local.product[0].amount, for example, can be
represented as tw#local#product#0#amount.
Performing advanced Coach customization
In general, you should customize Coaches using the mechanisms available in the Designer interface, such as using a custom CSS by overriding the CSS for a particular Coach or control. If the overrides available in the Designer do not meet your needs, you can use the cssStyleOverride attribute, which requires a moderate comfort level with Extensible Markup Language (XML). In order to use a custom CSS for all Coaches, you must access and edit the default Coach CSS located in the Lombardi installation directory.
If the CSS customization options are not a viable solution to meet your design requirements, you can edit the CoachDesigner.xsl transformation file to customize the rendered HTML. If you edit the CoachDesigner.xsl file and you notice that those changes are not being applied to the Coaches under development, open your Coach, click on the top-level section of the Coach (named Lombardi Coach by default), click the Coach option in the properties, and then click the Transform Coach XML button.
If you decide to modify the XSLT or JavaScript files, you need to be aware of the following implications:
- You should not attempt to use these methods unless you have a high comfort level with Extensible Stylesheet Language (XSL) and JavaScript.
- The XSL transformation (XSLT) and JavaScript files are overwritten during the Lombardi upgrade process, without opportunity to detect or merge possible customizations. If you have made modifications to these files, you must merge your customizations manually after each upgrade.
- You must make modifications in all Lombardi environments, including development, test, production, and any others to which you will install and run processes.
In this article, you learned more about some Coach customization features, including dynamic data binding, customizing the display of Coach pages, and creating custom HTML controls. You also learned about the runtime rendering of Coaches. In Part 6, you'll learn how to us Lombardi KPIs and reports to do monitoring and performance analysis.
- IBM
WebSphere Lombardi Edition V7.1 Information Center
- WebSphere Lombardi edition
-
Business Process Modeling Notation (BPMN)
web site
-
Introduction to BPMN (PDF)
- BPMN
and Business Process Management
-
developerWorks BPM zone
-
IBM BPM
Journal
Xiaoxing Liang is a staff software engineer on the Business Performance and Service Optimization team within IBM Software Group. He is experienced in developing SOA, BPM and Web2.0 technology and solutions.
Table of contents
Next steps from IBM
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
