x

Dans cette procédure, vous créez la page HTML avec l'Assistant HTML/Document. Vous pouvez également créer une nouvelle page HTML à partir du menu d'application, Barre à outils Accès rapide, ou Panneau Arborescence Environnements.

1. Sur l'onglet Accueil, dans le groupe Contenu, cliquez sur HTML/Document.

   L'assistant HTML/Document s'ouvre.

2. Assurez-vous que la page HTML soit sélectionnée dans la zone Type de fichier, et Distribution soit sélectionné dans la zone Naviguer vers l'emplacement pour un nouvel élément.
3. Cliquez sur Terminer.

   Les définitions suivantes s'ouvrent :

   • Canevas HTML
   • Panneau Tâches et animations
   • Panneau sources Requête & Données
   • Panneau Vignettes
   • Panneaux paramètres
   • Panneau Propriétés

x

Dans cette procédure, vous allez ajouter la procédure salesreport.fex, que vous avez créé plus tôt dans ce tutoriel, à la page HTML.

1. Sur l'onglet Composants, dans le groupe Rapports, cliquez sur Rapport.
2. Faites glisser le pointeur à travers la zone de dessin HTML pour créer un conteneur Rapport, comme le montre l'image suivante.

   

3. Cliquez sur le conteneur Rapport, et ouvrez le panneau Propriétés.
4. Dans la zone Attributs de style, sous Basic, réglez l'attribut Gauche à 75px, et l'attribut Haut 220px.

   Cela change l'emplacement du conteneur de rapport sur votre page HTML.

5. Faitez un clic droit sur le conteneur Rapport et cliquez sur Référencer une procédure existante.

   La boîte de dialogue Ouvrir le fichier s'affiche.

6. Faites défiler la liste de procédures, cliquez sur salesreport.fex puis cliquez sur OK.

   La fenêtre de dialogue Nouveaux paramètres s'ouvre. Utilisez cette zone de dialogue pour chaîner les contrôles pour COUNTRY_NAME et STATE_PROV_NAME, comme le montre l'image suivante.

   

   Vous pouvez cocher la case à côté du contrôle, dans la colonne Contrôle de la chaîne, ou vous pouvez sélectionner les Contrôles de la chaîne auto, au-dessus de la case spécifiée.

7. Cliquez sur OK.

   Le salesreport.fex et un objet de formulaire qui contient des contrôles s'ouvrent sur la page HTML, comme le montre l'image suivante.

   

8. Redimensionnez la largeur du conteneur Rapport au besoin, pour adapter l'ensemble du rapport.
9. Regardez le rapport dans Aperçu pour vous assurer que vous en êtes satisfait. Déplacez et redimensionnez les composants du rapport, si nécessaire.

x

Dans cette procédure, vous ajoutez un graphique en secteur à la page HTML. Vous ajoutez une dimension (Produit Catégorie) et de multiples mesures (Coût du produit, Revenu) pour l'axe Y.

Le graphique utilise les mêmes paramètres que le rapport, de sorte que les contrôles (Where=Région, Where=Etat) régissent le rapport et la procédure du graphique. Cependant, la fenêtre de dialogue Nouveaux paramètres ne s'ouvre pas lorsque vous enregistrez le graphique à nouveau dans la page HTML.

A la fin de cette section du tutoriel, vous aurez créé deux commandes, un rapport et un graphique, et vous aurez chaîné le champ COUNTRY_NAME au champ STATE_PROV_NAME.

1. Sur l'onglet Composants, dans le groupe Rapports, cliquez sur Graphique.
2. Faites glisser le pointeur à travers la zone de dessin HTML pour créer un conteneur Graphique, comme le montre l'image suivante.
3. Faitez un clic droit sur le conteneur de graphique, puis cliquez sur Nouveau graphique.

   La boîte de dialogue Ouvrir le fichier s'affiche.

4. Cliquez sur Annuler.

   Une zone de dessin vierge, nommée HtmlPage1_chart1, s'ouvre.

5. Dans le panneau Vue Procédure, faites un clic droit sur le dossier de composants du fichier HtmlPage1_chart1, pointez vers Nouveau, puis cliquez sur Jointure.
6. Pour utiliser les mêmes champs qui ont été joints au rapport, suivez les étapes de Ajouter le composant Jointure .
7. Dans le panneau Vue Procédure, faites un clic droit sur le composant Jointure, pointez vers Nouveau, puis cliquez sur Graphique.

   Le panneau Assistant Graphique - Sélectionner un fichier maître s'ouvre, comme le montre l'image suivante.

   

8. Cliquez sur wf_retail_product.mas, puis sur Terminer.

   La zone de travail Graphique s'ouvre, donnant un aperçu d'un exemple de graphique, comme le montre l'image ci-dessous.

   

9. Ajoutez les champs Catégorie Produit, Coût Produitet Revenu, Devise locale au graphique.
10. Créez les mêmes clauses WHERE crées dans le rapport. Déplacez Pays depuis le volet Données vers le volet Filtre. Répétez pour Etat, Province.
11. Sur l'onglet Format, dans le groupe Types de graphique, cliquez sur Secteur.
12. Sur l'onglet Accueil, dans le groupe Rapport, cliquez sur Thème.

    La fenêtre de dialogue du modèle prédéfini Modèles - Naviguer s'ouvre.

13. Sélectionnez ENBlue_Medium2.sty à partir des modèles disponibles et cliquez sur Ouvrir.
14. Fermez la zone de dessin HtmlPage1_chart1 et cliquez sur Oui lorsque vous êtes invité à enregistrer la procédure.

    Le graphique est affiché sur la page HTML, comme le montre l'image ci-dessous.

    

x

Dans cette procédure, vous ajoutez un style à la page HTML avec le panneau Propriétés.

Remarque : vous pouvez trier l'affichage des propriétés dans le panneau Propriétés par catégorie ou par ordre alphabétique. Si vous ne trouvez pas de propriété dans votre affichage, sélectionnez une option de tri différente de la barre à outils du panneau Propriétés.

1. Rendez le composant du rapport et le composant du graphique de la même taille.
   1. Cliquez sur le composant du graphique, appuyez sur la touche Ctrl de votre clavier, puis cliquez sur le composant de rapport.
   2. Sur l'onglet Positionnement, dans le groupe Positionnement, cliquez sur Même taille.

      Remarque : le premier composant sélectionné est le composant dont la taille changera. La taille va changer à celle du deuxième composant sélectionné, comme illustré dans l'image suivante.

      

2. Ajouter un titre à la page HTML.
   1. Sur l'onglet Composants, dans le groupe Eléments génériques, cliquez sur Texte.
   2. Faites glisser le pointeur à travers la zone de dessin HTML pour créer un conteneur de texte.
   3. Double-cliquez sur le conteneur du texte.
   4. Supprimez le texte par défaut puis entrez le Résumé sur le produit au détail.
3. Modifiez la couleur de la police.
   1. Sur la zone de dessin, cliquez sur le conteneur de texte.
   2. Dans le panneau Propriétés, sous Basic dans la zone Attributs de style, cliquez sur la propriété Couleur.

      Une flèche apparaît.

   3. Cliquez sur la flèche de propriété Couleur.

      La fenêtre de dialogue Sélecteur de couleur s'ouvre.

   4. Sur l'onglet Palette web, sélectionnez la couleur jaune (#ffff66).
   5. Cliquez sur OK.
4. Modifiez la taille de la police.
   1. Sur la zone de dessin, cliquez sur le conteneur de texte.
   2. Dans le panneau Propriétés, sous Basic dans la zone Attributs de style, cliquez sur la propriété Taille de police.

      Une flèche apparaît.

   3. Dans la liste, cliquez sur xx-large.
   4. Cliquez sur le conteneur du texte.
   5. Sur l'onglet Positionnement, dans le groupe Alignement du texte, cliquez sur Centre.
5. Modifiez la couleur d'arrière-plan de la page HTML.
   1. Cliquez sur une zone vierge du canevas pour activer l'objet document.
   2. Dans le panneau Propriétés, sous Basic dans la zone Attributs de style, cliquez sur la propriété Couleur d'arrière-plan.

      Une flèche apparaît.

   3. Cliquez sur la flèche de propriété Couleur d'arrière-plan.

      La fenêtre de dialogue Sélecteur de couleur s'ouvre.

   4. Sur l'onglet Palette web, sélectionnez la couleur bleu marine (#000099).
   5. Cliquez sur OK.

   Votre page HTML comporte maintenant un rapport et graphique de la même taille, un grand titre jaune, et un fond bleu marine, comme le montre l'image suivante.

   

6. Sur la barre à outils Accès rapide, cliquez sur Enregistrer.

   La fenêtre de dialogue Enregistrer sous s'affiche.

7. Entrez Rapport ventes annuelles distribution.

   Remarque : App Studio remplace automatiquement chaque espace avec un trait de soulignement, car les noms de fichiers ne peuvent contenir d'espace.

8. Cliquez sur OK.