Java EE Concevez et développez une application web responsive

Transcription

1 Introduction 1. Le Responsive Web Design (RWD) Public Description de l ouvrage Présentation de l application de prêt de livres Mots de l auteur 19 Les bases du Java EE 1. Premiers pas avec Java EE Principes d application web Architecture Java EE 7 standard Plateforme Java EE 7 : nouveautés Technologies JSP et JavaBean Les JSP Présentation Exemple Les JavaBeans Présentation Exemple Servlets Principes du design pattern MVC/MVC Design pattern MVC MVC2 avec Struts /16

2 4. Principe du framework Struts Présentation Fichiers de configuration Le fichier web.xml Le fichier struts.xml Arborescence d un projet Java Struts 2 34 Installation : environnement de travail 1. Installation de Netbeans Installation du Java SE Development Kit Installation sous Linux (Ubuntu et Debian) Installation sous Windows lnstallation de Netbeans Installation sous Linux Installation sous Windows Installation de Struts Plug-ins Netbeans Ajout du plug-in Struts Création d'un projet Struts Arborescence d'un projet Struts Installation de GlassFish Server Serveur applicatif GlassFish Serveur web frontal Apache Installation de PostgreSQL Installation Sous Linux Sous Windows Ajout d'un pilote JDBC 73 2/16

3 5. Installation de Maven, Git et Svn Maven Git SVN 79 Les bases de données avec Java EE 1. Modélisation de la BD avec Java EE Cahier des charges Interface utilisateur : Front-end Interface administrateur : Back-end IHM (Interface homme-machine) Schéma UML2 : BD catalog Informations relatives aux livres Informations relatives au catalogue Informations relatives aux utilisateurs Schéma de réservation d'un livre Schéma global pour le catalogue Script SQL de la base de données Catalog Design pattern DAO Description Classe Author Description des requêtes SQL Implémentation du pattern DAO Connexion DAO Connexion à la base de données Pattern Singleton Connexion Persistance des données 106 3/16

4 4.1 Ajout d'un auteur Modification d'un auteur Suppression d'un auteur Utilisation du framework Hibernate Installation du plug-in sous Netbeans Hibernate Équivalence Table/Objet Classe Author encapsulant les données Fichier XML correspondant Configuration des propriétés de connexion Mise en œuvre sous Netbeans 114 Conception d'une application Java EE 1. HTML et HTML Les bases HTML Introduction à HTML Les principales balises HTML5 : les apports Nouvelles balises pour structurer un document Nouveaux éléments pour le multimédia Nouveaux éléments de formulaire Nouveaux attributs Autres éléments API HTML Structuration de ses pages Bien structurer sa page Exemple Conception des formulaires HTML5/JSP Organisation des pages Arborescence du répertoire JSP Inclusion des fichiers communs 135 4/16

5 2.2 Formulaire HTML Structurer ses formulaires HTML Messages d'erreur ou informatifs Mise en œuvre en HTML Formulaires HTML5 avec Struts Tags Struts 2 : formulaire Messages d erreur Mise en œuvre : formulaire Struts Formulaire authentification adhérent Formulaire d'ajout d'un adhérent Traitement des données d un formulaire Gestion de l accès aux données La balise <s:property/> La balise <s:url> La balise <s:date/> La balise <s:set> Itération, tri et condition Balise <s:iterator> Balise <s:sort/> Balise <s:if>, <s:else/> et <s:elseif/> Gestion des sessions utilisateurs Définition d'une variable de session Enregistrement Suppression Exemple complet Cookies Objet Java Cookie HTML Storage mieux que les cookies Intérêt du HTML Storage Compatibilité des navigateurs Objet localstorage Objet sessionstorage 167 5/16

6 6. Envoi de fichiers Téléchargement d'un fichier Balise <input> Balise <s:file/> Mise en œuvre 168 Utiliser les feuilles de style CSS3 1. Introduction à CSS Feuilles de style Code CSS Définition d'une règle de style Inclusion d'un fichier CSS Application d'un style Sélection d'un élément avec son identifiant Sélection d'un élément d'après sa classe Sélection d'un élément d'après son type Autres sélecteurs ou pseudoclasses Ordre de priorité des styles Apport du CSS Couleurs et images Couleurs Images Effet de texte, bordures et dimensions Effet de texte, police web Bordures Dimensions Débordement de contenu Multicolonnage Animations, transitions et transformations Animations Transitions 189 6/16

7 2.4.3 Transformations Media queries Principes de base Mise en forme Caractères et polices Couleurs et images Bordures Tableaux Positionnement Marges Positionnement des éléments Propriété display Propriétés top, right, bottom, left Propriété position Propriété float Propriété z-index Centrage horizontal Centrage vertical Mise en œuvre des feuilles de style Formulaire d'authentification Feuille de style Bootstrap Un plug-in responsive Introduction Installation Exemple Bootstrap Frameworks CSS : Sass, Less Sass Installation Variables Mixins 227 7/16

8 6.1.4 Imbrication Fonctions Less Installation Fichier Less Variables Mixins Imbrication Opérations Fonctions 235 JavaScript 1. Introduction à JavaScript Un langage de programmation JavaScript, mais pas Java Insertion de code JavaScript dans du HTML Possibilités avec JavaScript Les bases du JavaScript Conventions Syntaxe Commentaires Indentation Noms de variables et de fonctions Types simples, variables, expressions Types Variables et opérateurs arithmétiques Autres opérateurs Concaténation Conditions, boucles et switch Conditions Boucles Switch 248 8/16

9 2.4 Tableaux Tableau à une dimension Tableau multidimensionnel Fonctions Fonctions sans arguments Fonctions avec arguments Fonctions avec valeur retournée JavaScript et les objets Objet String Objet Date Interaction HTML/JavaScript L'objet window et ses méthodes L'objet document et ses méthodes Log et alerte Modification de propriétés CSS Événements et objets HTML Événements Méthode AddEventListener jquery et jquery UI Librarie jquery Téléchargement de jquery Inclusion de jquery Fonctionnement de base de jquery jquery : la syntaxe Attendre que la page soit chargée Sélection d'éléments Sélection à partir du nom de l élément Sélection à partir de l'identifiant Sélection à partir de la classe Filtres sur l arborescence Filtres de contenu Filtres de visibilité Quelques méthodes Récupérer et modifier le contenu HTML Récupérer ou modifier les propriétés CSS 278 9/16

10 3.4.3 Récupérer ou modifier la classe CSS Validation de formulaires avec jquery Récupération d'éléments des formulaires Méthodes utiles aux formulaires Validation de formulaires Introduction à jquery UI Récupération de la librairie jquery UI Quelques méthodes Angular JS Installation de l'environnement Bases pour créer une application Introduction Module Contrôleur Scopes Modèle Directives Data Binding Directives : éléments de formulaire Propriétés Angular pour les formulaires Validation de formulaires 297 Prototypage d une application responsive 1. Bonnes pratiques Conception d'une application web Conception participative Agile et Scrum Spécificités du Responsive Maquettes et outils Croquis ou prototype fait main Logiciels de maquettage /16

11 2.2.1 Photoshop et Gimp PowerPoint ou LibreOffice Impress Aller plus loin Vidéos Page web statique Mise en œuvre IHM : Livres à la une : écran>1280 px IHM : Livres à la une : 800 px<écran<1280 px IHM : Livres à la une : écran entre 400 px et 800 px IHM : Livres à la une : écran < 400 px Modélisation IHM et aspects cognitifs Interface homme-machine Aspects cognitifs Mémoire sensorielle Mémoire à court terme Processus d'apprentissage Modélisation des tâches utilisateurs Théorie de Norman Exemple de modélisation par tâches Ergonomie Qu est-ce que l ergonomie? Principes de base Critères ergonomiques Scapin et Bastien Recommandations Méthodes pour améliorer les IHM Ergonomie et caractère responsive Généralités Recommandations Outils et plug-ins de test Outils Redimensionnement avec le navigateur Test sur différents terminaux /16

12 5.1.3 Outils en ligne Plug-ins de test Émulateur de Google Chrome Émulateur de Firefox Émulateur d'opera Mobile Émulateur d'internet Explorer Pensez votre application responsive 1. Introduction aux Media Queries Types de médias Opérateurs logiques Conditions Mise en œuvre des media queries Points de rupture Points de rupture majeurs/mineurs Définition de points de rupture Mise en œuvre Compatibilité Viewport Balise meta HTML viewport Règle Menu responsive Menus classiques Menu horizontal Menu vertical Menu «hamburger» Introduction au menu hamburger Principes de fonctionnement /16

13 5. Formulaires Formulaire responsive Mise en œuvre d un formulaire responsive Images, graphiques et animations Images, animations et graphiques adaptatifs Débordement des images Utilisation de la propriété max-height Mise en œuvre d une image adaptative Grilles flexibles Introduction Principes Grilles à 12 colonnes Mise en œuvre d une grille personnalisée Objectif Mise en œuvre Tableaux Introduction Principes Typographie Des polices éprouvées pour le Web Polices fiables Autres polices Lisibilité du texte Critères de lisibilité Mise en page du texte 384 Application responsive et performante 13/16

14 1. Interaction utilisateur Introduction HTML5 pour plus d interactions Nouvelles interactions Interaction hors ligne Message d erreur Prévention des erreurs Détection des erreurs Affichage des erreurs Aider à corriger les erreurs Fenêtre modale Introduction Utilisation d'une fenêtre modale Sortie d'une fenêtre modale Concevoir une fenêtre modale Principes Mise en œuvre Performance Émulation de connexions moins rapides Chrome Firefox Optimisation de la performance Compression des fichiers Mise en cache de ressources Aller plus loin Minification des fichiers Optimisation des images localstorage versus cookies Référencement Introduction /16

15 5.2 Amélioration du référencement Agir dans le HTML Stratégie de liens 407 Développez : application prêt de livre 1. Introduction Spécifications Partie front-end Paramètres pour la mise en page Consulter les livres par auteur Consulter les livres recommandés Implémenter la recherche Ajouter la table Mot-clé Concevoir le menu hamburger Partie back-end Ajouter un auteur Consulter les auteurs 416 Correction de l exercice 1. Introduction La base de données Partie front-end Consulter les livres par auteur DisplayAllAuthor.jsp stylesheet.css header.jsp footer.jsp /16

16 3.1.5 Book.java BookDAO.java DisplayAuthorAction.jsp struts.xml SQLConstant.java Afficher les livres recommandés index.jsp struts.xml BookAction.java Implémenter la recherche SearchAction.java Autres fichiers Concevoir le menu hamburger index.jsp hamburger.js stylesheet.css Partie back-end Ajouter un auteur Menu administration administrationmenu.css AdministrationIndex.jsp AddNewAuthor.jsp AuthorDAO.java AuthorAction.java Consulter la liste des auteurs 469 Index /16