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.
Related
Using the infos in this link:
https://docs.typo3.org/typo3cms/ExtbaseFluidBook/8-Fluid/9-using-php-based-views.html
I try to create an action to output a JSON.
I have a normal controller with the list action:
public function listAction()
{
$storelocators = $this->storelocatorRepository->findAll();
$this->view->assign('storelocators', $storelocators);
}
And in ext/my_storelocator/Classes/View/Storelocator I have a class List.php:
<?
class Tx_MyStorelocator_View_Storelocator_List extends Tx_Extbase_MVC_View_AbstractView {
public function render() {
return 'Hello World';
}
}
All I get is:
Sorry, the requested view was not found.
The technical reason is: No template was found. View could not be resolved for action "list" in class "My\MyStorelocator\Controller\StorelocatorController".
So I guess there is something wrong with the paths. Or where is the Problem?
Edit: Extensioninfos
Vendor: My
key: my_storelocator
controller: NOT SURE (I created it with the extension_builder so I guess my controllers name is Storelocator)
action: list
From my understanding a classname like Tx_MyStorelocator_View_Storelocator_List should be correct. But its not working
You will need to create an empty file for the HTML view for your controller, e.g. Resources/Private/Template/Storelocator/List.html, even if you do not plan to use the HTML view or if you just return the content yourself (which is perfectly fine).
The reason for this is simply technical limitation.
First of all, TYPO3 now has a built-in JSON view, described thoroughly here: https://usetypo3.com/json-view.html. It lets you easily define which properties you'd like to render.
The error message means that your Controller is still pointing to the TemplateView - because thats the error the TemplateView throws if it can't find the defined template file.
You can specify which view to use to render within your controller. You can either set a default view via the $defaultViewObjectName property, like so:
/**
* #var string
*/
protected $defaultViewObjectName = '\TYPO3\CMS\Fluid\View\TemplateView';
You can also set it from within the Controller inside initialization actions like so:
public function initializeExportPDFAction(){
$this->defaultViewObjectName = 'Vendor\Extension\View\FileTransferView';
}
(I have, however, not yet found a way to define the template from within actions, any tips in the comments would be appreciated)
Your path syntax is probably out of date. Instead of writing a render() function in Classes/View/Storelocator/List.php, try writing a listAction() function in a Classes/Controller/StorelocatorController.php file. Extension Builder should have created this file for you, if you made an aggregate model with the usual "list, create, edit ..." and such actions.
Review A journey through the Blog Example and the following chapter, Creating a first extension, for tips.
Keep in mind that there is a mismatch between the documentation and the Extension Builder generated PHP code files. Developing TYPO3 Extensions with Extbase and Fluid has some parts up to date, and other parts still using old syntax.
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
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.
When using a <g:LayoutPanel> in UiBinder.ui.xml files, you can specify <g:layer> tags. Some other Google-built widgets have special tags like that as well - <g:tab> even has a sub-tag, <g:header>.
How can I specify these for my own widgets?
The new answer to this question, after some GWT improvements, is at https://stackoverflow.com/a/11785903/439317 . Copied below to avoid moderator deletion (maybe?).
You can use #UiChild to declare special functions in your widgets accessible in UiBinders.
for example,
class MyPanel extends AbsolutePanel {
#UiChild
public void addAt(Widget w, String parameter1, String parameter2) {
....
Then, in your uiBinder, you can say
<custom:MyPanel>
<custom:at parameter1="HI" parameter2="Anything you like!">
<g:AnySingleWidget />
</custom:at>
</custom:MyPanel>
See #UiChild at http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/uibinder/client/UiChild.html
What you're looking for is a custom element parser for UiBinder. See this issue. Unfortunately it's not supported yet.
You might be interested in this post for some guidance on how to extend the current parser on your own.