Programmatically display a message next to text field in JavaFX - javafx-2

I have a TextField in my JavaFX application. I want to programmatically display a message on the right side of the text (like the validation message). I thought of using Popup and setting the Label with message in that Popup. But I'm not sure how I can position this to the right side of the text field. Below is the sample code for this. Can you please help me with this?
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX Welcome");
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("Password:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
Label label=new Label();
label.setText("This is an error message");
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
final Popup popup = new Popup();
popup.getContent().add(label);
//Want to display this popup to the right of the userTextField.
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
}

After showing the stage, do
Bounds userTextFieldBounds = userTextField.getBoundsInLocal();
Point2D popupLocation = userTextField.localToScreen(userTextFieldBounds.getMaxX(), userTextFieldBounds.getMinY());
popup.show(userTextField, popupLocation.getX(), popupLocation.getY());
The localToScreen(...) method was introduced in Java 8; if you are in an earlier version you will need
Bounds userTextFieldBounds = userTextField.getBoundsInLocal();
Point2D popupLocation = userTextField.localToScene(userTextFieldBounds.getMaxX(), userTextFieldBounds.getMinY());
popup.show(userTextField,
popupLocation.getX()+scene.getX()+primaryStage.getX(),
popupLocation.getY()+scene.getY()+primaryStage.getY());

Related

Control image placement on JTextPane

I am able to add ImageIcons to a JTextPane, but when I add them they show up in the center of the JTextPane. I can't find a way to control where they are placed on the JTextPane. Can someone please help me with this?
This method is making the JTextPane:
private void loadTextPanel(JPanel contentPane) {
chatLogPanel = new JPanel();
chatLogPanel.setLayout(null);
EmptyBorder eb = new EmptyBorder(new Insets(10, 10, 10, 10));
DefaultStyledDocument document = new DefaultStyledDocument();
chatLog = new JTextPane(document);
chatLog.setEditorKit(new WrapEditorKit());
chatLog.setBorder(eb);
chatLog.setMargin(new Insets(5, 5, 5, 5));
chatLogScrollPane = new JScrollPane(chatLog);
addComponent(chatLogPanel, chatLogScrollPane, 0, 0, 500, 240);
addComponent(contentPane, chatLogPanel, 0, 40, 500, 240);
}
This is the code I'm using to add a string to the Panel:
private static void appendToChatLog(JTextPane tp, String msg, Color c) {
chatLog.setEditable(true);
StyleContext sc = StyleContext.getDefaultStyleContext();
AttributeSet aset = sc.addAttribute(SimpleAttributeSet.EMPTY, StyleConstants.Foreground, c);
aset = sc.addAttribute(aset, StyleConstants.FontFamily, "Lucida Console");
aset = sc.addAttribute(aset, StyleConstants.Alignment, Integer.valueOf(3));
int len = tp.getDocument().getLength();
tp.setCaretPosition(len);
tp.setCharacterAttributes(aset, false);
tp.replaceSelection(msg);
chatLog.setEditable(false);
}
And this is what I'm currently using to add the image to the JTextPane:
BufferedImage image = generateBufferedImage(message.getImage());
Icon icon = new ImageIcon(image);
StyleContext context = new StyleContext();
StyledDocument document = (StyledDocument) chatLog.getDocument();
Style labelStyle = context.getStyle(StyleContext.DEFAULT_STYLE);
JLabel label = new JLabel(icon);
StyleConstants.setComponent(labelStyle, label);
try {
document.insertString(document.getLength(), "Ignored", labelStyle);
} catch (BadLocationException badLocationException) {
badLocationException.printStackTrace();
}
To insert a component to a JTextPane, and display it like a character, use the insertComponent method.
To insert an Icon instead, use the insertIcon method.
Quite intuitive isn't it ;)

JavaFX: setting background color for Text controls

I'm using a TextFlow and some Text items to show a styled text, but i cant find a way to set a simple background color for the Text items.
I can set the fill color and font but it does not have a java method or css property that sets its background color.
Based on this solution, this is a quick implementation of a method to provide background coloring for all the Text nodes within a FlowPane, using CSS and the ability to set a series of paint values separated by commas (as much as Text items) and insets for each one of them:
private FlowPane flow;
private Scene scene;
#Override
public void start(Stage primaryStage) {
Text text0 = new Text("These are several ");
Text text1 = new Text("Text Nodes ");
Text text2 = new Text("wrapped in ");
Text text3 = new Text("a FlowPane");
text0.setFill(Color.WHEAT);
text0.setFont(new Font("Times New Roman", 20));
text1.setFill(Color.WHITE);
text1.setFont(new Font("Verdana", 32));
text2.setFill(Color.WHITESMOKE);
text2.setFont(new Font("Arial", 24));
text3.setFill(Color.WHITESMOKE);
text3.setFont(new Font("Arial", 18));
flow = new FlowPane(text0, text1, text2, text3);
scene = new Scene(flow, 300, 200);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
setBackgroundColors();
flow.needsLayoutProperty().addListener((obs,d,d1)->setBackgroundColors());
}
private void setBackgroundColors(){
final Bounds out = flow.getBoundsInLocal();
final StringBuilder sbColors = new StringBuilder();
final StringBuilder sbInsets = new StringBuilder();
AtomicInteger cont = new AtomicInteger();
flow.getChildrenUnmodifiable().forEach(n->{
sbColors.append("hsb(")
.append((((double)cont.get())/((double)flow.getChildren().size()))*360d)
.append(", 60%, 90%)");
Bounds b = ((Text)n).getBoundsInParent();
sbInsets.append(b.getMinY()).append(" ");
sbInsets.append(Math.min(scene.getWidth(),out.getMaxX())-b.getMaxX()).append(" ");
sbInsets.append(Math.min(scene.getHeight(),out.getMaxY())-b.getMaxY()).append(" ");
sbInsets.append(b.getMinX());
if(cont.getAndIncrement()<flow.getChildren().size()-1){
sbColors.append(", ");
sbInsets.append(", ");
}
});
flow.setStyle("-fx-background-color: "+sbColors.toString()+"; -fx-background-insets: "+sbInsets.toString()+";");
}
This will lead to this:
and after resizing the scene:
EDIT
Based on the OP request of using a TextFlow layout instead of a FlowPane, since Text nodes can be spanned over several lines within a TextFlow, the given solution will no longer be valid, as the bounding box of each text node will overlap others.
As a workaround, we can split the Text nodes in single word Text nodes, while keeping the same background color for those in the same original phrase.
I won't go into the splitting logic, but I will add a list of indices, where each index maps the text node with its index of background color.
private FlowPane flow;
private Scene scene;
private final List<Integer> indices=Arrays.asList(0,0,0,1,1,2,2,3,3);
#Override
public void start(Stage primaryStage) {
List<Text> text0 = Arrays.asList(new Text("These "), new Text("are "), new Text("several "));
List<Text> text1 = Arrays.asList(new Text("Text "), new Text("Nodes "));
List<Text> text2 = Arrays.asList(new Text("wrapped "), new Text("in "));
List<Text> text3 = Arrays.asList(new Text("a "), new Text("FlowPane"));
text0.forEach(t->t.setFill(Color.WHEAT));
text0.forEach(t->t.setFont(new Font("Times New Roman", 20)));
text1.forEach(t->t.setFill(Color.WHITE));
text1.forEach(t->t.setFont(new Font("Verdana", 32)));
text2.forEach(t->t.setFill(Color.WHITESMOKE));
text2.forEach(t->t.setFont(new Font("Arial", 24)));
text3.forEach(t->t.setFill(Color.WHITESMOKE));
text3.forEach(t->t.setFont(new Font("Arial", 18)));
flow = new FlowPane();
flow.getChildren().addAll(text0);
flow.getChildren().addAll(text1);
flow.getChildren().addAll(text2);
flow.getChildren().addAll(text3);
scene = new Scene(flow, 300, 200);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
setBackgroundColors();
flow.needsLayoutProperty().addListener((obs,d,d1)->setBackgroundColors());
}
private void setBackgroundColors(){
final Bounds out = flow.getBoundsInLocal();
final StringBuilder sbColors = new StringBuilder();
final StringBuilder sbInsets = new StringBuilder();
AtomicInteger cont = new AtomicInteger();
flow.getChildrenUnmodifiable().forEach(n->{
sbColors.append("hsb(")
.append((double)indices.get(cont.get())/(double)(indices.get(flow.getChildren().size()-1)+1)*360d)
.append(", 60%, 90%)");
Bounds b = ((Text)n).getBoundsInParent();
sbInsets.append(b.getMinY()).append(" ");
sbInsets.append(Math.min(scene.getWidth(),out.getMaxX())-b.getMaxX()-1).append(" ");
sbInsets.append(Math.min(scene.getHeight(),out.getMaxY())-b.getMaxY()).append(" ");
sbInsets.append(b.getMinX());
if(cont.getAndIncrement()<flow.getChildren().size()-1){
sbColors.append(", ");
sbInsets.append(", ");
}
});
flow.setStyle("-fx-background-color: "+sbColors.toString()+"; -fx-background-insets: "+sbInsets.toString()+";");
}
This FlowPane now behaves as a TextFlow:
There is no background for Text objects. You'd either have to group it with a shape (rectangle, ellipse, etc) and set the color of that shape, or you could put the objects inside a StackPane and set the background color of the StackPane.

Android: Draw a custom view programmatically

I am developing an application in which i am showing a image followed by text followed by image again horizontally in table layout.
I am creating the table layout programmatically as:
for(i = 0; i < arrayList.size(); i++){
/* Find Tablelayout defined in main.xml */
TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
tableLayout.setStretchAllColumns(true);
/* Create a new row to be added. */
TableRow tableRow = new TableRow(this);
tableRow.setId(i);
tableRow.setClickable(true);
tableRow.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
v.setBackgroundColor(Color.GRAY);
}
});
tableRow.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.MATCH_PARENT));
/* Create a Button to be the row-content. */
ImageView imageView1 = new ImageView(this);
if(arrayList.get(i).getImage().equalsIgnoreCase("Y")){
// setImage
}
imageView1.setPadding(5, 5, 5, 5);
imageView1.setLayoutParams(new TableRow.LayoutParams(100, 100));
tableRow.addView(imageView1);
TextView textViewName = new TextView(this);
textViewName.setText(arrayList.get(i).getName());
textViewName.setPadding(5, 5, 5, 5);
textViewName.setGravity(Gravity.CENTER_VERTICAL);
textViewName.setTextSize(15);
textViewName.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.MATCH_PARENT,7));
tableRow.addView(textViewName);
ImageView imageView2 = new ImageView(this);
imageView2.setImageDrawable(getResources().getDrawable(R.drawable.icon));
imageView2.setPadding(25, 25, 25, 25);
imageView2.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.MATCH_PARENT,1));
tableRow.addView(imageView2);
tableLayout.addView(tableRow, new TableLayout.LayoutParams(TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT));
View horizontalLine = new View(this);
horizontalLine.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, 1));
horizontalLine.setBackgroundColor(Color.rgb(50, 50, 50));
tableLayout.addView(horizontalLine);
}
With the help of this i am getting the out put as image 1.
But i need the out put as image 2.
The difference between image 1 and 2 is the red line. I am getting the line with the help of drawing view but that covers whole width. I need a line which is as same as red in image 2. In center and of fix width.
Please suggest me what changes or steps i follow. Need your valuable suggestion.
You can set the color using setBackgroundColor method.
horizontalLine.setBackgroundColor(Color.RED);
Edit :
You can horizontal line of fixed length and in center.
Add the TableRow
Define layout weight for View
Add the View in TableRow
Add the tableRow in Table layout
View horizontalLine = new View(this);
// Set weight
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, 10,0.7f);
horizontalLine.setLayoutParams(params);
TableRow tr = new TableRow(this);
TableLayout.LayoutParams tableRowParams= new TableLayout.LayoutParams
(TableLayout.LayoutParams.MATCH_PARENT,TableLayout.LayoutParams.WRAP_CONTENT);
// Set margin
int leftMargin=20;
int topMargin=2;
int rightMargin=20;
int bottomMargin=2;
tableRowParams.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
tr.setLayoutParams(tableRowParams);
// Add View in tr
tr.addView(horizontalLine);
//Add tr in Table
tableLayout.addView(tr);
You can see the output :
Hope it helps ツ

set up javafx scene with multiple nodes

I am trying to set up my javafx scene, but i have failed miserable.
basically what i am trying to do is as per attached photo.
I have tried to set up a gridpane and then position another gridpane withing it so that I can set up the boxes and labels however this is not working properly.
I do not want to use FXML.
can you guys recommend how to go about this set up.
The JavaFx SceneBuilder is a good tool to create Layouts like the one you want to have. Take a look at the official website. The tool creates a FXML file which you can load in your applications start() method using:
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("application.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
Another resource where you can get familiar with SceneBuilder is the #Java and #OracleLearning channels on Youtube.
This code worked for me in setting up the given arrangement:
GridPane outerPane = new GridPane();
GridPane innerPane1 = new GridPane();
GridPane innerPane2 = new GridPane();
HBox l = new HBox(new Label("Label"));
l.setAlignment(Pos.CENTER);
outerPane.add(l, 1, 1);
innerPane1.add(new Circle(20, Color.LIGHTCORAL), 1, 1);
outerPane.add(innerPane1, 2, 1);
innerPane2.add(new Button("Button"), 1, 1);
innerPane2.add(new Label(" Label"), 2, 1);
innerPane2.add(new Button("Button"), 1, 2);
innerPane2.add(new Label(" Label"), 2, 2);
innerPane2.add(new Button("Button"), 1, 3);
innerPane2.add(new Label(" Label"), 2, 3);
GridPane.setMargin(innerPane2, new Insets(5,5,5,5));
outerPane.add(innerPane2, 1, 2);
outerPane.setAlignment(Pos.CENTER);
Drop any further confusions in the comments :)

Change color title UITable static section

I have two UITable static sections in my application with both different headers.
The color of the header must be changed because the custom background.
How can I do this solution like ( link ) in my MonoTouch application?
Because I use static sections, I don't have a UITableViewSource where I can do stuff in.
My solution (thanks to Krumelur)
[Export("tableView:viewForHeaderInSection:")]
UIView GetViewForHeaderInSecion (UITableView tableview, int section)
{
UIView view = new UIView (new RectangleF (0, 0, 300, 0));
view.BackgroundColor = UIColor.Clear;
UILabel label = new UILabel (new RectangleF (15, 5, 300, 25));
label.BackgroundColor = UIColor.Clear;
label.TextColor = UIColor.White;
label.ShadowColor = UIColor.Black;
label.ShadowOffset = new SizeF(0, 1);
label.Font = UIFont.BoldSystemFontOfSize(18);
if (section == 0) {
label.Text = "First section";
} else {
label.Text = "Second section";
}
view.AddSubview(label);
return view;
}
You'll have to export the missing method in your controller. Something like:
[Export("tableView:viewForHeaderInSection:")]
UIView GetViewForHeaderInSection(UITableView tableview, int section
{
// return your UIView with whatever background color here
}
Note that you cannot change the color of the predefined view but have to return an entire view instead.

Resources