Geckos Documentation

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
FIXME **Cette page n'est pas encore traduite entièrement. Merci de terminer la traduction**\\ //(supprimez ce paragraphe une fois la traduction terminée)//

====== Styles ======

La section ''styles'' d'un template en est la partie principale. C'est là que l'on définit comment seront construites les cartes.

Vous pouvez n'avoir qu'un seul **Style** dans votre template, ou plusieurs différents. Lorsque vous utilisez un template avec plusieurs styles, vous devrez choisir quel style appliquer à vos cartes. 

<WRAP center round info 60%>
Certains vieux templates peuvent ne pas avoir de section ''styles'', les éléments de style étant placés à la racine du template. Cela reste valide, mais il vaut mieux utiliser le tableau de styles, plus à jour, même si vous n'utilisez qu'un seul style.
</WRAP>

===== L'objet Style =====

Voici comment est construit un objet **Style** : 

<code javascript>
"styles" : [
  {
    "canvasBackground": "#CCCCCC",
    "canvasWidth": 700,
    "canvasHeight": 495,
    "key": "style101",
    "name": "My First Style",
    "description": "It's my first style, so just a simple one !",
    "fields": [ ],
    "canvasFields": [ ]
  },
  {
    -- Another style object
  }
]
</code>

==== Informations générales ====

Ces champs sont obligatoires et décrivent les éléments de base du style : 

  * ''canvasBackground'' : définit la couleur de fond de la carte. Utilisez une valeur héxadécimale.
  * ''canvasWidth'' : en pixels, la largeur de la carte
  * ''canvasHeight'' : en pixels, la hauteur de la carte 
  * ''key'' : une chaîne unique permettant d'identifier le style. Aucun autre style du template ne doit avoir la même ''key''.
  * ''name'' : une chaîne identifiant le style. Sera utilisée en affichage dans l'interface pour identifier le style.
  * ''description'' : description du style, affiché en description du style.

==== Champs éditables ====

Les champs éditables apparaissent sur la gauche lors de l'édition d'une carte. Il s'agit des champs que l'utilisateur renseignera pour modifier sa carte. Vous pouvez ajouter autant de champs que nécessaire. L'ordre dans lequel ils sont présents dans le code définissent leur ordre d'affichage dans l'interface utilisateur. Plusieurs types de champs existent, mais tous disposent de propriétés communes :

<code javascript>
"fields": [
    { "name": "name", "label": "Name :", "default": "Default name", "isNameField": false }
]
</code>

Le code ci-dessus permet de décrire un simple champ texte. Les propriétés présentes sont communes à tous les types de champs.

  * ''name'' : le nom unique du champ, permettant de l'identifier et de réutiliser sa valeur lors de la création de la carte (ne peut utiliser que des caractères non-accentués, des chiffres ou le symbole ''_'' (//underscore//))
  * ''label'' : texte utilisé dans l'interface utilisateur pour décrire le champ
  * ''default'' : valeur par défaut pour le champ lors de la création d'une nouvelle carte
  * ''isNameField'' : est-ce ce champ qui est utilisé pour décrire la carte ? Si la valeur est ''true'', on utilise le contenu de ce champ pour nommer la carte dans la liste. Voir la [[..:manual:list-of-cards|Liste des cartes]].

Chaque type de champ dispose de propriétés particulières qui permettent de définir comment il s'affichera, quelle donnée peut y être placée, et ainsi de suite. Voici la liste des types de champ existants :

  * [[Text input]]
  * [[Choice input]]
  * [[Checkbox]]
  * [[Image input]]
  * [[Multiline text input]]
  * [[Rich Text Field]]
  * [[Numeric Input Field]]
  * [[Color Picker]]

=== Ordre des champs éditables ===

Les champs éditables sont //affichés// l'un après l'autre, le premier élément du tableau étant le premier affiché. Vous pouvez changer cet ordre en renseignant la propriété ''order'' d'un champ, et en y renseignant son ordre sous forme d'un entier. Les champs éditables sont affichés dans un ordre croissant (du plus petit au plus grand). 

Notez que la valeur par défaut de la propriété ''order'' est 1.

==== The Card / Canvas ====

The canvas fields are processed through the [[http://fabricjs.com/|FabricsJS]] engine to be then displayed as a card. You can play with this engine in the [[http://fabricjs.com/kitchensink|Kitchensink]], and get the associated JSON. Then, copy the ''objects'' values into the ''canvasFields'' of your template : you'll get your card !

Each //editable field// of the card generates a variable, that can be used inside the canvas data. Here's the different types of variables (see each type of field to know the variables associated) :

  * [[Text Variables]]
  * [[Boolean Variables]]
  * [[Dataurl Variables]]
  * [[Advanced String Variables]]
  * [[Code Variables]]

=== Order of the Canvas elements ===

The elements of the canvas are //drawn// one after the other, the first item of the array being the one first drawn. You can change this by setting an ''order'' property on a field, and defining the order of the element (an integer). The elements of the canvas are sorted in ascending order. 

Note that the ''order'' property is set by default to a value of ''1''.
===== Inheriting styles =====

Sometimes, a Style is just a slight derivation from another one. For example, you could have an english style, and a french one, with just labels being modified. It would be a shame to repeat large amount of code to describe those two styles. Here comes the **Inheritance**.

You first need to define a classic style, which we'll call the /Parent/. Then create another style by `copying / pasting` the first one. Finally, for this first steps, modify the general informations : 

<code javascript>
"styles" : [
  {
    "canvasBackground": "#CCCCCC",
    "canvasWidth": 700,
    "canvasHeight": 495,
    "key": "parentStyle",
    "name": "Parent Style",
    "description": "It's the Parent Style !",
    "fields": [ ],
    "canvasFields": [ ]
  },
  {
    "canvasBackground": "#CCCCCC",
    "canvasWidth": 700,
    "canvasHeight": 495,
    "key": "childStyle",
    "name": "Child Style",
    "description": "It's the Child Style !",
    "fields": [ ],
    "canvasFields": [ ], 
    "basedOn": "parentStyle"
  }
]
</code>

You could see that a ''basedOn'' property has been added. That's the key of the inheritance ! Enter the key of the Parent Style in this property, and the inheritance is set. Now, you only need to describe in your template what is changing. If the ''canvasXXX'' properties stay the same, well, remove them from the child : 

<code javascript>
"styles" : [
  {
    "canvasBackground": "#CCCCCC",
    "canvasWidth": 700,
    "canvasHeight": 495,
    "key": "parentStyle",
    "name": "Parent Style",
    "description": "It's the Parent Style !",
    "fields": [ ],
    "canvasFields": [ ]
  },
  {
    "key": "childStyle",
    "name": "Child Style",
    "description": "It's the Child Style !",
    "fields": [ ],
    "canvasFields": [ ], 
    "basedOn": "parentStyle"
  }
]
</code>

==== Editable fields and Inheritance ====

If the editable fields of your child style are exactly the same as the parent's ones, then, don't even declare the ''fields'' array.

If there is a modification, here's how to procede for each field : 

  * The field remains exactly the same (''field01'' in example code)
    * Don't put that field in the child fields
  * Some properties of the field are modified (''field02'' in example code)
    * Add a new field with the same ''name'', and then only write the modified properties.
  * This field was not on the parent style (''field03'' in example code)
    * Add it to the fields

Parent's fields : 

<code javascript>
"fields": [
    { "name": "field01", "label": "Name :", "default": "Default name", "isNameField": true },
    { "name": "field02", "label": "Class :", "default": "Default class", "isNameField": false }
]
</code>

Child's fields : 

<code javascript>
"fields": [
    { "name": "field02", "label": "Current Class :" }
    { "name": "field03", "label": "Level :", "default": "Default level" }
]
</code>

Any property of a field can be modified in a child field : ''sharedOptions'', ''options'', ''default'', ... Feel free to have a look at existing templates to discover how inheritance works.

==== Canvas fields and Inheritance ====

If the canvas fields of your child style are exactly the same as the parent's ones, then, don't even declare the ''canvasFields'' array.

If there is a modification, here's how to procede for each canvasField : 

  * The canvasField remains exactly the same ?
    * Don't put that canvasField in the child canvasFields
  * Some properties of the field are modified ?
    * Add an ''id'' property to the parent canvasField, with a unique string describing it.
    * Add a new field with the same ''id'' property in the child canvasField, and then only write the modified properties.
  * This canvasField was not on the parent style ?
    * Add it to the ''canvasFields''

Parent's canvasFields : 

<code javascript>
    "fields": [
    { "type": "textbox", "text": "$name", "left": 91, "top": 11, "width": 351, "textAlign": "center", "fill": "#FFD800", "fontFamily": "Arial", "fontWeight": 700, "fontSize": 38 },
    { "id": "class", "type": "textbox", "text": "$class", "left": 91, "top": 60, "width": 351, "textAlign": "center", "fill": "#FFD800", "fontFamily": "Arial", "fontWeight": 700, "fontSize": 38 }
]
</code>

Child's fields : 

<code javascript>
"fields": [
    { "id": "class", "text": "$class$ - Lvl.$level$" },
    { "type": "textbox", "text": "Current class", "left": 91, "top": 90, "width": 351, "textAlign": "center", "fill": "#FFD800", "fontFamily": "Arial", "fontSize": 14 }
]
</code>

Any property of a canvasField can be modified in a child canvasField : ''text'', ''left'', ''top'', ''fontFamily'', ... Feel free to have a look at existing templates to discover how inheritance works.

==== Ignoring a Parent field ====

Following the completion of [[http://www.github.com/gulix/geckos/issues/102|Issue #102]], you can use the property ''ignored'' in a field (//editable// or //canvas// field) and set it to ''true'' in order to ignore it in the generated style (it will not be inserted in the arrays).

This property follows all the rules of inheritance. If a parent style set it to ''true'', a child could still reset it to ''false''.
Geckos Documentation

Outils pour utilisateurs

Outils du site

Outils de la page
