Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
En bon tortionnaire que je suis, je vais vous imposer quelques éléments que le bloc-notes devra absolument posséder pour que vous puissiez prétendre avoir réussi ce TP.
Le framework JS utilisé sera, comme dans le reste du tuto, jQuery (en version 1.2.3 au moment où j'écris ces lignes).
Avant tout, il est bon pour vous de savoir que tout dans ce TP est à votre portée, et qu'aucune notion nouvelle n'y est présente. Vous êtes donc capables, grâce aux chapitres précédents, et à des micro-bases d'utilisation de jQuery, de réaliser ce que je vous demande.
So, here is the cahier des charges :
- le nom de l'application sera "Bloc notes", elle aura pour description "Bloc notes powwa !" ;
- la fenêtre de l'application fera 200*200 pixels, et ne pourra pas être redimensionnée ;
- vous utiliserez la page HTML ci-dessous, sans en modifier la structure HTML (l'ajout de JavaScript se fera uniquement à l'intérieur d'une balise <script></script> placée dans l'en-tête) ;
- fonctionnement de l'appli :
- dès le lancement de l'application, vous devrez vous connecter à la BDD (en mode a/synchrone, à vous de voir quelle méthode est la plus appropriée),
- la base de données devra contenir une table notes avec deux champs : n_ID (INTEGER PRIMARY KEY AUTOINCREMENT) et n_note (VARCHAR),
- la note devra être enregistrée dès la soumission du formulaire (par appui sur le bouton Enregistrer),
- à chaque lancement de l'application, la dernière note de l'utilisateur doit être dans le textarea.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="./AIRAliases.js"></script>
<script type="text/javascript" src="./jquery-1.2.3.js"></script>
<style type="text/css">
.note_textarea {
width: 98%;
height: 155px;
}
</style>
</head>
<body>
<div id="container">
<form id="form_note" name="form_note">
<textarea name="note" id="note" class="note_textarea"></textarea>
<input type="submit" value="Enregistrer" />
</form><puce>
</div>
</body>
</html>
|
Quelques outils pour réussir
La fenêtre de l'appli ne devant pas être redimensionnée, nous devons mettre en place une instruction qui fixera sa taille.
Avant de vous donner la réponse, je voudrais vous faire cogiter un peu. Cette instruction est du même type que celles qui définissent la hauteur ou la largeur de la fenêtre, oui ? Et où définit-on ce genre de choses ?
Secret (cliquez pour afficher)Dans le descripteur d'application pardi !
Eh bien pour ce que nous voulons faire, c'est la même chose. Il suffit juste de placer le bout de code suivant entre les balises <initialWindow> et </initialWindow> :
Code : XML1 | <resizable>false</resizable>
|
Vous aurez peut-être remarqué que j'ai inclus dans le code HTML le fameux fichier contenant les alias de AIR. Si vous n'avez pas encore téléchargé ce fichier, vous pouvez le faire
ici.
Pensez aussi à copier le fichier
jquery-1.2.3.js dans le même répertoire que votre application.
Au cas où vous l'auriez oublié, le code Javascript (rendu possible grâce à jQuery) pour attendre que l'appli soit prête avant de lancer une action/fonction est le suivant :
Code : JavaScript1
2
3 | $(document).ready(function(){
//faire quelque chose
});
|
Ce code nous servira donc afin de lancer la récupération des notes de l'utilisateur au bon moment. De plus, vous utiliserez une syntaxe similaire pour écouter l'événement "soumission du formulaire".
Et je m'arrête là, j'en ai déjà trop dit !
J'suis pas super au point comme tortionnaire quand même...