Aptana IDE est à mon avis le meilleur outil de développement WEB. Il est vrai que je regrette un peu l’époque ou Aptana intégrait son propre module PHP avant d’intégrer celui de Eclipse PDT. Cela étant dit, je n’ai pu me résoudre à changer d’éditeur.
Une des fonctions que j’aime particulièrement est la gestion des « Snippets ». Les « Snippets » sont des templates de codes que vous pouvez intégrer à vos fichier en cliquant dessus (une sorte de copier coller amélioré). Ces « Snippets » vous permettent entre autre d’ajouter des champs de saisie vous permettant d’avoir une trame pour la complétion de vos codes.
je vous propose dans cet article une approche complète de la gestion des « Snippets » dans Aptana. Nous verrons comment les utiliser, les éditer et en créer de nouveau.
Sommaire
- Les Snippets Aptana : Introduction
- Utiliser les Snippets
- Editer les snippets par défaut de Aptana
- Créer vos propre Snippets
1°) Introduction
Puisqu’un exemple vaut mieux qu’un grand discour, nous allons directement passer à un exemple concret de l’utilisation de Snippets ; pour ce faire,. vous allez créer un nouveau projet WEB – PHP que nous appellerons « aptana-snippets ».
Une fois ce projet créé, vous allez créer un fichier « index.php » vierge et l’ouvrir.
Personnellement, mon module de Snippets est situé dans un panneau latéral droit de mon IDE mais vous pouvez le mettre ou bon vous semble. Si vous ne voyez pas le module dans votre interface, voici la façon de l’activer :
Dans le menu principal, cliquez sur « Window => Show view => Other » (figure 1.1.1)
Figure 1.1.1 - Menu contextuel Snippets View
Dans la fenêtre qui suit, sélectionnez le module Snippets (figure 1.1.2)
Figure 1.1.2 - Sélection du module Snippets
Vous devriez maintenant pouvoir accéder à ce module qui est constitué de différents dossiers (figure 1.1.3).
Figure 1.1.3 - Snippets View
2°) Utilisation des snippets
Maintenant, placez votre curseur à l’emplacement dans lequel vous souhaitez insérer ce code (supprimez les balises PHP) puis, dans le panneau de snippets, cliquez sur le dossier HTML afin d’en voir le contenu puis « double cliquez » sur « Insert DOCTYPE XHTML 1.0 Strict ». Vous venez d’exécuter un snippet.
3°) Editer un Snippet
Il est possible de modifier un Snippet. Nous allons éditer notre snipet « form » permettant d’intégrer un formulaire HTML au sein de nos scripts. Cliquez droit sur l’élément « Insert <form> » dans le dossier « HTML » puis choisissez « Editer ». Le document est maintenant ouvert dans votre éditeur.
Voici le code standard de ce Snippet :
Code HTML :
<!-- category: HTML name: Insert <form> tooltip: Insert a <form> tag toolbar: true icon: com.aptana.ide.snippets/icons/layout.png language: text/html --> <form action="" method="" accept-charset="utf-8"> <p><input type="submit" value="Continue" /></p> </form>
Voici maintenant le nouveau code, j’ai simplement ajouté une balise « fieldset » et une balise « legend » dans mon document :
Code HTML :
<!-- category: HTML name: Insert <form> tooltip: Insert a <form> tag toolbar: true icon: com.aptana.ide.snippets/icons/layout.png language: text/html --> <form action="" method="" accept-charset="utf-8"> <fieldset> <legend></legend> </fieldset> <p><input type="submit" value="Continue" /></p> </form>
Enregistrez maintenant ce document puis fermez le. Vous pouvez maintenant le tester en double cliquant dessus et en veillant à ce que votre document « index.php » soit actif te que le curseur soit à la position d’insertion souhaitée.
Note : Il est possible que vous ayez à rebooter Aptana Studio.
Votre code est maintenant inséré dans votre document.
4°) Créer vos propre Snippets
Vous avez la possibilité de créer vos propre snippets mais avant de rentrer dans le vif du sujet nous allons voir de quoi est constitué un snippet :
Un snippet est constitué de deux élément principaux :
- Un en-tête
- Du code
L’en-tête va vous permettre d’identifier votre Snippet, lui donner un nom, le classer dans une catégorie ou encore créer des boites de dialogue afin d’y renseigner des variables.
Quand au code, c’est du code 
…
Note : Vous devez obligatoirement avoir un document ouvert (*.htm, *.js, etc.) avant de pouvoir créer un nouveau Snippet.
La première étape consiste à créer un nouveau dossier à la racine de votre projet, vous appellerez ce dossier « snippets » (figure 4.1.1).
Figure 4.1.1 - Nouveau dossier Snippets
Nous allons ensuite créer un document vierge du type de snippet souhaité, c’est à dire HTML si nous souhaitons réaliser un document HTML ou Js si il s’agit d’un document javascript. Je souhaite créer un nouveau snippet de type HTML.
Je souhaite créer un snippet permettant de créer rapidement un formulaire de connexion, je vais donc éditer mon document en conséquence.
La première chose consiste à renseigner l’en-tête du snippet, c’est à dire les informations de ce snippet :
Code HTML
<!-- category: HTML name: Insert a login form tooltip: Insert un formulaire de connexion utilisateur -->
Nous allons maintenant créer un « Prompt » ; un « Prompt » est une fenêtre de saisie vous permettant de renseignez des informations dans des champs. Ces informations seront alors après validation insérer dans notre document à l’emplacement désiré.
prompt(form_action): Action lors de l'envoi du formulaire prompt(fieldset_class): Class pour le fieldset .... -->
La syntaxe d’un prompt est la suivante :
prompt([nom de la variable] : [Libelle]
Le nom de variable sera repporté dans notre code de la façon suivante :
<input type= »text » name= »${variable} » value= »"/>
Voici le code complet de notre snippet :
<!--
category: HTML
name: Insert a login form
tooltip: Insert un formulaire de connexion utilisateur
prompt(form_action): Action lors de l'envoi du formulaire
prompt(fieldset_class): Class pour le fieldset
prompt(fieldset_legend) : Legende du fieldset
prompt(login_name) : Nom du champ "login"
prompt(password_name) : nom du champ "password"
prompt(submit_name) : Nom du champ "Submit"
prompt(submit_value) : Valeur du champ "Submit"
-->
<form action="${form_action}" method="post">
<fieldset>
<legend>${fieldset_legend}</legend>
<label>Login : </label>
<input type="text" name="${login_name}" value=""/>
<label>Mot de passe : </label>
<input type="password" name="${password_name}" value=""/>
<input type="submit" name="${submit_name}" value="${submit_value}"/>
</fieldset>
</form>
Après avoir enregistré votre snippet, rebooter Aptana et vous devriez avoir un nouveau Snippet dans votre vue « Snippets => HTML » (figur 4.1.2).
Figure 4.1.2 - Ajout d'un nouveau Snippet
Executez pour voir lerésultat (figure 4.1.3).
Figure 4.1.3 - Affichage du prompt
Et voici le résultat après exécution de notre snippet :
Code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form action="" method="post"> <fieldset> <legend>Formulaire de conenxion</legend> <label>Login : </label> <input type="text" name="login" value=""/> <label>Mot de passe : </label> <input type="password" name="password" value=""/> <input type="submit" name="submit" value="Se connecter"/> </fieldset> </form> </body> </html>
Encore plus pratique, il vous est possible d’ajouter des snippets dans votre barre d’outil, simplement en ajoutant le code suivant dans l’en-tête de votre snippet :
<!-- .... toolbar: true icon: strong.png language: text/html .... -->
En ajoutant ce code à votre en-tête, vous aurez un nouveau bouton dans l’éditeur HTML.
