How to extends/subcontents a dialog box using the GWT UiBinder? - gwt

I want to build "from scratch" a DialogBox hierarchy. First of all, I've got
a BaseDialog.java class : A simple dialog that extends DialogBox (gwt widget)
public class BaseDialog extends DialogBox {
protected static BaseDialog2UiBinder uiBinder = GWT
.create(BaseDialog2UiBinder.class);
interface BaseDialog2UiBinder extends UiBinder<Widget, BaseDialog2> {
}
#UiField
protected FlowPanel contentPanel;
public BaseDialog() {
setWidget(uiBinder.createAndBindUi(this));
}
}
a BaseDialog.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">
<g:VerticalPanel width="200px" height="200px">
<g:Label>Label principal</g:Label>
<g:FlowPanel ui:field="contentPanel" />
</g:VerticalPanel>
</ui:UiBinder>
As you can see, the BaseDialog contains a simple Label and a contentPanel (FlowPanel).
I would like to extends the BaseDialog (e.g. ConfirmationDialog). The ConfirmationDialog fills the content of the BaseDialog's contentPanel.
How can I do that ?
Thanks.

Ok, I have found the solution :
public class ConfirmationBox extends BaseDialog2 {
protected static ConfirmationBoxUiBinder uiBinder = GWT.create(ConfirmationBoxUiBinder.class);
interface ConfirmationBoxUiBinder extends UiBinder<Widget, ConfirmationBox> {
}
#UiField
Label helloLabel;
public ConfirmationBox() {
contentPanel.add(uiBinder.createAndBindUi(this));
}
}
And
<!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" xmlns:my="urn:import:com.guardis.cortex.web.client.dialog">
<g:FlowPanel>
<my:BaseDialog2>
<g:FlowPanel ui:field="contentPanel">
<g:Label>test contentPanel from confirmationBox</g:Label>
</g:FlowPanel>
</my:BaseDialog2>
<g:Label ui:field="helloLabel">Hello world from confirmation box (outside of BaseDialog)</g:Label>
</g:FlowPanel>
</ui:UiBinder>

Related

How can I create a widget that wraps the main content and delivers a default design?

I want to create a wrapper-widget that is providing some kind of "default" layout for different pages. I want to be able to do something like this:
<!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"
xmlns:m="urn:import:gwt.material.design.client.ui"
xmlns:m.addins="urn:import:gwt.material.design.addins.client.ui"
xmlns:mz="urn:import:com.mz.client.admin.widget"
>
<ui:style>
</ui:style>
<mz:defaultpagelayout.DefaultPageLayout>
<m:MaterialTitle title="Basic Information"/>
<m:MaterialTextBox text="Forename"/>
<m:MaterialTextBox text="Surname"/>
</mz:defaultpagelayout.DefaultPageLayout>
</ui:UiBinder>
Where DefaultPageLayout is just a container that provides a certain look for the actual content. I've tried to do it like this:
DefaultPageLayout.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"
xmlns:m="urn:import:gwt.material.design.client.ui"
xmlns:m.addins="urn:import:gwt.material.design.addins.client.ui">
<ui:style>
.main-content {
padding: 20px;
}
</ui:style>
<g:HTMLPanel addStyleNames="{style.main-content}">
</g:HTMLPanel>
</ui:UiBinder>
DefaultPageLayout.java:
public class DefaultPageLayout extends Composite {
private static DefaultPageLayoutUiBinder uiBinder = GWT.create(DefaultPageLayoutUiBinder.class);
interface DefaultPageLayoutUiBinder extends UiBinder<Widget, DefaultPageLayout> {
}
public DefaultPageLayout() {
this.initWidget(uiBinder.createAndBindUi(this));
}
}
But this is actually not working:
[ERROR] Found unexpected child element: <m:MaterialTitle title='Basic Information'> (:13)
What do I have to do to get such a widget working for me here?
Your DefaultPageLayout needs to implement HasWidget (and ideally HasWidgets.ForIsWidget)

Gwt UIBinder DockLauout north element raise error as must contain a widget, but found <app:HeaderPanel ui:field='headerPanel'>

While trying to use Gwt UIBinder to have a custom widget loaded from main UI i am getting exception as
[ERROR] <g:north size='5'> must contain a widget, but found <app:HeaderPanel ui:field='headerPanel'> Element <g:DockLayoutPanel styleName='{style.outer}' unit='EM'> (:8)
while parsing XML in development mode. Below is the XML which I created for the same
<!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"
xmlns:app='urn.import:com.test.test.client'
xmlns:test='urn.import=com.test.test.client'>
<ui:style src="Resources/GlobalStyles.css" />
<g:DockLayoutPanel unit='EM' styleName='{style.outer}'>
<g:north size='5'>
<app:HeaderPanel ui:field='headerPanel' />
</g:north>
<g:west size='14'>
<test:FriendList ui:field='friendList' />
</g:west>
<g:center>
<g:HTMLPanel styleName='{style.boxPadding}'>
<div class="{style.titleBar}">Latest Activity</div>
<g:ScrollPanel ui:field='mainPanel' styleName='{style.mainPanel}' />
</g:HTMLPanel>
</g:center>
<g:south size="3">
<g:HTMLPanel styleName='{style.footerPanel}'>
<div>
Contact us
|
Privacy
|
About
</div>
</g:HTMLPanel>
</g:south>
</g:DockLayoutPanel>
</ui:UiBinder>
The headerPanel widget exits in the hierarchy. The corresponding code for above UiBinder is given below
public class TestApp implements EntryPoint {
#UiField
HeaderPanel headerPanel;
#UiField
ScrollPanel mainPanel;
RootLayoutPanel root;
private static TestApp singleton;
public static TestApp get() {
return singleton;
}
interface TestAppUiBinder extends UiBinder<DockLayoutPanel, TestApp> {
}
private static TestAppUiBinder uiBinder = GWT
.create(TestAppUiBinder.class);
#Override
public void onModuleLoad() {
// TODO Auto-generated method stub
singleton = this;
DockLayoutPanel outer = uiBinder.createAndBindUi(this);
root = RootLayoutPanel.get();
root.add(outer);
}
}
Basically I am novice in Gwt and trying to learn the things. Any pointer in this regard will be a great help.
Thanks.
What is
<app:HeaderPanel ui:field='headerPanel' />? If it does not extend Widget then it will not work. Try putting <g:Label>FOO</g:Label> in there and see if it works. Also make sure that your xmlns is correct. It will look for Header Panel in the package com.test.test.client. If you are trying to use the gwt Header Panel then it needs to be
<g:HeaderPanel ui:field="headerPanel" />
I think you are misunderstanding the xmlns. This tells gwt where to look for your java class. Both app and test are pointing to the same package. You should only add namespaces when you want to include your own custom widget classes or extra things like CellTable and DataGrid. I believe you are wanting to use the header.
Issue got fixed as it was xml parsing issue.
Thanks for providing inputs.

Field nameSpan has no corresponding field in template file Login.ui.xml

Eclipse 3.7 GWT 2.4
When I create templated UiBinder class with xml
I see issue on
#UiField
SpanElement nameSpan;
"Field nameSpan has no corresponding field in template file Login.ui.xml"
How fix it?
Login.java
public class Login extends UIObject {
private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);
interface LoginUiBinder extends UiBinder<Element, Login> {
}
#UiField
SpanElement nameSpan;
public Login(String firstName) {
setElement(uiBinder.createAndBindUi(this));
nameSpan.setInnerText(firstName);
}
}
Login.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<div>
Hello,
<span ui:field='nameSpan' />
</div>
</ui:UiBin
"Field nameSpan has no corresponding field in template file Login.ui.xml"
It states that there is no corresponding type of field in login.ui.xml as define by #UiField in login.java
Your login.ui.xml should be something like :
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:s='urn:import:com.google.gwt.dom.client'>
<div>
Hello,
<s:SpanElement ui:field='nameSpan' />
</div>

GWT: Cannot Convert From DockLayoutPanel to Composite

First, I understand what this means: DockLayoutPanel does not extend any class that in turn extends Composite. I just don't know how to fix it.
I have a class, Mapmaker2.java, which is the primary user interface for my entire application. The base is a DockLayoutPanel, which in turn contains VerticalPanels, StackLayoutPanels, etc. Since this is an MVP application, I'd prefer not to mark up my EntryPoint class with a uibinder template.
Here is the java class:
public class MapmakerView2 extends Composite {
#UiTemplate("MapmakerView2.ui.xml")
interface Binder extends UiBinder<Composite, MapmakerView2> {}
private static Binder binder = GWT.create(Binder.class);
#UiField StackLayoutPanel interfaceStack;
public MapmakerView2() {
initWidget(binder.createAndBindUi(this));
}
}
And here is the uibinder template:
<ui:UiBinder> <!-- snipped out xmlns stuff -->
<g:DockLayoutPanel unit="PX">
<g:north size="100">
<g:VerticalPanel>
<!-- Logo -->
<!-- Login Link -->
</g:VerticalPanel>
</g:north>
<g:west size="150">
<g:StackLayoutPanel ui:field="interfaceStack" styleName="{style.shortcuts}" unit="PX">
<g:stack>
<g:header size="10">
<b>Features</b>
</g:header>
<mapmaker:FeaturesForm/>
</g:stack>
<g:stack size="10">
<g:header size="10">
<b>Export</b>
</g:header>
<mapmaker:ExportForm/>
</g:stack>
<g:stack>
<g:header size="10">
<b>Admin</b>
</g:header>
<mapmaker:AdminForm/>
</g:stack>
<g:stack>
<g:header size="10">
<b>Help</b>
</g:header>
<mapmaker:HelpForm/>
</g:stack>
</g:StackLayoutPanel>
</g:west>
<g:center>
<!-- Display Map Here -->
<mapmaker:MapBox/>
</g:center>
<g:south size="100">
<!-- Display i18n disclaimer stuff here -->
<mapmaker:Disclaimer/>
</g:south>
</g:DockLayoutPanel>
</ui:UiBinder>
Can anyone assist?
Just replace
interface Binder extends UiBinder<Composite, MapmakerView2> {}
with
interface Binder extends UiBinder<Widget, MapmakerView2> {}
or
interface Binder extends UiBinder<DockLayoutPanel, MapmakerView2> {}

ui:with, style not showing up

I would like to share a CSS across multiple widgets using .
I can see that css class name are obfuscated but the class definition
is not showing up when I inspect the element in firefox / chrome.
Here're my codes. Can anyone suggest what am I missing? Thanks.
Style.css
.nameSpan { color: #3E6D8E; background-color: #E0EAF1;}
Resources.java
public interface Resources extends ClientBundle {
#Source("Style.css")
Style style();
public interface Style extends CssResource {
String nameSpan();
}
}
uibinder.ui.xml
<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.my.app.widgets.logoname.Resources'/>
<g:HTMLPanel>
<div>
Well hello there
<g:InlineLabel ui:field='nameSpan' styleName="res.style.nameSpan">kevin</g:InlineLabel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
uibinder.class
public class uibinder extends Composite {
private static uibinderUiBinder uiBinder = GWT.create(uibinderUiBinder.class);
interface uibinderUiBinder extends UiBinder<Widget, uibinder> {}
#UiField(provided = true) final Resources res; // the style doesn't show no matter provided=true is declared or not.
public uibinder(Resources res) {
res = GWT.create(Resources.class);
initWidget(uiBinder.createAndBindUi(this));
}
You have to use res.style().ensureInjected()
You need to assign the style (styleName attribute) somewhere. For example:
<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.my.app.widgets.logoname.Resources'/>
<g:HTMLPanel>
<div>
Well hello there
<g:InlineLabel ui:field='nameSpan' styleName="{res.nameSpan}">kevin</g:InlineLabel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
The attribute ui:field you've declared does not set the css style. It defines the attribute that is to be filled in in your uibinder class. See the GWT doc for some guidance.