I'm using GWT 2.4 and uiBinder to add widgets to a page. Now I want to layout two bottom buttons in one row, but I'm not sure of the correct way to do this.
I tried adding in a horizontalPanel like this:
<tr>
<td align="center">
<g:HorizontalPanel ui:field="horizontalPanel" borderWidth="1" spacing="50">
<g:Button ui:field="cancelButton" text="Cancel"></g:Button>
<g:Button ui:field="exitButton" text="Exit"></g:Button>
</g:HorizontalPanel>
</td>
</tr>
but it's not spacing the buttons far enough apart. Increasing the spacing is adding more height to the panel and pushing everything down away another button that is above it.
What is the proper way to do this?
There are two ways you can go about doing your layout in GWT:
depend on smartgwt or gxt.
bite the bullet and learn css.
I advise people to go the 2nd path. smartgwt and gxt will seem attractive for a simple project. However, as your project gets more and more complex, the incompatibilities with all the other GWT goodies become wider and wider.
Bite the bullet and learn how to integrate css into gwt.
<!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">
<ui:style>
.trivial {
font-weight: bold;
margin-left: 50px;
margin-top: 0px;
margin-right: 50px;
margin-bottom: 0px;
}
</ui:style>
<g:HorizontalPanel>
<g:Button styleName="{style.trivial}" ui:field="button1">David Headley</g:Button>
<g:Button styleName="{style.trivial}" ui:field="button2">Debacle</g:Button>
</g:HorizontalPanel>
</ui:UiBinder>
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.
As the subject says.
I've bound an HtmlEditorExtender to a textbox but it doesn't show the icons in the toolbar, just grey buttons.
The code should look something like:
<asp:TextBox ID="ContentMail" runat="server" AutoFocus="true" Width="60em" Height="40em" TextMode="MultiLine"/>
<asp:HtmlEditorExtender ID="HtmlEditorExtender1" runat="server" TargetControlID="ContentMail" DisplaySourceTab="True">
</asp:HtmlEditorExtender>
And if you are setting it in a TemplateField just add an invisible div with a textbox linked with a HtmlEditorExtender
I've experienced the same with AjaxControltoolkit 15.1, when I applied Ajax Control Toolkit Static Resources. I had to detach ACTStaticRecourses in order to get my icons back in the toolbar.
Hope this helps to some :)
I fixed this bug , I add the css style ajaxcontroltoolkit
https://searchcode.com/codesearch/view/27732040/
to page when problem and change
background: url(Images/html-editor-buttons.png) no-repeat;
in
.ajax__html_editor_extender_button
{
background: url(Images/html-editor-buttons.png) no-repeat;
cursor: pointer;
display: block;
float: left;
border: none;
background-color:#c2c2c2;
padding-bottom:2px;
}
on pathimage then generic ajax
hey guys(girls) if you using update panel in asp.net or asp:HtmlEditorExtender using in gridview and don't show icons. You needed add hide asp.panel when contain asp:HtmlEditorExtender and textbox. Example.
<asp:Panel runat="server" Visible="False">
<asp:TextBox ID="TextBox22" runat="server" AutoFocus="true" BackColor="White" Height="15em" TextMode="MultiLine" Width="99%"></asp:TextBox>
<ajaxToolkit:HtmlEditorExtender ID="TextBox12_HtmlEditorExtender" runat="server" TargetControlID="TextBox22">
</ajaxToolkit:HtmlEditorExtender></asp:Panel>
When using UiBinder what is the preferred method of creating a simple layout like this?
FlowPanel:
<!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'>
<ui:style>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:FlowPanel styleName="{style.outer}">
<g:FlowPanel styleName="{style.inner}">
<g:Label ui:field="someLabel"/>
</g:FlowPanel>
</g:FlowPanel>
</ui:UiBinder>
HTMLPanel:
<!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'>
<ui:style>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:HTMLPanel styleName="{style.outer}">
<div class="{style.inner}">
<g:Label ui:field="someLabel"/>
</div>
</g:HTMLPanel>
</ui:UiBinder>
Edit: I know they produce the same html when rendering, I'm wondering if there is any justification for using one style over the other.
The javadocs say that the FlowPanel is the simplest panel, but at what point does using an HTMLPanel become preferable. e.g.
<FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
</FlowPanel>
vs.
<HTMLPanel>
<div>
<Widget>
</div>
<div>
<Widget>
</div>
</HTMLPanel>
Thanks.
UiBinder - HTMLPanel vs. div is a fairly similar question but asks about using a div vs. a HTMLPanel.
Actually they will render same in your case - div. There is no difference unless you start adding more elements to FlowPanel.
You can try FlowPanel behaviour here:
http://examples.roughian.com/index.htm#Panels~FlowPanel
You should use HTMLPanel in cases when you need to write your own custom HTML code on the page. It allows to write HTML code inside of HTMLPanel tag.
For example you can't do such trick with FlowPanel.
I recently read Tags First GWT Programming. It seems to me, that the technique he describes would allow you to have much better control over the ultimate rendering of your page, while maintaining the advantages of GWT.
I think the dichotomy that you're asking about between FlowPanel and HTMLPanel isn't really the right question. Instead, it is best to recognize that they're meant for different things.
HTMLPanel is capable of a lot more than FlowPanel is. When you need to dynamically add and remove widgets that are embedded in some custom html, use an HTMLPanel. If you just want some widgets to align together on the page with normal html flow (like some text and pictures) use a FlowPanel.
My personal advice would be to use the simplest thing that can do what you need it to.
I recommend the second example. If possible you should prefer using a plain HTML tag such as "div" over a widget such as "FlowPanel" because of the overhead having an unused logical widget.
This may seems trivial first but it saves you a lot of headache (memory leaks, gquery operations, ...) when you have to deal with a lot of items.
I have created GWT web application with standard Tree component from GWT. By default:
Tree
Implemented as a DIV containing nested TreeItems. The style name gwt-Tree applies to the DIV and the style overflow defaults to auto.
<div class="gwt-Tree" style="overflow: auto;">
<div style="position: relative; margin-left: 16;" (handle)>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Where is the place in GWT source code where I can change Tree rendering on my own design?
You should use CSS to style GWT components.
Here's a simple example using a UIBinder template:
<ui:style>
.myTree {
background-color: red;
}
</ui:style>
<g:HTMLPanel>
<g:Tree styleName="{style.myTree}" />
</g:HTMLPanel>
See this developer's guide also.
I need to implement a background in a Label, and also, probably just fill half of it with one color and the another half with another. Whats the best way of achieving it?! Using CSS?! Or is there another easier way.
Thanks in advance
This is what CSS is used for.
Label label = new Label("your text");
label.setStyleName("myStyle");
And in your .css file:
.myStyle {
background-color: #f00;
}
Or if you're using UIBinder:
<ui:style>
.myStyle {
background-color: #f00;
}
</ui:style>
<g:HTMLPanel>
<g:Label styleName="{style.myStyle}">Your text</g:Label>
</g:HTMLPanel>
The benefit of the UIBinder approach is that your style is in the same file as the Label and the CSS name will be obfuscated as well.