Aujourd'hui, je vous propose de générer avec Telosys Tools 2.0.3 (nouvelle version !) une application HTML5 complète utilisant le local storage et appcache offline basée sur :
- Angularjs 1.0.5
- jQuery 1.9.1
- Bootstrap Twitter 2.3.0
- Modernizr 2.6.2
- Toastr 1.1.5
Procédure de génération
Elle s'appuie sur les éléments suivants :
- eclipse 3.6+
- maven 3.x.x+ et un archétype du central repository OU un starterkit sans maven pour les réfractaires
- le plugin Telosys Tools 2.0.3 récupérable depuis l'Eclipse Marketplace (telosys-tools)
- un bon vieux Tomcat 6+ (comme il n'y a pas de java, Apache Http Server ou autre est aussi une possibilité)
- un vrai navigateur supportant le Html5 pour tester (chrome ou firefox)
Voici les étapes :
- Installez ou mettez à jour le plugin Telosys pour Eclipse : Eclipse Marketplace > Telosys tools : telosys-tools
Ce plugin nous permettra de générer l'ensemble des pages et fichier javascript pour chaque entité (table) de notre base de données - Depuis Eclipse, créez un nouveau projet Maven en utilisant notre archétype (pour les non maven, voir en fin de tableau)
Clic droit / menu fichier > new > new project > new maven project
Choisissez l'archétype "angularHtml5offline-starterkit" en filtrant sur "org.telosys"
Renseignez les informations nécessaires avec par exemple les valeurs suivantes :
- 'groupId': : org.test
- 'artifactId': : html5OfflineAngularjs
- 'version': 1.0-SNAPSHOT: :
- 'package': org.test: :
Pour cela il faudra ajouter le remote Catalog suivant : archetype-catalog
Si vous ne le trouvez pas dans le catalog maven, il est disponible ici : sonatype repo
Pour ceux qui ne souhaitent pas utiliser maven, vous pouvez créer depuis eclipse un nouveau dynamic web project
puis télécharger le starterkit ci-dessous et l'importer dans votre dynamic web project (clic droit sur le projet > import > archive file)
starter kit pour les non maven : starterkit sans maven
- Sous Eclipse, double-cliquez dans ce nouveau projet sur le fichier :
TelosysTools/repos/DerbyTelosysBookStore.dbrep
Le plugin Telosys devrait alors prendre la main et vous présenter une fenêtre de génération et de gestion des entités - Ouvrez onglet "Bulk generation" (en bas de la fenêtre) et sélectionnez toutes les entités et toutes les targets, puis lancer la génération à l'aide du bouton "Generate"
Confirmez l'opération pour lancer la génération, un message de confirmation devrait vous indiquer 75 fichiers crées - Toutes les fichiers javascript et pages ont étés générées dans le répertoire /src/main/webapp/
Voici la structure cible pour un projet maven :
- Ajoutez le projet dans les webapp de Tomcat (à créer si aucun serveur n'est déclaré)
- Démarrez Tomcat
- Faites les tests suivant :
- Ouvrez l'url de l'application : http://localhost:8080/html5OfflineAngularjs/
- Arrêtez tomcat
- Attendez quelques secondes et constatez que l'application a bien détecté que le serveur n'est plus disponible (offline indiqué en haut)
- Entrez dans la page de gestion des Author et ajoutez en un
- Fermer votre navigateur ou l'onglet de l'application
- Ouvrez de nouveau l'application : http://localhost:8080/html5OfflineAngularjs/
- Entrez de nouveau dans la page de gestion des Author et constater que ca fonctionne et que l'auteur que vous avez crée existe toujours
- Enjoy
Dans la 2ème partie nous étudierons la structure de cette application pour en comprendre le fonctionnement.
A bientôt.
Liens utiles :
Le site de Telosys : http://www.telosys.org/
La doc : https://sites.google.com/site/telosystools/
Les sources : https://code.google.com/p/telosys-tools
L'update site : http://marketplace.eclipse.org/content/telosys-tools
Le site google code : https://code.google.com/p/telosys-tools/
L'archétype maven angularHtml5offline-starterkit dans le central repository :
http://search.maven.org/#search%7Cga%7C1%7Corg.telosys
https://oss.sonatype.org/content/repositories/releases/org/telosys/starterkits/angularHtml5offline-starterkit/1.0.0/
Le starterkit SANS maven : starterkit sans mavenhttps://oss.sonatype.org/content/repositories/releases/org/telosys/starterkits/angularHtml5offline-starterkit/1.0.0/
Le code source de l'archétype maven : https://github.com/asicfr/angularHtml5offline-starterkit
Angular : http://angularjs.org/
Jquery : http://jquery.com/
Bootstrap : http://twitter.github.com/bootstrap/
Modernizr : http://modernizr.com
Toastr : https://github.com/CodeSeven/toastr
Html5 app cache : https://developer.mozilla.org/fr/docs/Utiliser_Application_Cache
Local storage : http://www.w3schools.com/html/html5_webstorage.asp
Monitoring offline : http://ednortonengineeringsociety.blogspot.fr/2010/10/detecting-offline-status-in-html-5.html
App cache sous firefox : about:cache (browser.cache.memory.enable doit être à true)
App cache sous chrome : chrome://appcache-internals/
CRUD : http://fr.wikipedia.org/wiki/CRUD
Aucun commentaire:
Enregistrer un commentaire