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.
Related
I have a header in my email with a logo on the right and some links on the left (all on one line). Works fine, but when viewed on a mobile device, the links on the left overflow to two lines.
I'd ideally like to have the mobile version display the logo on the top line and the links below it like the following:
DESKTOP:
Logo Link 1 Link 2 Link 3
MOBILE:
Logo
Link 1 Link 2 Link 3
How would I achieve this?
My code:
<table class="row header">
<tr>
<td class="center" align="center">
<center>
<table class="container" style="border-bottom: 1px solid;border-bottom-color:#bdc3c7">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="four sub-columns full-size">
<img class="left" style="float:left;width:180px !important;" src="#" width="180px">
</td>
<td class="eight sub-columns last full-size" style="text-align:right; vertical-align:middle;">
Link1</span> <span style="color:black;font-weight:100">Link2</span> <span style="color:black;font-weight:100">Link3</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
I'm not really sure what certain classes do in your html as I'm used to working with Inky, the templating language of Foundation for Email 2 but the work-around should be sort of the same.
Because of the way css works (cascading style sheets) you'll need to override the inline styles and the wrapping with a few !important lines in a media query at the top of your mail in the style tag.
For example:
#media only screen and (max-width: 480px){
td .example-class { width: 100% !important };
}
Or if you're using Inky only use the attribute large on your <columns> tag. Consequently, the small attribute will copy the value of the large attribute.
Your links'll be pushed under your logo as its container is taking up the full width.
To display your logo in the center (if you are using Foundation for Email 2):
.float-center class on the <img> element
align="center" attribute on the <img> element
Wrap the <img> with <center> tags (needed for Outlook 2007, 2010, and 2011)
Or when using Inky: A center tag around your img would be enough to do the job.
Source for aligning an img: https://foundation.zurb.com/emails/docs/alignment.html
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.
Lately me and my QA buddies are trying to find a way to make Selenium IDE (v2.2 with FireFox v22) type a text into NicEdit's textarea, but without success.
We took a look on the internet for the past few days, and so far we discovered, among other things, that NiceEdit is not an iFrame (I think many here already know that).
We're not using code nor any other webdrive, just Selenium IDE, which makes things a bit harder, I guess.
We've tried xpath, class, id etc... no success.
But in these cases, the Find button in Selenium highlights the area.
So, is there a way to make Selenium IDE type in the NiceEdit's textarea without code?
Here's the html code of NicEdit's textarea provided by FireBug.
<div contenteditable="true" class="span12 " data-bind="html: Conteudo" id="conteudo" style="background-color: rgb(255, 255, 255);">
</div>
And the rest before it:
<div id="editorPanel" style="width: 100%;" unselectable="on">
<div class=" nicEdit-panelContain" style="overflow: hidden; width: 100%; border: 1px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239);" unselectable="on">
<div class=" nicEdit-panel" style="margin: 0px 2px 2px; overflow: hidden;" unselectable="on">
</div>
</div>
<div id="conteudo" class="span12" contenteditable="true" data-bind="html: Conteudo">
</div>
EDIT: I've found out that NicEdit turns the textarea into a div, so Selenium is not able to focus on the area.
Anyone has any sugestions about how can I make Selenium put some text on NicEdit?
Thanks!
<tr>
<td>storeEval</td>
<td>this.browserbot.findElement("id=someID").innerHTML='fillerText'</td>
<td></td>
</tr>
Does the above work for you?
I am new to GWT and I am probably overlooking something simple. So what I am trying to do is in my html page I have created a layout for my page in the body tags:
<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">
<!-- Header row -->
<tr style="height: 25%;">
<td colspan="2" id="header"></td>
</tr>
<!-- Body row and left nav row -->
<tr style="height: 65%;">
<td id="leftnav"></td>
<td id="content"></td>
</tr>
<!-- Footer row -->
<tr style="height: 10%;">
<td colspan="2" id="footer"></td>
</tr>
</table
I have set Ids to everything so that I can get these items in the Entry point. So in my Entry point I try to populate these fields like this:
RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());
However I have learned through debugging that the RootPanel.get("header") is returning null. I am sure the rest are returning null as well, it is just crashing before it gets there. To my understanding this is the right way to do things, however I must have missed something. Please let me know what I am doing wrong or if you need more info. Thanks
Usually using div tags will work better than other types of elements such as <td>. Like the comments say, you should try to just use one RootPanel and then add then create your layout with GWT panels.
A very good way to layout a page like an HTML page is by using UiBinder. You can write out the layout using and XML language very close to HTML and at the same time use all of the useful GWT widgets. It's very useful to use and learn if you'll be building apps with GWT.
Try to use div tags in HTML:
<table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">
<!-- Header row -->
<tr style="height: 25%;">
<td colspan="2"><div id="header"></div></td>
</tr>
<!-- Body row and left nav row -->
<tr style="height: 65%;">
<td><div id="leftnav"></div></td>
<td><div id="content"></div></td>
</tr>
<!-- Footer row -->
<tr style="height: 10%;">
<td colspan="2"><div id="footer"></div></td>
</tr>
</table
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.