I have Widget with a TabBar.
<g:DockLayoutPanel unit="EM">
<g:north size="2.5">
<g:TabBar height="2.5em" ui:field="tabBar" />
</g:north>
<g:center>
<g:SimpleLayoutPanel ui:field="contentWidget" />
</g:center>
</g:DockLayoutPanel>
If user selects a tab, I set the widget for contentWidget.
#UiHandler("tabBar")
void onTabsSelection(final SelectionEvent<Integer> event) {
// ...
}
This works perfectly!
Several tabs have ONE Widget in common, so I want to use a single instance of this widget (for sync).
<g:LayoutPanel>
<!-- query -->
<g:layer top="0" height="3em">
<g:HorizontalPanel width="100%" height="3em" verticalAlignment="ALIGN_MIDDLE">
<g:SimpleLayoutPanel ui:field="queryNode" />
<g:cell horizontalAlignment="ALIGN_RIGHT">
<my:StepPager ui:field="pager" />
</g:cell>
</g:HorizontalPanel>
</g:layer>
<!-- map -->
<g:layer left="0" right="17em" top="3em" bottom="0">
<g:SimpleLayoutPanel ui:field="mapNode" />
</g:layer>
</g:LayoutPanel>
Of course a widget can only be attached to one parent. So I override the onAttach method for all the tab-wigets to read my query-widget.
#Override
protected void onAttach() {
queryNode.setWidget(queryBar);
super.onAttach();
}
The method will be invoked and the widget is in the DOM but it's not visible. I think the problem is that the cell of SimpleLayoutPanel queryNode size is 3x35 px.
Related
I'm trying to add a DataGrid on my view.
I know that a DataGrid can only stay in a Layout Panel, because of the ProvidesResize and RequiresResize interfaces.
The thing is, I want to add a filter on top of the DataGrid Table, and the filter can't have a fixed height, it could be bigger or smaller.
No Layout Panel would accept more then one child to be resized, but the LayoutPanel itself. But still, each layer needs a height to be set in percentage, and that's not OK as well.
If I change the DataGrid with a CellTable and then add both in a Flow Panel, the problem would be solved, but the table has to be scrollable.
What I would need is a FlowLayoutPanel but there is no such Panel in GWT
I was thinking that the only way would be to try to create a custom panel which would implement ProvidesResize and RequiresResize interfaces.
This is how it looks like using a LayoutPanel :
<g:layer left="2%" right="68%" top="2%" bottom="93%">
<g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
</g:layer>
<g:layer left="2%" right="68%" top="9%" bottom="56%">
<g:SplitLayoutPanel>
<g:center>
<g:HTMLPanel>
<g:FlowPanel ui:field="criteriaPanel" visible="false" />
<g:FlowPanel>
<g:Button ui:field="refresh">
<ui:text from="{text.refreshButtonCaption}" />
</g:Button>
</g:FlowPanel>
</g:HTMLPanel>
</g:center>
</g:SplitLayoutPanel>
</g:layer>
<g:layer left="2%" right="2%" top="45%" bottom="5%">
<g:SplitLayoutPanel>
<g:center>
<c:DataGrid ui:field='table' />
</g:center>
</g:SplitLayoutPanel>
</g:layer>
<g:layer left='2%' right='2%' top="95%" bottom="0%">
<g:HTMLPanel>
<table style="width:100%">
<tr>
<td align='center'>
<c:SimplePager ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:layer>
</g:LayoutPanel>
Can anyone help me with this ?
Many thanks in advance.
If you don't care about very old browsers, use flexbox CSS layout model - I use it with DataGrid (and for everything else) all the time.
Then you simply add display: flex; to your container (i.e. what you used LayoutPanel for), and then set flex-grow: 1 on your DataGrid. This will tell DataGrid to take all the available space after other widgets in the container have been rendered.
P.S. For the past few years I try to avoid LayoutPanels as much as possible for performance reasons, especially on mobile devices.
looks like the CSS did the trick.
Many thanks.
This is how it looks like :
<!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:c="urn:import:com.google.gwt.user.cellview.client">
<ui:with field='res' type='com.vsg.vraweb.client.resource.Resources' />
<ui:with field='text' type='com.vsg.vralang.client.GlobalConstants' />
<!--
CSS Tricks tutorial : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
1) 'display: flex;' - enables a flex context for all its direct children.
2) 'flex-direction: row | row-reverse | column | column-reverse;' - This establishes
the main-axis, thus defining the direction flex items are placed in the flex
container.
3) flex-grow: <number>; - This defines the ability for a flex item to grow if necessary.
-->
<ui:style>
.container {
display: flex;
flex-direction: column;
}
.dataGrid {
width: 100%;
flex-grow: 1;
}
</ui:style>
<g:FlowPanel addStyleNames="{style.container}">
<g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
<g:HTMLPanel>
<g:FlowPanel ui:field="criteriaPanel" visible="false" />
<g:FlowPanel>
<g:Button ui:field="refresh">
<ui:text from="{text.refreshButtonCaption}" />
</g:Button>
</g:FlowPanel>
</g:HTMLPanel>
<c:DataGrid ui:field='table' addStyleNames="{style.dataGrid}"/>
<g:HTMLPanel>
<table style="width:100%">
<tr>
<td align='center'>
<c:SimplePager ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:FlowPanel>
</ui: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.
I am trying to make a basic grid in GWT Sencha.
it works fine , but i am not sure how to put the grid in UiBinder ,
Not sure what would be the parent widget ,
thats what i am doing
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<c:FramedPanel>
<grid:GridView ui:field="gridMain">
</grid:GridView>
</c:FramedPanel>
Error:
Expected a widget or <g:cell>, found <grid:GridView ui:field='gridMain'> Element <g:VerticalPanel> (:4
Add the following line in ui.xml
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:grid="urn:import:Package-of-GridView">
If you have already added these two lines then its fine
Here is my question and answer for you.
I guess GridView is your view class. Is it extends any widgets?
If it extends any widgets then it will work. If not it just a class.
We can add a widget in a widget but we can't add a class in a widget.
So if required extend the appropriate widget to GridView
For eg. public class Gridview extends VerticalPanel
The UIBinder examples for gxt can be found here:
http://gxt-uibinder.appspot.com/
This is specifically the example you're looking for:
<!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:gxt="urn:import:com.extjs.gxt.ui.client.widget" xmlns:toolbar="urn:import:com.extjs.gxt.ui.client.widget.toolbar" xmlns:form="urn:import:com.extjs.gxt.ui.client.widget.form" xmlns:grid="urn:import:com.extjs.gxt.ui.client.widget.grid">
<ui:with type="com.jhickman.web.gwt.gxtuibindertest.client.resources.icons.ExampleIcons" field="icons" />
<ui:with type="com.extjs.gxt.ui.client.store.ListStore" field="store" />
<ui:with type="com.google.gwt.i18n.client.DateTimeFormat" field="dateformat" />
<ui:with type="com.jhickman.web.gwt.gxtuibindertest.client.view.grids.BasicGridView.ChangeCellRenderer" field="change" />
<ui:with type="com.jhickman.web.gwt.gxtuibindertest.client.view.grids.BasicGridView.GridNumberRenderer" field="gridNumber" />
<gxt:LayoutContainer layout="FlowLayout">
<gxt:layoutdata type="FlowData" margins="10">
<gxt:ContentPanel bodyBorder="true" icon="{icons.table}" heading="Basic Grid" buttonAlign="CENTER" layout="FitLayout" width="600" height="300">
<gxt:topcomponent>
<toolbar:ToolBar>
<toolbar:LabelToolItem label="Selection Mode:" />
<form:SimpleComboBox triggerAction="ALL" editable="false" fireChangeEventOnSetValue="true" width="100" ui:field="selectionModeComboBox" />
</toolbar:ToolBar>
</gxt:topcomponent>
<grid:Grid store="{store}"
ui:field="grid"
styleAttribute="borderTop:none"
autoExpandColumn="name"
borders="false"
stripeRows="true"
columnLines="true"
columnReordering="true">
<grid:column id="name"
header="Company"
width="200"
rowHeader="true" />
<grid:column id="symbol"
header="Symbol"
width="100" />
<grid:column id="last"
header="Last"
alignment="RIGHT"
width="75"
renderer="{gridNumber}"/>
<grid:column id="change"
header="Change"
width="100"
alignment="RIGHT"
renderer="{change}" />
<grid:column id="date"
header="Last Updated"
width="100"
alignment="RIGHT"
dateTimeFormat="{dateformat}" />
</grid:Grid>
</gxt:ContentPanel>
</gxt:layoutdata>
</gxt:LayoutContainer>
</ui:UiBinder>
You can't directly add grid under FramedPanel
Try to add a container such as VerticalLayoutContainer as a child of your FramedPanel before adding the grid.
in UiBinder
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
xmlns:row="urn:import:com.sencha.gxt.widget.core.client.container">
Under your FramedPanel
<gxt:FramedPanel ui:field="panel" headingText="VerticalLayout Example"
collapsible="false">
<row:VerticalLayoutContainer>
<row:child><grid:GridView ui:field="view"></grid:GridView>
</row:child>
<row:VerticalLayoutContainer>
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.
I have a global presenter that contains a Header Footer and the main content slots, when header always on the top, footer always on the bottom...
My question is: How can i add scroll bar to my Global Presenter?
I know that there were a lot of questions like this but i cant find the right answer for me.
I have UiBinder that has the code:
<g:RootLayoutPanel width="100%" height="100%">
<g:layer left="0px" right="0px" top="0px" bottom="0px">
<g:DockLayoutPanel unit="EM">
<g:north size="5.0">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:north>
<g:center size="1.0">
<g:FlowPanel ui:field="mainContentPanel" />
</g:center>
<g:south size="1.5">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:south>
</g:DockLayoutPanel>
</g:layer>
</g:RootLayoutPanel>
I have tried to add ScrollPanel that is contains the RootLayotPanel or other panels.. but than all the inner panel receive size zero.
I have tried to use a vertical panel inside the scrollPanel but than I can't put the footer at the bottom.
Does someone has an answer?
==================================================================================
I succeeded to do it, here is my new code:
<g:RootLayoutPanel width="100%" height="100%">
<g:layer>
<g:ScrollPanel width="100%" height="100%">
<g:DockPanel width="100%" horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Dock direction="NORTH" >
<g:HTMLPanel ui:field="headerContentPanel" />
</g:Dock>
<g:Dock direction="CENTER" verticalAlignment="ALIGN_MIDDLE" horizontalAlignment="ALIGN_CENTER">
<g:FlowPanel ui:field="mainContentPanel" />
</g:Dock>
<g:Dock direction="SOUTH" verticalAlignment="ALIGN_BOTTOM" horizontalAlignment="ALIGN_CENTER">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:Dock>
</g:DockPanel>
</g:ScrollPanel>
</g:layer>
</g:RootLayoutPanel>
But I have small problem: my footer isn't attached to bottom, no matter what i tried..
Does someone know the solution?
Layout Panels do not work properly in scroll panels. But scoll panels can be used in Layout Panels:
For example to scrolling the center part:
<g:DockLayoutPanel unit="EM">
<g:north size="5.0">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:north>
<g:center size="1.0">
<g:ScrollPanel>
<g:FlowPanel ui:field="mainContentPanel" />
</g:ScrollPanel>
</g:center>
<g:south size="1.5">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:south>
</g:DockLayoutPanel>
Another possibility is to use DockPanel instead Layout Panels.
If the header included in the scroll bar :
<g:ScrollPanel>
<g:DockPanel>
<g:Dock direction="NORTH" height="100px">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:Dock>
<g:Dock direction="CENTER">
<g:FlowPanel ui:field="mainContentPanel" />
</g:Dock>
<g:Dock direction="SOUTH" height="100px">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:Dock>
</g:DockPanel>
</g:ScrollPanel>
And then put this in RootLayoutPanel or RootPanel
Or use DockPanel in Layout Panels.
For example: we want to have scrollable header and center part, but west panel and bottom always in view:
<g:DockLayoutPanel width="100%">
<g:west size="100.0">
<g:Label>West side </g:Label>
</g:west>
<g:center>
<g:ScrollPanel>
<g:DockPanel>
<g:Dock direction="NORTH" height="100px">
<g:HTMLPanel ui:field="headerContentPanel" />
</g:Dock>
<g:Dock direction="CENTER">
<g:FlowPanel ui:field="mainContentPanel" />
</g:Dock>
</g:DockPanel>
</g:ScrollPanel>
</g:center>
<g:south size="50">
<g:HTMLPanel ui:field="footerContentPanel" />
</g:south >
</g:DockLayoutPanel>
And then put this in RootLayoutPanel.
Forget all the GWT (UiBinder) syntax and all the cascaded layout for a moment. Just consider this simplified example:
We have a window, let's say with a current height of 1000px.
We have a container (just imagine a simple black box) that takes up 100% of the window height - so it has 1000px height.
In this case, there is nothing to scroll. So with scroll=auto there will be no scroll bar on the window. (Forget any possible scroll bars inside our black box.)
If you want a layout where the header stays on top, while everything else scrolls (with a scrollbar that takes up 100% height), you should probably start with a header with "position=fixed". So what you would do in HTML is this:
<div class="headerContent">My header</div>
<div class="everythingElse">
<div class="mainContent">...</div>
<div class="footerContent">My footer</div>
</div>
CSS:
.headerContent {
position: fixed;
top: 0;
left: 0;
height: 5.0em;
width: 100%;
background-color: red;
}
.everythingElse {
margin-top: 5.0em; /* Same as the height of the header */
}
You can do the same in GWT UiBinder. Just replace the divs with simple FlowPanels (if you like), and apply the css (with a UiBinder CSS class referenced using the addStyleNames attribute). No DockPanels needed. When the height of "everythingElse" exceeds the window height, the default setup of the body tag shows the scroll bar.