JqueryUI Dialog
The following example demonstrates the usage of three options buttons title and position in the dialog widget of JqueryUI. <!doctype html>.
jqueryui dialog
Control of a robotic arm using an Omega2+ module
5. .titol {text-align: center; font-size: 140%; margin-bottom: 14px} jquery.ui.datepicker.css jquery.ui.dialog.css
tfg annex daniel v zquez
jQuery UI Library
Créez un élément html en entrée (ou bouton ou ancre) et appelez la méthode button() de l'interface utilisateur jQuery. <script>. $(function() {. $( "#myButton" )
jquery ui library fr
Redesign and Improvement of Knowledge Management Software
With the aim of having a little bit more organic design some buttons
LastReport ?sequence= &isAllowed=y
Deliver Modern UI for IBM BPM with the Coach Framework and
turned his talents to consulting which led to a position with For jQuery-based coach view development
sg
Panel 800 Version 6 Panel Builder
https://library.e.abb.com/public/c6f41b4bfddf2ca0c1257c06002b85da/3BSE069489-601_-_en_Panel_800_Version_6_Panel_Builder_Programming_and_Installation_6.0-1.pdf
jquery-ui-library.pdf
Modal dialogs create an overlay below the dialog but above other page elements. position. (Object) [Default: { my: "center" at: "center"
jquery ui library
USER GUIDE 5.3
<p:dialog widgetVar="status" modal="true" closable="false"> <p:column style="width:20%;text-align:center"> ... //draggable element a jQuery object.
primefaces user guide
Package 'shinyMobile'
30 nov. 2019 grouped action buttons toggles
shinyMobile
Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP
26 sept. 2016 data-target="#view-modal" attribute and whenever button will click the following ... <td align="center"><a id="<?php echo $row['emp_id']; ?> ...
Bootstrap modal wdfrwg
Redbooks
Front cover
Deliver Modern UI for IBM BPM
with the Coach Framework and Other ApproachesRackley Boren
Eric Ducos
Ge Gao
Thalia Hooker
Matthew Oatts
Paul Pacholski
Dennis Parrott
Claudio Tagliabue
International Technical Support Organization
Deliver Modern UI for IBM BPM with the Coach
Framework and Other Approaches
October 2016
SG24-8355-00
© Copyright International Business Machines Corporation 2016. All rights reserved.Note to U.S. Government Users Restricted Rights -- Use, duplication or disclosure restricted by GSA ADP Schedule
Contract with IBM Corp.
First Edition (October 2016)
This edition applies to Version 8, Release 5, Modification 7 of IBM Business Process Manager.Note: Before using this information and the product it supports, read the information in "Notices" on
page ix. © Copyright IBM Corp. 2016. All rights reserved.iiiContents
Notices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Trademarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .x
IBM Redbooks promotions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Authors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Now you can become a published author, too! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Comments welcome. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Stay connected to IBM Redbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Chapter 1. Delivering modern UI for IBM BPM using the Coach Framework and otherapproaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 User interactions with business processes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Coaches: Custom user interfaces for business processes . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Coach views: Custom user interface components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.1 Controls: Atomic coach views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.2 Reusable coach elements: Composite coach views. . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.3 Dynamic coach view interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.1 Task completion coaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.2 Dashboards. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.3 Client-side human services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Using coaches outside IBM BPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.1 Launching coaches using a URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.2 Coaches within JSR 286 portlets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.6 How coaches can benefit your organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.6.1 Seamless integration of UIs and process logic. . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.2 Tailored UI components for your business . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Chapter 2. Creating user interfaces with coaches. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1 Getting started with client-side human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.1 Creating a simple process flow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.2 Creating a client-side human service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.1.3 Running a client-side human service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2 Building a simple coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.1 The coach editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.2 What you see is what you get (WYSIWYG) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2.3 Using variables to add controls to a coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2.4 Moving and deleting controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3 Configuring controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3.1 Setting the control binding variable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3.2 Using pseudo variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.3.3 Setting control configuration options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3.4 Defining control visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.3.5 Changing the positions of controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.4 Control toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.5 Working with documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
iv Deliver Modern UI for IBM BPM with the Coach Framework and Other Approaches2.5.1 Document List control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.5.2 Document Viewer control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.5.3 Document Explorer control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.6 Creating a reusable group of controls (using a composite coach view) . . . . . . . . . . . . 35
2.7 Adding validation to a coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.7.1 Required visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.7.2 Control configuration options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.7.3 Data Change event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.7.4 Client-side script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.7.5 Server-side service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.7.6 When to use each validation technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.8 Deriving data from other fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.9 Making a coach responsive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
2.9.1 Multiple form factors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
2.9.2 Controls' responsive properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
2.9.3 Testing a responsive UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
2.9.4 Responsive design considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
2.10 Designing a coach using the grid layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.10.1 The Grid and Content views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.10.2 Grid templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
2.10.3 Grid cell properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
2.10.4 Adding content to the grid. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
2.10.5 Using sections with a grid layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2.10.6 Using a grid layout within a coach view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2.10.7 Grid view visual tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2.10.8 Hiding grid cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
2.10.9 Reusing a grid layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
2.11 Using nested client-side human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
2.12 Styling coaches using themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
2.12.1 Defining a custom theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
2.12.2 The Graphical Theme Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
2.12.3 The Source Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.12.4 Fine-grained and broad-brush styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.12.5 Style configuration options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.12.6 Applying a theme at run time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
2.12.7 Styling IBM Process Portal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.13 Displaying coaches in different languages (using localization). . . . . . . . . . . . . . . . . . 67
2.13.1 Defining a localization resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.13.2 Localizing user interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.14 Performance considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
2.14.1 Consider the expected browser version when designing coaches . . . . . . . . . . . 70
2.14.2 Avoid building large coaches with too many controls . . . . . . . . . . . . . . . . . . . . . 70
2.14.3 Minimize the number of server-side calls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.14.4 Use client-side human services instead of heritage human services . . . . . . . . . 71
2.14.5 Minimize the size of business objects in the UI. . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.14.6 Judiciously use the Table control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
2.14.7 Pick an appropriate delay time for auto-complete fields . . . . . . . . . . . . . . . . . . . 72
2.15 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Chapter 3. Building controls using coach views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
3.1 Overview of a coach view structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Redbooks
Front cover
Deliver Modern UI for IBM BPM
with the Coach Framework and Other ApproachesRackley Boren
Eric Ducos
Ge Gao
Thalia Hooker
Matthew Oatts
Paul Pacholski
Dennis Parrott
Claudio Tagliabue
International Technical Support Organization
Deliver Modern UI for IBM BPM with the Coach
Framework and Other Approaches
October 2016
SG24-8355-00
© Copyright International Business Machines Corporation 2016. All rights reserved.Note to U.S. Government Users Restricted Rights -- Use, duplication or disclosure restricted by GSA ADP Schedule
Contract with IBM Corp.
First Edition (October 2016)
This edition applies to Version 8, Release 5, Modification 7 of IBM Business Process Manager.Note: Before using this information and the product it supports, read the information in "Notices" on
page ix. © Copyright IBM Corp. 2016. All rights reserved.iiiContents
Notices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Trademarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .x
IBM Redbooks promotions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Authors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Now you can become a published author, too! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Comments welcome. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Stay connected to IBM Redbooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Chapter 1. Delivering modern UI for IBM BPM using the Coach Framework and otherapproaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 User interactions with business processes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Coaches: Custom user interfaces for business processes . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Coach views: Custom user interface components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.1 Controls: Atomic coach views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.2 Reusable coach elements: Composite coach views. . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.3 Dynamic coach view interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.1 Task completion coaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.2 Dashboards. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.3 Client-side human services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Using coaches outside IBM BPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.1 Launching coaches using a URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.2 Coaches within JSR 286 portlets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.6 How coaches can benefit your organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.6.1 Seamless integration of UIs and process logic. . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.2 Tailored UI components for your business . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Chapter 2. Creating user interfaces with coaches. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1 Getting started with client-side human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.1 Creating a simple process flow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1.2 Creating a client-side human service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.1.3 Running a client-side human service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2 Building a simple coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.1 The coach editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.2 What you see is what you get (WYSIWYG) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2.3 Using variables to add controls to a coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2.4 Moving and deleting controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3 Configuring controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3.1 Setting the control binding variable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3.2 Using pseudo variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.3.3 Setting control configuration options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3.4 Defining control visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.3.5 Changing the positions of controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.4 Control toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.5 Working with documents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
iv Deliver Modern UI for IBM BPM with the Coach Framework and Other Approaches2.5.1 Document List control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.5.2 Document Viewer control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.5.3 Document Explorer control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.6 Creating a reusable group of controls (using a composite coach view) . . . . . . . . . . . . 35
2.7 Adding validation to a coach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.7.1 Required visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.7.2 Control configuration options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.7.3 Data Change event handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.7.4 Client-side script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.7.5 Server-side service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.7.6 When to use each validation technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.8 Deriving data from other fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
2.9 Making a coach responsive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
2.9.1 Multiple form factors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
2.9.2 Controls' responsive properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
2.9.3 Testing a responsive UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
2.9.4 Responsive design considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
2.10 Designing a coach using the grid layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.10.1 The Grid and Content views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.10.2 Grid templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
2.10.3 Grid cell properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
2.10.4 Adding content to the grid. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
2.10.5 Using sections with a grid layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2.10.6 Using a grid layout within a coach view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2.10.7 Grid view visual tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
2.10.8 Hiding grid cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
2.10.9 Reusing a grid layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
2.11 Using nested client-side human services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
2.12 Styling coaches using themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
2.12.1 Defining a custom theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
2.12.2 The Graphical Theme Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
2.12.3 The Source Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
2.12.4 Fine-grained and broad-brush styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.12.5 Style configuration options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
2.12.6 Applying a theme at run time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
2.12.7 Styling IBM Process Portal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.13 Displaying coaches in different languages (using localization). . . . . . . . . . . . . . . . . . 67
2.13.1 Defining a localization resource . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
2.13.2 Localizing user interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
2.14 Performance considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
2.14.1 Consider the expected browser version when designing coaches . . . . . . . . . . . 70
2.14.2 Avoid building large coaches with too many controls . . . . . . . . . . . . . . . . . . . . . 70
2.14.3 Minimize the number of server-side calls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.14.4 Use client-side human services instead of heritage human services . . . . . . . . . 71
2.14.5 Minimize the size of business objects in the UI. . . . . . . . . . . . . . . . . . . . . . . . . . 71
2.14.6 Judiciously use the Table control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
2.14.7 Pick an appropriate delay time for auto-complete fields . . . . . . . . . . . . . . . . . . . 72
2.15 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Chapter 3. Building controls using coach views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73