Centrer un TabLayoutPanel

**icexplorer** · 14/01/2010, 21h23

Bonjour,

voulant me mettre au gwt 2.0 j'ai actuellement quelques soucis de conception.

J'ai un TabLayoutPanel avec 3 onglets, que j'aimerais centré sur ma page.

En utilisant les TabPanels (dépréciés...) j'arrive à avoir un affichage correct :
http://mediages.appspot.com/.

Cependant en utilisant le tabLayoutPanel et le uibinder, tout ce que j'arrive à faire est, au mieux, cela :

http://img691.imageshack.us/img691/8...ayoutpanel.jpg

Sauriez-vous comment faire pour placer cet élément au centre de la page, comme sur le premier lien ? Faut-il l'englober dans un autre composant, ou bien... ? Comme on ne peut l'attacher que sur la balise <body> c'est un peu problématique...

Voici un extrait du code utilisé actuellement :

MediaGestion.java (classe principale) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
public class MediaGestion implements EntryPoint {
 
	interface Binder extends UiBinder<TabLayoutPanel, MediaGestion> { }
	private static final Binder binder = GWT.create(Binder.class);
 
	public void onModuleLoad() {
		TabLayoutPanel contenu = binder.createAndBindUi(this);	
		RootLayoutPanel.get().add(contenu);
	}
}

MediaGestion.ui.xml

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
 
<g:TabLayoutPanel barHeight="50">
	<g:tab>
		<g:header>Tab1</g:header>
		<g:HTML>text of tab 1</g:HTML>
	</g:tab>
	<g:tab>
		<g:header>Tab1</g:header>
		<g:HTML>text of tab 2</g:HTML>
	</g:tab>
	<g:tab>
		<g:header>Tab1</g:header>
		<g:HTML>text of tab 3</g:HTML>
	</g:tab>
</g:TabLayoutPanel>

Merci !!

**icexplorer** · 16/01/2010, 00h46

Bon, je me réponds à moi-même (cela peut servir à d'autres

).

En fait j'ai englobé le tout dans un dockLayoutPanel. Par la suite j'ai y ajouté un style css, ce qui a tout centré.

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
 
public class MediaGestion implements EntryPoint {
 
	interface Binder extends UiBinder<DockLayoutPanel, MediaGestion> {}
	private static final Binder binder = GWT.create(Binder.class);
 
	interface GlobalResources extends ClientBundle {
	    @Source("MediaGestion.css") CssResource css();
	}
 
	@UiField TabLayoutPanel tabLayoutPanel;
 
	public void onModuleLoad() {
		// Create the UI defined in MediaGestion.ui.xml
		DockLayoutPanel content = binder.createAndBindUi(this);
 
		// Set content style class
		content.setStylePrimaryName("mgDockLayout");
 
		// Add to the RooLayoutPanel
		RootLayoutPanel.get().add(content);
	}
}

Au cas où, sachez que lorsque vous faites comme j'ai fait, dans le fichier css il faut déclarer toutes les propriétés avec l'annotation @external, sinon elles ne seront pas prises en compte !

Exemple : MediaGestion.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@external mgDockLayout;
.mgDockLayout
{
	width: 800px;
	margin: auto;
}

Voilà, j'espère que cela aura été utile à certains !

Centrer un TabLayoutPanel

GWT et Vaadin Java

Vue hybride

Discussions similaires

Partager

Partager