Bidirectional Binding ImageView to byte[] - javafx

Iam trying to display a image in Imageview which is read from byteArray
Image image= new Image(new ByteArrayInputStream(item.getImageBytes()));
imageview.setImage(image);
this is working fine
but i want to bind image to bytearray something like
imageview.imageProperty().bind(/*No getting anything what to write here*/);
Any help is greatly appreciated.

Assuming you have this:
public class Foo {
private final ObjectProperty<byte[]> imageBytes = new SimpleObjectProperty<>();
// Getters and Setters
}
You can use this:
imageview.imageProperty().bind(
Bindings.createObjectBinding(() -> new Image(new ByteArrayInputStream(item.getImageBytes()))
, item.imageBytesProperty()));

Related

How to Generate Message According to Values in Multiple Fields?

I am building an application using JavaFX. What I am trying to do is generate a message according to the user input values. So there are one text-field and one combo-box and one check-box per row and there are many rows like the following.
Let's say I will generate three different messages according to the user values. So I need to check whether those fields are empty or not and check each field's value to generate a specific message. Checking fields are okay for just three rows like the above. But I have 10 fields. So I have to check each and generate or append my own message. And also if the user checked the check-box need to group all checked row values. So what I am asking is there any good way (best practice) to achieve what I need or an easy one also? I have tried with HashMap and ArrayList. But those are not working for this.
Really appreciate it if anybody can help me. Thanks in advance.
I would probably recommend a custom node that you create on your own like below. This example is not supposed to have the same functionality as your application but just to show how to create and use custom nodes. I kept your idea in mind when creating this example it has your textfield combobox and checkbox and they are a little easier to manage. Give it a run and let me know if you have any questions
public class Main extends Application {
#Override
public void start(Stage stage) {
VBox vBox = new VBox();
vBox.setAlignment(Pos.CENTER);
ArrayList<String> itemList = new ArrayList<>(Arrays.asList("Dog", "Cat", "Turkey"));
ArrayList<HBoxRow> hBoxRowArrayList = new ArrayList<>();
for (int i = 0; i<3; i++) {
HBoxRow hBoxRow = new HBoxRow();
hBoxRow.setComboBoxValues(FXCollections.observableList(itemList));
hBoxRowArrayList.add(hBoxRow);
vBox.getChildren().add(hBoxRow.gethBox());
}
Button printTextfieldsButton = new Button("Print Textfields");
printTextfieldsButton.setOnAction(event -> {
for (HBoxRow hBoxRow : hBoxRowArrayList) {
System.out.println("hBoxRow.getTextFieldInput() = " + hBoxRow.getTextFieldInput());
}
});
vBox.getChildren().add(printTextfieldsButton);
stage.setScene(new Scene(vBox));
stage.show();
}
//Below is the custom Node
public class HBoxRow {
HBox hBox = new HBox();
ComboBox<String> comboBox = new ComboBox<>();
TextField textField = new TextField();
CheckBox checkBox = new CheckBox();
public HBoxRow(){
hBox.setAlignment(Pos.CENTER);
textField.setPrefWidth(150);
comboBox.setPrefWidth(150);
checkBox.setOnAction(event -> {
textField.setDisable(!textField.isDisabled());
comboBox.setDisable(!comboBox.isDisabled());
});
hBox.getChildren().addAll(checkBox, textField, comboBox);
}
public void setComboBoxValues(ObservableList observableList) {
comboBox.setItems(observableList);
}
public HBox gethBox(){
return hBox;
}
public String getTextFieldInput(){
return textField.getText();
}
}
}

Xamarin.Forms - Show Embedded Resource image in listview Template

I have a list view in Xamarin.Forms and I have set ItemTemplate e.g.
listView.ItemTemplate = new DataTemplate(() =>
{
Image img = new Image();
img.SetBinding(Image.SourceProperty, "ImageUrl");
...so on
}
This works if image is stored in the same project but I have moved image to PCL project and set to "Embedded Resource".
I need to state somehting like below but it doesn't work, how can I achieve this so it will bind "embedded resource" to image control in list item.
img.SetBinding(Image.SourceProperty, "ImageSource.FromResource(ImageUrl)");
Thanks
Specify the assembly that the image exists
ImageSource.FromResource("yourNamespace.imageName.png", typeof(className).GetTypeInfo().Assembly))
Created readonly property in model to return ImageSource and it still uses ImageUrl property to return ImageSource and now I just bind to this new readonly property.
//in model
[JsonIgnore]
public ImageSource ImageUrlSource { get { return ImageSource.FromResource(ImageUrl); } }
listView.ItemTemplate = new DataTemplate(() =>
{
Image img = new Image();
img.SetBinding(Image.SourceProperty, "ImageUrlSource");
...so on
}

How change icon .jar imported scene builder

Currently im doing my thesis work, and I'm making a component library with javafx.
But im dealing a problem that I wish I could change the icon that puts the tool scene builder imported .jar.
In Scene Builder 2.0 icons for custom controls from JAR files are set by private Collection<LibraryItem> makeLibraryItems(JarReport jarReport) in the private LibraryItem makeLibraryItem(Path path) function. Currently the source for that function is:
private Collection<LibraryItem> makeLibraryItems(JarReport jarReport) throws IOException {
final List<LibraryItem> result = new ArrayList<>();
final URL iconURL = ImageUtils.getNodeIconURL(null);
final List<String> excludedItems = library.getFilter();
for (JarReportEntry e : jarReport.getEntries()) {
if ((e.getStatus() == JarReportEntry.Status.OK) && e.isNode()) {
// We filter out items listed in the excluded list, based on canonical name of the class.
final String canonicalName = e.getKlass().getCanonicalName();
if (! excludedItems.contains(canonicalName)) {
final String name = e.getKlass().getSimpleName();
final String fxmlText = JarExplorer.makeFxmlText(e.getKlass());
result.add(new LibraryItem(name, UserLibrary.TAG_USER_DEFINED, fxmlText, iconURL, library));
}
}
}
return result;
}
As you can see the iconURL is not based on anything supplied by your control's JAR so it is currently not possible to supply an icon. This would require a change to Scene Builder (this could be done after all it's open source).
I know this question is a bit old, but hopefully this helps somebody.

Show Image Dynamically in ScrollPane JavaFx

I want to add Multiple images in Scollpane by clicking button i try below code but it will not display image any idea about that?
#FXML private void OnClick(ActionEvent ae)
{
getGalleryView();
}
public void getGalleryView()
{
ScrolPane sp=new ScroPane();
Hbox hb=new Hbox();
Image [] images=new Image[5];
ImageView []pics=new ImageView[5];
final String [] imageNames = new String [] {"fw1.jpg", "fw2.jpg",
"fw3.jpg", "fw4.jpg", "fw5.jpg"};
for (int i = 0; i < 5; i++) {
images[i] = new Image(getClass().getResourceAsStream(imageNames[i]));
pics[i] = new ImageView(images[i]);
pics[i].setFitWidth(100);
pics[i].setPreserveRatio(true);
hb.getChildren().add(pics[i]);
sp.setContent(hb);
}
}
You need to add the scrollpane to the scene:
#FXML private void OnClick(ActionEvent ae)
{
getGalleryView(ae);
}
public void getGalleryView(ActionEvent ae)
{
ScrolPane sp=new ScroPane();
Hbox hb=new Hbox();
Image [] images=new Image[5];
ImageView []pics=new ImageView[5];
final String [] imageNames = new String [] {"fw1.jpg", "fw2.jpg",
"fw3.jpg", "fw4.jpg", "fw5.jpg"};
for (int i = 0; i < 5; i++) {
images[i] = new Image(getClass().getResourceAsStream(imageNames[i]));
pics[i] = new ImageView(images[i]);
pics[i].setFitWidth(100);
pics[i].setPreserveRatio(true);
hb.getChildren().add(pics[i]);
sp.setContent(hb);
}
Scene scene = ((Node) ae.getSource()).getScene();
((Pane) scene.getRoot()).getChildren().add(sp);
}
I assumed here that your root node is a Pane or one of its subclasses.
ScrolPane sp=new ScroPane(); error?
EDIT:
I was developing similar method. Mine works fine. You can check if you want to.
private List<String> listFileNames(File folder) throws NullPointerException{
List<String> list = new ArrayList<>();
for (File file : folder.listFiles()) {
if (file.isDirectory())
listFileNames(file);
else {
System.out.println(file.getName());
list.add(file.getName());
}
}
return list;
}
private void insertImages(List<String> list, Hero thisHero) {
int column = 0;
int row = 0;
for (String path:list) {
String fullPath = "file:"+thisHero.getHeroClass().getFile()+"\\"+path;
ToggleButton button = new ToggleButton();
button.setBackground(Background.EMPTY);
button.setGraphic(new ImageView(new Image(fullPath)));
grid.add(button,column,row);
column++;
if (column == 5) {
row++;
column = 0;
}
}
}
I can write more if you want. I use Lists because of it's ease of adding items.
You can use first method to just get all file names to list, from your folder filled with image files.
Second method does the job of making new ImageViews filled with ToggleButtons with graphic. I just changed the concept to buttons, so sorry about my laziness of not changing code to exactly fit your needs.
Path is the exact file name, thisHero.getHeroClass().getFile() returns path to the directory which contains this image.
grid.add(button, column, row) adds this button to the grid pane which i made before. It's my app, so sorry for not sharing all the code, but i thought that this snippet could be usefull.
EDIT2: You could also provide us with error information if there is any.

Custom List Design - Adobe Flex

Been struggling with a Person Search application in Adobe Flex for the Blackberry Playbook over the last few days. Basically I have the following:
Main App with MXML Interface at Bottom
private var persons:ArrayCollection = new ArrayCollection();
public function init():void{
var p1:PersonSummary = new PersonSummary("Joe Smith", "9/9/1987", "img1.jpg");
var p2:PersonSummary = new PersonSummary("Ben Smith", "9/5/1987", "img2.jpg");
var p3:PersonSummary = new PersonSummary("John Doe", "9/9/1967", "img3.jpg");
persons.add(p1);
persons.add(p2);
persons.add(p3);
}
PersonSummary
class PersonSummary{
private var name:String;
private var dob:String;
private var image:String;
public function PersonSummary(n:String,d:String,i:String){
this.name = n;
this.dob = d;
this.image = i;
}
...
}
The interface I'm looking for:
What is the MXML? Ill forever be in the debt of anyone that can solve this problem for me!
Thanks
Phil
A hint to get you on the right lines would be to use an ItemRenderer mxml, which has the details of what you want eg. image display, Name, DOB. You can build that in the interface builder.
Secondly you need a second mxml, which declares a VBOX with a List inside, the list should then bind to your ArrayCollection and each item will be picked up in the item renderer you built for each item in the list.
Sorry it's not a coded example.

Resources