We Keep Coding

How to insert <b> Element in GWT Label

I'm using GWT UiBinder and I want to create the following Label
--------------------------------------------
You can upload only .jpg images
--------------------------------------------
<g:Label ui:field="imgInfo">You can upload only <b>.jpg</b> images</g:Label>
But of course it is incorrect example. I want to use Label, because I want to add PopupPanel
final PopupPanel popupImgInfo = new PopupInfo("Max size of the imagde:10Mb");
#UiHandler("imgInfo")
void doProtocol(MouseOverEvent event) {
popupImgInfo
.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
#Override
public void setPosition(int offsetWidth, int offsetHeight) {
int left = imgInfo.getAbsoluteLeft();
int top = imgInfo.getAbsoluteTop() - 120;
popupImgInfo.setPopupPosition(left, top);
popupImgInfo.setWidth("400px");
}
});
}
#UiHandler("imgInfo")
void doProtocolHide(MouseOutEvent event) {
popupImgInfo.hide();
}
So my problem is how to insert html Element in Label or you can provide other solutions to make text bold in GWT Label.

Use a HTML widget instead of a Label one:
<g:HTML ui:field="imgInfo">You can upload only <b>.jpg</b> images</g:HTML>

philfr49 is absolutelly right. Label use createTextNode, and you can't use HTML. If you still want to do it you can do this:
DirectionalTextHelper directionalTextHelper = new DirectionalTextHelper(imgInfo.getElement(), true);
directionalTextHelper.setTextOrHtml("You can upload only <b>.jpg</b>; images", true);
Update:
Both HTML(class="gwt-HTML") and Label(class="gwt-Label") produce DIV element as wrapper element. Both classes are empty in standard.css. So just make your choice which method suitable for you.

You can implement this using SafeHtmlBuilder class. You tell it what strings you want to escape and what strings you do not want to escape. It works like StringBuilder because you call append methods.
Please refer to link for similar answer:
GWT: Putting raw HTML inside a Label

You can use a DOM Element instead.
#UiField
Element myLabel;
public void setLabelText(String text)
{
myLabel.setInnerHTML(new SafeHtmlBuilder().appendEscaped(text).toSafeHtml().asString());
}

Wicket AJAX does not respond after dom changed by JavaScript

Wicket AjaxSubmitLink onSubmit is not called after applying appendJavascript which changes the DOM of a page. Sample code is:
add(new ListView("list", someArrayList){
#Override
protected void populateItem(final ListItem item) {
add(new AjaxSubmitLink("link") {
#Override
public void onClick(AjaxRequestTarget target) {
target.appendJavascript("swap('"+this.getMarkupId()+"')");
});
})
The JavaScript looks like:
function swap(markupId){
var one = $('.dashed').first().parent();
var two = $('#'+markupId).parent();
var tone = one.clone();
var ttwo = two.clone();
one.replaceWith(ttwo);
two.replaceWith(tone);
}
Any suggestions?

It might be the clone() method causing the problem. According the documentation it does not clone event handlers. Try clone(true);
You could also handle the swap server side and then rerender the list after the swap. That would be the Wicket way to do it.

Loading HTML templates via Ajax from Google Web Toolkit?

For my gwt app, I have certain html templates that are stored as static .html files on my website. e.g example.com/views/signup.html , example.com/views/foo.html , etc.
I want this to be a single page app like Twitter, so the user would navigate through all the pages without the page being refreshed.
I will have a HTMlPanel as the root element of my app on the host page. Whenever the user navigates to a different page, e.g by clicking a link in the navigation menu, I want to load the .html template for that page via ajax, and set the returned html into the HTMLPanel.
Is this a plausible solution? If so, how can I load the html templates via ajax from GWT?
Thanks.

That is precisely the case of http://gwtproject.org site.
It uses gwtquery to load an html page via ajax and insert it in a certain area of the page via the load() method.
// Load the file.html using ajax, and append the fragment with id=mid from
// the returned document inside the element with id=c in the current document.
$("#c").load("file.html #mid");
You can take a look to the GWTProjectEntryPoint.java (line 128) of the gwt-site-webapp as well.
Of course you have to handle any click on any anchor present in the inserted fragment, to do the appropriate action instead of replacing the gwt application. That can be done with the live() method of gQuery.
$("#c").live("click", new Function() {
public boolean f(Event e) {
String href = $(e).attr("href");
// Do something with href.
return false;
}
});

You may want to look at this SO Q&A.
The idea is:
You create a server call (e.g., RPC) to fetch your html template as a String.
You create a corresponding HTMLPanel that knows how to attach dynamic elements to your html template that you pass in the constructor.
You add this newly constructed HTMLPanel to your page root panel where you want it.
On this SO you can find a panel template code that may help you. The version therein does not have the "dynamic" html source, instead it is hard-coded in a ClientBundle. But it is easy to extend so the source html is dynamic, simply add a construtor like:
public HtmlPanelBase(final String htmlContentAsText)
where htmlContentAsText is your template html String from your server as follows:
public class HtmlPanelBase extends Composite
{
private String _dynPostfix = "";
protected final String id(final String staticId) { return staticId + _dynPostfix; }
private final String wrapId(final String id) { return "id=\"" + id + "\""; }
private final String wrapDynId(final String refId) { return wrapId(id(refId)); }
private String _htmlContentAsText = null;
protected String getHtmlContentAsText() { return _htmlContentAsText; }
private ArrayList<String> _idList = null;
protected HTMLPanel _holder = null;
private HTMLPanel createHtmlPanel(final boolean defineGloballyUniqueIds)
{
// HTML panel text containing the reference id's.
if (defineGloballyUniqueIds)
{
// Replace the reference id's with dynamic/unique id's.
for (String refId : _idList)
_htmlContentAsText = _htmlContentAsText.replace(wrapId(refId), wrapDynId(refId));
}
// Return the HTMLPanel containing the globally unique id's.
return new HTMLPanel(_htmlContentAsText);
}
public HtmlPanelBase(final String htmlContentAsText, final ArrayList<String> idList, final boolean defineGloballyUniqueIds)
{
_htmlContentAsText = htmlContentAsText;
_idList = idList;
this.setup(defineGloballyUniqueIds);
super.initWidget(_holder);
}
public HtmlPanelBase(final String htmlContentAsText)
{
this(htmlContentAsText, null, false);
}
private void setup(final boolean defineGloballyUniqueIds)
{
if (defineGloballyUniqueIds)
_dynPostfix = "_" + UUID.uuid().replace("-", "_");
_holder = createHtmlPanel(defineGloballyUniqueIds);
}
}
To use, fetch your htmlContentAsText on sever (could depend upon locale), upon success instantiate a derived class of the above base template passing the fetched htmlContentAsText in the constructor, and add therein all your logic modifying or adding upon the base html -- e.g., add handlers in response to user actions.

How can i get GWT HTML selected text?

i needed an Widget to display text properly, containing HTML elements. Therefore i used the GWT HTML-Widget like that.
HTML text= new HTML(new SafeHtml() {
#Override
public String asString() {
return "<b>TestText</b>";
}
});
Now i would like to select text displayed by that widget, and somehow get the String.
I would like to right click the marked text, and do something with that String
It's also no problem if your ideas making use of other gwt widgets, i am not too focused on that HTML one.
I also have access to Sencha GXT libarys.
Any ideas would be appreciated.

I'm assuming you want the user to select text and then retrieve the selected text on right click. Am I right? I don't recall any way of retrieving selected text in GWT, so I would use pure javascript for that. There is already a thread explaining how to do that with javascript, so you can grab that code and wrap it in a JSNI method:
public class MyClass implements IsWidget {
private final HTML text;
public MyClass() {
text = new HTML(SafeHtmlUtils.fromTrustedString("<b>Some text</b>"));
text.addDomHandler(new ContextMenuHandler() {
#Override
public void onContextMenu(ContextMenuEvent event) {
String test = getSelection();
Window.alert(test);
}
}, ContextMenuEvent.getType());
}
private native String getSelection() /*-{
var text = "";
if ($wnd.getSelection) {
text = $wnd.getSelection().toString();
} else if ($doc.selection && $doc.selection.type != "Control") {
text = $doc.selection.createRange().text;
}
return text;
}-*/;
#Override
public Widget asWidget() {
return text;
}
}

You can use sth like this:
final Label label = new Label("Some text");
label.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
label.getElement().getStyle().setBackgroundColor("#ff0"); //sth. like select
String txt = label.getText(); //get the String
Window.alert(txt); //do sth. with text
}
});
But it works on left click. If you have to use right click, you can use native JS code using eg. jQuery click.
And do not use b tag. It is deprecated in HTML5.

I've actually found a GWT-Libary that can get the selected text.
Watch this https://code.google.com/p/gwt-selection/
After installing the libary i just had to
String currentSelection = Selection.getBrowserRange().getText();
Thank you for answering though - you helped me a lot

Getting the internal DIV element and id of a GWT Panel

I have an app that have this JSNI that needs to be passed with a container id, in which I pass a DIV id:
HTML:
<div class='example-waveform' id='example4'></div>
JAVA:
initWave("example4");
public native void initWave(String __id)/*-{
var instance = this;
var data = $wnd.data = [];
var waveform = $wnd._waveform = new $wnd.Waveform({
container: $doc.getElementById(__id),
interpolate: false
});
}-*/;
This works fine, however I need to use a GWT container instead of just a HTML div.
I tried:
HTMLPanel container = new HTMLPanel("Test");
container.getElement().setId("someid");
String id = container.getElement().getId();
initWave(id);
However the Javascript function can't accept the element id I am passing into it (I am using a third-party JS Library so I can't debug this one) so I just assume that I just need to pass a DIV id, however DIV is OK, but I need a GWT widget that I can manipulate like show/hide/etc in the GWT UI.
In this case, is there a way to get the DIV element and id of a GWT Panel (HTMLPanel or VerticalPanel) so I can pass this onto my JSNI function.

It must be some error related to the order you are calling the methods, or in the use of the 3rd party lib. This code works perfectly fine in GWT 2.4.0.:
final HTMLPanel container = new HTMLPanel("Test");
container.getElement().setId("someid");
container.addAttachHandler(new Handler() {
#Override
public void onAttachOrDetach(AttachEvent event) {
initWave(container.getElement().getId());
}});
RootPanel.get().add(container);
with initWave being:
public native void initWave(String __id)/*-{
var x = $doc.getElementById(__id);
alert(x.innerHTML);
}-*/;
Works both with SimplePanel and HTMLPanel!