Adding new screens

The graphical components

The VDoc graphical layer has lots of graphical components to quickly build fitted forms.

Non-exhaustive list of available graphical components

Category Classes Description
Numbers CtlNumber Managing number elements
Dates CtlDate CtlDateTime Managing Date elements
Period CtlPeriodDate CtlPeriodDateTime Managing period elements
Texts CtlText CtlIconText Displaying simple text or with an icon elements
CtlMandatoryText Managing compulsory elements
CtlLocalizedText Managing displayed strings internationalization
CtlTextBox CtlTextArea Enabling text input
Lists CtlCheckBox Managing boolean values
CtlComboBox CtlSelectList Managing list elements see Code example of list
CtlCheckBoxGroup CtlRadioGroup Group of elements
Buttons CtlButton CtlImageButton CtlHyperLink see Code example using ActionListener and Code example using ConfirmBoxListener
Containers CtlContainer Managing composite elements see Code example of container
Views CtlListView Managing tables (columns, lines, cells) see Code example of views

Code example of List

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

Code 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 );

Code 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 )

Code example of container 

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 );

Code example of views 

// 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 );

The pack grouping every CltXXX components is com.axemble.vdp.ui.framework.widgets. These components may be used to create dynamic user interfaces. You must however note that there are no documents for the data handling. Indeed, these graphical components did not have any document notion (CoreDocument or GenericDocument).

Extract of the code from the DemoWizardProvider class enabling to add a page into a dynamic wizard 

public void readyState() 
{ 
        super.readyState(); 
        //the position of the "page1" recovery 
        int pos = this.abstractWizard.getPageIndex( "page1" ) + 1; 
        
        // new page named "newPage1" 
        creation CtlWizardPage wizardPage = new CtlWizardPage( this.abstractWizard, "newPage1" ); 
        this.abstractWizard.addPage( wizardPage, pos ); 
        pos++; wizardPage.setLabel( new CtlLocalizedText("LG_LABEL_PAGE_1") ); 
        wizardPage.setInformation( new CtlLocalizedText("LG_INFORMATION_1") ); 
        
        // add new entries 
        wizardPage.addEntry( "fldText", new CtlLocalizedText( "LG_TEXTE" ), new CtlTextBox( "valeur texte" ) ); 
        wizardPage.addEntry( "fldNumber", new CtlLocalizedText( "LG_NUMBER" ), new CtlNumber() ); 
        wizardPage.addEntry( "fldDate", new CtlLocalizedText( "LG_DATE" ), new CtlDate() ); 
        
        // new page named "newPage2" 
        creation wizardPage = new CtlWizardPage( this.abstractWizard, "newPage2" ); 
        this.abstractWizard.addPage( wizardPage, pos ); 
        pos++; wizardPage.setLabel( new CtlLocalizedText("LG_LABEL_PAGE_2") ); 
        wizardPage.setInformation( new CtlLocalizedText("LG_INFORMATION_2") ); 
        
        // add a list 
        CtlComboBox selectList = new CtlComboBox(); 
        selectList.addOption( new Option( "key1", getStaticString( "LG_VALUE1" ) ) ); 
        selectList.addOption( new Option( "key2", getStaticString( "LG_VALUE2" ) ) ); 
        selectList.setSelectedKey( "key1" ); 
        wizardPage.addEntry( "fldList", new CtlLocalizedText( "LG_LIST" ), selectList ); 
        
        // add a table
        CtlListView listView = new CtlListView(); 
        listView.createColumn( "col1", new CtlLocalizedText( "LG_COL1" ) ); 
        listView.createColumn( "col2", new CtlLocalizedText( "LG_COL2" ) ); 
        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 ); 
        wizardPage.addEntry( "fldTable", new CtlLocalizedText( "LG_TABLE" ), listView ); 
        
        // new page named "newPage3" 
        creation wizardPage = new CtlWizardPage( this.abstractWizard, "newPage3" ); 
        this.abstractWizard.addPage( wizardPage, pos ); 
        pos++; wizardPage.setLabel( new CtlLocalizedText("LG_LABEL_PAGE_3") ); 
        wizardPage.setInformation( new CtlLocalizedText("LG_INFORMATION_3") ); 
        
        Container container = new Container(new FreeLayout()); 
        CtlText textBidon = new CtlText(getStaticString( "LG_BIDON" )); 
        container.add( textBidon ); container.add( listView ); 
        container.add( textBidon ); 
        container.add( listView ); 
        wizardPage.setContent( container ); 
}

Extract of the code of SimpleTableField class which enables to create a table depending on the handled attribute-type 

for ( Iterator iter = attributes.iterator() ; iter.hasNext() ; ) 
{ 
        String attributeValues = (String)iter.next(); String[] extractedValues = StringUtils.split( attributeValues, SEPARATOR ); 
        String key = extractedValues[0]; 
        String type = extractedValues[1]; 
        String label = extractedValues[2]; 
        String value = extractedValues[3]; 
        CtlListView.Item item = this.listView.createItem( new CtlText( label ) ); 
        item.setParam( key ); 
        
        Widget widget = null; 
        if ( "string".equals( type ) ) 
        { 
                if ( NULL_VALUE.equals( value ) ) 
                widget = new CtlTextBox(); 
                else widget = new CtlTextBox( value ); 
        } 
        else if ( "number".equals( type ) ) 
        { 
                if ( NULL_VALUE.equals( value ) ) 
                widget = new CtlNumber(); 
                else { CtlNumber number = new CtlNumber(); 
                number.setIntegerOnly( false ); 
                number.setFloatValue( Float.valueOf( value ) ); 
                widget = number; } 
        } 
        else if ( "date".equals( type ) )
        { 
                if ( NULL_VALUE.equals( value ) ) widget = new CtlDate(); 
                else widget = new CtlDate( new Timestamp( Long.valueOf( value ).longValue() ) ); 
        } 
        // add the event when modifying the value 
        widget.addChangeListener( new ChangeListener() 
        { 
                public void onChange( ChangeEvent event )
                { 
                        SimpleTableField.this.aggregate.safeUpdateValue(); 
                } 
        } ); 
        CtlListView.Subitem subitem = this.listView.createSubitem( widget, item ); subitem.setParam( type ); 
}