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.
Related
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 am using UiBinder and a DockLayoutPanel as shown below. I am adding a custom CellTable to the ScrollPanel named "contentPanel".
When the CellTable is created for the first time, a horizonal scrollbar appears (along with the cellTableLoading.gif). Once the CellTable is finishing loading the horizontal scrollbar disappears.
How can I prevent the horizontal scrollbar from appearing in the first place?
I'd be happy to provide any other info that will help troubleshoot the problem. Many thanks!
<g:DockLayoutPanel unit='PX' styleName="{style.wrap}">
<g:north size='180'>
<g:HTMLPanel styleName='{style.header}'>
<g:Hyperlink ui:field="logoutLink" styleName="{style.login}"/>
</g:HTMLPanel>
</g:north>
<g:south size="70">
<g:HTMLPanel styleName="{style.footer}">
<g:Label>© Copyright by</g:Label>
</g:HTMLPanel>
</g:south>
<g:center>
<g:HTMLPanel styleName='{style.content}'>
<g:SimplePanel styleName='{style.left}' ui:field="navigationPanel" />
<g:ScrollPanel styleName='{style.right}' ui:field='contentPanel' />
<div style="clear: both;" ></div>
</g:HTMLPanel>
</g:center>
Impossible to tell why it happens without seeing the markup that's being generated and your CSS styles, but to turn off the scrollbars temporarily you can do the following:
// Before you load your table
contentPanel.getElement().getStyle().setOverflow(Overflow.HIDDEN);
// load your table
// ....
// after table is loaded
contentPanel.getElement().getStyle().setOverflow(Overflow.AUTO);
As a side note, you should also implement the panel inside <g:center> as a LayoutPanel instead of floated divs. It will give you a much more predictable layout:
<g:center>
<g:LayoutPanel styleName='{style.content}'>
<g:layer left="0" width="200px">
<g:SimplePanel styleName='{style.left}' ui:field="navigationPanel" />
</g:layer>
<g:layer right="0" left="200px">
<g:ScrollPanel styleName='{style.right}' ui:field='contentPanel' />
</g:layer>
</g:LayoutPanel>
</g:center>
You would also, obviously need to remove any box model related styles from .left and .right, like width and float.
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>
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);