QuickForm UI Widgets Reference

[Pages:100]Interstage Business Process Manager V11.2

QuickForm UI Widgets Reference

B1WS-0869-03ENZ0(00) January 2012

Preface

Purpose of this Manual This manual describes the UI widgets provided with QuickForm.

Structure of this Manual The structure of this manual is as follows: Chapter 1 Introduction Provides an overview of UI widgets. Chapter 2 Screen Widgets Explains the widgets which are displayed on the screen. Chapter 3 Additional Functional Widgets Explains the additional widgets of the various functions. Chapter 4 Notes Gives notes on using UI widgets.

Abbreviations The table below lists the product name abbreviations that are commonly used in this manual. Note that the trademark (TM) and registered trademark (?) symbols are omitted throughout this manual.

Abbreviation Internet Explorer

Full Name

Microsoft(R) Internet Explorer(R) 7, and Microsoft(R) Windows(R) Internet Explorer(R) 8 (Compatible Mode)

Export Permission

This manual may refer to technology under the control of the Exchange and Foreign Control Law. Permission may be required in order to export such information to non-residents.

Publication Date Revision Trademarks

All Rights Reserved, Copyright ? FUJITSU LIMITED 2012

January 2012

3

Interstage is a trademark of Fujitsu Limited. All other trademarks and trade names mentioned have been registered by their respective manufacturer.

All rights reserved, including those of translation into other languages. No part of this manual may be reproduced in any form whatsoever by means of photocopying, microfilming or any other process without the written permission of Fujitsu Limited.

High Risk Activity

The Customer acknowledges and agrees that the Product is designed, developed and manufactured as contemplated for general use, including without limitation, general office use, personal use, household use, and ordinary industrial use, but is not designed, developed and manufactured as contemplated for use accompanying fatal risks or dangers that, unless extremely high safety is secured, could lead directly to death, personal injury, severe physical damage or other loss (hereinafter "High Safety Required Use"), including without limitation, nuclear reaction control in nuclear facility, aircraft flight control, air traffic control, mass transport control, medical life support system, missile launch control in weapon system. The Customer shall not use the Product without securing the sufficient safety required for the

- i -

High Safety Required Use. In addition, Fujitsu (or other affiliate's name) shall not be liable against the Customer and/or any third party for any claims or damages arising in connection with the High Safety Required Use of the Product.

- ii -

Contents

Chapter 1 Introduction..............................................................................................................................................................1 1.1 UI Widgets...........................................................................................................................................................................................1 1.2 Using UI Widgets................................................................................................................................................................................2 1.2.1 Describing UI Widgets.................................................................................................................................................................2 1.2.2 Style Settings................................................................................................................................................................................4 1.2.3 Attributes that can be used with UI Widget tags and tags.....................................................................................5 1.2.4 Number of Screen Widgets per Page............................................................................................................................................5

Chapter 2 Screen Widgets.......................................................................................................................................................6 2.1 Form Widgets......................................................................................................................................................................................6 2.1.1 Text...............................................................................................................................................................................................6 2.1.2 TextInput.......................................................................................................................................................................................8 2.1.3 CheckBox....................................................................................................................................................................................11 2.1.4 RadioButton................................................................................................................................................................................13 2.1.5 TextArea.....................................................................................................................................................................................16 2.1.6 Select...........................................................................................................................................................................................18 2.1.7 ComboBox..................................................................................................................................................................................22 2.1.8 DateInput....................................................................................................................................................................................25 2.1.9 NumberInput...............................................................................................................................................................................28 2.1.10 SelectList..................................................................................................................................................................................30 2.1.11 CheckList..................................................................................................................................................................................34 2.2 Container Widgets.............................................................................................................................................................................38 2.2.1 ViewContainer............................................................................................................................................................................38 2.2.2 Panel............................................................................................................................................................................................39 2.2.3 ViewStack...................................................................................................................................................................................41 2.2.4 TabPanel.....................................................................................................................................................................................42 2.2.5 FragmentContainer.....................................................................................................................................................................49 2.3 Table Widgets....................................................................................................................................................................................52 2.3.1 TableView...................................................................................................................................................................................52 2.3.2 TableEdit.....................................................................................................................................................................................58 2.3.3 ViewColumn...............................................................................................................................................................................64 2.3.4 ButtonForTable...........................................................................................................................................................................67 2.3.5 ViewColumnGroup.....................................................................................................................................................................70 2.4 Calendar Widgets...............................................................................................................................................................................71 2.4.1 Calendar......................................................................................................................................................................................71 2.4.2 PopupCalendar............................................................................................................................................................................77 2.4.3 CalendarButton...........................................................................................................................................................................80 2.5 Common Properties for Screen Widgets...........................................................................................................................................82 2.6 Style Properties..................................................................................................................................................................................85

Chapter 3 Additional Functional Widgets...............................................................................................................................89 3.1 Grouping Functions...........................................................................................................................................................................89 3.1.1 RadioButtonGroup......................................................................................................................................................................89 3.2 Common Properties for Additional Functional Widgets...................................................................................................................90

Chapter 4 Notes.....................................................................................................................................................................91 4.1 Notes for Screen Widgets..................................................................................................................................................................91 4.1.1 General Notes for Screen Widgets..............................................................................................................................................91 4.1.2 Errors for Displaying Screen Widgets........................................................................................................................................91 4.1.3 Behavior when child elements are specified for widgets that cannot contain child elements....................................................91 4.1.4 The width and height of Screen Widget.....................................................................................................................................91 4.1.5 Layout of Screen Widgets...........................................................................................................................................................92 4.1.6 Undo Using Ctrl+z in Text Input Widgets..................................................................................................................................92 4.1.7 Number of Screen Widgets per Page..........................................................................................................................................92 4.1.8 Notes for zoom in and zoom out a Page Size.............................................................................................................................92

- iii -

4.2 Common Notes for All Widgets........................................................................................................................................................92 4.2.1 Notes for Focus Shifting in Internet Explorer............................................................................................................................92 4.2.2 Notes for Number Type Data......................................................................................................................................................92

4.3 Error Messages..................................................................................................................................................................................92 Index.......................................................................................................................................................................................95

- iv -

Chapter 1 Introduction

This chapter gives an overview of the UI widgets.

1.1 UI Widgets

"UI widgets" is a generic name for a group of widgets defined in a QuickForm. There are the following two types: - Screen Widgets - Additional Functional Widgets

Screen Widgets "Screen widgets" is a group of widgets which are displayed on the screen such as text input fields, tables, etc. Widgets are transformed into HTML elements at runtime in the Web browser if you specify widgets in the accepted format for HTML.

The following table shows all screen widgets:

Name Text TextInput CheckBox

RadioButton TextArea Select ComboBox

DateInput NumberInput SelectList CheckList ViewContainer

Type (This value is defined to type property)

Overview

IBPMText

The widget to display text. This corresponds to text in HTML.

IBPMTextInput

The widget to input and edit a single line of text. This corresponds to and in HTML.

IBPMCheckBox

The widget to display an "on/off" (selected or cleared) check box. This corresponds to in HTML.

IBPMRadioButton

The widget to display a radio button. This corresponds to in HTML.

IBPMTextArea

The widget to input and edit one or more lines of text. This corresponds to in HTML.

IBPMSelect

The widget to display a list from which single or multiple items can be selected. This corresponds to in HTML.

IBPMComboBox

The widget to display a combo box (sometimes called "dropdown box"), which consists of an input field and a list of items from which a single item can be selected. It is also possible to enter text directly in the input field.

IBPMDateInput

A type of TextInput widget. This widget to input and edit the date and time.

IBPMNumberInput

A type of TextInput widget. This widget to input and edit numerical values.

IBPMSelectList

The widget to display a list from which single or multiple items can be selected.

IBPMCheckList

The widget to display a list with check box items.

IBPMViewContainer

The general container widget. This widget can contain HTML elements, and the whole can be handled as one widget. ViewContainer itself does not have a view component.

- 1 -

Name Panel

ViewStack TabPanel FragmentContainer TableView TableEdit ViewColumn ButtonForTable ViewColumnGroup Calendar PopupCalendar CalendarButton

Type (This value is defined to type property)

Overview

IBPMPanel

The widget to display a container with a title bar. This consists of title part and body part. This widget can contain HTML elements for the body part.

IBPMViewStack

The widget to switch between containers in the same position.

IBPMTabPanel

The widget to display containers on tabbed pages. Users can switch between pages by clicking the tabs.

IBPMFragmentContainer The container widget to load and display contents from an external source after the page has been displayed.

IBPMTableView

The widget to display two-dimensional data in table format. Data can be sorted in ascending or descending order.

IBPMTableEdit

The widget to display two-dimensional data in table format and edit the data.

IBPMViewColumn

The widget to define columns for TableView and TableEdit.

IBPMButtonForTable

The widget to display a button. This is used with TableEdit to add a new row or delete a selected row.

IBPMViewColumnGroup The widget to group columns defined with ViewColumn.

IBPMCalendar

The widget to display a calendar and select a date.

IBPMPopupCalendar

The widget to display a popup calendar window.

IBPMCalendarButton

The button widget to display a popup calendar when pressed. This is used with PopupCalendar.

Additional Functional Widgets Additional functional widgets add functions to screen widgets.

Name RadioButtonGroup

Type (This value is defined to type property)

Overview

RadioButtonGroup

The widget to group radio buttons. Using this widget, you can group radio buttons together into a group.

1.2 Using UI Widgets

- For information on basic descriptions, refer to section 1.2.1 Describing UI Widgets. - For information on style settings, refer to section 1.2.2 Style Settings.

1.2.1 Describing UI Widgets

UI widgets are described in HTML using the tag or tag. Format for the tag: Format for the tag:

- 2 -

Attribute rcf:id

rcf:type rcf:property_name

Description

Specifies the widget ID (optional). In Interstage BPM Studio, you can specify a User Defined Attribute (UDA) in this property to overwrite other specific property with the UDA value when the widget is initialized. And the value is saved to the UDA value.

This id property's value format is uda_ plus .

Refer to 2.5 Common Properties for Screen Widgets for information on how to specify a UDA.

Specifies the widget type.

Specifies details such as the properties and style properties defined for each widget.

For example, to relate this widget to UDA (UDA id is Variable1) and to specify the maxLength property and the color property for TextInput, describe as follows:

Note that you can describe some screen widgets with either the tag or the tag, but you must describe certain screen widgets with the tag. For the widgets that you can describe with either or , note the following difference in display:

- When described with the tag, line feed is inserted before and after the widget. - When described with the tag, line feed is not inserted before and after the widget. For more details on each screen widget, refer to Chapter 2 Screen Widgets. For additional functional widgets, there is no difference whether you describe the tag or tag.

Point

Note the following points when describing UI widgets: - End tags Always include an end tag, even when describing widgets that contain no child elements. If you describe such widgets as empty elements, subsequent widgets may not be displayed. - Correct example:

- Incorrect example:

- Character strings starting with "rcf-" Character strings that start with "rcf-" have a special meaning in QuickForm. For this reason, do not specify a character string starting with "rcf-" as the value of the following: - HTML id attributes - HTML style attributes - rcf:id attributes

- rcf:id attributes and HTML id attributes When you specify the rcf:id attribute, the ID value that you specify must satisfy the following conditions: - It must be unique in the window for which it is specified. For example, during delayed loading of a window (when only a part of the window is prepared separately and the window information is loaded in the background while the user operates the window), all of the widget IDs, including the window information loaded by delayed loading, must be unique.

- 3 -

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download