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
Related
I use Wicket 1.5
When i change color it is really changed on the page only after refreshing using F5. How to refresh it in backend?
I use this lines for changing color:
dateDescription.add(AttributeModifier.replace("style", "color:red;"));
add(dateDescription);
UPDATE #1
Now i use AJAX but still have to refresh page for changing color. Could you tell me what i did wrong?
// in page class
public class FilterUpdateBehavior extends AjaxFormComponentUpdatingBehavior {
public FilterUpdateBehavior(String event) {
super(event);
}
#Override
protected void onUpdate(AjaxRequestTarget target) {
RefreshResult result = getResult(target);
if (result.getStatus() == RefreshResultStatus.DATE_NOT_SET) {
dateIntervalFilterPanel.setAlarmDateStatus(true);
} else {
dateIntervalFilterPanel.setAlarmDateStatus(false);
}
}
}
// in date panel class
dateDescription.add(new AttributeModifier("style", new AbstractReadOnlyModel<String>() {
private static final long serialVersionUID = 1L;
#Override
public String getObject() {
String cssClass = null;
if (isAlarmDateStatus()) {
cssClass = "color:red;";
} else {
cssClass = "color:black;";
}
return cssClass;
}
}));
add(dateDescription);
UPDATE #2
public RefreshResult getResults(AjaxRequestTarget target) {
// ... somewhere here additional logic of getting particulate RefreshResult
target.add(table);
target.add(paging);
target.add(loadingPanel);
return new RefreshResult(resultType);
}
UPDATE #3 FINAL (IT HELPED ME)
I miss this code line when i change isAlarmDateStatus, now it works fine. Thanks to Andrea!
target.add(dateDescription);
your code line looks right but you must use AJAX to reflect your changes without reloading the entire page. Unfortunately Wicket 1.5 is really outdated and there are few resources online to provide you an example of AJAX support. You might try to look into the old 1.5 AJAX examples code here:
https://github.com/apache/wicket/tree/build/wicket-1.5.17/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin
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());
}
I want to get the tab text when I click on a tab. I do this:
tabPanel.addSelectionHandler(new SelectionHandler<Integer>() {
#Override
public void onSelection(SelectionEvent<Integer> event) {
//get the tabtext here
}
});
But I only get the index.
Assuming you are using TabPanel and you haven't provided a custom Widget for the TabBar, you could do this:
tabPanel.addSelectionHandler(new SelectionHandler<Integer>() {
#Override
public void onSelection(SelectionEvent<Integer> event) {
String tabHtml = tabPanel.getTabBar().getTabHTML(event.getSelectedItem());
}
});
Of course, you will get the underlying HTML of the tab, that generally is a <div>tab text</div>. The text you put in the add() methods are wrapped in either a Label, or an HTML widget, whether you have chosen to display the tab text as HTML.
Of course this is not handy, generally you need to store somewhere the tab text (in a TabPanel extension I'd guess, or a model) at insertion time (overriding the add(...)s) and retrieve it when needed (by adding a simple getter for them).
You can get the selected tab by following.
tabPanel.getElement().getTitle();
I am writing Bing/Google instant search kind of feature in combo box, so this combo box provides suggestions to the user based on what he has typed. The program works like a charm but their is one bug that I am unable to figure out how to solve. The problem is, the first character typed is recognised once the second the character has been typed, same goes for other position of characters too.
Here is the code:
public MyClass extends JFrame
{
private Document doc;
public MyCode()
{
comboxBox= new JComboBox();
Handler handle = new Handler();
JTextComponent comp = (JTextComponent) comboBox.getEditor().getEditorComponent();
doc = comp.getDocument().addDocumentListener(handle);
comboBox.addKeyListener(handle);
}
private class Handler implements DocumentListener,KeyListener
{
String dataTobeSearched= "";
#Override
public void changedUpdate(DocumentEvent event) {
try
{
dataTobeSearched = doc.getText(0, doc.getLength());
System.out.println("Data to be searched "+dataTobeSearched);
}
catch(Exception e)
{
e.printStackTrace();
}
}
#Override
public void keyPressed(KeyEvent event) {
changedUpdate(null);
}
}
What am I doing wrong?
I added the keyListener to the combobox editor because the DocumentListener wasn't getting invoked when something was being typed in the combobox? If there is an other easy alternative to this, then please share it.
How can I solve the above stated problem?
Wrap the call inside changedUpdate() in SwingUtilities.invokeLater()
According to the Java tutorial on Oracle website, changedUpdate() method will not work for plain text documents. If this is your case, use insertUpdate() and/or removeUpdate().
The recommendation of using SwingUtilities inside the method is still valid.
I'm using Ext-GWT and I think ListView is the right layout for what I need. My problem is that I have to use a HTML template for all of my items, but I want to build GWT/Ext-GWT widgets instead, so I'm using div placeholders that I will replace with the proper widgets.
How can I replace my div with a widget? My first attempt was to use RootPanel.get('div-id'), but apparently you can't create a RootPanel that is in a widget (I used debug mode to step through the code till I found that silent exception).
public class TicketContainer extends LayoutContainer {
private ArrayList<BasicTicket> tickets;
public TicketContainer(ArrayList<BasicTicket> tickets) {
this.tickets = tickets;
}
#Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
setLayout(new FlowLayout(1));
ListStore<BasicTicket> store = new ListStore<BasicTicket>();
store.add(this.tickets);
ListView<BasicTicket> view = new ListView<BasicTicket>(store);
view.addListener(Events.Refresh, new Listener<BaseEvent>() {
#Override
public void handleEvent(BaseEvent be) {
for (BasicTicket ticket : tickets) {
// At this point I need to find the div with the id
// "ticket_"+ticket.getId() and replace it with a GWT
// widget that I can add events to and enable drag and drop
}
}
});
add(view);
}
private native String getTemplate() /*-{
return ['<tpl for=".">',
'<div id="ticket_{id}"></div>',
'</tpl>'].join("");
}-*/;
}
The full source is at https://code.launchpad.net/~asa-ayers/+junk/Kanban if you need additional context in the code.
In "pure" GWT, the answer would be to use HTMLPanel:
String id = DOM.createUniqueId();
HTMLPanel panel = new HTMLPanel("<div class=\"content\" id=\"" + id + "\"></div>");
panel.add(new Label("Something cool"), id);
As you can see, the com.google.gwt.user.client.ui.HTMLPanel.add(Widget, String) takes the id of an element withing the HTMLPanel and places the Widget inside that element.
I haven't used Ext-GWT, but you can either use HTMLPanel or search for an exquivalent in Ext-GWT.
You can also wrap an existing div in an HTML Panel.
HTMLPanel newPanel = HTMLPanel.wrap(Document.get().getElementById("yourDivId"));
newPanel.add(your_widget);