java fx: combining texts and images(icons) in a sentence(Label) - java

Is it possible to embed an image within a label in between 2 words using Javafx.
I know its possible to add image at the left, right and middle.
Is it possible to embed within words? If not is there any other way to do it?
For Example I will have a page where I display the message:
Please select the flowers button (flowers image here) to go to flowers section

You can use TextFlow for that.
Like this:
Text text1 = new Text("word 1");
Text text2 = new Text("word 2");
ImageView imageView = new ImageView(
new Image(getClass().getResource("smile.png").toExternalForm())
);
TextFlow textFlow = new TextFlow(text1, imageView, text2);

Related

How to create array of Panes in JavaFX(or how to control multiple similar panes)

I have a Pane that includes label1, label2, label3 and a icon(pane with image). I duplicated that Pane and now i have 10 Pane 5 at left 5 at right and i named every item different for Pane(like left1label1,left2label1,right2label3)but i don't want to use different method for every single Pane.
I tried to create an array of panes but couldn't figure it out. All i want is easy way to manage this Panes. How should i do it?
public void leftPane1Config()
{
leftPane1Label1.setText("Object");
leftPane1Label2.setText("HP:"+ hp);
leftPane1Label3.setText("EXP:"+ exp);
Image img= new Image("directory");
leftPane1Icon.setEffect(new ImageInput(img));
}
public void leftPane2Config()
{
leftPane2Label1.setText("Object");
leftPane2Label2.setText("HP:"+ hp);
leftPane2Label3.setText("EXP:"+ exp);
Image img= new Image("directory");
leftPane2Icon.setEffect(new ImageInput(img));
}
.
.And 8 other
.
I have tried to use something like this (trying to create an hierarchy but i couldn't make it :') ) but i couldn't use setText() so it didn't work.
leftPane1.getChildren().add(leftPane1Label1);
leftPane1.getChildren().get(0).setText??
Then i tried to use something like this
Pane[] leftPane= new Pane[5];
leftPane[0]= new Pane();
and again i couldn't figure it out.
It's not really clear what you're asking. Typically you would just write a method to create the panes and parameterize the parts the vary, in the usual way you do in any kind of programming.
public Pane createPane(String text1, String text2, String text3, URL image) {
Image img = new Image(image.toExternalForm());
// whatever layout you need here
VBox pane = new VBox(
new Label(text1),
new Label(text2),
new Label(text3),
new ImageView(img)
);
// any other stuff you need to do
return pane ;
}
And then of course you just call createPane() with the values you need and add the result to your scene graph however you need.

How to align imageViews which are created dynamically inside a class and not the xml file

My Problem: I want to create a for loop in the onCreate() method to save imageViews dynamically. I am being able to do everything properly it's just that the imageView is displayed at the top left most corner, i.e i am not being able to assign it it's alignment.
My Code:
RelativeLayout layout = findViewById(R.id.relativeLayout);
for(int i=0;i<3;i++)
{
ImageView image = new ImageView(this);
image.setMaxHeight(200);
image.setMaxWidth(200);
//CODE TO ADD THE ALIGNMENT OF THE IMAGE
image.setImageResource(R.drawable.red);
layout.addView(image);
}
Try this one:
for(int i=0;i<3;i++)
{
ImageView image = new ImageView(this);
image.setMaxHeight(200);
image.setMaxWidth(200);
//CODE TO ADD THE ALIGNMENT OF THE IMAGE
image.setImageResource(R.drawable.red);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.MarginLayoutParams.MATCH_PARENT, 200);
layoutParams.setMargins(40, 40, 40, 40);
image.setLayoutParams(layoutParams);
layout.addView(image);
}
The legal values can be found at https://developer.android.com/reference/android/view/View.html#setTextAlignment(int)
But this has no effect on an ImageView. I'm not sure what you're actually truing to do, so I can't help you. My best guess is you're trying to arrange views within the parent layout somehow, but to help with that we'd need to know the type of layout the parent is and what you want to do.

Android rich text Mark Down

I'm looking for a library or optimized examples on using
Mark Down to create Rich Text.
For example, something to turn:
1 - *Bold* -> Bold
2 - _Italic_ -> Italic
Long example:
3 - _Hello_ *World* -> Hello World
And so on.
I've seen many apps use it, like Discord, Whatsapp, Skype.
I've done something similar, but I know it's not optimized and can lead to runtime errors.
You don't need any extra library...
Just have a look into android.text.SpannableStringBuilder...
This will allow you to get text features like:
Make it larger
Bold
Underline
Italicize
Strike-through
Colored
Highlighted
Show as superscript
Show as subscript
Show as a link
Make it clickable.
Here you have an example on how to apply a Bold style on a word in a TextView :
String text = "This is an example with a Bold word...";
// Initialize a new SpannableStringBuilder instance
SpannableStringBuilder strb = new SpannableStringBuilder(text);
// Initialize a new StyleSpan to display bold text
StyleSpan bSpan = new StyleSpan(Typeface.BOLD);
// The index where to start applying the Bold Span
int idx = text.indexOf("Bold");
strb.setSpan(
bSpan, // Span to add
idx, // Start of the span
idx + 4, // End of the span
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
);
// Display the spannable text to yourTextView
yourTextView.setText(ssBuilder);
SpannableStringBuilder str = new SpannableStringBuilder("Your awesome text");
str.setSpan(new android.text.style.StyleSpan(android.graphics.Typeface.BOLD), start_int, end_int, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
TextView tv=new TextView(context);
tv.setText(str);
I think you have to look for library that support mark down
https://github.com/tiagohm/MarkdownView
https://github.com/noties/Markwon
https://github.com/IonicaBizau/medium-editor-markdown

Layout of elements inside of HBox for JavaFX

I want to loop through each object of a list. For each entry I want to create a GUI object that looks like this:
A checkbox on the left
An image in the center
(later) A label on the left
My problem is, that each label has a different length and it looks rather strange if not all pictures are on the same line (as seen vertically). Is there a possibility by either java or css to align the ImageVew in center of the HBox?
imageView.setLayoutX(filterBox.getWidth()/2); didn't do the trick unfortunatly. And no -fx-align: right; or -fx-float: right; seems to be existing.
I included what I have so far.
VBox filtersBox = new VBox();
HBox filterBox;
for(Filter filter : filters.getFilters()){
if(!filter.isComplex()){
filterBox = new HBox();
filterBox.getStyleClass().add("filter");
ImageView imageView = new ImageView();
[image view stuff]
final CheckBox cbox = new CheckBox(filter.getName().toString());
filterBox.getChildren().addAll(cbox, imageView);
filtersBox.getChildren().addAll(filterBox);
}
}
As far as I'm aware, this is impossible.
I see two ways you can achieve this layout, though:
Have all the checkboxes have the same (constant) preferred width. This way your image views should line up.
Use a GridPane, and add rows instead of HBoxes

JavaFX Button with multiple text lines

I need to create a toolbar in my screen that will have multiple buttons, and each button must have multiple lines of Text. For example:
I looked over the internet and StackOverflow but I couldn't find anything showing how to do this in JavaFX. I'm using JavaFX 8.
Someone could help me, please?
Tks
Also you can use the wrapTextProperty. But you have to set toolbar height greater than expected button height.
Button btn = new Button();
btn.wrapTextProperty().setValue(true);
// or btn.setWrapText(true);
btn.setText("Some looooooooooooong text");
Or if you want to determine exactly where the line should be wrapped, you can go this way:
Button btn = new Button();
btn.setText("Line1\n Line2\n Line3");
Last way will work without changing toolbar height.
I resolved this problem including a VBox inside my button, and then including several Labels inside the VBox. Like this:
The result is:
If there is a more elegant way to have the same result, please, let me know.
Thank you.
In the button text property select "switch to multi-line mode
"
From sobolev's response, you can do:
Button btn = new Button();
btn.setText("Line1\n Line2\n Line3");
button.textAlignmentProperty().set(TextAlignment.CENTER);
This will create 3 lines of text and allign them in the center of your button.
My solution is pretty much the same as the one given by the OP, but instead of Label uses Text so it's more flexible to changes in the size of the button, as it will use as many lines as needed. If required, also one can set a wrapping width, to define a width constraint.
#Override
public void start(Stage primaryStage) {
Button btn = new Button();
ImageView imageView = new ImageView(new Image(getClass().getResource(<image>).toExternalForm()));
Text text=new Text("Some long text that may be line wrapped");
text.setWrappingWidth(100);
VBox vBox = new VBox(5, imageView,text);
vBox.setAlignment(Pos.CENTER);
btn.setGraphic(vBox);
btn.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
Scene scene = new Scene(new StackPane(btn), 300, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
Label label= new Label("your long text here");
label.setStyle("-fx-max-width : 180px);
label.setWrapText(true);

Categories