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
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'm using GWT 2.5 and am looking for a Tree widget which will allow me to have a multi-selection model controlled by checkboxes adjacent to each TreeNode. Something similar to the JQuery plugin described here with the following results:
As you might expect, I'd hope that checking a box would select all children of the checked node, and if any children are unchecked, you'd get the "half-checked" icon (shown by the "Solutions" node) -- so I'll need a three-state checkbox.
Does this widget exist in GWT already, or would I need to code it myself?
There is no default widget in GWT 2.5 that supports this.
Your options:
Use third-party library
Implement you own widget
I used to implement my own based on CellTree and although it's feasible - it requires lots of work (custom tree model, cell widgets with renderers and value updater-s). If you flexible on choosing libraries - have a look at Smart GWT's checkbox tree.
I suppose this could be a general javascript question, but I have a widget that, by default, has a label. I need a way to have a label-less widget. I currently have a special constructor with a boolean indicating whether or not to show this label.
Instead, if I were to add a method to show/hide this label, would it be better use visibility in CSS, or add/remove the label from its parent?
CSS visibility.
However, if you are using GWT and its other cohorts (smartgwt, gxt), setVisible(boolean), show(), hide() is already crafted into their visual components.
When introducing new visual components, you should simply extend the Widget class or any of its subclasses, in order to make full use of GWT features for your new component. The heavy weight of a GWT class Java features is already segregated by the GWT compiler as fixed costs in javascript code - so you might as well extend the Widget class.
And why would you not use the already existent Label class found in GWT (or smartgwt or gxt) and then use the setVisible (or show() hide()) property methods?
I have a gwt application which I need to apply custom themes for specific widgets, so I can maintain the Standard gwt CSS (for other widgets that I don't need to apply css to) in the gwt.xml file :
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
I am using ClientBundle and CssResource approach in my app. I have applied simple css however I need to make a css that will be able to apply css for: selected and not selected, hover and push events/actions on a widget, just like what the standard gwt css provides.
What to write in the my css file so that for a MenuBar when I apply this:
ManuBar menuBar = new MenuBar(false);
menuBar.setStyleName(AppResources.INSTANCE.css().menuBar())
I will get the same MenuBar effects of a standard MenuBar css of gwt? With the App.css I have below, I just get a black menubar and the font-color of the menubar does not change, I think there is a proper way to apply css with gwt widgets, however I cannot find a good resource about this on the web. What I am trying to accomplish is to be able to change the menubar color theme to say, black, chrome or whatever color but still make the widget look like a real menubar.
App.css:
.menuBar {
background:#3c3b37;
font-weight:bold;
color:#FFFFFF;
font-size:10px;
}
I have a feeling you might be experiencing the problem lots of us face when we forget to call ensureInjected on the CssResource. The CSS never gets added to the page, and so it looks like it's not working.
AppResources.INSTANCE.css().ensureInjected();
why not try simply with menuBar.setStyleName("menuBar"); I'm sure this will work.
I am currently using the ui-lightness theme in my Zend Framework application but I would like to use both for different things. I'm currently registering the ui-lightness theme with this line in my bootstrap:
$view->headLink()->appendStylesheet($view->baseUrl().'/js/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css');
How can I add another theme to use? How will the application know which theme to use if I add another stylesheet?
You can do this using CSS scope. When you build your theme on the jQuery UI site choose Advanced Settings and then enter in name in the scope field.
Do the same with whatever other themes you want to use, making sure that the scope is unique for each one.
Include the CSS theme files as normal (using appendStylesheet) and use the scope classes to style each area/item on the page
A styled example is given here
I don't think you can use two themes on the same page out of the box with jQuery UI. Each jQuery UI theme styles all widgets, not just specific ones.
You could, create your own stylesheets to style widgets individually. Or, if you don't want different themes on a single page, just include the different themes on different pages.
If you want different jQuery UI themes on different pages of your application, you can use Zend_Layout to switch layouts on different pages of your application. Each layout can use a different jQuery UI theme.