I am building a widget with UiBinder, and I need to have it enclosed in a <span /> but UiBinder only gives me <div />. E.g. <g:HTMLPanel /> => <div />. HorizonPanel, FlowPanel, VerticalPanel also give out only <div />.
Does any one know a solution?
Try this:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel tag="span">
<!-- your stuff -->
</g:HTMLPanel>
</ui:UiBinder>
You can keep using a <div> but just add display: inline to its CSS, which will make it display as though it were a <span>.
Edit: fixed place at the end where I said 'div' but meant 'span'.
With regards to the answer above by Robert (sorry I can't figure out how to comment that directly)
This won't work out of the box, as widgets can't be placed inside plain HTML (the compiler will give you "error: found widget in html context"). But there's a simple workaround:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel>
<span>
<!-- Your content with widgets goes here -->
</span>
</g:HTMLPanel>
</ui:UiBinder>
One other useful thing to mention is InlineHTML and InlineLabel widgets capable of holding arbitary html or plain text respectively in a <span>
Related
I have a GWT app with one main panel showing a table of PostgreSQL instances. I want the app to show other kinds of instances, e.g. Redis instances. So I'm initially wrapping the main panel in a DeckLayoutPanel to swap out the PostgreSQL panel with a Redis panel. There will a vertical menu on the left side that the user will use to select the type of instance to show.
Adding DeckLayoutPanel to the UI XML causes the main panel to not display, although I do see the content in a DOM inspector.
Here's the original, working UI, without g:DeckLayoutPanel:
<!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>
<table width="100%" border="1">
<tr>
<td colspan="2" align="left">
Logo
</td>
<td colspan="2" align="right">
Hello John
</td>
</tr>
<tr>
<td colspan="4">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</td>
</tr>
<tr>
<td>Help</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
If I remove the g:HTMLPanel and also the HTML table, trimming it to, this works:
<!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:DeckLayoutPanel ui:field="deckLayoutPanel">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</g:DeckLayoutPanel>
</ui:UiBinder>
I'm using an HTML table here since I'm not a front-end designer and I have similar HTML for the non-GWT JSP pages (using a JSTL tag) so want to make sure the GWT and non-GWT pages render the same.
Should I be using something else than a table? Should I switch to divs for placement instead? Is using a g:DeckLayoutPanel in an HTML table not supported? How is one supposed to get identical HTML pages for GWT and non-GWT pages if one needs to use only GWT layout widgets?
BTW, I tried using RootPanel and that didn't work either with the HTML page.
I'm binding to it using:
interface Binder extends UiBinder<HTMLPanel, MyWebApp> { }
private static final Binder binder = GWT.create(Binder.class);
#UiField
DeckLayoutPanel deckLayoutPanel;
#UiField
VerticalPanel instancesPanel;
#Override
public void onModuleLoad() {
HTMLPanel outer = binder.createAndBindUi(this);
// Tweak a bunch of settings on the UI elements.
...
RootLayoutPanel.get().add(outer);
deckLayoutPanel.showWidget(instancesPanel);
}
The HTML hosting the page is this:
<!doctype html>
<%# page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<link type="text/css" rel="stylesheet" href="MyWebApp.css">
<title>MyWebApp</title>
<script type="text/javascript" language="javascript" src="MyWebApp/MyWebApp.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
DeckLayoutPanel in a HTMLPanel
The problem is part of the title...
The short answer is: Do not nest **LayoutPanels in anything other than a **LayoutPanel unless you set a fixed size for it.
**LayoutPanels are meant for applications that that have a static layout that is defined from the outer to the inner. If you only user **LayoutPanels for the outer layout, it works. In your second code example you noticed exactly this behavior.
A html table works different, it needs it's content to define a size and grow with it. As **LayoutPanels do not grow with their contents, they have a size of 0x0px.
I answered a similar question lately (link). Possibly it answers different aspects of this problem.
I'm working on a custom cell for a cell list that displays product information including an image and several text fields, similar to the one in the CellList sample. The images are not resources that are packaged with my app, they are on an external image server. I'd like to use UiBinder for the layout of the cell. Eventually the cell will be more complicated, but for now here is a my template that just shows a product description and image:
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
</ui:style>
<ui:with field="imageSource" type="java.lang.String"/>
<ui:with field="product" type="com.mydomain.ProductProxy" />
<div ui:field="root">
<span><ui:text from="{product.getDescription}" /></span>
<ui:image url="{imageSource}" />
</div>
The CellList displays a list of descriptions but no products. If I inspect the element with Chrome I can see that the ui:image is not being compiled into an img element:
<div onclick="" __idx="0" class="GPROKKBAB" style="outline:none;" tabindex="0">
<div gwtuirendered="gwt-uid-17">
<span>E03351 </span>
<ui:image url="http://images.mydomain.com/image/product_id.jpg"></ui:image> </div></div>
Any suggestions? I'm sure it's something obvious but I've been at it for a while and I've tried a number of things with no luck.
How about simply using an HTML img?
<img src="{imageSource}" />
Currently, DataGrid doesn't include a SimplePager. One must create a composite and wrap a grid and a pager into a FlowPanel. Is there a way you can create a wrapper CDataGrid (that extends DataGrid) that includes SimplePager?
I think that you can use UiBinder to make this possible, you can check at the showcase sample here that shows 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:c="urn:import:com.google.gwt.user.cellview.client">
<g:DockLayoutPanel
unit="EM">
<!-- DataGrid. -->
<g:center>
<c:DataGrid
ui:field='dataGrid' />
</g:center>
<!-- Pager. -->
<g:south
size="3">
<g:HTMLPanel>
<table
style="width:100%">
<tr>
<td
align='center'>
<c:SimplePager
ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:south>
</g:DockLayoutPanel>
</ui:UiBinder>
You can wrap a DataGrid with SimplePager or whatever do you wish, and make a new "Widget" called "CDataGrid" (as you said) that not extends DataGrid but can extends Composite.
I hope I can give you a little help with this.
Best Regards,
iVieL.
It does integrate with DateGrid.
Take a look at the showcase for an example:
http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid
Adding pager as a part of the Grid, eliminates extra markup and steps in Compositve View. My solution was to create a new composite and provide callbacks.
I have create a DecoratedTabPanel in GWT
<g:HorizontalPanel ui:field="hpnlTab">
<g:DecoratedTabPanel animationEnabled="true" ui:field="tabQuran" width="499px" height="281px">
<g:Tab text="Quran">
<g:HTMLPanel width="249px" height="262px" ui:field="quranTab">
<!-- <div class="{style.qFrameMiddle}" id="middleFrame">-->
<div ui:field="quranText" class="{style.quranText}">
</div>
</g:HTMLPanel>
</g:Tab>
<g:Tab text="Translation">
<g:HTMLPanel width="7cm" height="249px"/>
</g:Tab>
</g:DecoratedTabPanel>
</g:HorizontalPanel>
Its working fine , showing the word Testing, when i click on testing, its also opens the HtmlPanel , but the problem is , its not showing TABS, just a simple text, see the image
thanks
Make sure in your ModuleName.gwt.xml has inherited standard theme or another one:
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
Or you are somewhere overriding its default styles.
I'm trying to embed a TabLayoutPanel inside a DockLayoutPanel but the tabs are not showing up :(
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:DockLayoutPanel unit='PX'>
<g:north size='200'>
<g:HTML>
<h1>
My Header
</h1>
</g:HTML>
</g:north>
<g:center>
<g:TabLayoutPanel barUnit='PX' barHeight='3'>
<g:tab>
<g:header size='7'>
<b>HTML</b>
header
</g:header>
<g:Label>able</g:Label>
</g:tab>
<g:tab>
<g:customHeader size='7'>
<g:Label>Custom header</g:Label>
</g:customHeader>
<g:Label>baker</g:Label>
</g:tab>
</g:TabLayoutPanel>
</g:center>
<g:west size='192'>
<g:HTML>
<ul>
<li>Sidebar</li>
<li>Sidebar</li>
<li>Sidebar</li>
</ul>
</g:HTML>
</g:west>
</g:DockLayoutPanel>
</ui:UiBinder>
If you're seeing nothing at all, make sure that the TabLayoutPanel either (a) has an explicit size, or (b) is ultimately attached to the RootLayoutPanel (see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize for more details).
If the problem is a lack of styling on the tabs (i.e., you're just seeing raw text where the tabs should be), you'll need to add some styles (the CSS rules you'll need are described in TabLayoutPanel's javadoc). There are not yet any default styles for TabLayoutPanel, but we'll be adding some soon.
The example from the JavaDoc is somewhat misleading - the bar height of 3 will hide the tab headings and a height needs to be specified for the body. Use something like:
<g:TabLayoutPanel barUnit='PX' barHeight='25' height="200px" >
or
<ui:style>
.tab {
height: 200px;
}
<g:TabLayoutPanel barUnit='PX' barHeight='25' styleName="{style.tab}" >
Also, you can find a basic CSS style for TabLayoutPanel on comment #5 in the following issue:
http://code.google.com/p/google-web-toolkit/issues/detail?id=4429
I have been having the same issue using the new TabLayoutPanel too (the tabs doesn't show up even if it's the only thing on the page). I decided to back to using the (now deprecated) TabPanel instead. Try and see if that works instead:
Example code:
<g:TabPanel width="100%" height="100%" ui:field="gwtimeTabPanel">
<g:Tab>
<g:TabHTML>Tab title</g:TabHTML>
<g:FlowPanel>
<!-- tab contents goes here -->
</g:FlowPanel>
</g:Tab>
</g:TabPanel>
For the people who mainly use Java code to define the UI.
Explenation
You should set the size of the parentpanel of the TabLayoutPanel and of the TabLayoutPanel itself. For instance I had a VerticalPanel and a TabLayoutPanel, I added this TabLayoutPanel to the VerticalPanel (which makes it the parentpanel of TabLayoutPanel) like this:
veticalPanel.add(tabLayoutPanel);
RootPanel.get().add(verticalPanel);
which did nothing...
Answer
you should declare the size of your panels like this
//set size
vertialPanel.setSize("100%","100%");
tabLayoutPanel.setSize("100%","100%")
RootPanel.get().add(verticalPanel);