Les contrôles avancés

PuzzleApp contient des contrôles avancé comme des autocompleteBox, des grilles, des tabulations . Vous pouvez bien sur adapter leurs design via les feuilles de style css

1. L' AutoCompleteBox 

Il peux être interessant d'avoir un champ de saisi qui propose des données déjà saisi afin de faciliter votre recherche.

L'exemple typique une recherche d'utilisateur 

//Recherche d'utilisateur
$tbContact = new AutoCompleteBox("tbContact", $this->Core);
$tbContact->PlaceHolder = $this->Core->GetCode("SearchUser");
$tbContact->Entity = "Core/Entity/User/User";
$tbContact->Methode = "SearchUser";
$tbContact->Parameter = "AddAction=EeAppAction.AddAdmin(".Request::GetPost("appId").")";

$view->AddElement($tbContact);

Les paramétres important :

• Entity : La recherche se fait via les entité . Dans ce cas c'est l'entité User qui est utilisé
• Methode : le fonction appelé pour la recherche
• Parameter : Le callBack Js appelé lorsque l'on a choisit les utilisateurs

La recherche dans la class User 

/**
 * Recherche de membre
 * */
 public function SearchUser()
 {
 	$request = "  SELECT Id FROM `ee_user` WHERE (Name like '".Format::EscapeString(Request::GetPost("sourceControl"))."%'";
			$request .= " OR FirstName like '".Format::EscapeString(Request::GetPost("sourceControl"))."%' )";
			//$request .= " AND Id <>".$this->Core->User->IdEntite;
	   	}
 
		$results = $this->Core->Db->GetArray($request);

		if(sizeof($results) > 0)
		{
			$html = "<dt style='width:200px;text-align:left;'>";

			foreach($results as $result)
			{
				//Reccuperation des informations du membre
				$user = new User($this->Core);
				$user->GetById($result["Id"]);

				$html.= "<dl>";

				//Affichage de l'image en mini
				$imgUser = new Image($user->GetImageMini());
				$imgUser->AddStyle("width","50px");

				//Ajout d'une case a cocher pour envoyer des invitations
				$cbUser = new CheckBox($result["Id"]);
                                $cbUser->Name = $user->GetPseudo();

				$html.= $cbUser->Show().$imgUser->Show().$user->GetPseudo();

				$html.= "</dl>";
			}
 }
echo $html;
}

Enfin la fonction CallBack Js 

/*
 * Ajoute un administrateur
 */
 EeAppAction.AddAdmin = function(appId)
 {
   var divResult = document.getElementById("divResult");
   var controls = divResult.getElementsByTagName("input");
   var dvAdmin = document.getElementById("dvAdmin");

   idContact = Array();

  for(i=0; i< controls.length;i  )
  {
     if(controls[i].type == "checkbox" && controls[i].checked)
     {
         idContact[i] = controls[i].id;
     }
  }

  console.log(idContact.join(","));
  Dashboard.CloseSearch();
};

N'oubliez pas de fermer la recherche avec la fonction Dashboard.CloseSearch();

2.Les EntityGrid :

Il est souvent utile d'avoir des grilles, lorsque l'on a un très grand nombre de donnée.

Les entityGrid affiche donc des tableaux de données correspondant à une entité. Ils sont paginés par défaut et peuvent être triable par colonnes.

Exemple : dans le fichier HomeController => Fonction GetTabResau

$view = new View(__DIR__."/View/loadReseau.tpl", $this->Core);

$gdReseau = new EntityGrid("gdReseau", $this->Core);
$gdReseau->Entity = "AppsCoopereEntityCoopereReseau";
$gdReseau->App = "Coopere";
$gdReseau->Action = "GetTabReseau";
        
$gdReseau->AddColumn(new EntityColumn("Name", "Name"));
$gdReseau->AddColumn(new EntityIconColumn("", 
                          array(array("EditIcone", "CoopereAction.EditReseau", "CoopereAction.EditReseau"),)    
 ));
        
 $view->AddElement($gdReseau);

return $view->Render();

 La vue correspondante 

<div>
   {{gdReseau}}
</div>

Les paramétres importants :

• Entity : l'entité qui va être listé 
• App : L'application qui va vous permettre de charger, trier vos données 
• Action : La méthode appelé

Les colonnes :

• EnityColumn : affichera la valeur de l'élement : correspond à $entity->Name->Value;
• EntityIconColumn : affichera une icone Type Edition. les click dessus appelera la fonction Js 'CooperaAction.EditReseau'

Votre classe de base doit donc App.php donc doit avoir la méthode GetTabReseau

/**
 * Obtient les réseau
 */
 function GetTabReseau()
 {
  $homeController = new HomeController($this->Core);
  return $homeController->GetTabReseau(false);
 }

3.Les TabStrip

Les tabStrip vous permettent de créer des onglets afin d'organiser vos pages pour afficher le maximum d'information.

Exemple 

$view = new View(__DIR__."/View/index.tpl", $this->Core);

//Gestion des Tabs Strip
$tabTools = new TabStrip("tabTools", "Coopere");
$tabTools->AddTab("Reseaux", $this->GetTabReseau());
$tabTools->AddTab("Onglet2", "Mon contenu 2");

$view->AddElement($tabTools);

return $view->Render();

Les paramétres importants de AddTab :

• Title : le titre de l'onglet
• Content: le contenu HTML . Vous pouvez donc appeler une vue qui retournera view->Render(); 

Dans la vue 

<h2>Utilisation des TabStrip</h2>

{{tabTools}}

Il existe aussi un Control VTab qui fonctionne à l'identique et qui vous propose des onglets verticaux plutôt qu'horizontal.

4.Les images 

Un contrôle pour afficher des images 

$image = new Image($this->Core->GetPath("/img.image.png"));

5. Les icones

Les icones sont à la mode grâce à Font awesome. Un certain nombre d'icone sont disponible dans le framework.

Exemple 

$icEdit = new EditIcon("Editer");

 6.Les Upload :

Les upload sont des contrôles permettant à vos utilisateur d'envoyer des fichiers sur votre serveur. Gérer en Ajax il vous permettent d'envoyer vos fichiers sans faire de POST et donc recharger toute votre page.

Exemple :

 $uploadAjax = new Upload("Profil",
                          $this->Core->User->IdEntite,
                          "ProfilAction.LoadInformation()", 
                          "SaveImageProfil");
     

Le constructeur attend 4 paramétres :

• app : L'application qui va recevoir l'appel
• Id : L'identifiant sur lequels vous ajouter votre image. Par exemple l'identifiant d'un article de blog
• callBack : La fonction Js appelé une foi l'envoi effectué. Cela permet donc par exemple d'afficher les nouveaux élements
• action : Le nom de l'action appelé . En effet vous pouvez avoir besoin de plusieurs type d'envois de fichier pour une application

Enfin il faut implémenter la fonction DoUploadFile dans votre application qui elle gérera le transfert de document coté serveur.

/**
 * Sauvegarde les images de presentation
 */
 function DoUploadFile($idElement, $tmpFileName, $fileName, $action)
 {
    //Ajout de l'image dans le repertoire correspondant
    $directory = "Data/Apps/Profil/";
    File::CreateDirectory($directory);
      
    switch($action)
    {
        case "SaveImageProfil":
            //Sauvegarde
            move_uploaded_file($tmpFileName, $directory."/".$idElement.".jpg");

            //Crée un miniature
            $image = new ImageHelper();
            $image->load($directory."/".$idElement.".jpg");
            $image->fctredimimage(48, 0,$directory."/".$idElement."_96.jpg");

            $this->Core->User->Image->Value = $directory."/".$idElement.".jpg";
            $this->Core->User->Save();
               break;
    }
 }