Test for Label overrun - javafx-2

I have a multiline label whose text has a chance of overrunning. If it does this, I want to decrease the font size until it isn't overrunning, or until it hits some minimum size. This would hopefully make it so that the label will change size until the entire string is visible.
My problem it that I am not sure how to test to see if the text has overrun. I have tried testing to see if the label's text ends with the ellipse string, but I believe the ellipse is not technically added to the textProperty of the label. So does anyone know of a good way to test for this?

The short and disappointing answer: You simply cannot do this in a reliable way.
The slightly longer answer is, that the label itself does not even know whether it's overflown or not. Whenever a label is resized, the skin class (LabeledSkinBase) is responsible for updating the displayed text. This class, however, uses a JavaFX utils class to compute the ellipsoided text. The problem here is that the respective method just returns a string that is ellipsoid if this is required by the label's dimensions. The skin itself never gets informed about whether the text was actually ellipsoided or not, it just updates the displayed text to the returned result.
What you could try is to check the displayed text of the skin class, but it's protected. So you would need to do is to subclass LabelSkin, and implement something like that:
package com.sun.javafx.scene.control.skin;
import java.lang.reflect.Field;
import javafx.scene.control.Label;
#SuppressWarnings("restriction")
public class TestLabel extends LabelSkin {
private LabeledText labelledText;
public TestLabel(Label label) throws Exception {
super(label);
for (Field field : LabeledSkinBase.class.getDeclaredFields()) {
if (field.getName().equals("text")) {
field.setAccessible(true);
labelledText = (LabeledText) field.get(this);
break;
}
}
}
public boolean isEllipsoided() {
return labelledText != null && labelledText.getText() != null && !getSkinnable().getText().equals(labelledText.getText());
}
}
If you use this skin for you Label, you should be able to detect whether your text is ellipsoided. If you wonder about the loop and the reflection: Java didn't allow me to access the text field by other means, so this may be a strong indicator that you really should not do this ;-) Nevertheless: It works!
Disclaimer: I've only checked for JavaFX 8

minisu posted a way to detect an overrun in this answer:
https://stackoverflow.com/a/15178908/9492864
This way works for all labeled and I tested it on Buttons with JavaFX 8.
You can add a listener for example to the needsLayoutProperty:
labeled.needsLayoutProperty().addListener((observable, oldValue, newValue) -> {
String originalString = labeled.getText();
Text textNode = (Text) labeled.lookup(".text"); // "text" is the style class of Text
String actualString = textNode.getText();
boolean clipped = !actualString.isEmpty() && !originalString.equals(actualString);
System.out.println("is " + originalString + " clipped: " + clipped);
});

This work for me !!
In javafx
public class LabelHelper{
public static boolean necesitaTooltip(Font font, Label label){
Text text = new Text(label.getText());
text.setFont(font);
Bounds tb = text.getBoundsInLocal();
Rectangle stencil = new Rectangle(
tb.getMinX(), tb.getMinY(), tb.getWidth(), tb.getHeight()
);
Shape intersection = Shape.intersect(text, stencil);
Bounds ib = intersection.getBoundsInLocal();
return ib.getWidth() > label.getPrefWidth();
}
public static void asignarTexto(Label label, String texto){
label.setText(texto);
if (necesitaTooltip(label.getFont(), label)){
Tooltip tp = new Tooltip(texto);
label.setTooltip(tp);
}
}
}
Only call a asignarTexto(label, texto) for set text a label and check if the text is overrun in the label then add a tooltip for label.

It's already been mentioned by Johann that you can use (Text)labeled.lookup(".text") to get the actual displayed text for a Label, then compare it to the intended String... However, in my case, this did not work. Perhaps it was because I was updating the Label with a high frequency, but the actual String was always a few chars less than the intended...
So, I opted to use the setEllipsisString(String value) method to set the ellipsis string (what's appended to the end of a Label when there's overrun, the default being "...") to an (unused)
ASCII control character like 0x03 (appropriately named "end of text"), then after each time I set the Label text I check if the last char of the actual String is the control char.
Example using Platform.runLater(Runnable):
import javafx.scene.control.Label;
import javafx.application.Platform;
import javafx.scene.text.Text;
...
Label label = new Label();
...
label.setEllipsisString("\003");
...
final String newText = "fef foo";
Platform.runLater(() -> {
label.setText(newText);
String actual = ((Text)label.lookup(".text")).getText();
// \003 is octal for the aforementioned "end of text" control char
if (actual.length() > 0 && actual.charAt(actual.length()-1) == '\003') {
// Handle text now that you know it's clipped
}
});
Note that you can set the control char to anything really, and it doesn't need to be just one char; however if you opt for a control character, check that it isn't commonly used.

Related

Displaying javafx 2 linechart values on hover

I have been using this example for my project, and it works really nice.
My question: Is it possible to offset the hovered node such that it does not overlay the underlying data point. The example centers the hovered node right over the "normal" node. It kind of gets in the way on a chart with a lot of data points.
A simple solution is to set a custom translation to the displayed Label. The following code is extracted from the example.
private Label createDataThresholdLabel(int priorValue, int value)
{
final Label label = new Label(value + "");
label.setTranslateY(-25); //Move label 25 pixels up
label.getStyleClass().addAll("default-color0", "chart-line-symbol", "chart-series-line");
label.setStyle("-fx-font-size: 20; -fx-font-weight: bold;");
if (priorValue == 0)
{
label.setTextFill(Color.DARKGRAY);
}
else if (value > priorValue)
{
label.setTextFill(Color.FORESTGREEN);
}
else
{
label.setTextFill(Color.FIREBRICK);
}
label.setMinSize(Label.USE_PREF_SIZE, Label.USE_PREF_SIZE);
return label;
}

Dynamically selecting JavaFX LIneChart symbol colors

I have a JavaFX app which contains a line chart. I want users to be able to select the color of each series in the chart. Since the selection is dynamic I can't use static CSS to set the colors. I also have other controls that I need to set to the same color as the associated series. It's possible to set the line color of a series dynamically using code like this:
series.getNode().setStyle("-fx-stroke: " + color + ";");
That works well and I can use the user-specified color on the associated controls.
My problem is that I also need to set the color of the symbols for each series to the same color. I can't find any way to do that dynamically. All of the tutorials, documentation, and posts that I've read on the topic point to the static CSS approach.
Most charting widgets make this sort of thing very easy to do, but I've found no clues here or on the Oracle forums. Any guidance would be greatly appreciated.
-- Update --
I've found no way to do this other than to enumerate every data point in every series, grab the associated symbol node and set the style individually. Not what I was hoping for. In the process I realized that the default Node allocated for a symbol is a StackPane. I didn't need that flexibility so I replaced it with a Rectangle. This made rendering faster.
I'm late to the game, but maybe someone can use my solution. What worked for me, was iterating through every item in the data series and setting the CSS style for each one.
for (int index = 0; index < series.getData().size(); index++) {
XYChart.Data dataPoint = series.getData().get(index);
Node lineSymbol = dataPoint.getNode().lookup(".chart-line-symbol");
lineSymbol.setStyle("-fx-background-color: #00ff00, #000000; -fx-background-insets: 0, 2;\n" +
" -fx-background-radius: 3px;\n" +
" -fx-padding: 3px;");
}
I was stuck with a similar problem. I don't know upfront which data is going to be added to the graph, so I can't make use of a fixed stylesheet.
I came up with this solution. This code listens for new series added to graph. For every added series, it will create a new listener for data added to the series.
This listener will look up which series this is, the 0th, 1st, etc and then find the two nodes for the coloring of the line and of the legend/symbol.
As soon as it has set both, it can unsubscribe.
Problem can be that the legend/symbol node is not available yet when you receive the callback on the first added datapoint.
I'm aware it's very convoluted and I'm open to hear improvements.
At least it will give you the option to dynamically set the color to anything you want.
final LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis());
final ObservableList<Series<Number, Number>> series = chart.getData();
series.addListener(new ListChangeListener<Series<Number, Number>>() {
#Override
public void onChanged(Change<? extends Series<Number, Number>> change) {
ObservableList<? extends Series<Number, Number>> list = change.getList();
for (final Series<Number, Number> serie : list) {
serie.getData().addListener(new ListChangeListener<Data<Number, Number>>() {
#Override
public void onChanged(Change<? extends Data<Number, Number>> ignore) {
int index = series.indexOf(serie);
Set<Node> nodes = chart.lookupAll(".series" + index);
boolean isStyleSet = false;
for (Node n : nodes) {
if (StringUtils.isEmpty(n.getStyle())) {
String css = "-fx-stroke: %s; -fx-background-color: %s, white; ";
String color = //assign dynamically here, for instance based on the name of the series
n.setStyle(String.format(css, color, color));
isStyleSet = true;
}
}
if (!isStyleSet & nodes.size() > 1) {
serie.getData().removeListener(this);
}
}
});
}
}
});
I had a problem which might be slightly different (possibly more complex); I needed to style some nodes of a series one color, others within the same series another color (I also needed to be able to change the allocation of color dynamically). I am working in JavaFx 2.2; I have css-styling, but of course that does not help here. I could not find my issue addressed anywhere; this was the closest I've found.
I just want to say that I could not get "series.getNode().setStyle("-fx-stroke: " + color + ";")" to work. However, using "-fx-background" instead does work. I hope this helps someone.

HowTo: Visio SDK page Re-Layout FlowChart Top to Bottom

I'm creating a dynamic VSD from a hierarchical set of data that represents a flowchart. I don't want/need to fuddle with absolute positioning of these elements - the automatic layout options will work just fine.
The problem is I can't figure out how to perform this command via code. In the UI (Visio 2010), the commands are on the ribbon here: Design (tab) -> Layout (group) -> Re-Layout (SplitButton).
Any of these will do. Looking through the Visio SDK documentation and Googling for a couple days have turned up nothing of very much use.
Any ideas? (using C#, but VB/VBA would do)
The Page.Layout() method itself is not enough.
In the WBSTreeView.sln sample project (VB.Net) I found how to accomplish this, but couldn't post my answer until 8 hours later :-x
The other layout types are possible by looking through the enums used below.
Compact -> DownRight just ended up being better for most of the flows we're creating.
Translated to C#:
// auto-layout, Compact Tree -> Down then Right
var layoutCell = this._page.PageSheet.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowPageLayout,
(short)VisCellIndices.visPLOPlaceStyle);
layoutCell.set_Result(
VisUnitCodes.visPageUnits,
(short)VisCellVals.visPLOPlaceCompactDownRight);
layoutCell = this._page.PageSheet.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowPageLayout,
(short)VisCellIndices.visPLORouteStyle);
layoutCell.set_Result(
VisUnitCodes.visPageUnits,
(short)VisCellVals.visLORouteFlowchartNS);
//// to change page orientation
//layoutCell = this._page.PageSheet.get_CellsSRC(
// (short)VisSectionIndices.visSectionObject,
// (short)VisRowIndices.visRowPrintProperties,
// (short)VisCellIndices.visPrintPropertiesPageOrientation);
//layoutCell.set_Result(
// VisUnitCodes.visPageUnits,
// (short)VisCellVals.visPPOLandscape);
// curved connector lines
layoutCell = this._page.PageSheet.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowPageLayout,
(short)VisCellIndices.visPLOLineRouteExt);
layoutCell.set_Result(
VisUnitCodes.visPageUnits,
(short)VisCellVals.visLORouteExtNURBS);
// perform the layout
this._page.Layout();
// optionally resize the page to fit the space taken by its shapes
this._page.ResizeToFitContents();
//
Changing Connector Line Colors
If you're unfamiliar with how formulas for colors work, this might also be very frustrating. By default you can give an int as a string to get pre-defined colors, but this isn't very helpful because there isn't an easy way to figure out what each of those colors are. (There is a Page.Colors collection, but you have to inspect each of their RGB values and figure out the color from them.)
Instead, you can use your own RGB values for the formula.
private void SetConnectorLineColor(Shape connector, string colorFormula)
{
var cell = connector.get_Cells("LineColor");
cell.Formula = colorFormula;
}
internal static class AnswerColorFormula
{
public static string Green = "RGB(0,200,0)";
public static string Orange = "RGB(255,100,0)";
public static string Yellow = "RGB(255,200,0)";
public static string Red = "RGB(255,5,5)";
}
Call the Layout method on the Page object. If there are shapes selected on this page then this method will only operate on the current selection. You may want to call DeselectAll on the ActiveWindow first.

How to align RIGHT the content of TextArea in LWUIT?

I want to align the text in a TextArea to the right. I tried the following code:
Form form = new Form();
TextArea textArea = new TextArea("Some Arabic text ...");
textArea.setRTL(true);
textArea.setAlignment(RIGHT);
form.addComponent(textArea);
The result was just moving the scroll to left,
But the text is still not aligned RIGHT,
check the image below:
So how to align the content to the RIGHT ?
It may sound crazy for the first instance :) but setting the alignment to TextArea.LEFT solved the issue and now it's RIGHT aligned !
Form form = new Form();
TextArea textArea = new TextArea("Some Arabic text ...");
textArea.setRTL(true);
textArea.setAlignment(TextArea.LEFT);
form.addComponent(textArea);
Setting it to LEFT makes the displayed text RIGHT aligned !
Or by removing the textArea.setRTL(true) which is mirroring the display
Form form = new Form();
TextArea textArea = new TextArea("Some Arabic text ...");
textArea.setAlignment(TextArea.RIGHT);
form.addComponent(textArea);
For those who are interested in more complicated details when it's set to RTL:
the paint method of TextArea class is
public void paint(Graphics g) {
UIManager.getInstance().getLookAndFeel().drawTextArea(g, this);
}
And drawTextArea method in DefaultLookAndFeel is as follows:
int align = ta.getAbsoluteAlignment();
// remaining code is here in initial source
switch(align) {
case Component.RIGHT:
x = ta.getX() + ta.getWidth() - rightPadding - f.stringWidth(displayText);
break;
// remaining code is here in initial source
}
g.drawString(displayText, x, y);
Unfortunately TextArea.RIGHT value is 3
But when calling ta.getAbsoluteAlignment() it returns 1 (despite that the object's alignment is set by code to TextArea.RIGHT !!)
Meanwhile TextArea.Left value is 1
That's why it matched the value in the switch and was aligned to RIGHT
BTW, if you set
textArea.setAlignment(Component.RIGHT);
it will also be wrong, because Component.RIGHT outside the paint method has the value 3 not 1 !
You only have to write 'TextArea.RIGHT' instead of 'RIGHT'
textArea.setAlignment(TextArea.RIGHT);
You can use the following line:
TextArea textArea = new TextArea("Some Arabic text ...");
textArea.setComponentOrientation(ComponentOrientation.RIGHT_TO_LEFT);

Hide the border of the selected cell in qtablewidget in pyqt?

Is there a way i can hide the border of the selected cell(or make the border color as white)in a qtablewidget.. By default a border with dotted line is shown.. Can u help me...
I prefer to do:
ui->tableWidget->setFocusPolicy(Qt::NoFocus);
You can also change the focus policy using the design tab.
It looks like this dotted border around selected cell you're trying to hide is a focus rectangle. Any given cell can have focus and not be selected at the same time and vice-versa. If you want this border to not get painted use an item delegate. There you can remove State_HasFocus style from the item's state before painting it. Pls, see an example below on how to do this, it's c++, let me know if you have troubles converting it to python
// custom item delegate class
class NoFocusDelegate : public QStyledItemDelegate
{
protected:
void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const;
};
void NoFocusDelegate::paint(QPainter* painter, const QStyleOptionViewItem & option, const QModelIndex &index) const
{
QStyleOptionViewItem itemOption(option);
if (itemOption.state & QStyle::State_HasFocus)
itemOption.state = itemOption.state ^ QStyle::State_HasFocus;
QStyledItemDelegate::paint(painter, itemOption, index);
}
...
// set the item delegate to your table widget
ui->tableView->setItemDelegate(new NoFocusDelegate());
hope this helps, regards
Qt::NoFocus will remove the selected state of rows in QTableWidget.
The Python3/PySide2 version to the accepted answer:
class NoFocusDelegate(QtWidgets.QStyledItemDelegate):
def paint(self, painter: PySide2.QtGui.QPainter, option: PySide2.QtWidgets.QStyleOptionViewItem, index: PySide2.QtCore.QModelIndex) -> None:
itemOption = QtWidgets.QStyleOptionViewItem(option)
if option.state & QtWidgets.QStyle.State_HasFocus:
itemOption.state = itemOption.state ^ QtWidgets.QStyle.State_HasFocus
super().paint(painter, itemOption, index)
table.setItemDelegate(NoFocusDelegate())
Worked perfectly for me.

Resources