I am attempting to have multiple data grids in a single project. They have some different behavior and therefore different styling. The first grid is a fully custom grid, building the rows with an AbstractCellTableBuilder with a fully custom CSS file (using the DataGrid.Resources override).
The issue I am having is that my second grid's custom CSS is being applied to my first grid. I don't see any coding overlap. It just seems like the CSS classes are being anonymized the same, so they show up on the elements both grids.
Any thoughts?
Please let me know if there is anything I can provide to clarify the situation.
UPDATE:
ReportSelectorGrid.css has every class required by the DataGrid.Style defined. All of them are empty.
private SelectorDataGridResources gridResource = GWT.create(SelectorDataGridResources.class);
public interface SelectorDataGridResources extends DataGrid.Resources {
#Source({ "ReportSelectorGrid.css" })
DataGrid.Style dataGridStyle();
};
And then this is in my UiFactory method:
DataGrid<ReportSelectorItem> grid = new DataGrid<ReportSelectorItem>(-1, gridResource, KEY_PROVIDER);
You have to declare a DataGrid.Style sub-interface or they'll all share the same obfuscated class names. See also: https://code.google.com/p/google-web-toolkit/issues/detail?id=6144
Related
I have a ClientBundle in which I am referencing a bunch of icons as ImageResource's
public interface DefaultCMSResources extends ClientBundle {
String baseImgLoc = "com/jorsek/ui/client/style/images/base/";
String baseIconLoc = "com/jorsek/ui/client/style/images/icons/";
String fugeIconsLoc = baseIconLoc+"fugue/";
/* Icons */
#Source(fugeIconsLoc+"book-open.png")
ImageResource getBookIcon();
}
For a number of reasons I really don't like having to reference the static file location via the #Source annotation.
I really would like to create a custom annotation like #FugueIcon, which would generate the static path dynamically somewhere. IE:
public interface DefaultCMSResources extends ClientBundle {
/* Icons */
#FugueIcon("book-open")
ImageResource getBookIcon();
}
I was looking through the code for the #Source annotation and nothing popped out at me. I was hoping someone could provide the steps I might take to accomplish this.
Thanks!
The problem with this is that if the file is selected dynamically, the compiler won't know ahead of time what the image will be - it won't know the size, so it can't write proper css for it (if using #sprite in your CssResource) or provide results for the various ImageResource methods. The #Source annotation means that the compiler can know all it needs to about the image before the app has turned into JS, so it can write in that JS details about the image it will have.
Instead, you might want to look at a way to implement that ImageResource method directly - one option would be to instantiate a com.google.gwt.resources.client.impl.ImageResourcePrototype instance, which implements that interface, and lets you specify details about the image that are needed - a name (mostly optional) the url it can be found at, and the position in that url (if you are spriting) as well as the size to use.
I'm using FPDI & FPDF to overlay new text on top of an existing PDF. It uses the useTemplate() method to achieve this.
Problem I'm having - it only applies the template to the first page. If the text is long, it will wrap to a second page, using the SetAutoPageBreak() method. How can I make it apply the template on every page?
I've cracked it. Looking into the code, I realised that even the SetAutoPageBreak() routine calls AddPage() internally, giving me the hook I needed to include my template on every page.
So, I extended the base FPDI class and over-rode the AddPage() method, including the useTemplate() stuff.
class BBPDF extends FPDI {
function AddPage($orientation='', $size='') {
parent::AddPage($orientation,$size);
$this->setSourceFile('templates/discover-community.pdf');
$template = $this->ImportPage(1);
$this->useTemplate($template);
}
}
I have a form where I need to add/remove validators dynamically. Based on a dropdown selection, other form fields may have different validation rules.
For other kinds of inputs, I've used replace(methodThatCreatesTheInput()) to get rid of a previously added validator. (Not knowing of a better way. Specifically, there doesn't seem to be any way to directly remove a validator from a component...)
With Select, from wicket-extensions, this approach fails with something like:
WicketMessage: submitted http post value [[Ljava.lang.String;#5b4bf56d]
for SelectOption component [8:myForm:targetInput] contains an
illegal relative path element [targetConsortiums:1:option] which does not
point to an SelectOption component. Due to this the Select component cannot
resolve the selected SelectOption component pointed to by the illegal value.
A possible reason is that component hierarchy changed between rendering and
form submission.
The method that creates the Select:
private FormComponent<?> targetSelection() {
Map<Class<? extends Target>, List<Target>> targets = targetService.getAllAsMap();
SelectOptions<Target> propertyOptions = new SelectOptions<Target>("targetConsortiums",
targets.get(Consortium.class), new TargetRenderer());
SelectOptions<Target> consortiumOptions = new SelectOptions<Target>("targetProperties",
targets.get(Property.class), new TargetRenderer());
Select select = new Select(ID_TARGET, new PropertyModel<Target>(model, "target"));
select.add(propertyOptions);
select.add(consortiumOptions);
select.setRequired(true);
select.setMarkupId(ID_TARGET);
return select;
}
(Why use a Select instead of normal DropDownChoice? We want the two types of choices to be clearly separated, as documented in this question.)
Any ideas how to solve this? What I'm trying to achieve is, of course, very simple. Unfortunately Wicket disagrees, or I'm using it wrong.
Wicket 1.4.
I don't know how to do this on Wicket 1.4, but on Wicket 1.5 there is a remove method for validators on FormComponent (see javadoc)
How can I create a widget from the Javascript. For example I need to create a simple button or table . I have some thirdaparty
javascripts which draw tables. Now if I want to create GWT widget by using those javascript what should I do first?
How other frameworks like GWTExt,SmartGWT, are using custom Widgets? Are they starting from the scratch or They reuse the
GWT widget functionality? Like if I want to create one table in my own style, do I need to inherit GWT Table?can anybody
give one example or sample code how to create a widget from the javascript? If my questions are wrong please excuse me.
example:
Mytable table = new Mytable(2,3). then it should draw my own table with 2 columns and 3 rows
You are asking a lot of questions here. In your case you should create as much questions in so as you have qustion marks in your original post.
Regarding your first question, look at JSNI.
Edit: So okrasz gave you a number of references to look at. From my side I’ll try to help with your example using JSNI (because you were asking about binding your existing js to GWT).
Let's say you have your MyTable defined as
<script type="text/javascript">
MyTable = function(a,b){
this.a = a;
this.b = b;
};
</script>
and your js file is called mytable.js
Now, we need this to be a component. In your .java file in GWT library project create a class like this:
public class MyTable extends JavaScriptObject {
protected MyTable(){}
public static native MyTable create(double a, double b) /*-{
return new MyTable(a,b);
}-*/;
public final native double getA() /*-{
return this.a;
}-*/;
public final native double getB() /*-{
return this.b;
}-*/;
}
Add your original js file to the resources and add a script node to your gwt.xml module like this:
<module>
<inherits name="com.google.gwt.core.Core"/>
<script src="path/to/mytable.js"/>
<source path="client"/>
<public path="public"/>
</module>
That's pretty much it. I might forgot something but you can reference any oss project that does the same thing you need. For instance, take a look at swfupload-gwt project source code.
Here is the documentation how to create custom widgets. Unfortunately they mostly talk about creating composite widgets out of existing ones. But for creating ones from scratch they suggest either writing in Java as their Button is created - here is Button source code for reference. For widgets in JS they suggest source code for TextBox.
Here is also one more article about creating widgets: http://davidmaddison.blogspot.com/2009/01/creating-gwt-component.html
I see nothing in the documentation except a reference to include some "CssResource" and get it with ClientBundle, but how do I exactly override the tbody and th of a CellTable?
Is this possible?
Create an interface:
interface TableResources extends CellTable.Resources {
#Source({CellTable.Style.DEFAULT_CSS, "<your css file>.css"})
TableStyle cellTableStyle();
}
interface TableStyle extends CellTable.Style {
}
and initialize the cell table:
CellTable.Resources resources = GWT.create(TableResources.class);
table = new CellTable<SomeProxy>(rowSize, resources);
In the cellview.client package you can find the default gwt css files. Yo use those as your starting point. In the "<your css file>.css" put you specific style changes.
You can also set colum style (on the col element):
table.addColumnStyleName(colNumer, "some_css_style_name");
or better use css resource name instead of string "some_css_style_name".
Just for the fun of it I might add something I just had a headache with... if you change cellTableStyle(); with something else it breaks... no warning or error, the CSS just does not appear as I thought it would. Dont know where this is documented, but I found it out after alot of fiddeling trying to find out why some CSS was correct and some not..
For some reason my cellTable.addColumnStyleName(colNumber, "cssStyle") just won't work. According to FireBug it doesn't add the style no matter what (if the style was incorrect, it at least could have added it to the classes attribute of the th-element...). Maybe it's because I am redrawing the columns, but it'S weird nevertheless.
I've used the solution above, however, if you have another table with default styling, it ends up making with your custom table. Are you required to override all your tables with custom styling, or is there some workaround?
Also, I find the CellTable constructors less than optimal... I have to specify pageSize to specify the style resource CellTable(pageSize, resources)... I've been putting Integer.MAX_VALUE for pageSize, not sure if that should be -1 or something else as there's no javadoc on that value.