I want to use a link or a button like (a href="..."/>) in GWT with uiBinder.
I found the widget "hyperlink" but I don´t know how I use that.
You should use the Anchor widget.
You can use a sample ClickHandler on it to detect the click event or use the default href with the constructor :
Anchor(boolean useDefaultHref)
You can also use the setter setHref(java.lang.String href)
In UiBinder :
<g:Anchor ui:field="mylink" href="/myurl">The link test</g:Anchor>
EDIT :
To open the link in a new tab, you should use the setTarget(String target) method like the following example :
setTarget("_blank");
Unless you need to programatically do things with the anchor, you can just add the html into the uibinder code directly. In fact, UIBinder is not just a WYSIWYG, but it is a place for you to enter as much native HTML as you can. That makes for leaner and faster web apps.
Related
I want to display calculator panel by double clicking the GWT NumberCell as like DatePicker cell,
how to achieve this,
External plugins can be used to achieve complex functionality.
Please refer to the following link : jQuery Calculator
Use JSNI Functions to interact with plain java script / jQuery. Follow the link to have better insight about JSNI : Writing JSNI methods in GWT
what should be used in Smart Gwt in Place of Root Panel in Gwt?
There's no need to use GWT's RootPanel.
To add / render widgets to the document, simply call BaseWidget#draw(). See how it's done on the SmartGWT's showcase.
Reference
draw() on the SmartGWT API docs
In some cases, you will need to still use RootPanel to draw your objects. This is the case for example if you are embedding your SmartGWT application into a portlet or into a page that already have non SmartGWT contents.
In a general way of thinking, calling draw is the best and the proper way of drawing SmartGWT objects.
However, for the reasons specified above, you can still use
VLayout mainLayout = new VLayout();
RootPanel.get("myDIV").add(mainLayout);
Keep in mind that calling RootPanel.get().add involves GWT DOM manipulation.
We use MVP with custom EventBus to navigate across the views. One of our GWT module loads an ebook within a view. We have a button named "Expand", which upon clicked, loads the ebook in expanded mode thereby hiding the header, footer, etc.
Let us say the view (UiBinder) with "Expand" button is named as "ShowEbookView". Upon clicking "Expand" button, the ClickEvent is captured and fired to the EventBus. The logic onExpand(final ExpandEvent expandEvent) is written in the same "ShowExpandedMod" class.
Everything is okay, but we have a button named "Popout" in the expanded mode, which when clicked, should open the Ebook in a NEW page! We need to abstract the "ShowExpandedMod" class so that it can operate with the EbookId and can be used in the new page.
We have created a new Module with EntryPoint class, HTML page and UiBinder page for this new popout window. I am not sure how to proceed now with the abstraction and to use EventBus across different modules to load the same content ... (with re-usability ofcourse)
I've explained to my best, but perhaps not very clear! Please let me know if you want more details.
Thanks!
When you open a new window in browser you basically get a new instance of your GWT app. You can not use EventBus across different browser windows, i.e. across different GWT module instances.
What you can do is:
Add an argument to the Popout page URL. This is easies done via "history tokens" (fragment identifiers), like this http://yourdomain.com/popout.html#theIdOfTheDocument. Then you can retrieve the token via History.getToken()
Use DOM to communicate between browser windows: window.open() in javascript opens a new window and returns a reference to DOM of the new window. You can then access properties and functions of the new window. This is all javascript, in order to make this work in GWT you'll need to wrap it in JSNI.
Try and use MVP4G, in specific - take a look at their multi-modules feature (which utilizes GWT's code splitting capabilities).
This should make things like multiple EventBus's and cross-module event triggers a lot easier to handle.
Before you start shooting me down i have checked for answers and i have googled till my fingers bled but i havent been able to find a simple, concise answer. So im asking again for all those that might have this problem.
Question: how to open a new window with a formpanel in side.
Context: i have an app that lists lots of items, i want someone to edit an entry, i want a new window to open so they can edit properties then hit save. A standard thing you find in a lot of applications.
Architecture:
I have one client module called UI, it has a dozen classes that draw widgets and fill a main area when selected from a menu. I have a single html page called UI.html which has the tag in the head. Thats it.
Options Ive Seen
Call Window.Open() but you need to define a html file. I dont have one. I can create an empty one but how do you inject a widget in to it ?
use jsni $wnd to create a new window and get a reference to it. But how do i inject a form panel into it ??
use a popuppanel. They look sucky - plus if opening a window through JS is quite simple i would expect it to be in gwt.
Maybe im miss understanding how to use GWT i dont know.
Any help would be appreciated
Thanks
The way i got this to work is as follows:
i wrote a jsni method to open a new window
public static native BodyElement getBodyElement() /*-{
var win = window.open("", "win", "width=940,height=400,status=1,resizeable=1,scrollbars=1"); // a window object
win.document.open("text/html", "replace");
i added a basic body to the new window and returned the body element
win.document.write("<HTML><HEAD>"+css1+css2+"</HEAD><BODY><div class=\"mainpanel\"><div style=\"width: 100%; height: 54px;\"><div id=\"mainbody\"class=\"mainbody\" style=\"width: 100%;\"></div></div></div></BODY></HTML>");
win.document.close();
win.focus();
return win.document.body;
}-*/;
i then called this method from my main java method
BodyElement bdElement = getBodyElement();
I then injected my panel which has lots of widgets into the returned body element
SystemConfiguration config = new SystemConfiguration(); bdElement.getOwnerDocument().getElementById("mainbody").appendChild(config.getElement());
I agree with Bogdan: Use a DialogBox.
If you can't, you Window.open() as you mentioned in option 1:
Create another GWT module, and form.html that will load it
Window.open("form.html?entry=54")
Have the form gwt module read from the URL, load the entry, allow it to be edited, and provide Save and Cancel buttons
Close the popup when Save or Cancel is clicked
Can't you just use a DialogBox?
Example
I've found the GWT tab panels clunky for the styling I need to do, so I'm trying to make my own, simple tab panel. Basically an HTML5 <nav> element for tabs and a DeckPanel to display the content. Let the use figure out the rest with CSS3.
The GWT TabLayoutPanel has these "special" tags it uses to define the contents of a tab:
<g:TabLayoutPanel>
<g:tab>
<g:header>Tab Title</g:header>
<g:OtherWidget>Tab contents</g:OtherWidget>
</g:tab>
</g:TabLayoutPanel>
I'm referring to <g:tab> and <g:header>. I see these type of tags used in various places but I have no idea how to create them. Looking at the TabLayoutPanel source, I see that it has an add method that expects two widgets, and from that it puts one widget (the contents) into a panel for display and another (the header) into an instance of TabLayoutPanel.Tab. But I have no idea how to duplicate this kind of functionality.
In GWT 2.1 there's the UiChild attribute. It's quite cool.
#UiChild public void addTabDef(Widget page, String title) {...}
The title parameter will be filled with an attribute of the same name in the tabdef tag, like so:
<v:tabdef title="Tab one"><g:Label>Page one.</g:Label></v:tabdef>
Edit: to be clear, tabdef isn't defined anywhere as a class; the desired behaviour during parsing is defined by UiChild attribute.
To use custome tags for you widget like <g:tab> and <g:header> you need to create a custom ElementParse and register it with the UiBinderWriter. Unfortanatly there is no simple way of doing this yet without editing the sourcecode for gwt.
Usefull links:
A link to the issue of not being able to create custom ElementParser
TabLayoutPanelParser