DynamicForm, simple details on which I spent too much time

Pas très compliqué, mais j'ai passé plus de temps que j'aurais voulu sur certains détails:

1°) Les FormItem ne peuvent pas être dimensionnés à l'aide de pourcentage du genre setWidth("80%");
Le problème c'est que dans mon source j'avis des endroits ou cela marchait...... Oui mais avec setWidth("100%"). Rien dans le javadoc par contre dans le source:
  public void setWidth(String width) {
  if("100%".equals(width)) width = "*";
  assert width.indexOf("%") == -1 : "FormItems do not support percent sizing.";
  setAttribute("width", width)
   }
2°) J'avais plusieurs RadioGroupItem horizonatux dans un formulaire certains avec des options courtes (Oui, Non ) et d'autres beaucoup plus longues. Ces optons ne se trouvaient donc pas alignées
Seule solution que j'ai trouvée: utilisée une méthode pour mettre toutes les chaines de caractères des options à la même longueur. Par contre on ne peux pas ajouter des espaces il faut mettre des "&nbsp"
for(int i=0;i<(lgReturn-lgSource);i++){
            returnString += "&nbsp";
}

3°) J'avais besoin de mettre une image dans le formulaire
CanvasItem imageFromTo = new CanvasItem();   
 Img img = new Img();
 img.setSrc("64/deplacer.png");
 img.setVisible(true);
 img.setParentElement(image);
 imageFromTo.setCanvas(img);
 imageFromTo.setWidth(48);
 imageFromTo.setHeight(48);
 imageFromTo.setTitle("");
Au début mon image ne s'affichait pas car j'étais passé par une Canvas intermédiaire et c'est celui ci que j'attribuait au CanvasItem.

    Canvas image = new Canvas();
        image.setWidth(48);
        image.setHeight(48);
        Img img = new Img();
        img.setSrc("64/deplacer.png");
        img.setVisible(true);
        img.setParentElement(image);

4°) TextAreaItem: pour les scrollBar et supprimer la poignée de redimmensionnement il faut passer par les Css.
                                    
                                                      ------------------------------------------------


1°) FormItem cannot be sized using percentage but setWidth("100%") works nothing in the javadoc but in the source .....

2°) Alignment problem of different length option text with  Horizontal RadioGroup, only solution I found was to  concatenate the text with a variable "&nbsp" to get constant length option text.


3°) I need to add an image in the dynamicForm. The first time I use an intermediate Canvs which I set to the CanvasItem. The image didn't show up. Using directly the image is working right.


4°) TextAreaItem: to get the scrollBars and remove the resize handle we need to use css.

ListGrid without datasource

I have several existing RPC services so I don'use actually Datasources.

I have a ListGrid which I want to use to display data coming from one of these services. I wanted also to be able to create, modify and delete  new records.

So:
1 ListGrid + 3 buttons for create, modify and delete + 1 button to validate.
.When the edit is finished I use the validate button to trigger EditComplete event with the method
listGrid.saveAllEdits();
In the EditCompletHandler :
I detect the creation with event.getOldRecord which in this case is null.
If not null  I'm in the modify case.
To read the values, as the edited values are separated from the listgrid data, we need to use the  event.getNewValues(). So after reading the new value and knowing if I need to create or modify I instanciate the right serializable object and I set its attribute with the new values

A problem arise  to process the delete case, since the new created record can't be selected(even if the selected record is ok), so at the end as I don't know yet how to do it I added a context menu  to avoid erasing the wrong record.

Note(31/10) : I was wrong to think it was ok, I had to  use the Delete column with:
    listGrid.setCanRemoveRecords(true);       
   listGrid.setRemoveIcon("16/supprimer.png");
It's the only way I found to delete a new fresh record.

Note(03/11/2011): The problem is: there is noway to be notified when the RemoveICon is clicked and one record deleted. So I think I will ask the user to either discard all the edits or save first and delete after... not really satisfying.... Widget working hand to hand with datasource everything is ok but without databinding there is a lot of work around to find.

listGrid.addEditCompleteHandler(new EditCompleteHandler() {
 @Override
public void onEditComplete(EditCompleteEvent event) {
  int rangee = event.getRowNum();   
  Record rec = event.getOldRecord();
  if(rec == null){
    SC.say("ADDING NEW RECORD");
  }else{
  SC.say("MODIFY THE SELECTED RECORD");
  }
  Map lesValeurs  = event.getNewValues();               
  String newLibelle = (String) lesValeurs.get("libelle");
  String newcode =(String) lesValeurs.get( "code");
  Date newDebut =(Date) lesValeurs.get( "dateDeDebut");
  Date newFin = (Date) lesValeurs.get( "dateDeFin");
  MyObjectDTO myObject = new MyObjectDTO();
  myObject.setLibelle(newLibelle);
............

ButtonItem btnAdd = new ButtonItem();
btnAdd.addClickHandler(new ClickHandler() {
 @Override
public void onClick(ClickEvent event) {
  listGrid.setCanEdit(true);
  listGrid.startEditingNew();
  }
});

ButtonItem btnModify = new ButtonItem();
btnModify.addClickHandler(new ClickHandler() {
 @Override
public void onClick(ClickEvent event) {
   ListGridRecord currentRecord = listGrid.getSelectedRecord();
   if(currentRecord != null){
      listGrid.startEditing(listGrid.getRecordIndex (currentRecord),1,true);
                }
            }
        });

Window / basics

• Utiliser un header si on a besoin de title, icon, buttons
• On ajoute des items et non pas des members
• setAutoSize() pour re-dimmensionner automatiquement
• setKeepInParentRect() pour empêcher de ne plus pouvoir repositionner la fenêtre lorsque le header n'est plus visible.
• setDismissOnOutsideClick(true);  pour fermer la fenêtre dès que l'on clicque en dehors
• setShowMinimizeButton(false); pour ne pas inclure l'icone de réduction (idem pour close et maximize)
   

• We need the header if we want title, icon, buttons
• We don’t add members but items
• setAutoSize() to resize automatically
• setKeepInParentRect() to avoid to get the header by which the window is draggable unreachable.
• setDismissOnOutsideClick(true);  to close the window as soon as we click outside of it.
• setShowMinimizeButton(false); to remove the minimize icon (same for close and maximize)

DynamicForm + CanvasItem (2 IButton)

Même si on peut jouer avec le setStartRow et setEndRow il n'est pas toujours très pratique de positionner des boutons dans un formulaire comme on le désire.
 Dans certains cas je n'utilise pas de ButtonItem mais plutôt un CanvasItem qui va inclure un HLayout contenant lui même des boutons et des LayoutSpacer pour assurer leur centrage, on peut éventuellement fixer la largeur de ceux-ci :

public class ValiderAnnulerItem extends CanvasItem{

    private MyDialogButton btnValidate ;
    private MyDialogButton btnCancel ;
   
    public MyDialogButton getBtnValidate() {
        return btnValidate;
    }
    public void setBtnValider(MyDialogButton btnValidate) {
        this.btnValidate = btnValidate;
    }
    public MyDialogButton getBtnAnnuler() {
        return btnCancel;
    }
    public void setBtnAnnuler(MyDialogButton btnCancel) {
        this.btnCancel = btnCancel;
    }
   
    HLayout lesBoutons = new HLayout();
    public ValiderAnnulerItem(){
        this.setTitle("");
    }
   
    public void initialize(){
        lesBoutons.setHeight(btnValidate.getHeight() +5);
        lesBoutons.addMember(new LayoutSpacer());
        lesBoutons.addMember(btnValidate);
        lesBoutons.addMember(new LayoutSpacer());
        lesBoutons.addMember(btnCancel);
        lesBoutons.addMember(new LayoutSpacer());
        this.setCanvas(lesBoutons);
    }
}
A l'utilisation:
ValiderAnnulerItem canvasButtons = new ValiderAnnulerItem();
        canvasButtons.setBtnValider(btnValidate);
        canvasButtons.setBtnAnnuler(btnCancel);
        canvasButtons.initialize();
..............       
          
        f.setItems(...........,canvasButtons);

Even if we can position ButtonItem in a DynamicForm with the setStartRow and setEndRow, it's not always very practical to get the appearance we like to obtain.
So sometime I use in place a CanvasItem subclass with  IButton subclass (which fire business events via the SimpleEventBus). In this case we can use a normal Hlayout (we could use a Vlayout depending of a property...) to setup the arrangement we need. I use LayoutSpacer with or without setting their width to center the buttons.

Un objet Session / Session Object to share objects

Avant d'implémenter le SimpleBusEvent j'ai eu besoin d'échanger des objets entre différents composants de mon application (Par exemple des attributs d'un record de listgrid lors de sa sélection ou le record en entier dont je peux avoir besoin dans un autre panel) .

 Pour cela j'ai définit une classe utilitaire Session qui me permet de travailler comme avec une Session en Asp.net ou en Php mais coté client. Pour éviter les problèmes usuels de faute de frappe sur la clé j'ai créé des méthodes put et get spécifiques (des accesseurs de Session) pour certains objets couramment utilisés. J'ai tout de même conservé la possibilité d'utiliser la Session de manière générique (<String>, <Object>). Je ne sais pas d'ailleurs si c'est très malin mais pour le développement c'est plus rapide pour faire un essai que d'aller tout de suite ajouter deux accesseurs. Cela fait pas mal de méthodes à écrire mais au final c'est pratique.

Une partie du code
public class Session {private static HashMap<String, Object> map = new HashMap<String,Object>();
   
    public static void put(String cle, Object objet){
        map.put(cle, objet);
    }
   
    public static Object get(String cle){
        return  map.get(cle);
    }  
   
    public static void putNomRubrique(String chaine){
        map.put("NomRubrique", chaine);
    }
   
    public static String getNomRubrique(){
        return (String) map.get("NomRubrique");
    }
  
  
   
    public static RubriqueDTO getRubrique(){
        return (RubriqueDTO) map.get("Rubrique");
    }
   
    public static void putVariable(VariableDTO variable){

  .....

Before I could use the SimpleEventBus I was in the need of using some object in differents place of my application, the component need some way of using common data (for example if I need a record data after its selection in a ListGrid in a panel A and which  I need sometime later in a panel B) . So I wrote a simple Session class acting like Asp.net or Php Session but for client side.

To avoid the problems of typing error on the key string I use typed get and put method for the common object I use. I kept anyway the normal way of using the HashMap <String>, <Object> with two methods, I don't know if it's a good idea but it's practical during development or test something without be obliged to create the two methods. It make a lot of method to write but eventually it's really practise. I know that it is not so good writing manner because if you don't put the value you are interested in in the right place it's difficult to find errors.

DynamicForm brief

Un formulaire de type DynamicForm gère une collection d’objets de type FormItem qui seront rendus en tant qu’éléments de saisie utilisateur.

L’objet DynamicForm gère tous les aspects du formulaire :

• La disposition
• Les valeurs
• La validation.
• La liaison de données.

Les principaux FormItem sont :

CanvasItem, CheckboxItem, ColorPickerItem, DateItem, FloatItem, HiddenItem, IntegerItem, RadioGroupItem, SelectItem, SpacerItem, StaticTextItem, TextAreaItem, TextItem

Et pour tous les autres cas CanvasItem est très pratique car il permet "d'intégrer " toute sorte de Widget n'héritant pas de FormItem. on peut ainsi personnaliser un formulaire en mettant une zone avec plusieurs boutons dans une seule colonne par exemple ou mettre un ListGrid etc.. (voir aussi ici)

 

Une DynamicForm  est composée de colonnes dans lesquelles sont disposés les différents contrôles de saisie utilisateurs dérivant tous de FormItem. Par défaut il y a deux colonnes, la plupart des contrôles occupent deux colonnes, une pour le titre et une pour la zone de saisie. Mais rien n'empêche de disposer d'un nombre quelquonque de colonnes(pair ou impair).

On peut disposer les FormItems comme on le désire en utilisant setStartRow, setEndRow et des objets de type SpacerItem ou RowSpacerItem pour créer des « trous » d'une cellule ou d'une rangée complète dans la grille.

En ce qui concerne le style, les FormItems peuvent être personnalisés séparément  pour leur titre ou pour la « boite de saisie ».

Le titre par défaut effectue automatiquement un retour à la ligne, propriété que l’on peut modifier à l’aide de  setWrapTitle (false supprime le retour automatique).

Quand à la boite de saisie on peut utiliser soit  setTextBoxStyle et pour les DateItem  en mode "représentation texte" définir un TextItem stylé comme on le désire et l'attribuer à ce DateItem par

setTextFieldProperties(TextItem textfieldproperties).

La saisie peut être rendue obligatoire (apparition d’une signalisation lors de la validation) par setRequired (le message à afficher est indiquer avec la méthode setRequiredMessage).

Lors de la création de formulaire en mode lecture on peut inhiber la saisie  d’un champ en utilisant setDisabled(true). Dans un tel cas si l’on désire que l’apparence du champ ne soit pas modifiée il faut utiliser setShowDisabled(false) et la valeur du champ ne sera plus grisée et donc plus lisible.
Une sorte de fieldSet peut être inséré à l'aide des méthodes setIsGroup et setGroupTitle. 

 A DynamicForm  is a set of columns where your different form input elements are arranged. By default there are two column, most of the formItem use two columns (one for the title and the other for the input element) but you can set any number of column and an input control can span several column.By using setStartRow and setEndRow you can setup the controls as you want. "holes" can be introduced by adding SpacerItem (a cell "hole") or RowSpacerItem(a row "hole") too.
For the cases where you don't find what you are looking for in the FormItems, CanvasItem is really practise when you want to use a Control(widget) which doesn't extend FormItem whith it you can add anything you want in your form as a ListGrid for example. (you can have a look here )
The title of the formItem wrap automatically by default and we can use setWrapTitle(false) to have a one line only title.
Some sort of fieldSet can be put around the form by using the methods setIsGroup and setGroupTitle.  

List2List transfer from one list to another / first steps

    public static void testListeAListe(){
        String[] laListeSource = new String[5];
        laListeSource[0] = "Pharmacie";
        laListeSource[1] = "Médecine";
        laListeSource[2] = "Osthéopathie";
        laListeSource[3] = "Dentiste";
        laListeSource[4] = "Prothèse";
        ListeAListe lesListes = new ListeAListe(laListeSource,null,"Rubriques","Panier",300);
        lesListes.draw();
    }

public class ListeAListe extends HLayout {
    private final ListGrid source;
    private final ListGrid destination;
    private RecordList sourceList;
    private RecordList destinationList;
    private String titreSource;
    private String titreDestination;
    private ListeAListe moimeme;
    private DataSource sourceDS;
    private DataSource destinationDS;

    public ListeAListe(String[] sourceRecords, String[] destinationRecords,
        String titreSource, String titreDestination, int hauteur) {
        super();
        this.moimeme = this;
        sourceDS = new DataSource();
        DataSourceField valeurSource = new DataSourceField("valeur", FieldType.TEXT); 
        valeurSource.setPrimaryKey(true);
        valeurSource.setTitle(titreSource);
        sourceDS.setFields(valeurSource);
        sourceDS.setClientOnly(true);
        destinationDS = new DataSource();
        DataSourceField valeurDestination = new DataSourceField("valeur", FieldType.TEXT); 
        valeurDestination.setPrimaryKey(true);
        valeurDestination.setTitle(titreDestination);
        destinationDS.setFields(valeurDestination);
        destinationDS.setClientOnly(true);
        this.setWidth("500px");
        this.setHeight(hauteur);
        source = new ListGrid();       
        source.setWidth("35%");
        sourceList = new RecordList();
        for (String s: sourceRecords)
        {
            ListGridRecord r = new ListGridRecord();
            r.setAttribute("valeur",s);
            sourceList.add(r);
        }

        sourceDS.setTestData(sourceList.toArray());
        source.setDataSource(sourceDS);
        source.setAutoFetchData(true);
        source.setEmptyMessage("Liste vide");

        destination = new ListGrid();
        destination.setWidth("35%");
        destinationList = new RecordList();
        destinationDS.setTestData(destinationList.toArray());
        destination.setDataSource(destinationDS);
        destination.setAutoFetchData(true);
        destination.setEmptyMessage("Liste vide");


        VStack transferStack = new VStack(3); 
        transferStack.setWidth("30%"); 
        transferStack.setAlign(VerticalAlignment.CENTER);

        TransferImgButton right = new TransferImgButton(TransferImgButton.RIGHT);
        right.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                ListGridRecord selection = source.getSelectedRecord();
                if(selection != null){
                    if(!recordExistant(selection,destinationList)) {
                        sourceDS.removeData(selection);
                        destinationDS.addData(selection);    
                        destination.selectRecord(selection, false);
                    }
                }

            }
        });

        TransferImgButton left = new TransferImgButton(TransferImgButton.LEFT);
        left.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                ListGridRecord selection = destination.getSelectedRecord();
                if(selection != null){
                    if(!recordExistant(selection,sourceList)) {
                        destinationDS.removeData(selection);
                        sourceDS.addData(selection);   
                        source.selectRecord(selection, false);
                    }
                }

            }
        });

        TransferImgButton rightAll = new TransferImgButton(TransferImgButton.RIGHT_ALL);
        rightAll.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                source.selectAllRecords();
                ListGridRecord[] records = source.getSelection();
                for(Record record : records){
                    sourceDS.removeData(record);
                    destinationDS.addData(record); 
                    destination.selectRecord(record, false);
                }

            }
        });

        TransferImgButton leftAll = new TransferImgButton(TransferImgButton.LEFT_ALL);
        leftAll.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                destination.selectAllRecords();
                ListGridRecord[] records = destination.getSelection();
                for(Record record : records){
                    destinationDS.removeData(record);
                    sourceDS.addData(record); 
                    source.selectRecord(record, false);
                }

            }
        });

        transferStack.addMember(right);
        transferStack.addMember(left);
        transferStack.addMember(rightAll);
        transferStack.addMember(leftAll);

        this.addMember(source);
        this.addMember(transferStack);
        this.addMember(destination); 

    }

    protected boolean recordExistant(ListGridRecord selectedRecord, RecordList liste) {
        if(liste.contains(selectedRecord)){
            return true;
        }else{
            return false;
        }
    }
}