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.
Related
I have a dialog which fires ValidEvent (GXT custom event) :
public class MyDialog extends Dialog implements HasValidHandlers {
...
}
So if I include it in a UiBinder file, I should be able to do something like (see #UiHandler) :
#UiField
MyDialog myDialog;
#UiHandler("myDialog")
void onValid(ValidEvent event) {
..
}
And I want to include the MyDialog in a widget also defined with UiBinder :
public class MyWidget extends Composite {
#UiField
MyDialog myDialog;
public MyWidget(Binder binder) {
initWidget(binder.createAndBindUi(this));
}
#UiHandler("myDialog")
void onValid(ValidEvent event) {
..
}
interface Binder extends UiBinder<Widget, MyWidget> {}
}
Problem : Where to place the component in the ui.xml file?
Including the dialog in the component will causes graphical problem as UiBinder will try to add the Dialog IN the widget :
<g:HTMLPanel>
<MyDialog ui:field="myDialog"/>
</g:HTMLPanel>
But : In uIBinder, I can have only one root component.
Question : How can I declare 2 different components in a single UiBinder file? I would like to avoid making a ui.xml just to declare the Dialog and if I instantiate it via new the #UiHandler will not work.
You partly have answered your own question.
Including the dialog in the component will causes graphical problem as UiBinder will try to add the Dialog IN the widget :
Hence you will need to create a ui-binder separately for the component, as you also intend to use it as a uiField etc too!
According to my guess (based on my knowledge) each ui-binder creates a single widget and it can be referenced in another ui-binder or file as required.
You can have two UiBinder in the same widget :
public class MyWidget extends Composite {
MyDialog myDialog;
public MyWidget(Binder binder) {
initWidget(binder.createAndBindUi(this));
DialogBinder dialogBinder = GWT.create(DialogBinder.class);
myDialog = dialogBinder.createAndBindUi(this);
}
#UiHandler("myDialog")
void onValid(ValidEvent event) {
..
}
interface Binder extends UiBinder<Widget, MyWidget> {}
#UiTemplate("DialogBinder.ui.xml")
interface DialogBinder extends UiBinder<MyDialog, MyWidget> {}
}
And your DialogBinder.ui.xml looks like :
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
<MyDialog ui:field="myDialog"/>
</ui:UiBinder>
I don't test it, but there can be a problem with different #UiField.
You can doo this this an Inner Class who own all Dialog #UiField and #UiHander.
I have little issue with CssResource in GWT. I want to change styles of AbsolutePanel and label, but it doestnt run. When I add style class with setStyleName method, nothing is happend.
In this snippet of code I use a resource :
public CustommerView() {
MyResource cssResource = GWT.create(MyResource.class);
MyCss myCss = cssResource.css();
AbsolutePanel basePanel = new AbsolutePanel();
initWidget(basePanel);
basePanel.setStyleName(myCss.rootPanel());
Label label = new Label();
label.setText("Im label");
label.setStyleName(myCss.label());
basePanel.add(label);
}
This is my interface which extends CssResource:
public interface MyCss extends CssResource {
/**
* Method for return command button class name
* #return command button class name
*/
public String rootPanel();
public String label();
}
This is my css file, which is next to MyCss interface on filesystem :
.rootPanel {
position:absolute !important;
top:0px;
left:0px;
background-color:yellow !important;
height: 20px !important;
width: 18px !important;
}
.label {
color:red;
}
Custommer view is GWT Composite. When I want to move on view, i call simply RootPanel.get("mainArea").add(view.asWidget) in presenter. mainArea is div element.
When I pasted css class in css file in web inf, everything run ok. Can someone give me the point how to solve this issue? Thanks.
The ensureInjected() call is missing.
in my current project i've faced a problem of customizing IndicatingAjaxLink in wicket, is there any solution to change standart gif image to my own?
For example we have following listeneer
add(new IndicatingAjaxLink("closeReceivedBillspanel") {
public void onClick(AjaxRequestTarget art) {
// some timeconsuming calculations
}
});
as user clicks this link, the gif with loading appears, and i want to change this gif, is there any solution for this problem?
Have your page implements the IAjaxIndicatorAware interface
public class BasePage extends WebPage implements IAjaxIndicatorAware {
public BasePage(final PageParameters parameters) {
// Home link
AjaxLink<Page> homeLink = new AjaxLink<Page>("homeLink") {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target) {
setResponsePage(HomePage.class);
}
};
add(homeLink);
}
#Override
public String getAjaxIndicatorMarkupId() {
return "indicator";
}
This way, you can set, in the html, any image you want to display when the loading appears by changing the image in the "img" tag
<div id="indicator" style="display: none;">
<div class="indicator-content">
Please wait... <wicket:link><img src="images/loading.gif" width="16" height="16" alt="loading" /></wicket:link>
</div>
</div>
Create yoru own custom class like, (copy whats inside IndicatingAjaxLink and update)
public class MyIndicatingAjaxLink<T> extends AjaxLink<T> implements IAjaxIndicatorAware {
private final MyAjaxIndicatorAppender indicatorAppender = new MyAjaxIndicatorAppender();
.
//rest of the code is same as IndicatingAjaxLink class
.
}
Also you need a custom AjaxIndicatorAppender within your customIndicatingAjaxLink and you need to override below method of indicatorAppender to return path of your custom image
protected CharSequence getIndicatorUrl()
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
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
}