Using gwt widgets in errai ui - gwt

I would like to know if it is possible to use complex gwt widgets like MenuBar or TabLayoutPanel in errai ui.
For example, how can I port the following uibinder to errai's ui template?
<g:MenuBar ui:field="menuBar">
<g:MenuItem ui:field="helpMenuItem">Help</g:MenuItem>
<g:MenuItem ui:field="aboutMenuItem">About</g:MenuItem>
<g:MenuItem ui:field="siteMapMenuItem">Site Map</g:MenuItem>
</g:MenuBar>
I think I could use a <div> in the template, and bind it to a MenuBar, but I would have to construct the menu items programmatically in the view, which I want to avoid.
Thanks!

You have to construct the menu and its items programmatically if you want to stick only with Errai UI.
However you could put the menu in a separate widget which could be built with UI-Binder.
GWT's UI-Binder can represent Widgets as well as DOM elements whereas Errai UI only works with a DOM.

Related

Complex form in GWT

I am about to develop a pretty big form in GWT and I have the traditional: "which layout should i start with"?
When I say "complex" form, it is roughly 25 fields, with some lookup, explanations...
I use uibinder.
GWT translates Java into JavaScript. Nothing more. When you think about layouts, think HTML and CSS first. You can create a very complex layout using Ui:Binder without a single line of Java code. You will need GWT for handlers and such.
GWT does offer some widgets - like a LayoutPanel - for convenience. So you can use it as a container for your form, possibly split into a couple of layers (left and right column), with each layer containing an HTMLPanel (or ScrollPanel and then an HTMLPanel inside of a ScrollPanel). Then you add all your fields into each of these HTMLPanels.

GWT combobox with custom items

I am trying to define a combobox that shows as items, custom controls instead of standard text only items. The control used is com.google.gwt.user.client.ui.ListBox (standard GWT control) as combobox.
Looking at the Showcase http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellList for example, there is a custom list with custom items. To do this, the example uses the CellList class. Is it possible to use the same technique for a combobox?
More in general, is it possible to use a combobox with custom, complex items (e.g. multi column items, custom complex items of any sort, in general a widget of my own or similar)?
I ask this using standard gwt ui controls, no Ext-GWT, no Smart GWT or others.
Thanks.
You cannot style GWT ListBox as it translates to HTML <select> element. If you still insist on feature rich combo-box like GXT then you can go with
GwtChosen - http://dev.arcbees.com/gwtchosen/
CellList with reduced height, selection mode - single and CustomCell.
GWT SuggestBox - http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwSuggestBox

Migrating from "native GWT" to GXT

I am thinking of migrating my GWT app from "native GWT" to GXT, however I want to know whether there is a theme in GXT that looks just like the native theme of GWT, com.google.gwt.user.theme.standard.Standard
Also in my "native GWT" application I apply my own css to some widgets. Does the CSS-format for widgets the same with GXT as it is with the native GWT widgets? Like for Button, MenuBar, Panels etc.
Basically GXT 2 has just two themes (blue and gray). There is no such a theme that looks like native GWT, but thats why you should choose GXT, becuose it has rich components and you don't have to take care of your css and other stuffs. Also is not easy to change you style.
Ext GWT 2.0, widgets are responsible for creating their DOM structure
directly. This is done either by manually creating the elements or by
using an HTML fragment. The HTML for the widget is created from
strings, from an XTemplate, or by assembling DOM elements. The CSS
class names are then applied to the elements by the widgets. With this
approach, a widget’s view is tightly bound to the widget itself and
CSS class names are generally hardcoded into the widget.
Because the way how was build is really difficult to change the style of your component. But the new version 3.0 has a new approach that make easier to change your style and you can also combine with native gwt widget.
You can check the website

Is it possible to reuse GWT UIBinder panels?

I have a layout in Google Web Toolkit using UIBinder involving a TabLayoutPanel. This layout has the superset of all tabs that will be used by my app (think of it as an admin view).
I now need to create a new layout, using a subset of these tabs (eg, for regular users).
Is it possible to import panels from my admin layout in my user layout? Or perhaps define them all in a third file, and import from both layouts?
You can definitely import views you've written, both UIBinder templates and regular Widgets, into another UIBinder template.
From the UIBinder docs:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:com.my.app.widgets' >
<g:HTMLPanel>
<my:WeatherReport ui:field='weather'/>
<my:Stocks ui:field='stocks'/>
<my:CricketScores ui:field='scores' />
</g:HTMLPanel>
</ui:UiBinder>
Notice how the Stocks and CricketScores widgets are imported from your own package.
You won't necessarily need to do this just to show/hide tabs based on user privileges, you can just show/hide your tabs in your GWT code based on access levels.
Define each tab content as a separate UiBinder template. Since UiBinder classes are Composites you can add them to any container just like any other widget.
You can assemble your TabLayoutPanel in code by adding each UiBinder templeted object into a tab in the TabPanel or define another UiBinder Template with the TabPanel and all the Tabs defined.
If you go the UiBinder route for templating the TabLayoutPanel, import the tab panel contents (Composites you defined earlier using UiBinder) into the UiBinder by defining a new 'namespace' pointing to the package where all your composites reside. You then refer to your composites as namespace:ClassName in the UiBinder template.
if com.project.package is where you keep all your composites which you want embeded in individual tabs then define a new namespace f as xmlns:f= 'com.project.package' soon after xmlns:g declaration.
You refer to individual composites in your UiBinder as
<f:Composite1 />
<f:Composite2 />

placing widget in listbox/dropdown in gwt

i am using gwt to build my web site.
i would like to create a dropdown/listbox that contains no just text but also images, meaning that in the drop down there will be a what ever widget that ill create.
please advise
jaimon
You won't be able to do this with a ListBox, because it just creates an HTML < select> element.
You can use a MenuBar that has one menu with MenuItems in it to simulate a dropdown with complex widgets inside it. You will also be able to style the dropdown rather than rely on browser-styled form elements.
Take a look at the Combobox or Suggestion box in Advanced GWT Components.
Another widget is the DropDownListBox in the GWT incubator. I have not used it, but the stated intent is to provide a rich, stylable ListBox. You can pass raw HTML to the addItem() method.
DropDownListBox
it is possible to use Tree inside ScrollPanel, without using nested items
Tree allows TreeItem to be a Widget