Médiaforma

All posts tagged mise en page

Le ruban est composé de plusieurs onglets qui permettent d’accéder aux commandes les plus pertinentes dans chacun des domaines de travail de l’application. Dans chaque onglet, les commandes sont regroupées dans différentes catégories appelés groupes.

Les onglets par défaut ont pour nom Fichier, Accueil, Insertion, Mise en page, Formules, Données, Révision, Affichage et Équipe.

L’onglet Fichier donne accès à la vue Backstage, qui regroupe de nombreuses fonctions telles que l’ouverture, la clôture, l’enregistrement, l’impression et le partage de classeurs.

L’onglet Accueil rassemble les commandes les plus courantes : gestion du presse-papier, des polices, de l’alignement, des nombres, de la mise en forme des cellules, des styles et des outils d’édition.

L’onglet Insertion permet d’insérer différents éléments dans un classeur : des tableaux, des illustrations, des graphiques, des liens hypertextes, des zones de texte, etc.

L’onglet Mise en page contient tous les contrôles nécessaires pour mettre en forme vos feuilles de calcul.

L’onglet Formules donne accès à tout ce dont vous avez besoin pour créer des formules : une bibliothèque de fonctions, un gestionnaire de noms et un outil d’audit de formules.

L’onglet Données permet d’utiliser, de trier, de filtrer, de valider, de grouper et de dissocier des données provenant de sources externes.

L’onglet Révision est utilisé dans le cadre d’un travail en équipe. Il donne accès à des outils de vérification, permet d’ajouter des commentaires, de limiter l’accès à certaines cellules et bien d’autres choses encore.

Enfin, l’onglet Affichage permet de choisir le mode d’affichage du classeur, d’afficher ou de cacher la barre de formules, le quadrillage et les en-têtes, de choisir un niveau de zoom et de gérer les fenêtres ouvertes.

Comme nous le verrons dans une autre rubrique, Excel 2016 permet de créer vos propres onglets pour regrouper les commandes les plus fréquemment utilisées en un seul emplacement.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, nous allons aller plus loin en définissant un bandeau ancré dans la partie supérieure de la page, un pied de page ancré dans la partie inférieure de la page, ainsi qu’un menu et une zone de contenu qui se partagent l’espace restant.

Le principe reste le même : une balise <div> occupe toute la hauteur disponible dans le navigateur et contient les autres balises, c’est-à-dire le bandeau, le menu, le contenu et le bas de page.

Examinons le code CSS.

  • Les lignes 1 à 4 indiquent que le document s’étale sur toute la hauteur de la page.
  • Les lignes 6 à 10 indiquent que le conteneur fait 800 pixels de large et s’étale sur toute la hauteur disponible.
  • Les lignes 12 à 21 définissent les caractéristiques du bandeau. Ce dernier est positionné de façon absolue, en haut et à gauche de la fenêtre. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur qui lui est propre et une marge de 10 pixels entoure son contenu.
  • Les lignes 23 à 31 définissent les caractéristiques du menu. Ce dernier est positionné de façon absolue, à 60 pixels du bord supérieur et à gauche. Il est large de 130 pixels, a une couleur spécifique et une marge interne de 10 pixels.
  • Les lignes 33 à 41 définissent les caractéristiques de la zone de contenu. Tout comme les autres divisions, elle est positionnée de façon absolue, à 60 pixels du bord supérieur et à 150 pixels du bord gauche. Sa largeur est égale à 650 pixels. Elle a une couleur spécifique et une marge interne de 10 pixels.
  • Enfin, les lignes 43 à 52 définissent les caractéristiques du pied de page. Ce dernier est positionné de façon absolue, en bas et à gauche de la zone d’affichage du navigateur. Il a une largeur de 800 pixels, une hauteur de 60 pixels, une couleur spécifique et une marge interne de 10 pixels.

Il ne reste plus qu’à afficher le document HTML dans un navigateur et à constater que le pied de page reste ancré à la partie inférieure de la fenêtre lorsqu’elle est redimensionnée.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à utiliser les balises <div> pour créer des blocs indépendants les uns des autres. Nous allons maintenant utiliser trois balises <div> pour créer une page Web comportant un bandeau supérieur, une zone centrale et un pied de page.

Le code HTML est très simple. Après avoir fait référence à la feuille de styles styles7.css via une balise <link>, trois balises <div> sont définies les unes à la suite des autres. Pour les différentier, nous affectons un identifiant unique à chacune d’entre elles : bandeau, contenu et pied. Pour ne pas laisser les balises <div> vides, nous y ajoutons un peu de texte.

Si vous vous demandez d’où vient le texte de la balise d’identifiant contenu, j’ai simplement fait un copier-coller depuis le site http://lipsum.com :

Passons à la feuille de styles. Vous vous en doutez, elle contient les styles relatifs aux identifiants bandeau, contenu et pied. Ici, nous nous contentons de définir la largeur, la hauteur et la couleur d’arrière-plan de chaque élément :

Les codes de couleur hexadécimaux ont été créés sur le site http://www.code-couleur.com/.

Affichons la page div2.html dans Internet Explorer. Le résultat est bien conforme à ce qui était attendu :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les rubriques précédentes, vous avez appris à mettre en place un bandeau supérieur, un menu latéral et un pied de page en utilisant des balises <div>. Dans cette rubrique, je vais vous montrer comment arriver au même résultat en utilisant de nouvelles balises HTML5 :

Le document HTML contient cinq nouvelles balises :

  • <header> pour l’en-tête ;
  • <nav> pour le menu ;
  • <aside> pour une zone secondaire flottante ;
  • <article> pour la zone de contenu ;
  • <footer> pour le bas de page.

Rien de bien extraordinaire dans ce code, si ce n’est quelques balises dont le nom est quelque peu inhabituel. Vous vous en doutez certainement, le gros du travail va se faire dans la feuille de styles.

  • La ligne 1 indique que les balises header, nav, article, section, footer et aside se comporteront comme des blocs. Cette ligne n’est pas obligatoire. Cependant, elle assure la compatibilité du code HTML avec des navigateurs peu ou pas compatible avec la version 5 du langage.
  • La ligne 2 définit la couleur de la balise header, c’est-à-dire de l’en-tête.
  • Les lignes 3 à 8 définissent le comportement de la balise <nav>. Cette balise flottera à gauche de la fenêtre, elle occupera 20% de la largeur de la fenêtre et aura une couleur spécifique.
  • Les lignes 9 à 13 définissent le comportement de la balise <article>. Cette balise occupera 80% de la largeur de la fenêtre et aura une couleur spécifique.
  • Les lignes 15 à 20 définissent le comportement de la balise <aside>. Cette balise flottera à droite de la fenêtre, elle occupera 20% de la largeur de la fenêtre et aura une couleur spécifique.
  • Enfin, la ligne 21 définit la couleur de la balise <footer>, c’est-à-dire du bas de page.

Il ne reste plus qu’à exécuter le code HTML dans un navigateur quelconque. Ici par exemple, dans Google Chrome :


La mise en page CardLayout ne ressemble pas aux autres mises en page. Ici, les invocations à la méthode add() définissent des objets (généralement des panels) qui ne sont pas visibles simultanément mais consécutivement, un peu comme dans un document hypertexte. Pour en savoir plus sur cette mise en page, consultez la documentation de l’API, à l’adresse http://docs.oracle.com/javase/8/docs/api/.


La mise en page GridBagLayout est la plus complète. Comme GridLayout, elle est basée sur la définition de grilles. Mais contrairement à GridLayout, les composants n’ont pas forcément des dimensions identiques : ils peuvent occuper une ou plusieurs cases de la grille.

Le constructeur de la classe GridBagLayout ne comporte aucun argument :

public GridBagLayout();

L’objet GridBagConstraints

Pour pouvoir utiliser une mise en page GridBagLayout, vous devez définir un objet de classe GridBagContraints et initialiser une ou plusieurs de ses propriétés.

Les propriétés gridx et gridy

Les propriétés gridx et gridy définissent les coordonnées de la cellule dans la zone d’affichage.

public int gridx;
public int gridy;

A titre d’exemple, les propriétés gridx et gridy de la première cellule valent (respectivement) 0 et 0. Celles de la cellule à sa droite valent 1 et 0 et celles de la cellule qui la suit valent 0 et 1. Dans un GridBagLayout de 3×3 cellules de même taille, voici comment seraient repérées chacune de ces cellules :

 

 

Certaines cellules peuvent rester vides. Les valeurs de gridx et de gridy peuvent être spécifiées à l’aide d’entiers, comme dans le tableau précédent, mais vous pouvez également utiliser la constante GridBagConstraints.RELATIVE. Cette constante signifie que le composant sera placé dans la cellule de droite (gridx) ou dans la cellule en-dessous (gridy) du composant précédent.

 

Les propriétés gridwidth et gridheight

Les propriétés gridwidth et gridheight définissent respectivement le nombre de cases en colonnes et en lignes du composant courant. La valeur par défaut est 1 :

public int gridwidth;
public int gridheight;

Ces propriétés doivent avoir une valeur entière supérieure ou égale à 1.

Si vous le souhaitez, vous pouvez également leur affecter la constante GridBagConstraints.REMAINDER ou GridBagConstraints.RELATIVE :

  • GridBagConstraints.REMAINDER indique que le composant est le dernier de sa ligne ou de sa colonne.
  • GridBagConstraints.RELATIVE indique que le composant est l’avant-dernier de sa ligne ou de sa colonne. Il occupera toutes les cellules disponibles depuis sa position jusqu’à l’avant-dernière cellule.

 

La propriété anchor

La propriété anchor permet de définir le point d’ancrage d’un composant dans la ou les cellules qu’il occupe. Dans la copie d’écran suivante par exemple, le bouton B1 est ancré dans la partie supérieure de la cellule et le bouton B3 dans la partie inférieure de la cellule :

 

 

Il existe neuf points d’ancrage résumés dans ce tableau :

FIRST_LINE_START PAGE_START FIRST_LINE_END
LINE_START CENTER LINE_END
LAST_LINE_START PAGE_END LAST_LINE_END

 

La propriété fill

La propriété fill détermine comment utiliser l’espace disponible lorsque la taille du composant est inférieure à celle qui lui est offerte :

public int fill;

La valeur par défaut de cette variable est GridBagConstraint.NONE.

Vous pouvez opter pour l’une des constantes suivantes :

  • GrigBagConstraint.NONE pour ne pas redimensionner le composant.
  • GrigBagConstraint.HORIZONTAL pour remplir l’espace horizontal offert.
  • GrigBagConstraint.VERTICAL pour remplir l’espace vertical offert.
  • GrigBagConstraint.BOTH pour remplir l’espace offert, horizontalement et verticalement.

 

Les propriétés weightx et weighty

Les propriétés weightx et weighty déterminent comment se répartit l’espace supplémentaire entre les composants :

public double weightx;
public double weighty;

La valeur par défaut des variables weightx et weighty est 0. Dans ce cas, les composants sont centrés horizontalement (weightx) et verticalement (weighty) dans l’espace qui leur est alloué. La somme des poids horizontaux d’une même ligne doit être 1. De même pour la somme des poids verticaux d’une même colonne.

 

Les propriétés ipadx et ipady

Les propriétés ipadx et ipady définissent les marges internes minimales du composant. La taille des composants est au moins égale à (largeur min + ipadx * 2) x (hauteur min + ipady * 2). La valeur par défaut de ces deux variables est 0.

public int ipadx;
public int ipady;

Pour avoir de plus amples renseignements sur les méthodes de la classe GridBagLayout, vous consulterez la documentation Oracle de l’API.

 

 

 

Quelques exemples

Trois boutons centrés sur une seule ligne :

 

 

JPanel container = new JPanel();
this.setTitle("Grid Bag Layout");
this.setSize(300, 300);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
container.setLayout(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();

c.gridx = 0;
c.gridy = 0;
container.add(new JButton("Test"), c);

c.gridx = 1;
c.gridy = 0;
container.add(new JButton("de"), c);

c.gridx = 2;
c.gridy = 0;
container.add(new JButton("la"), c);

this.setContentPane(container);
this.setVisible(true);

Trois boutons sur une même ligne entièrement occupée. Le premier deux fois plus large que les deux autres.

 

 

c.gridx = 0;
c.gridy = 0;
c.fill = GridBagConstraints.HORIZONTAL;
c.weightx = 0.5;
container.add(new JButton("Test"), c);

c.gridx = 1;
c.gridy = 0;
c.weightx = 0.25;
container.add(new JButton("de"), c);

c.gridx = 2;
c.gridy = 0;
c.weightx = 0.25;
container.add(new JButton("la"), c);

Quatre boutons. Le premier occupe toute la largeur, les trois autres occupent tous l’espace vertical restant. La répartition horizontale des trois derniers boutons est 0,8 0,1 et 0,1.

 

 

c.gridx = 0;
c.gridy = 0;
c.fill = GridBagConstraints.BOTH;
c.gridwidth = 3;
c.weightx = 1;
c.weighty = 0;
container.add(new JButton("Super"), c);

c.gridx = 0;
c.gridy = 1;
c.fill = GridBagConstraints.BOTH;
c.gridwidth = 1;
c.weightx = 0.8;
c.weighty = 1;
container.add(new JButton("Test"), c);

c.gridx = 1;
c.gridy = 1;
c.weightx = 0.1;
container.add(new JButton("de"), c);

c.gridx = 2;
c.gridy = 1;
c.weightx = 0.1;
container.add(new JButton("la"), c);
Exercice

Ecrivez le code nécessaire pour obtenir cet affichage :

 

 

Solution

 

public Test4(){
    JPanel container = new JPanel();
    this.setTitle("Grid Bag Layout");
    this.setSize(300, 300);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    container.setLayout(new GridBagLayout());
    GridBagConstraints c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;

    c.gridx = 0;
    c.gridy = 0;
    c.gridwidth = 1;
    container.add(new JButton("1"), c);

    c.gridx = 1;
    c.gridy = 1;
    container.add(new JButton("2"), c);

    c.gridx = 0;
    c.gridy = 2;
    c.gridwidth = 5;
    container.add(new JButton("3"), c);

    c.gridx = 3;
    c.gridy = 3;
    c.gridwidth = 1;
    container.add(new JButton("4"), c);

    c.gridx = 4;
    c.gridy = 4;
    container.add(new JButton("5"), c);

    c.gridx = 0;
    c.gridy = 4;
    container.add(new JButton("6"), c);

    c.gridx = 1;
    c.gridy = 3;
    container.add(new JButton("7"), c);

    c.gridx = 3;
    c.gridy = 1;
    container.add(new JButton("8"), c);

    c.gridx = 4;
    c.gridy = 0;
    container.add(new JButton("9"), c);

    this.setContentPane(container);
    this.setVisible(true);
}

La mise en page BorderLayout permet de définir la position géographique des objets en indiquant l’une des positions suivantes : North, South, East, West ou Center dans la méthode add().

Le constructeur de la classe BorderLayout admet deux syntaxes :

public BorderLayout();

public BorderLayout(int hgap, int vgap);

hgap et vgap sont les espacements horizontaux et verticaux entre les objets.

Si vous utilisez la première syntaxe, l’espacement entre les objets sera inexistant.

Exemple :

Cet exemple utilise les cinq constantes géographiques pour disposer cinq boutons sur une zone graphique de 300 x 200 pixels.

import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class BLayout extends JFrame{
    public BLayout(){
        JPanel container = new JPanel();
        this.setTitle("Border Layout");
        this.setSize(300, 150);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        container.setLayout(new BorderLayout());
        container.add(new JButton("Test"),BorderLayout.NORTH);
        container.add(new JButton("de"), BorderLayout.EAST);
        container.add(new JButton("la"), BorderLayout.SOUTH);
        container.add(new JButton("classe"), BorderLayout.WEST);
        container.add(new JButton("GridLayout"), BorderLayout.CENTER);
        this.setContentPane(container);
        this.setVisible(true);
    }
    public static void main(String[] args) {
        BLayout bl = new BLayout();
    }
}

Voici le résultat :