Graphical components

Note

Please note, the elements presented here are on the border (or beyond…) of the SDK. These elements are therefore not necessarily maintained in version upgrades.

This page presents each graphical component present in the framework, as well as the main methods on the classes.

In Java, the methods associated with attributes (getter/setter) are accessible:

  • Directly from the class
  • On the linked component: recoverable on the class via get*InputComponent()

The fields

In addition to the graphical components, Process offers a whole set of objects named “fields” enabling to quickly develop screens via an XML description. These fields are available to build process documents forms (customization) and screens defined in the screens XML definition file.

Two notes about the description of these fields:

  • Shortcuts are available only in the form customization context.
  • The name attribute that identifies a screen field is called “property” in the form customization context.

Most of Java classes displayed in this section respect the same convention. For one Java class named XXXField, there is one Java class named CltXXX (graphical component: widget). A XXXField class is in fact a Clt XXX element linked to a document by an internal event mechanism .

Tip

In the case of screens defined in the definition file, fields are linked to a GenericDocument-type document. In the case of customization forms, fields are linked to a CoreDocument-type process document.

The following table lists the common attributes to every screen:

Attribute Description
name System name for the screen
action System name for the action assigned to the object represented by the screen.
label Translation ID corresponding to the screen title
information Translation ID corresponding to the screen information zone.
provider Provider class associated to the screen

All the fields are referenced in the associated studio section.

Widgets

Widget

Classe générique, mère de tous les widgets : tous les widgets héritent de cette classe.

Classe : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
addActionListener() Ajout d’un nouvel ActionListener
removeActionListener Suppression d’un ActionListener
isHidden()/setHidden() Gestion de la visibilité du widget
getParam()/setParam() Gestion du param du widget; pour rappel le param est un “objet métier” qui peut être déposé dans le widget et le suivre toute sa vie.
buildFireMessage() Construction d’un script JS d’envoi de message Ajax Process (nécessaire aux listeners)
getJavascriptId() Récupération de l’ID Javascript du widget
focus() Affecter le focus sur ce widget

CtlInputWidget

Classe générique pour tous les widgets avec une input de l’utilisateur.

Classe : com.axemble.vdp.ui.framework.widgets.CtlInputWidget

Héritage : com.axemble.vdp.ui.framework.foundation.Widget

Paramètre Description
isEditable()/setEditable() Gestion du caractère éditable.
addValidationRule()/clearValidationRules()/ hasValidationRules()/getValidationRules() Gestion des validators.
isMandatory()/setMandatory() Gestion du caractère obligatoire
setThrowEvents()/canThrowEventsInWebBrowser() Gestion des allers-retours serveur
getTabIndex()/setTabIndex() Gestion du tabindex HTML
getAccessKey()/setAccessKey() Gestion de l’accesskey HTML
inform() Affichage d’un message d’info sur le widget
setErrorInfo() Définition du message d’erreur en cas de souci de validation du widget.
isEmpty() Quand le widget peut-il être considéré comme vide
getDescription()/setDescription()/isDescription() Gestion de la description
focus()/isFocus() Gestion du focus.
getAssociatedLabel()/setAssociatedLabel() Gestion du libellé de widget associé (CtlText).

Boutons et liens

Bouton

Classe : com.axemble.vdp.ui.framework.widgets.CtlButton

Héritage : com.axemble.vdp.ui.framework.foundation.CtlAbstractAction

Paramètre Description
setCustomRenderer() Permet de définir un IRenderer pour le traitement du bouton
getMode()/setMode() default CtlButton.MODE_NORMAL; Permet de définir le mode du bouton parmi : CtlButton.MODE_NORMAL, CtlButton.MODE_DEFAULT (se lance automatiquement sur la touche entrée + skin mise en avant), CtlButton.MODE_DISABLED (skin dédiée)
getStyle()/setStyle() default CtlButton.STYLE_1; trois styles de boutons parmi : CtlButton.STYLE_1, CtlButton.STYLE_2, CtlButton.STYLE_3
getUrl()/setUrl() Définition de l’URL du bouton
getTarget()/setTarget() Définition de la target HTML
getOnclick()/setOnclick() Définition du javascript sur “onclick”
isDisabled()/setDisabled() Gestion de l’activation du widget
getAdditionnalCssStyle()/setAdditionnalCssStyle()/addAdditionnalCssStyle()

Example using ActionListener:

CtlButton demoAlertBtn = new CtlButton( "alert", new CtlLocalizedText( "LG_ALERT" ) ); 
demoAlertBtn.addActionListener( new ActionListener()  { 
	public void onClick( ActionEvent event ) {
		Navigator.getNavigator().showAlertBox("Message Alert !"); 
	} 
} ); 
getResourceController().getButtonContainer( IResourceController.TOP_CONTAINER ).addLast( demoAlertBtn );

Example using ConfirmBoxListener:

CtlButton demoConfirmBtn = new CtlButton( "confirm", new CtlLocalizedText( "LG_CONFIRM" ) ); 
button.addActionListener( new ActionListener() { 
	public void onClick( ActionEvent event ) { 
		Navigator.getNavigator().showConfirmBox( "Message Confirm !", new ConfirmBoxListener() {
			public void onCancel( ActionEvent event ) {
				Navigator.getNavigator().showAlertBox( "onCancel()" ); 
			} 
			public void onOk( ActionEvent event ) {
				Navigator.getNavigator().showAlertBox( "onOk()" ); 
			}; 
		} ); 
	} 
} ); 
getResourceController().getButtonContainer( IResourceController.TOP_CONTAINER ).addLast( demoConfirmBtn )

Bouton pour navigation

Ce type de bouton est dédié à une navigation vers un écran Process, via un NavigateContext.

Classe : com.axemble.vdp.ui.framework.widgets.CtlNavigationButton

Héritage : com.axemble.vdp.ui.framework.widgets.CtlButton

Paramètre Description
getClassName()/setClassName() Gestion de la classe de l’écran vers lequel on navigue
getMethodName()/setMethodName Gestion de la méthode de l’écran vers lequel on navigue
getObjectName()/setObjectName() Gestion du nom d’objet de l’écran vers lequel on navigue
getParameter…()/setParameter…() Gestion des paramètres de navigation
getContext() Récupération du NavigateContext construit par les méthodes préalables

Lien hypertexte

Classe : com.axemble.vdp.ui.framework.widgets.CtlHyperLink

Héritage : com.axemble.vdp.ui.framework.widgets.CtlAbstractAction

Paramètre Description
isActive()/setActive() Lien actif ou non
getUrl()/setUrl() Définition de l’URL
getTitle()/setTitle() Définition du title du lien
getTarget()/setTarget() Définition de la target HTML
getRel()/setRel() Définition du rel HTML du lien
getRev()/setRev() Définition du rev HTML du lien
isInnerSpan()/setInnerSpan() Présence d’un span sous le lien

Lien hypertexte pour navigation

Classe : com.axemble.vdp.ui.framework.widgets.CtlHyperLink

Héritage : com.axemble.vdp.ui.framework.widgets.CtlNavigationHyperLink

Mêmes méthodes que pour le widget CtlNavigationButton.

Contrôles textuels

Libellé

Classe : com.axemble.vdp.ui.framework.widgets.CtlText

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
getText()/setText() Définition du texte du label
isStrong()/setStrong() Passage du texte en strong

Libellé traduit

Ici le libellé est traduit, une clé de traduction est fournie.

Classe : com.axemble.vdp.ui.framework.widgets.CtlLocalizedText

Héritage : com.axemble.vdp.ui.framework.widgets.CtlText

Mêmes méthodes que le widget CtlText

Texte avec une icône devant

Icône avec un libellé à côté.

Classe : com.axemble.vdp.ui.framework.widgets.CtlIconText

Héritage : com.axemble.vdp.ui.framework.widgets.CtlText

Paramètre Description
getIcon()/setIcon() Définition de l’URL de l’icône.

Mandatory text

Managing compulsory elements.

Classe : com.axemble.vdp.ui.framework.widgets.CtlMandatoryText

Héritage : com.axemble.vdp.ui.framework.widgets.CtlLocalizedText

Mêmes méthodes que le widget CtlLocalizedText.

Text box

Enabling text input.

Classe : com.axemble.vdp.ui.framework.widgets.CtlTextBox

Héritage : com.axemble.vdp.ui.framework.widgets.CtlInputWidgetComponent

Text area

Enabling text input

Classe : com.axemble.vdp.ui.framework.widgets.CtlTextArea

Héritage : com.axemble.vdp.ui.framework.widgets.CtlTextBox

Nombres

Managing number elements.

Classe : com.axemble.vdp.ui.framework.widgets.CtlNumber

Héritage : com.axemble.vdp.ui.framework.widgets.CtlTextBox

Date et période

Date

Managing Date elements.

Classe : com.axemble.vdp.ui.framework.widgets.CtlDate

Héritage : com.axemble.vdp.ui.framework.widgets.CtlInputWidgetComponent

Date with time

Managing DateTime elements.

Classe : com.axemble.vdp.ui.framework.widgets.CtlDateTime

Héritage : com.axemble.vdp.ui.framework.widgets.CtlDate

Period

Managing period elements.

Classe : com.axemble.vdp.ui.framework.widgets.CtlPeriodDate

Héritage : com.axemble.vdp.ui.framework.widgets.CtlInputWidgetComponent

Period with time

Managing period with time elements.

Classe : com.axemble.vdp.ui.framework.widgets.CtlPeriodDateTime

Héritage : com.axemble.vdp.ui.framework.widgets.CtlPeriodDate

Images

Image

Affichage simple d’une image.

Classe : com.axemble.vdp.ui.framework.widgets.CtlImage

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
setPath()/setUrl()/getUrl() Définition de l’URL de l’image (relative ou absolue)

Image indicatrice d’état

Affichage d’une image indicatrice d’état : pastille de couleur : rouge, vert, gris, orange.

Classe : com.axemble.vdp.ui.framework.widgets.CtlImageState

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
setState()/setStateFromBoolean() Les états peuvent être : CtlImageState.STATE_OFF, CtlImageState.STATE_ON, CtlImageState.STATE_UNDEFINED, CtlImageState.STATE_MIDDLE

Image cliquable

Classe : com.axemble.vdp.ui.framework.widgets.CtlImageButton

Héritage : com.axemble.vdp.ui.framework.widgets.CtlAbstractAction

Paramètre Description
getImageByActionName() Permet de générer l’URL relative vers une icone d’action de la skin; exemple “edit”, “delete”, …
getTarget()/setTarget() Définition de la target HTML
setImage()/setImageUrl() Définition du chemin vers l’image (relative ou absolue)
setCustomRenderer() Permet de définir un IRenderer pour le traitement du bouton
getUrl()/setUrl() Définition de l’URL du bouton
getTitle()/setTitle() Définition du title de l’image
getCssImageClass()/setCssImageClass() Définition d’une classe CSS sur l’image du bouton
getRel()/setRel() Définition du rel HTML du lien
getOnclick()/setOnclick() Définition du javascript sur “onclick”

Image cliquable pour navigation

Classe : com.axemble.vdp.ui.framework.widgets.CtlNavigationImageButton

Héritage : com.axemble.vdp.ui.framework.widgets.CtlImageButton

Mêmes méthodes que pour le widget CtlNavigationButton.

Lists

CheckBox

Classe : com.axemble.vdp.ui.framework.widgets.CtlCheckBox

Héritage : com.axemble.vdp.ui.framework.widgets.CtlInputWidgetComponent

CheckBox group

Classe : com.axemble.vdp.ui.framework.widgets.CtlCheckBoxGroup

Héritage : com.axemble.vdp.ui.framework.widgets.list.CtlAbstractListMultipleSelectionComponent

ComboBox

Classe : com.axemble.vdp.ui.framework.widgets.CtlComboBox

Héritage : com.axemble.vdp.ui.framework.widgets.list.CtlAbstractListSingleSelectionComponent

Example:

CtlComboBox selectList = new CtlComboBox(); 
selectList.addOption( new Option( "key1" ,getStaticString( "LG_VALUE1" ) ) ); 
selectList.addOption( new Option( "key2", getStaticString( "LG_VALUE2" ) ) ); 
selectList.setSelectedKey( "key1" );

Selective list

Classe : com.axemble.vdp.ui.framework.widgets.CtlSelectList

Héritage : com.axemble.vdp.ui.framework.widgets.list.CtlAbstractListMultipleSelectionComponent

Radio group

Classe : com.axemble.vdp.ui.framework.widgets.CtlRadioGroup``

Héritage : com.axemble.vdp.ui.framework.widgets.list.CtlAbstractListSingleSelectionComponent

List view

Classe : com.axemble.vdp.ui.framework.widgets.CtlListView

Héritage : com.axemble.vdp.ui.framework.widgets.CtlInputWidget

Example:

// add a table CtlListView listView = new CtlListView(); 
// create the table columns 
listView.createColumn("col1",new CtlLocalizedText("LG_COL1")); listView.createColumn("col2",new CtlLocalizedText("LG_COL2") ); 
// create table elements 
CtlListView.Item item = listView.createItem(new CtlText("1") ); item.setParam( "key1" ); 
listView.createSubitem( new CtlText( "A" ), item ); item = listView.createItem( new CtlText( "2" ) ); item.setParam( "key2" ); 
listView.createSubitem( new CtlText( "B" ), item );

Container et inclusion

Container

Container permettant de structurer des widgets. Un container peut avoir un layout et on peut ensuite y déposer des widgets. On peut évidemment déposer un container dans un container.

Classe : com.axemble.vdp.ui.framework.runtime.Container

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
add()/add…()/remove()/clear()/getWidgets() Gestion des widgets dans le container
getLayout()/setLayout() Gestion du layout du container

Example:

CtlText text = new CtlLocalizedText( "LG_TEXTE" );
// create the container 
Container container = new Container(new FreeLayout()); 
// add text 
container.add( text ); 
// add a list 
container.add( selectList );  
// add a view 
container.add( listView );

Layouts des containers

Des layouts existant sont mis à disposition. Il est possible de développer ses propres layouts en héritant de com.axemble.vdp.ui.framework.foundation.layouts.AbstractLayout.

Layout Description
com.axemble.vdp.ui.framework.foundation.layouts.FreeLayout Layout neutre, pas de rendu HTML particulier
com.axemble.vdp.ui.framework.foundation.layouts.HorizontalLayout Layout horizontal : utilise des tableaux
com.axemble.vdp.ui.framework.foundation.layouts.VerticalLayout Layout vertical : utilise des tableaux
com.axemble.vdp.ui.framework.foundation.layouts.SpanLayout Layout span : place des spans autour de chaque widget
com.axemble.vdp.ui.framework.foundation.layouts.ListLayout Layout UL/LI; une méthode setCssClass permet de définir une classe CSS sur la UL
com.axemble.vdp.ui.framework.foundation.layouts.OrderedListLayout Layout OL/LI; une méthode setCssClass permet de définir une classe CSS sur la OL

Element HTML

Permet de render une élément HTML.

Classe : com.axemble.vdp.ui.framework.widgets.CtlHtmlTag

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

A la construction, on définit le name de l’élément HTML et le widget qui sera déposé à l’intérieur.

IFrame

Permet de déclarer une IFrame.

Classe : com.axemble.vdp.ui.framework.widgets.CtlIFrame

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
getStyle()/setStyle() Classe CSS sur l’IFrame
getUrl()/setUrl() Définition de l’URL de l’IFrame

Include (via JSP)

Permet une inclusion du contenu HTML d’une URL via JSP.

Classe : com.axemble.vdp.ui.framework.widgets.CtlInclude

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

A la création du widget, on définit l’URL concernée.

Permet de déclarer un menu déroulant. Le menu peut intégrer CtlPopupMenuItem. Dans chaque item, il est possible de définir des sous-items.

Classe : com.axemble.vdp.ui.framework.widgets.CtlPopupMenu

Paramètre Description
addItem()/getItems() Permet d’ajouter un nouveau CtlPopupMenuItem qui aura été construit préalablement
addSeparator() Permet d’ajouter un séparateur dans le menu

CtlPopupMenuItem

Ce widget est contenu dans un menu déroulant Il hérite des CtlHyperLink et donc de toutes leurs méthodes.

Classe : com.axemble.vdp.ui.framework.writers.CtlPopupMenuItem

Héritage : com.axemble.vdp.ui.framework.widgets.CtlHyperLink

Paramètre Description
addStyle()/getStyle()/setStyle() Permet de déposer une classe CSS sur l’entrée de menu
addSubItem()/getSubItems() Permet de gérer les sous-items

Section

Classe : com.axemble.vdp.ui.framework.widgets.CtlSection

Sous-section

Classe : com.axemble.vdp.ui.framework.widgets.CtlSubSection

Autre

Barre de progression

Ce widget présente une simple barre de progression

Classe : com.axemble.vdp.ui.framework.widgets.CtlBar

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
getPercentage()/setPercentage() Définition du pourcentage courant dans la barre
getText()/setText() Définition du texte de description de la barre

Captcha

Ce widget permet de représenter un captcha pour validation.

Classe : com.axemble.vdp.ui.framework.widgets.CtlCaptcha

Héritage : com.axemble.vdp.ui.framework.widgets.CtlInputWidget

Paramètre Description
validate() Lance la validation du widget
isValidated() Le captcha est-il validé ?
refresh() Lance une regénération de l’image du captcha

Composant arbre

Ce widget permet de présenter un arbre avec possibilité de présentation d’icônes et de sélection sur les noeuds.

Classe : com.axemble.vdp.ui.framework.widgets.CtlTreeView

Héritage : com.axemble.vdp.ui.framework.widgets.Widget

Paramètre Description
add()/clear()/iterator()/size() Gestion des sous-entries
getSelectedEntries() Récupération des TreeEntry sélectionnées dans l’arbre
addSelectedEntries() Gestion des selected entries
getSelectedEntry(entry) Récupération de la première sous-entry sélectionnée
recursiveSelectChildren() Permet de sélectionner une entry récursivement : cette entry et tous les enfants
recursiveSelectParent() Permet de sélectionner une entry récursivement : cette entry et tous les parents
getTotalSize() Récupération de la taille totale de l’arbre

TreeEntry

Ce widget représente un noeud dans notre arbre.

Paramètre Description
getState()/setState() Définition de l’état du noeud parmi : TreeEntry.COLLAPSED, TreeEntry.EXPANDED, TreeEntry.NOTEXPANDABLE
getParent()/setParent() Définition du noeud parent
getLabel()/setLabel() Définition du libellé du noeud
getParam()/setParam() Gestion du param du widget; pour rappel le param est un “objet métier” qui peut être déposé dans le widget et le suivre toute sa vie
isSelected()/setSelected() Le noeud est-il sélectionné ou non ?
add()/clear()/iterator()/size() Gestion des sous-entries

Source : https://wiki.myvdoc.net/xwiki/bin/view/Dev+Floor/ReferenceWidgets