I am having problems using a StackPanel Layout. It does not work. It just shows the headings but no labels. Even the example from the documentation does not work:
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/StackLayoutPanel.html
java:
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HasText;
import com.google.gwt.user.client.ui.Widget;
public class NavigationWidget extends Composite implements HasText {
private static NavigationWidgetUiBinder uiBinder = GWT
.create(NavigationWidgetUiBinder.class);
interface NavigationWidgetUiBinder extends
UiBinder<Widget, NavigationWidget> {
}
public NavigationWidget() {
initWidget(uiBinder.createAndBindUi(this));
}
public void setText(String text) {
}
public String getText() {
return null;
}
}
xml:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<g:StackLayoutPanel unit='PX'>
<g:stack>
<g:header size='30'>
People
</g:header>
<g:VerticalPanel>
<g:Label>People Item 1</g:Label>
<g:Label>People Item 2</g:Label>
<g:Label>People Item 3</g:Label>
<g:Label>People Item 4</g:Label>
</g:VerticalPanel>
</g:stack>
<g:stack>
<g:header size='30'>
Groups
</g:header>
<g:VerticalPanel>
<g:Label>Group Item 1</g:Label>
<g:Label>Group Item 2</g:Label>
<g:Label>Group Item 3</g:Label>
<g:Label>Group Item 4</g:Label>
</g:VerticalPanel>
</g:stack>
<g:stack>
<g:header size='30'>
Settings
</g:header>
<g:VerticalPanel>
<g:Label>Item 5</g:Label>
<g:Label>Item 6</g:Label>
<g:Label>Item 7</g:Label>
<g:Label>Item 8</g:Label>
</g:VerticalPanel>
</g:stack>
</g:StackLayoutPanel>
</g:HTMLPanel>
</ui:UiBinder>
All LayoutPanels must be in a container that implements ProvidesResize, or have their size explicitly set in code. The easiest thing for you to do is set the size of the StackLayoutPanel explicitly: just add height="100%" to your <StackLayoutPanel> element.
For more control, change your Composite base class to ResizeComposite and get rid of the <g:HTMLPanel> element - just make the StackLayoutPanel the root element of your ui.xml file. You'll also have to make sure that you only use the NavigationWidget in other LayoutPanels - for instance, you wouldn't add it to RootPanel.get(), but instead to RootLayoutPanel.get()
For more info, see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html
Related
I create widget containing AbsolutePanel using GWT UiBinder like this:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:VerticalPanel>
<g:Label>Label1</g:Label>
<g:AbsolutePanel height="500" width="500">
<g:at left='10' top='60'>
<g:Label>Label2</g:Label>
</g:at>
<g:at left='10' top='100'>
<g:Label>Label3</g:Label>
</g:at>
</g:AbsolutePanel>
<g:Label>Label4</g:Label>
</g:VerticalPanel>
</ui:UiBinder>
Than create corresponding class :
public class TestAbsPanelWidget extends Composite {
#UiTemplate("TestAbsPanelWidget.ui.xml")
interface MyUiBinder extends UiBinder<Widget, TestAbsPanelWidget> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
public TestAbsPanelWidget() {
initWidget(uiBinder.createAndBindUi(this));
}
}
Than use it my GWT entry point like this:
public class TestAbsPanel2 implements EntryPoint {
public void onModuleLoad() {
RootPanel.get("div_id").add(new TestAbsPanelWidget());
}
}
After that I see "Label1" and "Label4" on screen in browser, but no "Label2" and "Label3". It seems that AbsolutePanel not shown. What am I doing wrong help me please.
You try to set the panel's width and height with:
<g:AbsolutePanel height="500" width="500">
but you don't specify CSS units. Try:
<g:AbsolutePanel height="500px" width="500px">
and you will see Label2 and Label3.
I am new to GWT and trying to follow the documentation to work with UIBinders.
I think I have followed everything I have found on the topic from some of the following sources and more.
http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#ImageResource
http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html#Using_an_external_resource
GWT UiBinder and Image Sprites
I am receiving the error cannot convert from ImageResource to Image and can't find this error elsewhere.
Things I have done:
Made a Client Bundle that can see the image.
Bound the Image in the java file.
Imported the client bundle resource into the UiBinder.
Thoughts:
Is this the easiest/recommended way to go about putting images into UiBinders.
Do I have to do it through CSS or through the Java class?
[ERROR] [ideaburger] - Errors in 'generated://D3BBFDA474FCF1195FACA7F6BC58EB44/com/IdeaBurger/client/SiteHeader_SiteHeaderUiBinderImpl.java'
[ERROR] [ideaburger] - Line 115: Type mismatch: cannot convert from ImageResource to Image
[INFO] [ideaburger] - See snapshot: /tmp/com.IdeaBurger.client.SiteHeader_SiteHeaderUiBinderImpl4360657308873324011.java
Here is what I have.
SiteHeader.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:with field='res' type='com.IdeaBurger.assets.Images'/>
<ui:style>
</ui:style>
<ui:Image field="logoImage" resource='{res.logo}' />
<g:HTMLPanel>
<g:HorizontalPanel>
<g:cell>
<g:Label>One</g:Label>
</g:cell>
</g:HorizontalPanel>
</g:HTMLPanel>
</ui:UiBinder>
SiteHeader.java
package com.IdeaBurger.client;
import com.IdeaBurger.assets.Images;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Widget;
public class SiteHeader extends Composite {
private static SiteHeaderUiBinder uiBinder = GWT
.create(SiteHeaderUiBinder.class);
#UiField Images res;
#UiField Image logoImage;
interface SiteHeaderUiBinder extends UiBinder<Widget, SiteHeader> {
}
public SiteHeader() {
initWidget(uiBinder.createAndBindUi(this));
}
}
My Client Bundle,
Images.java
package com.IdeaBurger.assets;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
public interface Images extends ClientBundle {
#Source("logo.png")
ImageResource logo();
}
Thanks
Ok, I figured out at least one way to do this.
I have a number of bugs in the above code and this is what I needed to do to fix it.
The Image tag should have been inside the HTMLPanel
The Image tag seems to want a string instead of an image recource
I found some helpful information in fixing this here: How to add an icon to a MenuItem in GWT?
I think the g:Image tag needs to be an img and the resource should be src
Need to use safeUri
Here is the working code:
SiteHeader.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:with field='res' type='com.IdeaBurger.assets.Images'/>
<ui:style>
</ui:style>
<g:HTMLPanel>
<img src='{res.logo.getSafeUri}' />
<g:HorizontalPanel>
<g:cell>
<g:Label>One</g:Label>
</g:cell>
</g:HorizontalPanel>
</g:HTMLPanel>
</ui:UiBinder>
SiteHeader.java
package com.IdeaBurger.client;
import com.IdeaBurger.assets.Images;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class SiteHeader extends Composite {
private static SiteHeaderUiBinder uiBinder = GWT
.create(SiteHeaderUiBinder.class);
#UiField Images res;
interface SiteHeaderUiBinder extends UiBinder<Widget, SiteHeader> {
}
public SiteHeader() {
initWidget(uiBinder.createAndBindUi(this));
}
}
Cheers
I want to make a colspan in a display:column so I tried to do it as follows:
<display:column style="width=50% colspan=2 " title="${textResources['Exam.endDate']}">
but it doesn't work it seems that this property is not allowed in a display:column so how to do that?
To add a colspan to the display column you have to create a Table Decorator extends the TableDecorator class, override the method init, in this method you need to get the header for your cell and add the colspan attribute.
package org.hannibal.utils.view.decorators;
import java.util.List;
import javax.servlet.jsp.PageContext;
import org.displaytag.decorator.TableDecorator;
import org.displaytag.model.HeaderCell;
import org.displaytag.model.TableModel;
import org.displaytag.util.HtmlAttributeMap;
public class ColspanTableDecorator extends TableDecorator {
#Override
public void init(PageContext pageContext, Object decorated,
TableModel tableModel) {
super.init(pageContext, decorated, tableModel);
List headersList = tableModel.getHeaderCellList();
HeaderCell myHeader = (HeaderCell)headersList.get(0);
HtmlAttributeMap map = myHeader.getHeaderAttributes();
map.put("colSpan", "2");
}
}
And in the jsp I use it so.
<display:table name="sessionScope.employees" pagesize="10" cellpadding="2" cellspacing="0"
decorator="org.hannibal.utils.view.decorators.ColspanTableDecorator">
I hope this will help you
How can I get add an icon with text to a menu item in GWT?
The following does not work:
<ui:with field='res' type='my.package.MyResources' />
<g:MenuItem text="test"><g:Image resource="{res.myIcon}" /></g:MenuItem>
Resulting error:
Not allowed in an HTML context: <g:Image resource='{res.myIcon}'>
public interface MyResources extends ClientBundle {
#Source("myIcon.png")
ImageResource myIcon();
}
The MenuItem allows only HTML or plain text as its content. So you cannot use an Image widget, but you can very well use an <img> element and retrieve the image URL from the ImageResource referenced by <ui:with> using getSafeUri() (you can call no-arg methods in UiBinder templates). In your case:
<g:MenuItem>
<img src="{res.myIcon.getSafeUri}"/><span>Your text here</span>
</g:MenuItem>
Or programmatically, using a simple template:
public interface MyTemplate extends SafeHtmlTemplates {
#Template("<img src=\"{0}\" /><span>{1}</span>")
SafeHtml createItem(SafeUri uri, SafeHtml message);
}
instantiated via:
MyTemplate template = GWT.create(MyTemplate.class)
and used like so:
new MenuItem(template.createItem(
yourResources.myIcon().getSafeUri(),
SafeHtmlUtils.fromString("Your text here")));
Please try this
<g:MenuItem>
<div class="className"/> MyMenuWithImg
</g:MenuItem>
That css class have the background image.
I ended up extending the GWT MenuItem class in a way that one can supply an ImageResource from ui-binder:
class MyMenuItem extends MenuItem {
#Uresstructor
public resMenuItem(String text, ImageResource res) {
super(SafeHtmlUtils.fromString(text));
ImageResourceRenderer renderer = new ImageResourceRenderer();
setHTML(renderer.render(res) + " " + text);
}
}
Usage:
<ui:with field='res' type='path.to.MyIconResources' />
<g:MenuBar>
<my:MyMenuItem text="test" icon="{res.myIcon}" />
</g:MenuBar>
If anyone comes up with a better idea (now or in the future) please comment accordingly.
i have created an class com.test.test.But
public class But extends Bandbox {
private Label mc_who;
public But() {
Executions.createComponents("/WEB-INF/username.zul", this, null);
Components.wireVariables(this, this, '$', true, true);
Components.addForwards(this, this, '$');
}
public String getWho() {
return mc_who.getValue();
}
public void setWho(String who) {
mc_who.setValue(who);
}
}
and an username.zul
<zk>
<label id="mc_who"></label>
</zk>
and index.zul
<window id="test" >
<bandbox>
<bandpopup>
<username who="Joe"/>
<username who="Hellen"/>
</bandpopup>
</bandbox>
</window>
and i am getting this exception
org.zkoss.zk.ui.UiException: Unsupported parent for row: <Bandpopup g4HQ2>
org.zkoss.zul.Row.beforeParentChanged(Row.java:264)
org.zkoss.zk.ui.AbstractComponent.setParent(AbstractComponent.java:959)
org.zkoss.zk.ui.impl.AbstractUiFactory.newComponent(AbstractUiFactory.java:91)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild0(UiEngineImpl.java:714)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild(UiEngineImpl.java:685)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate0(UiEngineImpl.java:629)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate(UiEngineImpl.java:596)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild0(UiEngineImpl.ja
Your example is not complete since I don't see row (and grid) in your sample code, while the exception said there is one. Please make a sample that can reproduce the issue.
I went through several iterations as well, and found that the most reliable way is to use the div tag as follows:
<zk>
<div>
<label id="mc_who"></label>
</div>
</zk>
This is an example of the component being used:
<window id="test" >
<bandbox>
<bandpopup>
<username who="Joe"/>
<username who="Hellen"/>
</bandpopup>
</bandbox>
</window>
And the source code:
package com.pontusnetworks.zkwidgets;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.IdSpace;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Div;
import org.zkoss.zul.Row;
import org.zkoss.zul.Textbox;
public class Username extends Div implements IdSpace {
#Wire
private Textbox mc_who; //will be wired when Components.wireVariables is called
public Username() {
//1. Render the template
Executions.createComponents("/composite/username.zul", this, null);
//2. Wire variables, components and event listeners (optional)
Selectors.wireVariables(this, this, null);
Selectors.wireComponents(this, this, false);
Selectors.wireEventListeners(this, this);
}
public String getWho() {
return mc_who.getValue();
}
public void setWho(String who) {
mc_who.setValue(who);
}
//public void onOK() {..} //Add event listeners if required, and wired by Components.addForwards
}