Création du widget

Les formulaires sont avant tout des widget possédant toute la mécanique Php mais aussi JS.

Architecture

Votre application doit donc contenir un dossier Widget, pui s un dossier par formulaire. Pour notre exemple c'est ItineraireForm.

Ce dossier contient alors les fichiers suivant :

• ItinieraireForm.php : c'est lui qui va gérer les données coté serveur
• ItineraireForm.js : c'est lui qi va gérer les intéraction côté client
• View : le dossier contenant les template. Généralement il contient que index.tpl ( le template de base) 

ItinieraireForm.Php :

C'est la classe de notre formulaire :

namespace Apps\Planificateur\Widget\ItineraireForm;

use Core\Control\Form\Form;
use Core\View\View;
use Core\View\ElementView;

class ItineraireForm extends Form {

    /**
     * Constructeur
     */
    function __construct($core = "", $data = "") {
        $this->Core = $core;
        $this->Data = $data;

        //On le fait ici pour avoir le formuaire a l'affichage mais aussi a la validation
        $this->Init($data);
    }

    /**
     * Initialisation 
     */
    function Init($data) {
        $this->form = new Form("itineraireForm", $data);

        $this->form->SetView(__DIR__ . "/View/index.tpl", $this->Core);
        $this->form->SetAction("/View/index.tpl");

        $this->form->Add(array("Type" => "Hidden",
            "Id" => "Id",
        ));
        
        $this->form->Add(array("Type" => "TextBox",
            "Id" => "Name",
            "Validators" => ["Required"]
        ));

        $this->form->Add(array("Type" => "TextArea",
            "Id" => "Description",
            "Validators" => ["Required"]
        ));


        $this->form->Add(array("Type" => "TextBox",
            "Id" => "CountryStart",
            "Validators" => ["Required"]
        ));

        $this->form->Add(array("Type" => "TextBox",
            "Id" => "CityStart",
            "Validators" => ["Required"]
        ));

        $this->form->Add(array("Type" => "TextBox",
            "Id" => "CountryEnd",
            "Validators" => ["Required"]
        ));

        $this->form->Add(array("Type" => "TextBox",
            "Id" => "CityEnd",
            "Validators" => ["Required"]
        ));

        $this->form->Add(array("Type" => "Button",
            "Id" => "btnSaveItineraire",
            "Value" => "Save",
            "CssClass" => "btn btn-primary"
        ));
    }

    /*     * *
     * Generer le formulaire
     */

    function Render() {
        return $this->form->Render();
    }

    /*     * *
     * Valide les donnees selon les differents formulaires
     */

    function Validate($data = "") {
        $errors = $this->form->Validate($this->Data);

        return $errors;
    }

    /*     * *
     * Charge les controls avec les donnees de l'entite
     */

    function Load($itineraire) {
        $this->form->Load($itineraire);
    }

    /*     * *
     * Charge l'entite avec les donnees des differents formulaires
     */

    function Populate($product) {
        
    }

    /*     * *
     * Gestion des erreurs
     */

    function Error() {
        $errors[] = $this->form->errors;

        return json_encode(array("statut" => "Error", "message" => $errors));
    }

}

ItinieraireForm.js :

C'est le controller client

var ItineraireForm = function(){};

/***
 * Initialise le formulaire
 * @returns {undefined}
 */
ItineraireForm.Init = function(){
    Event.AddById("btnSaveItineraire", "click", ItineraireForm.SaveItineraire);
};

/***
* Obtient l'id de l'itineraire courant 
*/
ItineraireForm.GetId = function(){
    return Form.GetId("itineraireForm");
};

/*
* Sauvegare l'itineraire
*/
ItineraireForm.SaveItineraire = function(e){
   
    if(Form.IsValid("itineraireForm"))
    {

    var data = "Class=Planificateur&Methode=SaveItineraire&App=Planificateur";
        data  =  Form.Serialize("itineraireForm");

        Request.Post("Ajax.php", data).then(data => {

            data = JSON.parse(data);

            if(data.statut == "Error"){
                Form.RenderError("itineraireForm", data.message);
            } else{

                Form.SetId("itineraireForm", data.data.Id);
                Animation.Notify("Itineraire sauvegardee"); 
                //On passe aux etapes
                FrontController.ShowTool("stepTool");
            }
        });
    }
};

index.tpl

C'est la vue principale

  {{form->Open()}}
  {{form->Error()}}
  {{form->Success()}}
{{form->Render(Id)}}
    <div>
        <label>Nom</label> 
       {{form->Render(Name)}}
   </div>
 <div>
        <label>Description</label> 
       {{form->Render(Description)}}
   </div>
   <div>
        <label>Pays de depart</label> 
       {{form->Render(CountryStart)}}
   </div>
   <div>
        <label>Ville de depart</label> 
       {{form->Render(CityStart)}}
   </div>
   <div>
        <label>Pays d'arrive</label> 
       {{form->Render(CountryEnd)}}
   </div>
   <div>
        <label>Ville d'arrive</label> 
       {{form->Render(CityEnd)}}
   </div>

   <div class='center' >   
       {{form->Render(btnSaveItineraire)}}
    </div>  

  {{form->Close()}}

 

Explication

Dans le php les :

        $this->form->Add(array("Type" => "TextBox",
            "Id" => "CountryStart",
            "Validators" => ["Required"]
        ));

On défini ici le type de contrôles et les différents validateurs. dans la view :

    
        {{form->Render(CityEnd)}}
    

Cette ligne sera remplacé par le bon controle. En js deux lignes importantes :

    
        Form.IsValid("itineraireForm")  ;
          
        Form.Serialize("itineraireForm");
    

La premiére lance la vérification du formulaire et va ajouter des libellé d'érreur en dessous des champs non valide. La deuxième serialise le formulaire sour forme de clé => valeur.