We Keep Coding

Java FX: TableView - display simple HTML

I'd like to know, if it is possible to render simple HTML tags in JavaFX TableView (b, i, subscript, supscript). In my code snippet I used default cellValueFactory, but maybe someone could tell me if exists any cell factory which allow me to display html.
From code:
class Data{
private String row = "<b> Sample data</b>"
public String getRow(){
return row;
}
TableView<Data> tableView = new TableView();
TableColumn<Data,String> column = new TableColumn("Sample Column");
column.setCellValueFactory(new PropertyValueFactory<Data, String>("row"));
tableView.getColumns().addAll(column);
I wish I could see Sample Data in my table in bold. Thanks in advance!
--UPDATE
Code that allows me to see my HTML, but resizes table cell, WebView size is ignored and not wrapped tight
private class HTMLCell extends TableCell<Component, Component> {
#Override
protected void updateItem(Component item, boolean empty) {
super.updateItem(item, empty);
if (!empty) {
WebView webView = new WebView();
webView.setMaxWidth(200);
webView.setMaxHeight(50);
WebEngine engine = webView.getEngine();
// setGraphic(new Label("Test"));
setGraphic(webView);
String formula = item.getFormula();
engine.loadContent(formula);
}
}
}
TableColumn<Component, Component> formulaColumn = new TableColumn<>("Formula");
formulaColumn.setMinWidth(300);
formulaColumn.setCellFactory(new Callback<TableColumn<Component, Component>, TableCell<Component, Component>>() {
#Override
public TableCell<Component, Component> call(TableColumn<Component, Component> param) {
return new HTMLCell();
}
});
formulaColumn.setCellValueFactory(new Callback<TableColumn.CellDataFeatures<Component, Component>, ObservableValue<Component>>() {
#Override
public ObservableValue<Component> call(CellDataFeatures<Component, Component> param) {
return new SimpleObjectProperty<Component>(param.getValue());
}
});

HTML in a WebView in a TableCell
You have to make your own cell factory which returns a WebView node into which you load your HTML content.
On Correctly Sizing the WebView
In terms of establishing the preferred size of the WebView node, that is a little tricky. It would be simpler if RT-25005 Automatic preferred sizing of WebView were implemented.
I think the sample code from your question will work if you just replace the maxSize setting for the WebView with a webView.setPrefSize(prefX, prefY) call. You will just have to guess what the prefX and prefY values should be as I don't know a good way of determining programmatically.
I think your code should work by setting the max size for the WebView, but the WebView doesn't seem to respect the max size setting and just uses the pref size setting, which I think may be a bug in Java 8b129 (you could file that in the JavaFX Issue Tracker with a minimal, executable test case which reproduces it and a description of your test environment).
TextFlow Alternative
You might also consider using TextFlow component for representing your styled text. It is not HTML, but if all you want to do is some simple styling like making some text in the cell bold or italic, it might be a good option.

Use HTML tables in WebEngine/WebView rather than TableView.
Table examples

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

GWT - how to get the tabText of selected tab?

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();

JEditorPane: HTML Layout Broken

I am rendering some images that are layered in a JEditorPane. I've read that JEditorPane is pretty rocky at best, however I am hoping that this is an issue with either my HTML code or something else. Here's how my content looks in the browser:
And how it looks in a JScrollBar(JEditorPane):
The HTML code: http://pastebin.com/EixG3WLH
The Java code:
File f = new File("index.html");
JEditorPane jep = new JEditorPane(f.toURI().toURL());
JScrollPane sp = new JScrollPane(jep);
JFrame frame = new JFrame();
frame.add(sp);
jep.setEditable(false);
frame.setVisible(true);
frame.setSize(500, 500);
frame.setTitle(wpj.getParse().getTitle());
I'd really rather not use FlyingSaucer if this issue can be resolved in a JEditorPane!

You can do it... but it's not really simple... because JEditorPane doesn't have CSS absolute positioning... so, you must first at all, recognize if some element had the position:absolute or position:fixed attribute extending the ViewFactory, something like:
public class ExtendedHTMLEditorKit extends HTMLEditorKit{
//.... other code here
public class MyHTMLFactory extends HTMLFactory{
//other code here
#Override
public View create(Element elem) {
if (isLayered(elem)){ //it means, it has position attribute
return new PositionedView(elem);
}
else
return super.create(elem);
}
boolean isLayered(Element elem){
SimpleAttributeSet sas = new SimpleAttributeSet(elem);
StyleSheet styles = (HTMLDocument elem.getDocument).getStyleSheet();
Tag tag = element.getAttributes().getAttribute(AttributeSet.NameAttribute);
sas.addAttributes(styleSheet.getRule(tag, element));
return sas.isDefined("position")
&& !sas.getAttribute("position").toString().equalsIgnorecase("static");
}
}
}
In this case, we need then to build a correct view for your element... I don't know if you're only positioning images (in this case, it could be simple) or a lot of things... I can see on your code, you're using divs...
Let me explain more or less what I do: I've created a ComponentView, and returning as a component a new JEditorPane, where I put the innerCode of the original element... and after that, move it on correct position of parent editor...
To synchronize this is really dificult to allow edit, but if you only whant to use them to display, it must be more simple...
ok.. the view must be like:
public class PositionedView extends ComponentView{
private JEditorPane view;
private JEditorPane parent;
#Override
public Component createComponent(){
if (view == null){
view = new JEditorPane();
}
String innerText = dumpInnerText(getElement());
view.setText(innerText);
view.setLocation(getAbsoluteX(), getAbsoluteY());
parent.add(view);
}
#Override
public void setParent(View parent) {
if (parent != null) {
java.awt.Container host = parent.getContainer();
if (host != null && host instanceof JEditorPane) {
parent = (JEditorPane) host;
}
}
super.setParent(parent);
}
protected int getAbsoluteX() {
//search for the attribute left or right and calculate the position over parent
}
protected int getAbsoluteY(){
//search for the attribute top or bottom and calculate the position over parent
}
protected String dumpInnerText(Element element){
//there are several ways to do it, I used my own reader/writer,
//because I've need add special tags support...
}
}
I hope this helps you... Ah! there are another thing: if you do this, you must secure your view is not opaque, and it means, all the view elements, on the other case, you will have a blank rect for your elements.
Another thing, you maybe need to check for the correct dimension of the view... do as getAbsoluteX / getAbsoluteY to obtain width / height attributes.

JEditorPane is not so good with CSS absolute positioning. I think you are trying to achieve more with JEditorPane than it is capable of delivering.

How can I replace a div with a widget when it is already contained in another widget?

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);