Problème positionnement des widgets

Version imprimable

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:

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:

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

15/07/2011, 17h59
MaximeMularz

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

D'accord mon ami
voici mon code d'entrée

Code:

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:

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

18/07/2011, 15h13
MaximeMularz

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
19/07/2011, 05h16
fahmi.bedoui

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,
22/07/2011, 17h30
Jervi

Citation:

Envoyé par fahmi.bedoui

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 ...:lol: