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 />
Related
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.
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.
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
I have created GWTWebApplication , I have added one tabpanel and added htmltab penels.
now i want to change of tabpanel background style but i could not ,even i try to add decarated panel that case also same.
if i create GWT Javaproject that case it adds some predefine css style .but in webapplication project noting defult css styles
This is my code
TabPanel tabPanel = new TabPanel();
HTMLPanel hPanle1 =new HTMLPanel("");
HTMLPanel hPanle2 =new HTMLPanel("");
tabPanel.add(hpanel1,HPanel);
tabPanel.add(hpanel2,HPanel2);
My requirement is to change the tabbar background color only,and when i select my should be heligheted .
please give me response as soon as possible
It sounds like what you are looking for is a way to change the background of the active tab. You can accomplish this with GWT's built-in classes that it applies automatically to the active nav items.
Just put this in your CSS somewhere:
.tabpanel-activeNavItem {
background: red;
}
You can also look at the classes TabPanelResources and TabPanelStyle, and the css file tabpanel.css for details on the default styles. To understand more about how GWT handles CSS, read their CSS Resource Documentation
Where can I find a UiBinder template for the FlexTable?
I am using Google Web Toolkit (GWT).
I found a link text that said if you do not need to handle events, you can just use straight HTML instead of FlexTable for layout:
<g:HTMLPanel>
<table>
<tr><td>Info:</td><td><g:TextBox ui:field="infoTextBox"/></td></tr>
</table>
</g:HTMLPanel>
AFAIK, there's no custom "template" for FlexTable (as there is for, for example, DockLayoutPanel). Besides, FlexTable is used when you have content added/removed dynamically - which means you won't be adding stuff via UiBinder templates (that doesn't even makes sense), you'd do that in the class bound to that UiBinder template. The same goes for initial content of the table - you just have to insert it programmatically.