Task user interface

Introduction

To define the user interface for a task, a .zul file must be located at the ui directory, and the corresponding task tag should be located at ui.xml file.

The user interface must be a ZK .zul page. This zul page must contain a task tag. This custom ZK tag is needed to properly manage the user interface behaviour.

Attributes

The task component extends es.caib.bpm.ui.WorkflowWindow and it has the following custom attributes:

Attribute	Description
canAddAttachments	a true value enables the user to upload files attached to the process instance
canDeleteAttachments	a true value enables the user to delete attached files from the process instance
task	read only attribute that exposes current task information
processInstance	read only attribute that exposes current process information
signatureHandler	read only handler responsible for recognized signature generation.
engine	read only BPM engine handler

The task component will receive some custom events:

Event	Description
onLoad	The task information has been loaded on the task component
onSave	The task information is going to be persisted
onPrepareTransition	A transition is going to be performed. The transition name is sent as event data If the event launches a UserWorkflowException, the transition will be cancelled
onCompleteTransition	A transition is performed. The transition name is sent as event data
onTabSelected	The task tab has been selected or deselected. The tab id is sent as event data

In order to show or modify task attributes, the task tag is included in a data model context that eases components data binding.

See ZK Data Binding for details.

Example

Here is a sample zul page used to authorize synchronization servers connection.

<zk xmlns="http://www.zkoss.org/2005/zul"
    xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:zk="http://www.zkoss.org/2005/zk"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
    <task id="window" width="600px">
        <attribute name="onPrepareTransition">
            item = lb.selectedItem;
            if (item == null || item.value.length() == 0) {
                throw new es.caib.bpm.toolkit.exception.UserWorkflowException("Request must be approved or denied");
            }
        </attribute>
        <grid fixedLayout="true">
            <columns visible="false">
                <column width="180px">Attribute</column>
                <column>Value</column>
            </columns>
            <rows>
                <row>
                    <label value="User" />
                    <hbox width="100%">
                        <!-- Display task's attribute user -->
                        <textbox width="98%"
                            readonly="true" bind="/user" /> 
                    </hbox>
                </row>
                <row>
                    <label value="Name" />
                    <hbox width="100%">
                        <!-- Display task's attribute name -->
                        <textbox width="98%"
                            readonly="true" bind="name" />
                    </hbox>
                </row>
                <row>
                    <label value="Surname" />
                    <hbox width="100%">
                        <!-- Display task's attribute surname -->
                        <textbox width="98%"
                            readonly="true" bind="/surname" />
                    </hbox>
                </row>
                <row>
                    <label value="Server name" />
                    <hbox width="100%">
                        <!-- Display task's attribute hostname -->
                        <textbox width="98%"
                            bind="/hostname" readonly="true" />
                    </hbox>
                </row> <row>
                    <label value="Approve" />
                    <hbox width="100%">
                        <!-- Listbox bound to task's attribute aprove.
                            Any change will be stored on the task -->
                        <listbox id="lb" width="98%" mold="select" bind="/approve">
                            <listitem value="">
                                <listcell label="Select an action to do"/>
                            </listitem>
                            <listitem value="yes">
                                <listcell label="Approve"/>
                            </listitem>
                            <listitem value="no">
                                <listcell label="Reject"/>
                            </listitem>
                        </listbox>
                    </hbox>
                </row>
            </rows>
        </grid>
    </task>
</zk>