GWT: Cannot Convert From DockLayoutPanel to Composite - gwt

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> {}

Related

Include HTML component in Uibinder

I would like to include some HTML codes in my gwt UiBinder. For example, put a navigation menu bar in a UiBinder as follows.
MenuBarBinder.ui.xml
<g:HTMLPanel>
<div class="topnav">
<a ui:field="home" class="active" href="#home">Home</a>
<a ui:field="news" href="#news">News</a>
<a ui:field="contact" href="#contact">Contact</a>
<a ui:field="about" href="#about">About</a>
</div>
</g:HTMLPanel>
MenuBarBinder.java
public class MenuBarBinder extends Composite{
private static MenuBarBinderUiBinder uiBinder = GWT.create(MenuBarBinderUiBinder.class);
interface MenuBarBinderUiBinder extends UiBinder<Widget, MenuBarBinder> {
}
public MenuBarBinder() {
initWidget(uiBinder.createAndBindUi(this));
}
#UiField
//How can I refer the ui:field here?
}
How can I refer the ui:field in MenuBarUiBinder.java with #UiField?
Since HTML has more options on designing the UI than GWT widget, it would be very helpful to recommend a tutorial describing this.
Thanks
If the element is an anchor <a> then you would link that to a GWT AnchorElement:
<a ui:field="home" class="active" href="#home">Home</a>
...
#UiField AnchorElement home;

GWT Activity : How to use an activity, place, eventbus and uibinder

I'm new at GWT and I wonder myself how to use an Activity, Place ,EventBus and UIbinder.
The layout of my app is smth like this :
Widget 1:
<g:DockLayoutPanel ui:field="myPanel" unit='PX'>
<g:north size='60'>
<m:HeaderPanelImpl styleName='{res.style.panelBorder}' ui:field='headerPanel' />
</g:north>
<g:south size='60'>
<g:HTMLPanel styleName='{res.style.panelBorder}' ui:field='footerPanel' />
</g:south>
<g:center>
<g:SimpleLayoutPanel styleName='{res.style.panelBorder}' ui:field='centerPanel' />
</g:center>
</g:DockLayoutPanel>
Here in "widget1.headerPanel" a have navigation which controls which widget to be shown in “widget1.centerPanel”.
The widgets which have to be shown in “widget1.centerPanel” are “widget2.0” and ”widget2.1”.
Widget2.0
<g:DockLayoutPanel unit='PX'>
<g:north size='100'>
<g:HTMLPanel styleName='{res.style.panelBorder}'>
<g:Label>TopPanel</g:Label>
</g:HTMLPanel>
</g:north>
<g:west size='200'>
<g:HTMLPanel styleName='{res.style.panelBorder}'>
<g:Label>LeftPanel</g:Label>
</g:HTMLPanel>
</g:west>
<g:east size='200'>
<g:HTMLPanel styleName='{res.style.panelBorder}'>
<g:Label>RightPanel</g:Label>
</g:HTMLPanel>
</g:east>
<g:center>
<g:SimpleLayoutPanel styleName='{res.style.panelBorder}' ui:field='centerPanel' />
</g:center>
</g:DockLayoutPanel>
Widget2.1
<g:HTMLPanel>
<g:Label>Settings</g:Label>
</g:HTMLPanel>
In ”widget2.0.topPanel” I have navigation which controls which widget will be shown in “widget2.0.centerPanel”
The widgets which have to be shown in “widget2.centerPanel” are “widget3.0” and ”widget3.1”.
Widget3.0
<g:HTMLPanel>
<g:Label>Content 1</g:Label>
</g:HTMLPanel>
Widget3.1
<g:HTMLPanel>
<g:Label>Content 2</g:Label>
</g:HTMLPanel>
My question is how to handle "onPlaceChangeEvent" ?
In example if url is mydomain.com/myapp.html#home:content1
the app has to show widget 1, widget 2.0 and widget 3.0
If the url is mydomain.com/myapp.html#home:content2
the app has to show widget1, widget 2.0 and widget 3.1
If the url is mydomain.com/myapp.html#settings
the app has to show widget1 and widget 2.1
I'm wondering between two variants :
To create to 2 ActivityManagers. One for the activities from widget1.navigation and one for the activites from widget2.navigation. But what happens if widget2 is created before widget 1 ?
To create one Activity which creates couple views.
Code:example
public class MonthlyViewActivity extends AbstractActivity implements MonthlyView.Presenter {
private Widget2_0 widget2_0;
private Widget3_0 widget3_0;
......
public void start(AcceptsOneWidget panel, EventBus eventBus) {
widget2_0 = new Widget2_0();
widget3_0 = new Widget3_0();
..........
}
....
}
What is the best practice for this case ?
if you are using eclipse create a MVP architecture in your project it will create many files like activity, place, one interface, one implementation class and a corresponding ui xml class. you have to create a activity mapper and activity history manager class. and in your on lode module set a default place for your application. after words on any event call go to method for any place and provide the link of your page and there check the get the value of token amd on basis of that value display your widgets what you want to display.

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.

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

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>

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.