according to https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Standards I 'm not suppose to use DockPanel, VerticalPanel, HorizontalPanel. But Those are the only panels that support hasverticalalignment and hashorizontalalignment. How am I suppose to align the widgets if I want to conform to the standards mode? Or should I keep the project in its current form using VericalPanel and HorizontalPanel, and ignore the warning eclipse gives me:
[INFO] [project] - GWT no longer supports Quirks Mode
(document.compatMode=' BackCompat').Make sure your application's
host HTML page has a Standards Mode (document.compatMode='
CSS1Compat') doctype,e.g. by using <!doctype html> at the
start of your application's HTML page.To continue using this
unsupported rendering mode and risk layout problems, suppress this
message by addingthe following line to your*.gwt.xml module
file: <extend-configuration-property
name="document.compatMode" value="BackCompat"/>
P.S.: I work in uibinder
Using tables for layouts is considered a bad practice by most UI experts. These layouts are rigid - they don't adjust well with the size of their contents.
You can build any layout you want without using these panels. Horizontal alignment is the easiest one: you simply add a CSS rule "text-align: center" (left, right) to the parent widget. For more interesting effects you can use "float: left" or "float: right". In some rare cases you may event want to use absolute positioning ("position: absolute", "left: 20px"; "top: 20px").
Vertical alignment is a little trickier, but generally you want your content to flow from top to the bottom. You can manage vertical positioning by using top and bottom margins or setting the line heights.
You can find many great resources on building fluid layouts on the Internet. Most suggested html and CSS solutions can be used with GWT, and Ui:Binder is a very convenien way to do so. You can also search StackOverflow for layout solutions to any problem you face.
Related
I am using Google Apps Script and the Apps Script UI Builder, which is based on GWT widgets.
If I create a Flow Panel, and add two Labels of 50% width, then these labels appear on separate lines. But isn't 50% + 50% = 100%.
How do I make them appear on the same line?
To try it out yourself:
Open a Google Spreadsheet.
In the Spreadsheet menu, click: Tools / Script Editor...
In the Script Editor menu, click: File / Build a user interface...
Add the widgets to the canvas.
Of course this question doesn't just apply to the problem with the labels. In general I am totally puzzled concerning how to build flowing layouts with the UI Builder. There seem to be (hidden?) paddings and margins that make things very hard.
It's all based on CSS and its box model, and that issue has accumulates cruft over the last 15 years or so. In essence, the widths you specify don't take into account margings (and/or possibly padding, it's been a while), so you will need to add a stylesheed that minimizes them. See something like this CSS reset.
Labels translate to <div>s, which appear on different lines by default. You could try adding float: left to the labels, or change the display mode, etc.
You could also try InlineLabels, which I think compile to <span>s.
If you've already tried all this, then your Labels are apparently just too wide. It's annoying that two 50% objects wouldn't fit on the same line, but what isn't annoying about working with HTML and CSS?
The solution is simple. For both labels, set to zero:
Borders and Margins / Margin
Don't know why I didn't see that yesterday - I was doing a night shift... ;-)
Some of the stakeholders on my project expressed doubt in easily recognizing hidden vertical content to scroll to in an MGWT ScrollPanel (without taking a swipe at it). As an attempt to address the concern I'd like to always show the pretty semi-transparent vertical scrollbar as both a hint of more content to scroll to and an indication of the ratio between the amount of displayed vs. all content in the panel.
Is it possible to keep the panel's scrollbars permanently displayed? At first I thought the setShowScrollBarY(boolean) would do the trick but quickly proved myself wrong.
P.S.: Shouldn't there be an m-gwt StackOverflow tag by now? AFAIKT MGWT has gained sufficient traction to have an MGWT-specific stream of questions.
I have had the same issues with clients that suggested that showing scrollbars would be a good idea. If you cut your content right its easy to see for the user that there is more content..
Anyhow I just added a setHideScrollBar(boolean) to the trunk. Download it from ( https://oss.sonatype.org/service/local/artifact/maven/redirect?r=snapshots&g=com.googlecode.mgwt&a=mgwt&e=jar&v=LATEST) and give it a try. Maybe we should also think of an option to flash the scrollbars once to indicate that there is more content.
By the way I would be supporting an mgwt specific tags as I do with the mailing list: https://groups.google.com/group/mgwt
Currently SWT's TabFolder supports only the TOP and BOTTOM styles, ie. it will only draw the tabs horizontally along the top or bottom of the control. This is unlike Swing's JTabbedPane, which gives the option of also orienting the tabs vertically, along the side of the control.
Can anyone suggest any workarounds to achieve a vertical orientation in SWT? Any suggestions of custom or 3rd-party components (or other alternative) would be appreciated.
I don't know of any SWT-compatible controls like that, but you could build your own alternative using a StackLayout and some control(s) to switch between the different "panels." Here's a simple example SWT Snippet.
You could also look at the code for CTabFolder and see if it would be straightforward to modify it to suite your needs.
I am currently trying to replicate the functionality of the Sticky application (fourth example under "samples") in my GWT application, specifically NoteView (see the class NoteView in SurfaceView.java in my personal repo or download Google App Engine's SDK, where you'll find it in appengine-java-sdk-1.5.1/demos/sticky).
However, as hard as I try, I just cannot find the place where Google put in the gripper bars on the bottom right hand corner of every note, and where their code allowed the user to resize the note. grepping for "resize" and "resizable" in their sticky dir was not fruitful, and the CSS "resize" functionality was not used either. Also, GWT Textareas are not automatically resizable in the way that these notes in GWT are, and I don't know how to enable this or set it up.
I'm sorry but it really just is a textarea, and your browser does the rest (most browsers make textareas resizable nowadays).
Using Firebug or a similar developer tool, can you tell which differences are there between the Sticky sample and what your code does?
I figured it out -- it was old crud css left over from a gxt implementation. As soon as I removed the css file, the textarea automatically had gripper bars.
I'm fighting to understand the weird behavior of GWT Layout Panels. I'm wondering how GWT translate Layout logic into javascript and html. sometimes we don't get the expected Layout . something under the cover is done by GWT compiler.
the GWT documentation is not clear enough on how Layout is performed under the cover.
is there some good books or tutorials that explains well the GWT Layout issues?
thanks.
I don't know about good books or tutorials but here's a little information that may be helpful.
First, as you may know there's a big difference between the FooPanels and the FooLayoutPanels. These are two different sets of panels that are based on different layout mechanisms. The Layout Panels are the new stuff that seems to be suited better for layouts that have hard-coded sizes, Google Wave style. The older FooPanels (VerticalPanel, etc.) are based on HTML tables mostly.
FlowPanel - this is simply something that outputs your widgets as successive HTML elements in a single DIV. As documented: "A panel that formats its child widgets using the default HTML layout behavior".
DockLayoutPanel - Looking at the code shows that it hard-codes the sizes of the different regions according to what you specify in the children (north, east, etc.)
Finally - my experience has led me to abandon all usage of the Layout Panel system and rely only on HTML and CSS wherever I can. This means using HTMLPanel + UiBinder mostly and sometimes FlowPanel, rarely also some of the other panels.
Trying to understand and battle the Layout Panel system to do things that are not the "default case" was a waste of time. I'm not saying it's the best thing to do, but I just couldn't get the kind of control I wanted without this - especially with regard to elements that should automatically expand vertically. If you haven't already, take note of this from the GWT documentation about Layout Panels:
The panels described above are best used for defining your application's outer structure — that is, the parts that are the least "document-like". You should continue to use basic widgets and HTML structure for those parts for which the HTML/CSS layout algorithm works well. In particular, consider using UiBinder templates to directly use HTML wherever that makes sense.