I am new in GWT. I want to ask some questions about UI binder:
<ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
(1) Refer to code above. What is the meaning of type? Is meant the file location?
(2) Why need to use external resource for the UI binder?
(3) When I write css, in java file should I need to write the "extends CssResource" word?
I really don't understand. Please help me to answer the question. Thanks.
<ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
Refer to code above. What is the meaning of type? Is meant the file location?
Here type is equivalent to below java code
Resources res = new com.my.app.widgets.logoname.Resources();
Why need to use external resource for the UI binder?
Sometimes your template will need to work with styles or other objects that come from outside of your template.
When I write css, in java file should I need to write the "extends CssResource" word?
Yes you have to use extends CssResource
For detailed explaination and samples please have a look at GWT UIBinder - Using an external resource.
Find a sample code here about GWT - Using UiBinder.
Here is the key points of using UIBinder:
The UiBinder is a framework designed to separate Functionality and View of User Interface.
The UiBinder framework allows developers to build gwt applications as HTML pages with GWT widgets configured throughout them.
The UiBinder framework makes easier collaboration with UI designers who are more comfortable with XML, HTML and CSS than Java source code
The UIBinder provides a declarative way of defining User Interface.
The UIBinder seperates the programmic logic from UI.
The UIBinder is similar to what JSP is to Servlets.
Related
I am developing a web app with GWT. I'd strongly prefer to code everything in Java instead of hardcoding anything in HTML and CSS. I'm also using GQuery (or GWTQuery) and I'm wondering if using compile time selectors with GWTQuery completely eliminate the need to hardcode any HTML or CSS at all - and have the speed and performance of a fully hardcoded app?
Let me explain with few words what gwt and gquery are.
1- GWT is just a compiler which gives you the tools to produce optimized javascript from java.
2- The js produced with GWT is mainly used to modify the DOM (apart from calculations, business code, ajax etc).
3- GWT additionally gives you a set of widgets, as an abstraction of the DOM, so as you can work with panels, buttons, trees, etc. instead of raw HTML. I think this is what you call hardcoded html.
4- But GQuery is a complement to GWT. It gives you a set of utilities taken from jQuery and ported to java to write less code, it is mainly oriented to manipulate the DOM (select nodes, modify, animate, etc) apart from other cool features like an easier ajax syntax, safe typing, promises, json/xml data-binding, etc.
Said that, don't think that the gwt widget abstraction will make you completely forget about dom and css. Sooner that later you will need to create your own widgets, or customize the current ones.
I think that the only way to forgot almost the DOM is to use a 3rd party widget library like gxt, mosaic, smart-gwt, etc. Because the GWT widgets are tough, they are designed to give the designer the option of easy stylizing them with css.
In the other hand, gwtquery will not help you to forget the DOM at all. It is designed to enhance static DOM elements which are in the page, enhance the DOM of gwt widgets, or create your own DOM structure based on html.
About gQuery compiled selectors, they are used in the same way dynamic selectors are: to select DOM elements, but with a much better performance because the compiler optimizes them. I think you misunderstood their objective, they don't give you any way to eliminate hardcode HTML.
UPDATE: To answer your last comment, it is NOT possible to generate static HTML or CSS with
GWT or GQUERY. They always produce static JAVASCRIPT code written to .js files (or written into javascript tags in .html files depending on the linker)
I have GWT Web application and web template that consists of html+css+javascript files.
UiBinder holds html template in HTMLPanel. Problem is that this template is based on many javascript files and I know that GWT have problems with that. So my page is rendered without some javascript features.
What can I do with this? What is correct solution for GWT and external web templates?
The issue is not GWT-specific: you cannot inject <script>s using innerHTML (which HTMLPanel ultimately uses).
If you need to dynamically inject scripts in your app, then use ScriptInjector.
Are there any best practices for using Google Web Fonts in a Google Web Toolkit application? My initial inclination is to simply add the css reference directly in my .html file, a la
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:light,regular,bold' rel='stylesheet' type='text/css'>
But I'm not sure if this is the best way to do it. Is there any advantage to (or any way to) use ClientBundle here?
Google discourages the direct inclusion of css files on host pages for a mere fact that in this case GWT code has an external (detached) dependence. This only matters if you share a GWT module with other developers - note that this might happen in the future when your project gets refactored by some other people that took over the development. So it's still a good practice to make GWT modules with type-safe external dependencies.
As you know you can simply use one of the recommended ways:
Using a CssResource contained within a ClientBundle.
Using an inline <ui:style src="http://fonts.googleapis.com/css?family=Josefin"> element in a UiBinder template.
I have been using UIBinder on SmartGWT widgets rather successfully.
However, I have to extend each SmartGWT widget that I use to comply with UIBinder's requirement. Occasionally, I have to masquerade a SmartGWT widget into com.google.gwt namespace, or masquerade a non-GWT-widget as a GWT widget. I extend widgets on as-needed basis.
So, I am starting to wonder, may be SmartGWT already has a UI XML format and I might be doing all this UIBinder acclimatization just to reinvent SmartGWT's wheel.
I have read and reread source codes of the showcase and delved into some of the SmartGWT source code, as well as reading the javadocs.
All I found is XML or Json for communication between server and client.
Is there any UI def XML available for SmartGWT whether gwt-compiled to client-side javascript or like Vaadin's server-side generated UIDL?
And if you happen to be an Isomorphic agent, could you tell us if there are any plans to let SmartGWT play with UIBinder (to preclude me from having to massage SmartGWT widgets on my own anymore)?
Yes, there is a SmartGWT XML component definition - the one used by Visual Builder and Reify, and which you can also write directly. See these docs and this FAQ item:
http://www.smartclient.com/smartgwtee-latest/javadoc/com/smartgwt/client/docs/ComponentXML.html
http://forums.smartclient.com/showthread.php?t=8159#loadVBScreen
As the FAQ clarifies, we recommend using this XML format for a set of use cases that heavily overlaps with what UIBinder is for, that is, keeping your layout and basic component definitions in a declarative format that designers can edit and which can be edited by visual tools, and having your actual Java event handling and other programmatic code separate.
However we strongly recommend against having that declarative format be HTML (as UIBinder does it) because that introduces lots and lots of cross-browser layout issues.
We are likely to eventually support UIBinder as well for the few use cases where it is not redundant with our own XML format. If you need that to happen sooner, consider Feature Sponsorship:
http://www.smartclient.com/services/index.jsp#features
For XML smartclient has the componentxml which is XML based ui design and use JavaScript to have client side logics. You need not compile your app every time in development environment and just reloading of the browser will have the change included and you can test it.
I have an AWT applet application that needs to be ported over to GWT. The applet screens are described in meta data and the applet renders each screen dynamically using reflection.
We'd like the same thing in GWT/ExtGWT.
I've built a working version of this ExtJS whereby the metadata is turned into ExtJS Screen configs in the form of JSON. The drawback with this approach is the "wiring" of controls to data needs to be written in Javascript.
GWT is preferred since it'd be all Java code, no JS. Upon digging in it's possible to render the screens using GWT off the metadata using GWT.create().
The problem I'm having is the wiring to hook a dynamically created button for example to an event handler requires reflection which is not supported in GWT.
Is this conclusion correct? and if so, are there any other ways to achieve this type of dynamic UI using ExtGWT?
For extGWT where we don't have declarative UI's the easiest solution might be to just add a mapping/config your handlers in java which refer to instantiated classes. of the handlers, i.e.:
Map<String, ActionListener> mapping = new HashMap<String, ActionListener>();
mapping.put("HandleClicked", new HandleClickedActionListener());
then you can try to find an implementing class for your meta data.
For pure GWT 2 you can take a look at http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideUiBinder.html#Simple_binding on how it's done there. it might be possible to create a similiar solution which annotated methods for you own extgwt solution like the one in gwt.