I am implementing multiple themes in our GWT applications.
The problem is when a DataGrid is constructed, I can't find a way to change the style resource that has been passed to it. Does anybody know how to solve the problem. Or on every theme change, do we have to reconstruct the grid?
Any other new idea to solve the problem (having multiple themes on these widgets) is appreciated.
Thanks.
You could use uibinder.
At this page
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Programmatic_access,
search for the section
Programmatic access to inline Styles
However, you need to be familiar with uibinder.
I was able to do this using -
cellTable.setRowStyles(new RowStyles>() {
#Override
public String getStyleNames(Map<String, String> row, int rowIndex) {
if (rowIndex % 2 == 0) {
return "cellTableEvenRow";
} else {
return "cellTableOddRow";
}
}
});
Since, I had to provide the user 3 color themes, I used 3 style sheets for each color and specified the below style with different colors in each style sheet.
.cellTableEvenRow {
background: #fffff !important;
}
.cellTableOddRow {
background: #E9FDE4 !important;
}
Hope it helps!
Related
I am trying to user Custom Drag appearance in smart gwt. how can i implement it.
Current when using DragAppearance.TRACKER its show on 10px square i want a lable with caption Drag to Lineup.
vLayout1.setDragAppearance(DragAppearance.TRACKER);
vLayout1.setCanHover(true);
vLayout1.setCursor(Cursor.HAND);
I hope, the following links will help you
https://github.com/moravianlibrary/MEditor/blob/master/editor-editation/src/main/java/cz/mzk/editor/client/view/ModifyView.java#L1100:L1104
https://github.com/moravianlibrary/MEditor/blob/master/editor-common/editor-common-client/src/main/java/cz/mzk/editor/client/view/other/EditorDragMoveHandler.java
Override BaseWidget.setDragTracker and provide required content using EventHandler.setDragTracker.
VLayout vLayout1 = new VLayout() {
#Override
protected boolean setDragTracker() {
EventHandler.setDragTracker("<pre>Drag to Lineup</pre>");
return false;
}
};
vLayout1.setCanDrop(true);
vLayout1.setCanDrag(true);
vLayout1.setDragAppearance(DragAppearance.TRACKER);
EventHandler.setDragTracker accepts any valid html code and <pre/> tags were used above to avoid word wrap.
Check following sample in SmartGWT showcase:
http://www.smartclient.com/smartgwt/showcase/#effects_dd_tracker
I want to change background color of a cell in GXT Grid, I am using GXT 3.0 .I have got one link which is related to my query( http://ui-programming.blogspot.in/2010/01/gxt-how-to-set-cell-grid-background.html) but setRenderer method is not present columnConfig in GXT 3.0 .How can i get desired output? pLz help.
Code i have done till now:-
ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
changeCol.setCell(new AbstractCell<Double>() {
#Override
public void render(Context context, Double value, SafeHtmlBuilder sb) {
if (value == null) {
return;
}
store.get(context.getIndex());
GWT.log(DOM.getCaptureElement().getId());
String style = "style='background-color: " + (value < 0 ? "red" : "green") + "'";
String v = number.format(value);
sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
}
});
For those that need to change cell colour based on data in the grid, I've just had to do this (GXT 3.1) but unfortunately the solution isn't perfect.
In general, one can do custom cell rendering with ColumnConfig.setCell(MyCell) where 'MyCell' is a subclass of AbstractCell. Unfortunately there is the problem of 'padding' in the host 'div' which isn't coloured. There are a few ways around this...
The simplest way is to:
ColumnConfig.setCellPadding(false)
Render your own coloured divs that fill up the whole cell (with padding if desired)
Unfortunately this doesn't play well with single cell selection (CellSelectionModel). The css class for cell selection is obfuscated so it can't be referenced in other stylesheets. :(
My (ugly) alternative was to render a custom stylesheet that is linked in the module's html page (eg. Main.html). Then I can colour cells using css 'class' instead of 'style' attributes. IE:
Create a custom JSP that renders a stylesheet (content type 'text/css')
Link the stylesheet to the module html (after 'reset.css')
The stylesheet needs to have selector td.someClass (.someClass is not specific enough)
Use Grid.getView().setViewConfig() to supply a GridViewConfig that returns the appropriate class(es)
Unfortunately this requires a good knowledge of CSS rules and also the possible colours need to be known at user login time.
There may be a third way using the style attribute of the 'td' element. Have a look at this issue from Sencha:
http://www.sencha.com/forum/showthread.php?289347-Influencing-cell-td-style-in-a-grid&p=1057079 (work in progress)
Note that other styling options include:
Various ColumnConfig.setXxxClassName()
Various ColumnConfig.setXxxStyle()
i have a celltable in GWT, I can change color of a specific column by this
celltable.addColumnStyleName(4, "bluetext");
but how can i change for example color of row No 3
Thanks
You have to provide a RowStyles object that returns css class names for each row. So, to set a particular color for a row, you'd have to define a css class with that color, and then cause your RowStyles object to return that class for the relevant rows.
I think you set this with cellTable.setRowStyles or something similar.
cellTable.setRowStyles(new RowStyles<T>() {
#Override
public String getStyleNames(T rowObject, int rowIndex) {
if (rowIndex == 3) {
return "bluetext";
} else {
return "normaltext";
}
});
If you need to update row color based on a value changed in one of the cells, you can add the following code to the fieldUpdater of this cell:
#Override
public void update(int index, Object object, String value) {
if (someConditionIsMet) {
myTable.getRowElement(index).addClassName("redBackground");
}
}
In your CSS file add this style:
.redBackground {
background-color: red !important;
}
To answer the last comment that the style is in the row element but is not being rendered:
Using setRowStyles(new RowStyles() ...
The only way I got the styles to appear was to use brute force.
I had to remove the row from my List store, add it back to the same index and then refresh the RowModel.
For what it's worth.
I'm using a standard swt table which, as you may know, by default when an item is selected is colored blue (windows standard). When the selection is inactive, it turns light gray. I would like to override both colors... I've searched all over the web but could only find some very old code which no longer seems to work with the table widget.
Below is some sample code I was trying to overwrite the default color but it doesn't seem to be working (please excuse the dirty code, was just trying to get something to work):
table.addSelectionListener(new SelectionListener() {
#Override
public void widgetSelected(SelectionEvent event) {
Color rowSelectionColor =
new Color(Display.getCurrent(),new RGB(235, 200, 211));
TableItem item =(TableItem)event.item;
item.setBackground(0,rowSelectionColor);
item.setBackground(1,rowSelectionColor);
item.setBackground(2,rowSelectionColor);
}
#Override
public void widgetDefaultSelected(SelectionEvent event) {
Color rowSelectionColor =
new Color(Display.getCurrent(),new RGB(235, 200, 211));
TableItem item =(TableItem)event.item;
item.setBackground(0,rowSelectionColor);
item.setBackground(1,rowSelectionColor);
item.setBackground(2,rowSelectionColor);
}
});
Any ideas would be greaaatly massively appreciated :D
If you want to go with a TableViewer to manage your table, you can use a StyledCellLabelProvider to determine the colors/fonts/etc for individual cells. The TableViewer will take care of the "owner draw" aspects for you. The biggest hassle is setting up the ContentProvider, LabelProvider, and input classes that go with the TableViewer.
I am using a TabLayoutPanel in GWT and I want to have the last tab show up on the right side of the page. Is it possible to do this?
Common idea:
set tab container width to "auto" instead of predefined "16384px"
set "float: right" css property to last tab
move last tab to firts position
public void onModuleLoad() {
.....
// init TabLayoutPanel
.....
Widget rightTab = tabPanel.getTabWidget(0).getParent();
DOM.setStyleAttribute(rightTab.getElement(), "float", "right");
Widget tabBar = rightTab.getParent();
tabBar.setWidth("auto");
tabPanel.selectTab(1);
}
If you want to align all tabs to right try this:
.gwt-TabBar .gwt-TabBarFirst {
width: 100%;
}
.gwt-TabBar .gwt-TabBarRest {
width: 4px;
}
.gwt-TabBar .gwt-TabBarFirst-wrapper {
width: 100%;
}
Short Answer - NO.
I drilled down to the source at GWT 2.3 and AFAIK it easier to build your own composite from TabBar and StackLayoutPanel than start fighting this implementation.
Just to save you an effort it cannot be centered easily too.
I am sorry it is like this.
it all hardcoded...
private static final int BIG_ENOUGH_TO_NOT_WRAP = 16384;
private final FlowPanel tabBar = new FlowPanel();
...
tabBar.getElement().getStyle().setWidth(BIG_ENOUGH_TO_NOT_WRAP, Unit.PX);
Why not pure CSS solution ? It is good practice to separate your code from design.
.gwt-TabLayoutPanelTabs {
width: auto!important;
}
.gwt-TabLayoutPanelTab {
float: right;
}
Remember that your tabs will come in reverse order (first added will be first on the right)
It is possible and will be very easy if you create your own tab.Just create an png image of tab shape (which is having rounded corner at top).Write one css rule.Take one FlextTable and apply that css to each cell that will be your tabs and then add that FlexTable into another mainTable. So in your mainTable in first row there will be tabFlexTable and in second row whatever you want to display after selecting particular tab.So for the first row apply horizontal alignment to right. This the way and same way I am also using in my professional projects.