Plus qu'un tutoriel vous retrouvez ici le détail du coeur du framework
PuzzleApp contient différents type de contrôles utilisateur que vous pouvez implémenter de différentes façons
Tous les contrôles dérivent de la class Control, Ils ont donc tous les propriétés suivantes :
//Proprietes
public $Id;
public $Name;
public $Enabled=true;
public $Required = false;
public $Type;
public $CssClass;
public $Style;
public $Attribute;
public $Libelle;
public $Value;
public $OnClick;
public $OnMouseMove;
public $OnMouseOver;
public $OnMouseEnter;
public $OnMouseLeave;
public $OnMouseOut;
public $OnChange;
public $OnKeyUp;
public $RegExp;
public $MessageErreur;
public $MessageObligatoire;
public $IsValid=true;
public $Obligatory=true;
public $PlaceHolder;
public $AutoCapitalize = "None";
public $AutoCorrect = "None";
public $AutoComplete = "None";
public $Info;
Ainsi que les fonctions :
function AddStyle($property,$value)
{
...
}
function AddAttribute($event,$action)
{
...
}
Les propriété Type On... comme onclick ajoute des évenements à vos controle .
Exemple concret :
$tbName = new TextBox("tbName");
$tbName->CssClass = "form-control";
$tbName->AddStyle("width", "100%");
$tbName->AddStyle("float", "left");
$btnSend = new Button(SUBMIT, "btnSend");
$btnSend->CssClass = "btn btn-primary";
$btnSend->AddAtribut("data-action", "send");
$btnSend->OnClick = "AppAction.Send()";
Rendu Final
<input type='text' style='width:100%;float:left' class='for-control' />
<input type='submit' data-action='Send' id='btnSend' value='send' onclick='AppAction.Send()' />
Dans le controller :
$btnNewBlog = new Button(BUTTON, "btnNewBlog");
$btnNewBlog->Value = $this->Core->GetCode("Blog.NewBlog");
$btnNewBlog->CssClass = "btn btn-info";
$btnNewBlog->OnClick = "BlogAction.ShowAddBlog();";
$view->AddElement($btnNewBlog);
Dans la vue
<div class='span11' id='Tools'>
{{btnNewBlog}}
</div>
Si les contrôles de base de base ne vous conviennent pas ou qu'il vous manquent des fonctions, le framework vous permet de surcharger ceux-ci.
Il suffit alors de placer les nouveaux controles dans le dossier Extends en gardant la même arborescense .
Exemple surchage d'un TextBox .
La classe de base se trouve dans
placer alors le votre dans
Le système appelera cette nouvelle classe au lieu de la classe de base.
/! Attention c'est bien un réécriture et non une surchage.Votre classe n'aura donc pas les fonctions de TextBox mais bien de Control.
Pour le rendu HTML c'est la fonction Show() qui s'en charge .
Exemple :
/*
* Retourne le rendu final du control
*/
function Show()
{
$html = "<div>";
$html = "<input type='text' ";
$html .= $this->getProperties();
$html .= "</input>";
$html .= "</div>";
return $html;
}
Dans cette exemple nous avons entouré le controle de base d'une DIV.
D'autres contrôles plus avancé comme des grilles, des tabStrip existente et peut être utilisés simplement