Médiaforma

All posts tagged design

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

Dans cette rubrique, je vais vous montrer comment faire une mise en page sur deux colonnes. La première de largeur fixe et la deuxième qui occupe le reste de l’espace horizontal disponible.

Vous vous en doutez certainement : chacune des colonnes sera représentée par une balise <div>. Le document HTML est des plus classiques. Il contient deux balises <div> d’identifiant col1 et col2 et un texte quelconque est placé dans chacune des balises.

Le code CSS est bien plus intéressant.

Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. Cette dernière sera flottante, sur le côté gauche de la fenêtre. Elle aura une largeur de 200 pixels, une couleur spécifique et une marge intérieure de 10 pixels.

Les lignes 9 à 14 précisent les caractéristiques de la deuxième balise <div>. En définissant une marge à gauche de 220 pixels, cette balise s’insère à droite de la première balise <div>. Vous vous demandez peut-être pourquoi avoir défini une marge de 220 pixels et non de 200 pixels, puisque la première balise <div> est large de 200 pixels. Ajoutez à ces 200 pixels la marge gauche de 10 pixels et la marge droite de 10 pixels de la première balise <div> et vous obtenez une marge de 220 pixels. La ligne 12 définit la couleur d’arrière-plan de la deuxième balise <div> et la ligne 13 sa marge intérieure.

Il ne reste plus qu’à afficher le document HTML dans un navigateur. Lorsque l’on redimensionne la fenêtre du navigateur, la deuxième balise <div> s’étire pour occuper tout l’espace horizontal qui lui est donné.


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

Dans cette section, nous allons définir un design sur trois colonnes. La première colonnes sera ancrée à gauche et aura une largeur fixe. La troisième colonne sera ancrée à droite et aura une largeur fixe. Quant à la deuxième colonne, elle occupera tout l’espace laissé libre par les deux autres colonnes.

Le code HTML est rudimentaire : il contient trois balises <div> consécutives, remplies avec un peu de texte :

Le code CSS est bien plus intéressant.

Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. La colonne est flottante, ancrée à gauche, large de 200 pixels, a une couleur spécifique et une marge interne de 10 pixels.

Les lignes 9 à 15 définissent les caractéristiques de la troisième balise <div>. La colonne est flottante, ancrée à droite, large de 250 pixels, a une couleur spécifique et une marge interne de 10 pixels.

Enfin, les lignes 17 à 23 définissent les caractéristiques de la deuxième balise <div>, qui se trouve entre les deux colonnes flottantes gauche et droite. Cette balise est décalée de 220 pixels à gauche, c’est-à-dire de la largeur de la balise flottante gauche augmentée de ses marges internes. Elle est également décalée de 270 pixels à droite, c’est-à-dire de la largeur de la balise flottante droite augmentée de ses marges internes. Tout comme les deux autres <div>, cette balise a une couleur spécifique et une marge interne de 10 pixels.

Affichons le résultat du code HTML dans un navigateur. Comme vous pouvez le voir la première et la troisième colonne sont ancrées sur les bords gauche et droit de la fenêtre. Quant à la deuxième colonne, elle occupe toute la largeur disponible lorsque la fenêtre est redimensionnée.


Nous allons maintenant nous intéresser au développement d’applications Java dans NetBeans.

Utilisation du mode Design

Nous allons créer une application qui contient :

  • un label suivi d’une zone de texte ;
  • un bouton ;
  • un deuxième label dans lequel s’affichera le texte “Hello” suivi du nom tapé dans la zone de texte.

Pour cela, nous utiliserons la palette d’outils de NetBeans. Voici le résultat à obtenir :

 

 

Définissez un nouveau projet. Nommez-le FenetreSaisie, décochez la case Create Main Class et validez en cliquant sur Finish.

Ajoutez une JFrame Form au projet. Nommez-la Saisie et incluez-la dans le package Intro.

 

 

Insérez les contrôles nécessaires et modifiez leurs propriétés pour obtenir le résultat suivant :

 

 

Remarquez le volet Navigator dans lequel apparaissent tous les composants ajoutés à l’application. Vous pouvez utiliser ce volet pour sélectionner un composant dans le volet Design :

 

 

Examinez le code généré par NetBeans en sélectionnant l’onglet Source dans le volet central.

La classe Saisie correspond au nom choisi lors de l’insertion de la JFrame Form :

public class Saisie extends javax.swing.JFrame

La fonction main() rend visible la fenêtre Saisie :

public static void main(String args[]) {
  …
  java.awt.EventQueue.invokeLater(new Runnable() {
    public void run() {
      new Saisie().setVisible(true);

Les composants insérés dans le JFrame sont représentés dans la partie inférieure du code :

private javax.swing.JButton jButton1;
private javax.swing.JLabel jLabel1;
private javax.swing.JLabel jLabel2;
private javax.swing.JTextField jTextField1;

Lorsque le programme est exécuté, la fonction Saisie() s’exécute. Cette fonction appelle la fonction initComponents(). Cette fonction est générée par NetBeans. Elle correspond au code qui positionne et modifie les caractéristiques des composants dans la fenêtre. La fonction InitComponents() est repliée, mais vous pouvez cliquer sur le signe + devant private void initComponents() pour la développer.

Modification du nom des composants

Pour faciliter l’identification des composants, vous pouvez les renommer. Basculez sur l’onglet Design dans le volet central, cliquez du bouton droit sur le composant à renommer dans le volet Navigator et sélectionnez Change Variable Name dans le menu. Il ne vous reste plus qu’à choisir un nom plus parlant pour la variable et à valider en cliquant sur OK.

 

 

Une fois tous les contrôles renommés, vous pouvez basculer sur l’onglet Source et constater que les noms des contrôles ont été ajustés en conséquence :

javax.swing.JButton Valider;
private javax.swing.JLabel prenomLabel;
private javax.swing.JTextField prenomTextfield;
private javax.swing.JLabel resultatLabel;

Vous allez maintenant insérer du code pour afficher un message personnalisé lorsque l’utilisateur clique sur le bouton. L’onglet Design étant actif, double-cliquez sur le bouton. La méthode événementielle ValiderActionPerformed() est créée :

private void ValiderActionPerformed(java.awt.event.ActionEvent evt) {

}

Insérez cette instruction entre les accolades :

resultatLabel.setText("Hello " + prenomTextfield.getText());

Exécutez le programme en appuyant sur la touche de fonction F6. Entrez un prénom dans la zone de texte et cliquez sur le bouton. Voici le résultat :

 

 

Remarque

Pour créer la méthode événementielle, vous auriez également pu cliquer droit sur le bouton Valider dans l’onglet Design, pointer Events, Action et cliquer sur actionPerformed() :