I have created a custom css for tree and other widgets.
I have made the following entry
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />
But still only some of the styles are getting picked up and others don't. Has anyone faced a similar problem?
It will be either one of the below,
Either you have to use CSS Resource as mentioned by Andrew or you have missed Doctype declaration.
You can also visit this link: doctype explantion w.r.t to GWT
you should write the same style classnames with "com/google/gwt/user/cellview/client/CellTree.css" css file and you may change content css
pulic class MyClass extends Composite {
public interface MyResources extends CellTree.Resources {
#ImageResource.ImageOptions(flipRtl = true)
#Source("cellTreeClosedItem.gif")
ImageResource cellTreeClosedItem();
#ImageResource.ImageOptions(flipRtl = true)
#Source("cellTreeOpenItem.gif")
ImageResource cellTreeOpenItem();
#Override
#Source({"com/google/gwt/user/cellview/client/CellTree.css"})
CellTree.Style cellTreeStyle();
}
private MyResources res = GWT.create(MyResources.class);
public void onInitialize(){
cellTree = new CellTree(treeViewModel, null, res);
}
}
Related
I have two questions.
Question #1. this question (post title) comes directly from the last comment from #Cataclysm on the first answer from here:
dataGrid = new DataGrid<T>(pageSize, resource), how to set CSS
Resource for UIBinder ?
I am attempting to style a DataGrid defined in a UIBinder:
<g:south size="400">
<c:DataGrid ui:field="documentDataTable" />
</g:south>
With this ClientBundle interface code:
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
import com.google.gwt.user.cellview.client.DataGrid.Style;
/**
* Resources = "DataGrid.Resources"
* Style = "DataGrid.Style"
*
* http://federico.defaveri.org/?p=157
* https://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3
* https://stackoverflow.com/questions/7394151/datagrid-celltable-styling-frustration-overriding-row-styles/7395175#comment26605442_7395175
*/
public interface CustomDataGridResource extends Resources {
#Source({Style.DEFAULT_CSS, "css/CDD_DataGridStyle.css"})
CustomStyle dataGridStyle();
interface CustomStyle extends Style {
String dataGridHeader();
}
}
And CDD_DataGridStyle.css:
.dataGridHeader {
background-color: purple;
}
Using these references:
DataGrid / CellTable styling frustration -- overriding row styles
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/DataGrid.html
http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/DataGrid.Style.html
http://crazygui.wordpress.com/2011/11/01/how-to-skin-a-gwt-celltable/
https://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3
From what I have understood from the answer to Reference 1, this resource style sheet is not "injected" like an ordinary client bundle, but rather should be passed in as a resource to a programmatically-instantiated data grid:
"To construct your newly-styled datagrid all you need to do is:
DataGridResource resource = GWT.create(DataGridResource.class);
dataGrid = new DataGrid<T>(pageSize, resource)"
Oddly, although I have a reference to the DataGrid #UIField, there does not appear to be any method in the DataGrid.java API documentation to "set" the resource (Hence the question as a repost of the last comment on this question about a DataGrid already defined in UIBinder -- DataGrid / CellTable styling frustration -- overriding row styles).
Question #2: What is the difference between DataGrid vs. CellTable, and which is the correct implementation syntax?
Why does the Google GWT API documentation for DataGrid.java (Reference 2) only detail a CellTable instantiation programmatically? I understand that DataGrid.java extends AbstractCellTable.java but why not use any of the seven DataGrid constructors in the API Example code?
To make matters more confusing, References 4 and 5 suggest that my client bundle interface should be extending CellTable.Resources, while Reference 1 suggests extending DataGrid.Resources (see also this link: http://federico.defaveri.org/?p=157).
I tried adapting the the "After" code example from the last post (#13) from Reference 5 but the nested interfaces threw an error:
public interface NxoCellTableResources extends CellTable.Resources {
public interface NormalStyle extends CellTable.Style {}
#Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css" })
public NormalStyle cellTableStyle();
}
public interface NxoCellTableThinResources extends CellTable.Resources {
public interface ThinStyle extends CellTable.Style {}
#Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css", "NxoCellTableThin.css" })
public ThinStyle cellTableStyle();
}
In summary, I am looking for the simplest way to style all elements in a DataGrid defined in a UIBinder with a clear explanation of which Resource syntax to use (DataGrid vs. CellTable). I am open to removing the reference from UIBinder and inserting programmatically into the view if necessary, thanks in advance!
Question 1:
Everything you said, is correct.
Make sure you pass provided=true to your DataGrid's UiField:
#UiField(provided = true)
DataGrid<MyDTO> dataGrid;
Then in the constructor you would create the DataGrid like this:
public MyView() {
CustomDataGridResource resource = GWT.create(CustomDataGridResource.class);
resource.dataGridStyle().ensureInjected();
dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
binder.createAndBindUi(this);
}
Make sure you call ensureInjected() on the style.
Also if you have an Inject on your constructor.
You can pass the CustomDataGridresource and GWT.create() will be automatically called:
#Inject
public MyView(CustomDataGridResource resource) {
resource.dataGridStyle().ensureInjected();
dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
binder.createAndBindUi(this);
}
Question 2:
Regarding the difference between CellTable and DataGrid refer to this thread:
https://groups.google.com/forum/#!topic/google-web-toolkit/PBhu6RtP4G8
Basically if you use LayoutPanels DataGrid is a good fit as it contains fixed headers and a scrollable content area. CellTable will also work with FlowPanel and normal Panels.
GWT has this documented here.
A good example can be found here.
In my GWT application I have two CellLists. Each with a different style, like below:
public interface MyResources extends Resources
{
/**
* The styles used in this widget.
*/
#Override
#Source( "com/example/CellList.css" )
Style cellListStyle();
}
MyResources CELLLIST_RESOURCES = GWT.create( MyResources.class );
......
mylist=new CellList<MyProxy>( myCell, CELLLIST_RESOURCES );
Both CellLists have different css files. But when loaded I found, the style of both lists was same. This is strange, any ideas?
Just found this issue 6144, the solution is simple, just use different interface name each, i.e.
interface TableResources extends CellTable.Resources
{
#Source({"myCellTable.css"})
TableStyle cellTableStyle();
}
I have a CellList that I want to style. I want to change the cursor style, the ugly color of a selected cell . I checked several questions and discussions on stack overflow,but none of them worked.
I checked these one:
CellList GWT CSS Style
How do I style a gwt 2.1 CellTables headers?
Her is my code:
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {
}
#Source({CellList.Style.DEFAULT_CSS, "CellTableStyle.css"})
CellListStyle style();
}
public SearchViewImpl() {
CompanyCell companyCell = new CompanyCell();
//it doesn't work :S
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
rootElement = ourUiBinder.createAndBindUi(this);
loadingImage.setVisible(false);
}
Am I missing something? I Cleared Browser cache, Restarted server, F5 F5 F5 .... F5 (pressed refresh again and again) and nothing ...!
Thanks for help in advance.
Besides injecting the CSS it's important that you call the CellListStyle style cellListStyle() and not just style():
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {}
#Override
#Source("cellListStyle.css")
CellListStyle cellListStyle();
}
and then you do
CellListResource.INSTANCE.cellListStyle().ensureInjected();
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
Make sure you inject the css resource.
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
You can follow the following link
How do you change the mouse over highlighting?
I'd like to use the following in UIBinder, so that I can programmatically set the href of the link in my code.
<g:HTMLPanel>
<g:Anchor ui:field="link">
<g:InlineLabel ui:field="firstName"/>
<g:InlineLabel ui:field="lastName"/>
</g:Anchor>
</g:HTMLPanel>
When I try this I get:
ERROR: Found widget in an HTML context Element <g:InlineLabel ui:field='firstName'> (:7).
How can I embed widgets inside an anchor? Previously I've resorted to using:
<a id="myAnchor">
etc...
</a>
And then manipulating the DOM in my code to set the HREF, but that's ugly. Is there a better way?
The class below acts exactly like a SimplePanel (i.e., you can put an widget in it), but uses an "a" instead of a "div". If you need more widgets just put another panel in it.
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.SimplePanel;
public class Link extends SimplePanel {
public Link() {
super(DOM.createAnchor());
}
private void setHref(String href) {
getElement().setAttribute("href", href);
}
private String getHref() {
return getElement().getAttribute("href");
}
public void setTarget(String frameName) {
getElement().setAttribute("target", frameName);
}
}
It is better to use a Panel (Flow or Horizontal) and add click handlers to the panel to simulate a link. Anchor, Button and similar widgets will not allow child tags inside them.
I would like to implement menus (MenuBar, MenuItem) using the declarative approach via UiBinder in GWT 2.0.
I have run into two problems:
Is there a way to add MenuItemSeparators in the .ui.xml file? So
far, I have only managed to put MenuBar- and MenuItem-tags into the
file.
Using #UiHandler, GWT writes the boilerplate code for event
handlers for me. For menus, I need to write commands. How am I
supposed to do this using the UiBinder approach? Is there a command
tag to put in the .ui.xml file? Do I have to write the boilerplate
code for the command handlers myself?
Thanks for thinking about these questions!
I agree, if you try to put a MenuItemSeparator in, it will complain stating only a MenuItem can be a child when GWT tries to create the widget . Since this is not currently supported, I suggest that you request this as a future enhancement to the GWT team.
In the meantime, you can add a separator programmatically and add a command in the following manner:
The XML file:
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<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>
</g:HTMLPanel>
The Java file(s):
public class Menu extends Composite {
...
#UiField MenuBar menuBar;
#UiField MenuItem helpMenuItem;
...
public Menu() {
initWidget(uiBinder.createAndBindUi(this));
// insert a separator
menuBar.insertSeparator(1);
// attach commands to a menu item
helpMenuItem.setCommand(new MenuCommand(HistoryToken.Help));
...
}
public class MenuCommand implements Command {
final HistoryToken historyToken;
public MenuCommand(HistoryToken historyToken) {
this.historyToken = historyToken;
}
#Override
public void execute() {
historyToken.fire();
}
}
public enum HistoryToken {
Help,About,SiteMap;
public void fire(){
History.newItem(this.toString());
}
}
Elsewhere in my code, I implemented a HistoryListener to catch any changes, i.e.
class HistoryManager implements ValueChangeHandler<String> {
// 1. get token
// 2. change it into a HistoryToken
// 3. perform switch statement
// 4. change contents based upon HistoryToken found
...
}
For (1) JavaDoc says:
Use in UiBinder Templates
MenuBar elements in UiBinder template files can have a vertical boolean attribute (which defaults to false), and may have only MenuItem elements as children. MenuItems may contain HTML and MenuBars.
For example:
<g:MenuBar>
<g:MenuItem>Higgledy
<g:MenuBar vertical="true">
<g:MenuItem>able</g:MenuItem>
<g:MenuItem>baker</g:MenuItem>
<g:MenuItem>charlie</g:MenuItem>
</g:MenuBar>
</g:MenuItem>
<g:MenuItem>Piggledy
<g:MenuBar vertical="true">
<g:MenuItem>foo</g:MenuItem>
<g:MenuItem>bar</g:MenuItem>
<g:MenuItem>baz</g:MenuItem>
</g:MenuBar>
</g:MenuItem>
<g:MenuItem><b>Pop!</b>
<g:MenuBar vertical="true">
<g:MenuItem>uno</g:MenuItem>
<g:MenuItem>dos</g:MenuItem>
<g:MenuItem>tres</g:MenuItem>
</g:MenuBar>
</g:MenuItem>
</g:MenuBar>
Taking the hint from the words "only MenuItem elements as children", my guess is that MenuItemSeparators are not supported
Here's an example of my solution to this, which seems to work pretty well with GWT 2.4.0.
UiBinder:
<g:MenuBar vertical='true' ui:field='mainMenu'>
<g:MenuItem ui:field='item1'>Item 1</g:MenuItem>
<g:MenuItem ui:field='item2'>Item 2</g:MenuItem>
<g:MenuItemSeparator />
<g:MenuItem ui:field='sub' enabled='false'>
Submenu
<g:MenuBar vertical='true' ui:field='subMenu' />
</g:MenuItem>
</g:MenuBar>
Java:
#UiField MenuItem item1;
#UiField MenuItem item2;
#UiField MenuBar subMenu;
#UiField MenuItem sub;
...
this.setWidget(uiBinder.createAndBindUi(this));
item1.setCommand(new Command() {
public void execute() {
History.newItem("item1");
}
});
Overall not too bad.
I know this question is OLD, but I keep running across this question in my google searches, so i thought it would be important to note that although i haven't seen it documented anywhere yet, i have been using:
<g:MenuItemSeparator/>
successfully in my uibinder template. The gwt eclipse plugin gives me a red error marker, but the MenuItemSeparator compiles and shows up ok. I'm using gwt 2.1.
Just thought someone might be interested to know.
Unfortunately I haven't seen a solution for #2 yet - but I hope they give us something soon.
It is possible to add a menuItemSeparator in the ui.xml file. Here is an example with separator and submenu from the official GWT-API page.
Well, i think i found a way to implement this. (This is a solution if you want to declare the separator inside the *.ui.xml file. )
HocusView.java
...
#UiField MenuBar menuBar;
#UiField MenuItem item1;
#UiField MenuItem item2;
#UiField MenuItem item3;
#UiField MenuItem item4;
...
private static HocusViewUiBinder uiBinder = GWT.create(HocusViewUiBinder.class);
#UiTemplate("Hocus.ui.xml")
interface HocusViewUiBinder extends UiBinder<Widget, HocusView>{}
public HocusView()
{
initWidget(uiBinder.createAndBindUi(this));
// Attach commands to menu items
menuItem1.setScheduledCommand(cmd_menuItem1);
menuItem2.setScheduledCommand(cmd_menuItem2);
menuItem3.setScheduledCommand(cmd_menuItem3);
menuItem4.setScheduledCommand(cmd_menuItem4);
}
Command cmd_menuItem1= new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
Command cmd_menuItem2 = new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
Command cmd_menuItem3 = new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
Command cmd_menuItem4 = new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
});
HocusView.ui.xml
<gwt:MenuBar ui:field="menuBar" >
<gwt:MenuItem ui:field="menuItem1">Search</gwt:MenuItem>
<gwt:MenuItemSeparator></gwt:MenuItemSeparator>
<gwt:MenuItem ui:field="menuItem2">Ingestion</gwt:MenuItem>
<gwt:MenuItemSeparator></gwt:MenuItemSeparator>
<gwt:MenuItem ui:field="menuItem3">Analysis</gwt:MenuItem>
<gwt:MenuItemSeparator></gwt:MenuItemSeparator>
<gwt:MenuItem ui:field="menuItem4">About</gwt:MenuItem>
</gwt:MenuBar>
Its as simple as that.This will add a separator between the menu items.
Cheers!