edvProperty : jso[".edv"]

L'ambition d'edvProperty est de proposer un ensemble de services pour la documentation, l'édition et la manipulation des valeurs d'un objet javascript.

Il pourrait devenir un éditeur universel sur la base de la manipulation d'objets expando de javascript et/ou de JScript, en utilisant une communication avec le serveur sous la forme JSON.

Un prototype ou un objet d'options par défaut deviennent instantanément éditables en assumant l'arborescence de leurs propriétés. Le rendu visuel ou la synchronisation des propriétés peuvent être associés à l'objet par une simple propriété ".edv".

Une pratique courante dans EDV et de définir une sous-variable edvArgs à une variable Code ou Function comme prototype des arguments à utiliser. edvProperty définit le descriptif de l'objet et peut devenir l'interface élémentaire de paramétrage ou d'assistance à la construction du script des arguments d'une fonction.

Certaines variables EDV possèdent une sous-variable json.edvProperty .
Cela indique que l'on peut obtenir un descriptif de la variable sous-forme json et que cet objet est accompagné de son propre descriptif pour son rendu ou sa dynamique.

D'une façon générale, edvProperty désigne le descripteur d'un objet. Il va permettre d'identifier le type de données des propriétés, leur nom en clair, leur rendu Html, le type de saisie, ...

Il est rattaché à son objet en tant que propriété nommée ".edv". C'est la seule restriction concernant les objets de base : ils ne peuvent pas avoir de propriétés nommées ".edv" qui ne soient pas un descriptif de l'objet selon la méthode edvProperty.

Dans sa version actuelle, edvProperty est uniquement utilisé en javascript par le plugin edv.Property (variable .{Web}.edv.plugins.edvProperty).

Le pendant visuel est le plugin jQuery $(). edvProperty (variable .{Web}.edv.jQuery.edvProperty).



Exemples javascript

$().edvProperty( jso ) génère automatiquement une interface dans laquelle les propriétés de l'objet jso sont éditables.
edv.Property( jso, { 
  "uri" : "?edvar=.MyVar.json"
  , ".edv" : { "items" : function(){ return edvGetJson( this.uri ); } }
} ) étend l'objet jso avec les propriété "uri" et ".edv". La méthode "items" est appelée pour obtenir les sous-éléments de jso, ce qui rend l'objet dynamique. 
edv.Property( edvar(".MyVar"), ".{Library}.EDV.Var.edvProperty" ) récupère la variable .MyVar sous forme d'objet edvar et lui associe le descriptif standard .{Library}.EDV.Var.edvProperty. (en fait, le prototype des objets edvar définit déjà la propriété".edv" à cette valeur ".{Library}.EDV.Var.edvProperty"). 
//objet de base
var jso = {
    "Key" : 1
    , "Name" : "First"
    , "Enabled" : 1
};
edv.Property( jso, { 
    ".edv" : { 
    "items.Key" : { "text" : "Identifiant" }
    , "items.Name" : { "text" : "Nom" }
    , "items.Enabled" : {
        "text" : "Actif"
        , "valueType" : "boolean"
    }
    , "items.*" : { "visible" : true }
} )
définit les propriétés descriptives selon le nom des propriétés de l'objet de base.
edv.Property( jso, { 
    ".edv" : { 
    "items." : {
        "Key" : { "text" : "Identifiant" }
        , "Name" : { "text" : "Nom" }
        , "Enabled" : {
            "text" : "Actif"
            , "valueType" : "boolean"
        }
    }
    , "items.*" : { "visible" : true }
} )
.



jso[".edv"]["items."]

Un syntaxe particulière apparait autours de propriétés dont le nom commence par "items."

"items.Key" étend l'item ayant pour nom Key

"items.*" étend tous les items

"items.Key.*" étend tous les items de la sous-propriété Key

"items..Value" étend la propriété Value de tous les items, quelque soit leur nom.

"items." contient une définition des sous-propriétés. Parce qu'il se termine par un . (point), on s'attend à trouver un objet dont chaque item est le nom d'une propriété de l'objet de base.

"items." : { "Name" : { "text" : "Nom" } } équivaut à "items.Name" : { "text" : "Nom" }

"items.Children." : { "Name" : { "text" : function(){ return this.value("Label"); } } affecte la propriété text du descriptif edvProperty de la propriété Name de jso.Children



jso[".edv"]["items"] : function()

La fonction "items" permet le chargement asynchrone des éléments d'un objet (racine ou sous-propriété)

".edv" : {
	"items" : function(){ /* obtention des sous-éléments */
		return edvGetJson(".{Library}.EDV.Var.Properties.Children", {
			"edvSender" : this.value("Name")
			, "edvArgs.edvProperty" : 1
		});
	}
}

jso[".edv"]["items"] : object

La propriété "items" étend chacun des sous-éléments

".edv" : {
	"items" {/* extension de tous les sous-éléments */
		"text" : function (){ return this.value("Text"); }
		, "icon" : function (){ return this.value("Class"); }
	}
}

La notation "items.*" est moins ambigüe et, donc, préférable.



edv.Property (javascript)

A chaque propriété de l'objet de base va correspondre un objet edvProperty.

L'arborescence de propriétés de l'objet de base est représentée par une arborescence d'objets edvProperty assurée par la méthode étendue edvProperty.items(). Il peut y avoir autant d'objets edvProperty que de propriétés dans toute l'arborescence de l'objet de base.

Les objets edvProperty ont le nom de la propriété qu'il représente. La fonction key() retourne un nom préfixé par la chaîne des noms des parents, le séparateur étant le . (point).

Les fonctions value() et item() prennent, éventuellement, en premier argument un chemin relatif avec une notation similaire à l'accès aux variables EDV (".." ou "..." ou "subProperty"...)

La fonction value() retourne la valeur d'un propriété de l'objet de base tandis que la fonction item() retourne un objet edvProperty de réprésentation d'une autre propriété de l'objet de base.



Propriétés et fonctions

Les propriétés standards peuvent être des fonctions qui seront évaluées au besoin.

edv.Property( jso, { ".edv" : { 
	"items" : {
	"visible" : function() {
		return this.value("Enabled");
		}
	}
})  

this.value(), this.item() ? qui suis-je ?

La difficulté principale de edvProperty est de savoir de quoi on parle quand on dit "item", "propriété", ...

Dans les fonctions, this représente l'objet edvProperty de la propriété.

L'accès à la valeur de l'objet de base s'effectue par this.value().

this.value("..") === this.parent.value() est l'objet qui contient la propriété que this, en tant que edvProperty, représente.

this.value(".") est l'objet de base, la racine.

this.value( this.key() ) === this.value() === this.value( ".." + this.name )

L'accès à un objet edvProperty s'effectue par this.item() === this .

Le parent edvProperty s'obtient par this.item("..") === this.parent .

this.item("...") === this.parent.parent .

this.item("..Key") === this.parent.item("Key") .

this.item(".") est l'objet edvProperty de base, décrivant la racine.

 



$().edvProperty (jQuery)

Editeur d'objet edvProperty

$().edvProperty( jso ) affichage dans un dialogue.

équivaut à edv.Property( jso ).show()

Dans les méthodes jQuery suivantes, si jsObject n'est pas un objet edv.Property, une instance est créée.

(['init'],jsObject)

Affiche l'éditeur dans un dialogue.

('create', jsObject, [options])

Retourne le jQuery de l'éditeur.

('show', jsObject, [options])

Affiche l'éditeur dans un dialogue.



Exemple de .{Models}.Images.Values.json

.{Models}.Images.Values.json retourne la valeur de son parent (un DataTable) sous forme JSON.

Une propriété ".edv" est ajoutée.

{
  	/*objet de base*/
	"Alert" : {
		"Key" : "Alert",
		"Text" : "Alerte",
		"Class" : "edvimgAlert"
	},
	"Array" : {
		"Key" : "Array",
		"Text" : "Array",
		"Class" : "imgEDVTypeArray"
	},
	"Visual" : {
		"Key" : "Visual",
		"Text" : "Boîte",
		"Class" : "imgEDVTypeVisual"
	},
	
	/* extension edvProperty */
	".edv" : { 
		  "name" : "Table Images"
		, "valueType" : "domain"
		, "pk" : "Key"
		, "items" : { /* extension de tous les sous-éléments */
			  "text" : function (){ return this.value("Text"); }
			, "icon" : function (){ return this.value("Class"); }
		}
		, "items..Key" : { /* extension de la propriété Key tous les sous-éléments */
			  "primaryKey" : true
			, "valueType" : "string"
			, "readOnly" : true
		}
	}
}


Exemple de .{Library}.EDV.Var.edvProperty

Ce descriptif s'applique aux objets edvar.

$().edvProperty( new edvar(".{Sys}") )

Le prototype de edvar dispose d'une propriété ".edv" ayant la valeur ".{Library}.EDV.Var.edvProperty".

{
  	"className" : "<?=me.Name?>"
, "onLoad" : function(value){
if(value && !value.Name && value[".edv"])
value.Name = value[".edv"].edvSender;

, "icon" : function(){
return "imgEDVType" + this.value("ImageKey");
}
// description des groupes d'items
, "groups" : {
"*" : {
"text" : "Propriétés"
, "icon" : "edvimgEdit"
}
, "Children" : {
"text" : "Sous-variables"
, "icon" : "imgEDVTypeVar"
}
}
// design de tous les items
, "items" : {
"group" : "*"
, "visible" : false
}
// design des items selon leur nom
, "items." : {
"Name" : {
"text" : "Nom complet"
, "visible" : false
, "readOnly" : true
}
, "ValueType" : {
"text" : "Type de valeur"
, "visible" : true
, "icon" : "imgEDVTypeType"
, "valueType" : "selection"
, "values" : function(){ return edvGetJson(".{Library}.EDV.Type.json"); }
}
, "ShortName" : { "text" : "Nom", "visible" : true }
, "ClassName" : { "text" : "Classe", "visible" : true }
, "Value" : {
"text" : "Valeur"
, "visible" : true
, "valueType" : function(){
var valueType;
switch(valueType = this.value("..ValueType")){
case "String" :
case "Text" :
case "Code" :
case "Function" :
return "string";
case "Integer" :
case "Long" :
case "Double" :
case "Single" :
case "Short" :
case "Byte" :
return "number";
case "Selection" :
return "selection";
default:
return undefined;
}
}
}
, "Children" : {
"items" : function(){
return edvGetJson(".{Library}.EDV.Var.Properties.Children", {
"edvSender" : this.value("..Name")
, "edvArgs.edvProperty" : 1
});
}
, "text" : "sous-variables"
, "icon" : "imgEDVTypeVar"
, "group" : "Children"
, "visible" : true
}
} }

 

Voir aussi