JavaFX / Howto embed map in SplitPane - javafx-2

today's question is about embedding a map view into a JavaFX application. I basically followed the instructions on StackOverFlow - embedding google map in JavaFX and Embed OpenLayers with OpenStreetMap, so everything like the *.html file is in place. But there, people are adding the WebView to main Scene. For me, I would like to add the WebView to a SplitPane. ThereFore I prepared the application.fxml file as followed:
<SplitPane id="SplitPane" dividerPositions="0.5" orientation="HORIZONTAL" prefHeight="260.0" prefWidth="850.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<TableView id="tableView1" fx:id="table" prefHeight="263.0" prefWidth="433.0">
<columns>
<TableColumn text="one" /><TableColumn text="two" /><TableColumn text="three" />
</columns>
</TableView>
<AnchorPane prefHeight="200.0" prefWidth="200.0">
<children>
<Region fx:id="webViewRegion" prefHeight="200.0" prefWidth="200.0" />
</children>
</AnchorPane>
</items>
</SplitPane>
The FXML file is loaded by the FXMLLoader when the application is started. In the application controller I get the Region as followed:
#FXML
private Region webViewRegion;
class MyMapView extends Region {
HBox toolbar;
WebView webview = new WebView();
WebEngine webEngine = webview.getEngine();
public MyMapView() {
final URL urlGoogleMaps = getClass().getResource("openstreetmap.html");
webEngine.load(urlGoogleMaps.toExternalForm());
getChildren().add(webview);
}
}
private void load_webView() {
webViewRegion = new MyMapView();
}
For me, now I do not exactly know how to populate the Region with the Webview in a correct way or if there is any better approach?

Related

XAML Binding on UserControl

I currently have a user control
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Mobile.Control.MultiSelect">
<ListView ItemsSource="{Binding ListSource}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<ContentView Padding="10">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Name}" HorizontalOptions="Center" TextColor="White" />
</StackLayout>
</ContentView>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
In the code behind I have
public partial class MultiSelect : StackLayout
{
public MultiSelect()
{
InitializeComponent();
BindingContext = this;
}
public static readonly BindableProperty ListSourceProperty =
BindableProperty.Create<MultiSelect, ObservableCollection<ListItem>>(p => p.ListSource, new ObservableCollection<ListItem>());
public ObservableCollection<ListItem> ListSource
{
get { return (ObservableCollection<ListItem>)GetValue(ListSourceProperty); }
set { SetValue(ListSourceProperty, value); }
}
}
In my XAML page I then have
<control:MultiSelect x:Name="MyMultiSelect" />
The question is, how do I bind something in the BindingContext of the XAML
page to the user control.
In the code behind of the XAML page I have
MyMultiSelect.ListSource = BindingContext.MyList;
and this works well. However I don't want anything in the code behind of my XAML page as it goes against the nice clean MVVM pattern I have going on, where my code behind is otherwise nice, clean and empty.
In XAML I have tried
and quite a few other variants but can't get anything to work.
Try this:
public static readonly BindableProperty ListSourceProperty =
BindableProperty.Create<MultiSelect, ObservableCollection<ListItem>>(p => p.ListSource, new ObservableCollection<ListItem>(), BindingMode.Default, null, (bindable, oldVal,newVal)=>{ (bindable as MultiSelect).LisstSource = newVal;});

Popup goes behind stage only on Mac but not on Windows/Linux in Full Screen

I'm extending javafx.stage.Popup to display a popup message. The entire app works fine on Windows and Ubuntu but on Mac Popups go behind the current stage when the app is full screen. I've tried using z-index,.toFront(), setting owner window and everything. But the popups just never showup! Same problem is with javafx.stage.FileChooser. Since the app must be fullscreen all the time, what is the solution?
EDIT: In another page,the textfield has cursor blinking in fullscreen but does not receive typed keys! And this happens ONLY in full screen! If I lose fullscreen, the textfield recieves typed keys. Quite annoying :( Please suggest if I should file a bug or something
I've figured out workaround for popup but problem persists for DirectoryChooser/FileChooser.
This is the class that extends Popup:
public class PopupDisplay extends Popup
{
String Title=new String("Information");
String Prompt=new String("Prompt Text");
#FXML
private AnchorPane anchorMain;
#FXML
private Label lblTitle=new Label();
#FXML
private Font x1;
#FXML
private Label lblPrompt=new Label();
#FXML
private Button btnOk;
#FXML
private GridPane gridMain;
#FXML
private HBox hboxTitle;
static PopupDisplay instance;
private ColorDxDesktop application;
public void show(Stage stage, String titleKey,String promptKey, Locale enLocale)
{
AnchorPane root;
FXMLLoader loader=new FXMLLoader();
ResourceBundle rb;
Prompt=promptKey;
Title=titleKey;
try
{
loader.setLocation(getClass().getResource("/com/sc/colordx/resources/"));
rb=ResourceBundle.getBundle("com.sc.colordx.resources.lang.Popup",application.getLocale());
loader.setResources(rb);
PopupController.prompt=Prompt;
PopupController.title=Title;
root = (AnchorPane)loader.load(getClass().getResource("/com/sc/colordx/presentation/Popup.fxml").openStream());
getScene().setRoot(root);
PopupController popupController=loader.getController();
Rectangle2D screenBounds = Screen.getPrimary().getVisualBounds();
root.setPrefWidth(application.getStage().getWidth());
root.setPrefHeight(application.getStage().getHeight());
Node n=root.getChildren().get(0);
n.setLayoutX(screenBounds.getWidth()/2.5);
n.setLayoutY((screenBounds.getHeight()/2.5));
//root.toFront();
show(stage);
}
catch (IOException ex)
{
ex.printStackTrace();
}
}
public static PopupDisplay getInstance()
{
return instance;
}
#FXML
private void hide(MouseEvent event)
{
this.hide();
}
public void showInProgress()
{
PopupController.showInProgress();
}
And this is the FXML for Popup:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" fx:id="anchorMain" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1024.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="com.sc.colordx.controller.PopupController">
<children>
<GridPane id="GridPane" fx:id="gridMain" alignment="CENTER" layoutX="309.0" layoutY="330.0" minWidth="400.0" style="-fx-background-color:black;" styleClass="visibleWindow, gridpane, gridpane-boder" vgap="20.0">
<children>
<Label fx:id="lblPrompt" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefWidth="271.0" text="%keyPrompt" textFill="WHITE" textOverrun="CLIP" wrapText="true" GridPane.columnIndex="0" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER">
<font>
<Font name="System Bold" size="14.0" fx:id="x1" />
</font>
<GridPane.margin>
<Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
</GridPane.margin>
</Label>
<HBox id="HBox" fx:id="hboxButtons" alignment="CENTER" spacing="7.0" style="" styleClass="hbox" GridPane.columnIndex="0" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
<children>
<Button fx:id="btnOk" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onMouseClicked="#exitOkay" text="%keyYes" HBox.hgrow="ALWAYS" />
<Button id="btnOk" fx:id="btnCancel" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onMouseClicked="#hide" text="%keyNo" HBox.hgrow="ALWAYS" />
</children>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<stylesheets>
<URL value="#../resources/css/Popup.css" />
</stylesheets>
</HBox>
<ProgressIndicator fx:id="progress" cache="true" cacheHint="QUALITY" progress="0.0" visible="false" GridPane.columnIndex="0" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="300.0" />
</GridPane.margin>
</ProgressIndicator>
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
</columnConstraints>
<padding>
<Insets />
</padding>
<rowConstraints>
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</children>
<stylesheets>
<URL value="#../resources/css/Popup.css" />
</stylesheets>
</AnchorPane>
The same thing I was getting with Popup while running JavaFx application in MAC so what I did was created new Stage (dummy/invisible with height and width = 0) with initStyle(StageStyle.UTILITY); and bind my popup with that. Everytime I need to display popup I use dummyStage.show(); and popup.toFront(); so it will cause a trick to handle my problem in mac.

JavaFx : Set window title in fxml file

I'm just starting to use JavaFx for a new application.
I know how to set the window title in the java code but how to set it in a fxml file ?
Thanks for your help.
Edit :
Here is the code I have
#Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
primaryStage.setTitle(applicationName);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
I just want set the title in Main.fxml.
to set the title of the stage in FXML, you need to construct the stage in FXML, like this:
<?xml version="1.0" encoding="utf-8"?>
<?import javafx.scene.layout.VBox?>
<?import javafx.stage.Stage?>
<?import javafx.scene.Scene?>
<?import javafx.scene.control.Label?>
<Stage title="Some Stage">
<scene>
<Scene>
<VBox xmlns:fx="http://javafx.com/fxml">
<children>
<Label text="John Doe"/>
</children>
</VBox>
</Scene>
</scene>
</Stage>
If you only construct the root element of the scene (in my example, the VBox) via FXML and then put it into a scene afterwards like you do it (which is the common way), then it is impossible to set the title in FXML directly (without code behind).

View FXML code without saving to an file first?

In the JavaFX Scene Builder, is it somehow possible to view the FXML code for the current layout without saving to a file and view the saved file?
right click on the root node in scene builder and then choose copy . and paste it in any text editor.
out put :
<Group id="sb-clipboard" xmlns:fx="http://javafx.com/fxml">
<fx:define>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0">
<children>
<Button id="button1" layoutX="140.0" layoutY="104.0" mnemonicParsing="false" text="Button" />
<RadioButton id="radioButton1" layoutX="283.0" layoutY="172.0" mnemonicParsing="false" text="RadioButton" />
<ToggleButton id="toggleButton1" layoutX="94.0" layoutY="234.0" mnemonicParsing="false" text="ToggleButton" />
</children>
</AnchorPane>
</fx:define>
</Group>

JavaFX How to set max/min window size?

Does setMinSize() work on containers such as GridPane, for example? I have found that in my program GridPane ignores min. size properties while resized manually.
Here is the FXML code:
<GridPane fx:id="gp" prefHeight="134.0" prefWidth="238.0" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication12.SampleController">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
and the controller class
public class SampleController implements Initializable {
#FXML
private GridPane gp;
#Override
public void initialize(URL url, ResourceBundle rb) {
gp.setMaxWidth(700);
gp.setMinSize(200, 200);
}
}
What's wrong here? Should there be some sort of a 'window' max/min size?
I am going to assume that by window, you mean a Stage (which subclasses Window).
The window size can vary from the root container size for the scene. You can think of a window or stage as an independent viewport into the scene which can be sized larger or smaller than the min and max specifications of the scene root.
To set the minimum or maximum size of the Stage, set its minHeight and minWidth or maxHeight and maxWidth properties.
Answers to additional questions
Can the Stage be set to "fit whole display" size?
stage.setFullScreen(true)
But how to make the size as same as we make size by clicking on the title bar?
stage.setMaximized(true)

Resources