IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

GWT et Vaadin Java Discussion :

Problème positionnement des widgets


Sujet :

GWT et Vaadin Java

  1. #1
    Membre confirmé
    Inscrit en
    Mars 2010
    Messages
    75
    Détails du profil
    Informations forums :
    Inscription : Mars 2010
    Messages : 75
    Par défaut Problème positionnement des widgets
    Bonsoir
    Je suis débutant en GWT, Je demande votre aide pour pouvoir mettre mes widgets définis dans les classes clients(mes composites) dans l'emplacement ou je veux sur la page html
    Je crée mon projet,je veux que mes widgets s'affichent dans la page html dans l'emplacement désigné par l'id

    code dans la classe chez le serveur
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    final Button sendButton = new Button("Send");
    final Label errorLabel = new Label();
     
    RootPanel.get("sendButtonContainer").add(sendButton);
    RootPanel.get("errorLabelContainer").add(errorLabel);
    code dans la page html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
        <table width="587" height="294" border="6" align="center">
     
           <tr>
              <td id="errorLabelContainer"> </td>
             	<td id="sendButtonContainer"></td>
           </tr>
        </table>
    Mais pourtant les widgets(la label et le bouton) s'affichent a gauche de la page html et non pas dans les colonnes du tableau

  2. #2
    Membre éclairé
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2011
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aisne (Picardie)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2011
    Messages : 51
    Par défaut
    Bonjour,

    Peux tu donner le code complet de ta classe d'entrée et de ta page host ? j'ai testé ton bout de code et il fonctionne sur Chrome et FireFox.

    Maxime

  3. #3
    Membre confirmé
    Inscrit en
    Mars 2010
    Messages
    75
    Détails du profil
    Informations forums :
    Inscription : Mars 2010
    Messages : 75
    Par défaut
    D'accord mon ami
    voici mon code d'entrée
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    package com.example.FameuxBinome.client;
     
    import com.example.FameuxBinome.shared.FieldVerifier;
     
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class FameuxBinome implements EntryPoint {
    	/**
             * The message displayed to the user when the server cannot be reached or
             * returns an error.
             */
    	private static final String SERVER_ERROR = "An error occurred while "
    			+ "attempting to contact the server. Please check your network "
    			+ "connection and try again.";
     
    	/**
             * Create a remote service proxy to talk to the server-side Greeting service.
             */
    	private final GreetingServiceAsync greetingService = GWT
    			.create(GreetingService.class);
     
    	/**
             * This is the entry point method.
             */
    	public void onModuleLoad() {
     
    		final Label errorLabel = new Label();
    		// Use RootPanel.get() to get the entire body element
    		RootPanel.get("errorLabelContainer").add(errorLabel);
     
     
    		final Button btnEnvoyer = new Button("envoyer");
    		RootPanel.get("nameFieldContainer").add(btnEnvoyer, 247, 231);
     
    		Button button = new Button("annuler");
    		RootPanel.get("annuler").add(button, 335, 231);
    		button.setSize("62px", "30px");
     
    		final TextBox txtbxUserLogin = new TextBox();
    		txtbxUserLogin.setText("User login");
    		RootPanel.get("userlog").add(txtbxUserLogin, 159, 56);
    		txtbxUserLogin.setSize("150px", "23px");
     
    		final PasswordTextBox txtbxUserPassword = new PasswordTextBox();
    		txtbxUserPassword.setText("user password");
    		RootPanel.get("userpass").add(txtbxUserPassword, 159, 106);
    		txtbxUserPassword.setSize("150px", "23px");
     
    		Label lblLogin = new Label("Login");
    		RootPanel.get("log").add(lblLogin, 42, 73);
     
     
    		Label lblPassword = new Label("Password");
    		RootPanel.get("pass").add(lblPassword, 42, 123);
     
    		// Create the popup dialog box
    		final DialogBox dialogBox = new DialogBox();
    		dialogBox.setText("Remote Procedure Call");
    		dialogBox.setAnimationEnabled(true);
    		final Button closeButton = new Button("Close");
    		// We can set the id of a widget by accessing its Element
    		closeButton.getElement().setId("closeButton");
     
    		final Label textToServerLabel = new Label();
    		final HTML serverResponseLabel = new HTML();
    		VerticalPanel dialogVPanel = new VerticalPanel();
    		dialogVPanel.addStyleName("dialogVPanel");
    		dialogVPanel.add(new HTML("<b>Sending name to the server:</b>"));
    		dialogVPanel.add(textToServerLabel);
    		dialogVPanel.add(new HTML("<br><b>Server replies:</b>"));
    		dialogVPanel.add(serverResponseLabel);
    		dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);
    		dialogVPanel.add(closeButton);
    		dialogBox.setWidget(dialogVPanel);
     
    		// Add a handler to close the DialogBox
    		closeButton.addClickHandler(new ClickHandler() {
    			public void onClick(ClickEvent event) {
    				dialogBox.hide();
    				btnEnvoyer.setEnabled(true);
    				btnEnvoyer.setFocus(true);
    			}
    		});
     
    		// Create a handler for the sendButton and nameField
    		class MyHandler implements ClickHandler, KeyUpHandler {
    			/**
                             * Fired when the user clicks on the sendButton.
                             */
    			public void onClick(ClickEvent event) {
    				sendNameToServer();
    			}
     
    			/**
                             * Fired when the user types in the nameField.
                             */
    			public void onKeyUp(KeyUpEvent event) {
    				if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
    					sendNameToServer();
     
    				}
    			}
     
    			/**
                             * Send the name from the nameField to the server and wait for a response.
                             */
    			private void sendNameToServer() {
    				// First, we validate the input.
    				errorLabel.setText("");
    				String textToServerLog = txtbxUserLogin.getText();
    				String textToServerPass = txtbxUserPassword.getText();
    				if (!FieldVerifier.isValidName(textToServerLog)|| !FieldVerifier.isValidName(textToServerPass) ) {
    					errorLabel.setText("Please enter at least four characters");
    					return;
    				}
     
    				// Then, we send the input to the server.
    				btnEnvoyer.setEnabled(false);
    				textToServerLabel.setText(textToServerLog);
    				serverResponseLabel.setText("");
    				greetingService.greetServer(textToServerLog,textToServerPass,
    						new AsyncCallback<String>() {
    							public void onFailure(Throwable caught) {
    								// Show the RPC error message to the user
    								dialogBox
    										.setText("Remote Procedure Call - Failure");
    								serverResponseLabel
    										.addStyleName("serverResponseLabelError");
    								serverResponseLabel.setHTML(SERVER_ERROR);
    								dialogBox.center();
    								closeButton.setFocus(true);
    							}
     
    							public void onSuccess(String result) {
    								dialogBox.setText("Remote Procedure Call");
    								serverResponseLabel
    										.removeStyleName("serverResponseLabelError");
    								serverResponseLabel.setHTML(result);
    								dialogBox.center();
    								closeButton.setFocus(true);
    							}
    						});
    			}
    		}
     
    		// Add a handler to send the name to the server
    		MyHandler handler = new MyHandler();
    		btnEnvoyer.addClickHandler(handler);
    	}
    }
    et voici mon code html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <!doctype html>
    <!-- The DOCTYPE declaration above will set the    -->
    <!-- browser's rendering engine into               -->
    <!-- "Standards Mode". Replacing this declaration  -->
    <!-- with a "Quirks Mode" doctype may lead to some -->
    <!-- differences in layout.                        -->
     
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     
        <!--                                                               -->
        <!-- Consider inlining CSS to reduce the number of requested files -->
        <!--                                                               -->
        <link type="text/css" rel="stylesheet" href="FameuxBinome.css">
     
     
        <!--                                           -->
        <!-- Any title is fine                         -->
        <!--                                           -->
        <title>Fameux binome</title>
     
        <!--                                           -->
        <!-- This script loads your compiled module.   -->
        <!-- If you add any GWT meta tags, they must   -->
        <!-- be added before this line.                -->
        <!--                                           -->
        <script type="text/javascript" language="javascript" src="fameuxbinome/fameuxbinome.nocache.js"></script>
      </head>
     
      <!--                                           -->
      <!-- The body can have arbitrary html, or      -->
      <!-- you can leave the body empty if you want  -->
      <!-- to create a completely dynamic UI.        -->
      <!--                                           -->
      <body>
     
        <!-- OPTIONAL: include this if you want history support -->
        <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
     
        <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
        <noscript>
          <div style="width: 22em; position: absolute; left: 543px; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif; top: 371px;">
            Your web browser must have JavaScript enabled
            in order for this application to display correctly.      </div>
        </noscript>
     
    	    <table   width="587" height="294" border="6" align="center">
          <tr>
            <td width="190" id="log" /td>
            <td width="50">&nbsp;</td>
            <td colspan="3" id="userlog" td>
          </tr>
          <tr>
            <td id="pass" /td>
            <td>&nbsp;</td>
          <td colspan="3" id="userpass" /td>      </tr>
     
          <tr>
            <td id="errorLabelContainer"> </td>
            <td>&nbsp;</td>
            <td width="76">&nbsp;</td>
    		<td id="nameFieldContainer"></td>
            <td width="184" id="annuler" /td>      </tr>
        </table>   
     
       </body>
    </html>
    merci pour votre aide

  4. #4
    Membre éclairé
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2011
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aisne (Picardie)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2011
    Messages : 51
    Par défaut
    Bonjour,

    J'ai fait quelques manipulations et recherches pour comprendre pourquoi il y avait ce problème d'affichage.

    Alors ce que j'en conclue, le problème de positionnement vient de la méthode suivante RootPanel.get("mon id").add(Widget w, int left, int top):

    exemple le password : RootPanel.get("pass").add(lblPassword, 42, 123);

    Les paramètres "42,123" correspondent au positionnement du widget dans le RootPanel.get("pass"). Comme rien a été paramétré dans la feuille de style, nous avons ce message d'erreur

    Warning: com.google.gwt.user.client.ui.RootPanel descendants will be incorrectly positioned, i.e. not relative to their parent element, when 'position:static', which is the CSS default, is in effect.
    One possible fix is to call 'panel.getElement().getStyle().setPosition(Position.RELATIVE)'.
    java.lang.IllegalStateException: com.google.gwt.user.client.ui.RootPanel is missing CSS 'position:{relative,absolute,fixed}'

    Première Solution :
    Appliquer les conseils du message "Warning". Je n'ai pas testé car j'utilise la troisième solution.

    Deuxième Solution :
    Une autre façon de faire est d'utiliser la méthode RootPanel.get("pass").add(lblPassword) et faire des modifications dans ta feuille de style.

    Troisième Solution (celle que j'utilise):
    Dans une application GWT, il n'est pas nécessaire d'avoir des "div" pour chaque widget. Un seul suffit voir même aucun avec RootPanel.get() qui ajoute le code directement dans le body. Tu as l'ensemble des fonctionnalités de ton application dans le code GWT et non pas en partie dans le fichier HTML.


    Maxime

  5. #5
    Membre confirmé
    Inscrit en
    Mars 2010
    Messages
    75
    Détails du profil
    Informations forums :
    Inscription : Mars 2010
    Messages : 75
    Par défaut
    Merci beaucoup
    Je n'ai pas compris l'anomalie mais j'arrive a déplacer mes widgets ou je veux sur le RootPanel sans utiliser les tableaux dans la page html et je ne sais pas si ça peut se continuer comme ça.
    j'ai besoin de diviser ma page html pour insérer une animation flash comme entete et mettre tout le RootPanel au dessous alors comment puisse je déplacer ou indiquer l'emplacement du RootPanel qui contien tous les widgets dans une page html
    S'il vous plait si vous avez un simple projet ou il y'a des redirection vers des autres pages mettez nous pour prendre idée comment ça se fait car j'ai beaucoup de doute.

    Mercii en tout cas
    Cordialement,

  6. #6
    Membre du Club
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juillet 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juillet 2011
    Messages : 5
    Par défaut
    Citation Envoyé par fahmi.bedoui Voir le message
    Merci beaucoup
    Je n'ai pas compris l'anomalie mais j'arrive a déplacer mes widgets ou je veux sur le RootPanel sans utiliser les tableaux dans la page html et je ne sais pas si ça peut se continuer comme ça.
    j'ai besoin de diviser ma page html pour insérer une animation flash comme entete et mettre tout le RootPanel au dessous alors comment puisse je déplacer ou indiquer l'emplacement du RootPanel qui contien tous les widgets dans une page html
    S'il vous plait si vous avez un simple projet ou il y'a des redirection vers des autres pages mettez nous pour prendre idée comment ça se fait car j'ai beaucoup de doute.

    Mercii en tout cas
    Cordialement,




    J'ai lu ton problème et sauf si je me trompe, pourquoi tu n'utilises pas des flowPanel pour placer tes composants et après tu appliques un CSS sur le flowPanel ?! De cette façon tu peux placer tout tes composants par bloc sur ta page html.

    J’espère avoir compris ton soucis ...

Discussions similaires

  1. python: gestion de positionnement des widgets dans une fenêtre
    Par noramokh dans le forum Général Python
    Réponses: 2
    Dernier message: 04/05/2014, 17h21
  2. QTabWidget - Problème d'affichage des widgets
    Par jimaitou dans le forum Débuter
    Réponses: 7
    Dernier message: 22/03/2009, 02h55
  3. Problème pour positionner des blocs
    Par Gizmil dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/11/2007, 01h32
  4. Probléme positionnement des DIV (image du problém)
    Par badway dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 18/10/2007, 09h32
  5. Problème de saccade avec le positionnement des photos
    Par kervano dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 04/04/2007, 09h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo