I would like to break a long line of text assigned to the standard Label widget in GWT.
I was experimenting with inline <br /> elements but with no success.
Something like this:
label = "My very very very long<br />long long text"
You need to use the HTML widget, which extends the standard Label widget, and adds support for interpreting HTML tags.
See the JavaDoc.
I would use CSS to style the label to fit a given with and drop the <br/> all together.
Related
I am using ZK framework. I have a static line of text in a label:
<label
value="If you have already submitted a leave application or need to modify
an existing leave, do not submit an online application. " />
I need to underline only some parts of this sentence. I've tried putting <u> </u> around the text I wish to underline, but this is not allowed in ZK.
I've also tried creating separate labels, with style="text-decoration: underline;" which does underline the specified text. However this way of underlining makes each label display on it's own line.
Is there some way that I can underline only certain parts of my label?
There is no way you could append style to certain parts of a label.
Like #Link already commented you could use multiple labels and set the sclass different of each label.
If you have real HTML in your text, you could use the following :
HtmlNativeComponent n = new HtmlNativeComponent("html", "<h2>title</h2>","<p>your text</p>");
Explication of constructor :
"html" => the element where all your text is between. (wrapper element)
"<h2>title</h2>" => the first part. If you append more children to the native component, its after this they will come.
"<p>your text</p>" => the second part. If you append more children to the native component, its before this they will come.
In the past I have built labels for my form like this:
<label wicket:for="name"><wicket:label><wicket:message key="name"></wicket:message></wicket:label>:</label><input wicket:id="name" type="text"/>
Do I still need to use the wicket:label tag? I am not using wicket:label in wicket 7 and it seems to work fine. I may not be understanding the purpose of using wicket:label. It seems like wicket:label is just additional markup. Below is what I am doing now. Is this correct?:
<label wicket:for="name"><wicket:message key="name"></wicket:message>:</label><input wicket:id="name" type="text"/>
This example is related to Wicket XHTML tags
Have a look at the JavaDoc of AutoLabelResolver and AutoLabelTextResolver.
The <label wicket:for="name"> is handled by AutoLabelResolver. It links the HTML label tag to the HTML form component (in your case the input tag) by filling in the correct ID in the HTML for attribute of the label. It also adds css classes to the label tag for for example errors, so you can style the text in the label tag in case of an error.
The <wicket:label> has two purposes. If you give it a value either by the key attribute (as you did) or by having some text between the tags, the text is set as the label model of the Java FormComponent, which then is used in validation messages like this '${label}' is required. (see LabeledWebMarkupContainer#setLabel and LabeledWebMarkupContainer#getLabel).
If you don't assign any text to the <wicket:label> tag, then it is used as output. That means the value of the label model of your Java FormComponent is used to replace the tag.
If you have no <wicket:label> in the HTML markup and no label model set in your Java code, then your Java FormComponent will have an empty label model and Wicket falls back to using the Wicket ID as label. So depending on how your Wicket IDs look, you will get validator messages like 'user_name' is required. instead of something nice looking like 'User name' is required.
I'm very new to GWT and GwtBootstrap3 so this might be a dumb question, but how can the elements from my ***.ui.xml file be referenced in the code?
For example, I have a paragraph in my ***.ui.xml file -
<b.html:Paragraph alignment="LEFT">
Lorem Ipsum
</b.html:Paragraph>
and I want to be able to change the text in my code.
Similarly, if I'm creating a List but can't statically provide the list elements in my ***.ui.xml file and need to provide them in my code, based on what choices are available, is there a way to do that?
Any suggestions/comments will be really appreciated.
Rohit, I noticed in your answer you changed your initial paragraph widget to a Label element. For anyone else visiting this question and wanting to work specifically with paragraphs: adding the attribute ui:field="myWidget" to an html Paragraph Element will allow you to perform this task directly
UIBinder
xmlns:b.html="urn:import:org.gwtbootstrap3.client.ui.html"
<b.html:Paragraph alignment="LEFT" ui:field="myWidget">
Lorem Ipsum
</b.html:Paragraph>
Java
import org.gwtbootstrap3.client.ui.html.Paragraph;
#UiField public Paragraph myWidget;
myWidget.setText("Dynamic text");
Found a way finally after research into GWT UiBinder.
I inserted a Label widget in the paragraph and provided an id to my Label using ui:field ='myWidget' and the then referenced it in my ***UIBinder.java using:
#UiField Label myWidget;
and set the text in the constructor using
myWidget.setText("Dynamic text");
This can also be done without using widgets
I would like to know if it is somehow possible to use widgets in a ToggleButton, because I have an image on the downFace of a ToggleButton and want to use the Image widget, so that I can define a resource property.
Code looks like this (or should look like this, doesn't work of course):
<g:ToggleButton addStyleNames="{res.css.button} {res.css.active} {style.inventory-button}">
<g:upFace>upFace Text</g:upFace>
<g:downFace>downFace Text <g:Image resource="{res.wantedImage}" addStyleNames="{res.css.load}"></g:Image></g:downFace>
</g:ToggleButton>
ToggleButton's g:downFace takes an ImageResource as an image= attribute:
– Source: http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/CustomButton.html
But you cannot use both an image and text that way.
AFAICT, you can however use an image and text through HTML (but without widget):
<g:downFace>downFace Text <img src="{res.wantedImage.getSafeUri}" /></g:downFace>
or through a #sprite in a CssResource:
<g:downFace>downFace Text <span class="{res.css.wantedImageAsSprite}"></span></g:downFace>
GWT Label widgets iterprets everything as text, not as html tags - that's good, but I would like it to interpret \n as a <br /> how do i do that.
I would make subclass, but I cant find what to override to achieve this behaviour
(I could use HTML widget, but it would interpret all tags - and all I need is an line brak)
Use an HTML widget and set its value using a SafeHtml constructed with SafeHtmlBuilder.appendEscapedLines:
HTML label = new HTML(new SafeHtmlBuilder().appendEscapedLines("foo<bar\nbaz>quux").toSafeHtml());
(alternatively, you can split("\n", -1) your text, call SafeHtml.htmlEscape on each part and join them back with a <br>, that's what appendEscapedLines does)
Another option is to use CSS, which may be sufficient in some cases where this problem emerges.
Add the CSS attribute white-space: pre or pre-wrap in the area where you display the text. It will ensure that line breaks are respected when rendering the document.
This approach has the potential to reduce some complexity, e.g. the processing of input where \n is replaced with <br/>.
You can use com.google.gwt.user.client.ui.HTML class to achieve this or simply write,
Label label = new HTML("// html code you wnat to write");
The problem to display multi-line text with HTML in XML files is that we are not allowed to use character < in the content. For example the below code cannot be compiled:
<g:HTML HTML="Line 1<br />Line2<br />Line 3" />
In my case, I declare that text as a i18n string then use in html
<ui:with field='ln' type='com.mycompany.i18n.LocalizableStrings'/>
<g:HTML HTML="{ln.EXPLAINATION}" />