Tutoriel : Le framework puzzleApp

Plus qu'un tutoriel vous retrouvez ici le détail du coeur du framework

Les contrôles

PuzzleApp contient différents type de contrôles utilisateur que vous pouvez implémenter de différentes façons

1.La class Control : l'élement de base

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()' />

2. Les contrôles standards

  • TextBox
  • Button
  • CheckBox
  • DateBox
  • DateTimeBox
  • EmailBox
  • Hidden
  • Image
  • Libelle
  • Link
  • NumericBox
  • PassWord
  • TextArea
  • RadioButton
  • Submit

4. Passage d'un control à une vue

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>

5. Etendre les contrôles de base 

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

  • Core/Control/TextBox/TextBox.php 

placer alors le votre dans

  • Extend/Control/TextBox/TextBox.php 

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