Conception de logique applicative

Ceci est une ancienne révision du document !

Concevoir des interfaces (vues)
Créer leur logique comportementale

Créer le projet koTd6 en important le fichier war dans eclipse.
Démarrer le projet sur le serveur web (Run as…)

Objectifs

Il s'agit de donner à la liste des villes le comportement suivant :

Ajout de la sélection au clavier et à la souris
Edition par défaut supprimée et remplacée par une édition directe (dans la liste)
Ajout d'un bouton détail pour visualiser la liste des entreprises de la ville

Ouvrir le template de la classe ville :

Ajout de la sélection au clavier

la méthode addSelector permet d'ajouter le contrôle clavier sur la liste : le code de touche 113 correspond à la touche F2, et permet l'édition d'une ville : voir http://tutorial.kobject.net/java/ajaxinclude/keyboard

Modifier le template des villes :

{#func:this.addSelector(113)#}
{#func:this.setEditable(true)#}
{#mask:<td>{cp}</td><td>{ville}</td>#}
{#mask:<td>{cp}</td><td>{ville}</td>#}
{#set:this.ajaxIncludes=true#}
{#set:this.listContentUrl="villes.do"#}
{_ajx}
{_listContent}
	{_page}
		<div class="boxButtons">{_pageCounter}{_navBarre}</div>
{/_listContent}

Tester la page villes.do et son comportement (clavier et souris)

Action	Effet
F2	Edition avec le formulaire de modification
Touches de direction Haut, bas, gauche, droite	Déplacement entre les villes
MAJ+Home	Atteindre la première page
MAJ+Fin	Atteindre la dernière page
MAJ+PageUp	Page précédente
MAJ+PageDown	Page suivante
Double clic	Déplacement sélection ligne

Enlever l'édition de la liste

{#func:this.addSelector(113)#}
{#func:this.setEditable(false)#}
...

Activation de l'édition directe des membres

Pour qu'un membre soit éditable, il faut qu'il appartienne à un élément DOM de la classe editable.

Nous allons ajouter un Display associé à la classe KVille pour modifier l'affichage des éléments de la liste :

package net.display;
import net.ko.displays.KObjectDisplay;
import net.ko.kobject.KObject;


public class VilleDisplay extends KObjectDisplay {

	@Override
	public String showInList(KObject ko, String memberName) {
		String result=super.showInList(ko, memberName);
		//si le nom du membre est cp ou ville, on le met dans un span de classe css editable
		if("cp".equals(memberName) || "ville".equals(memberName)){
			result="<span class='editable' title='"+memberName+"'>"+result+"</span>";
		}
		return result;
	}
}

Associer ensuite le Display créé à la classe KVille dans le fichier /conf/kox.xml :

...
	<class name="KVille" display="net.display.VilleDisplay">
		<member max="5" name="cp" required="1" type="string" />
		<member max="100" name="ville" required="1" type="string" transform="onlyFirstWordUpper"/>
	</class>
...

Tester l'édition possible de la liste :

Action	Effet
Double clic	Mode édition du membre
ESCAPE	Sortie de l'édition
ENTREE	Sortie avec possible validation
Perte du focus	Sortie de l'édition

A noter que l'édition n'est pour l'instant que visuelle, et ne permet pas la validation des modifications effectuées.

Ajout de la validation

Editer le fichier conf/mox.xml et ajouter l'inclusion ajax suivante :

Sur la page villes.do,
- l’événement updated sur une zone de classe css editable,
  - provoque le post vers une url virtuelle de validation (updateOne.do) de l'instance de KVille,
  - et passe les informations contenues dans le champ édité (target.innerHTML) du champ (target.title)

	<ajax-includes>
	...
		<request requestURL="villes.do">
			<js triggerSelector=".editable" triggerEvent="updated">
				<updateOne virtualURL="updateOne.do" operation="update" kobjectShortClassName="KVille" targetId="info" method="POST">
					<field name="{js:target.title}" value="{js:target.innerHTML}"/>
				</updateOne>
			</js>
		</request>
	...
	<ajax-includes>