JavaFX. Arthur Zaczek. Mar 2015

Transkript

1 Arthur Zaczek Mar 2015

2 1 JavaFX 1.1 JavaFX Einführung in JavaFX Für eclpise (Keppler) FXML FXML is an XML-based language that provides the structure for building a user interface separate from the application logic of your code FXML <GridPane xmlns:fx=" fx:controller="javafx.maincontroller" alignment="top_center" hgap="10" vgap="10" styleclass="pane"> <columnconstraints> <ColumnConstraints prefwidth="100" /> <ColumnConstraints prefwidth="100" /> </columnconstraints> <rowconstraints> <RowConstraints prefheight="75" /> <RowConstraints prefheight="75" /> </rowconstraints> <Button GridPane.columnIndex="0" GridPane.rowIndex="0" maxwidth="infinity" maxheight="infinity" onaction="#onlayouts">layouts</button> <Button GridPane.columnIndex="1" GridPane.rowIndex="0" maxwidth="infinity" maxheight="infinity" onaction="#oncontrols">controls</button> <Button GridPane.columnIndex="0" GridPane.rowIndex="1" text="databinding" maxwidth="infinity" maxheight="infinity" onaction="#ondatabinding" /> <Button GridPane.columnIndex="1" GridPane.rowIndex="1" text="presentationmodel" maxwidth="infinity" maxheight="infinity" /> </GridPane> 1.4 FXML - Layouts BorderPane Hbox/Vbox StackPane GridPane FlowPane TilePane AnchorPane 1

3 1.5 FXML - Controls Einige JavaFX-Controls: <Text styleclass="padding" text="some text" /> <TextField styleclass="padding" text="textbox" /> <ComboBox styleclass="padding" /> <CheckBox styleclass="padding">checkbox</checkbox> <RadioButton styleclass="padding" togglegroup="$mytogglegroup">radiobutton 3</RadioButton> <Button styleclass="padding">button</button> 1.6 DataBinding Sollte Daten mit Controls Controls mit Daten Controls mit Controls verknüpfen, ist aber noch nicht so weit wie WPF Binding wird im Controller definiert. 1.7 Properties Grundlage für das Binding private StringProperty name = new SimpleStringProperty(); public String getname() { return name.get(); public void setname(string name) { this.name.set(name); public final StringProperty nameproperty() { return name; DataBinding - Controller private void applybindings() { vorname.textproperty().bindbidirectional( presentationmodel.vornameproperty()); nachname.textproperty().bindbidirectional( presentationmodel.nachnameproperty()); firmenname.textproperty().bindbidirectional( 2

4 presentationmodel.firmennameproperty()); UID.textProperty().bindBidirectional( presentationmodel.uidproperty()); isfirma.selectedproperty().bind( presentationmodel.isfirmabinding()); disableeditperson.selectedproperty().bind( presentationmodel.disableeditpersonbinding()); disableeditfirma.selectedproperty().bind( presentationmodel.disableeditfirmabinding()); personpane.disableproperty().bind( presentationmodel.disableeditpersonbinding()); firmapane.disableproperty().bind( presentationmodel.disableeditfirmabinding()); 1.9 Presentation Model Represent the state and behavior of the presentation independently of the GUI controls used in the interface Das ist noch nicht implementiert Binding muss von Hand im Controller definiert werden In die PresentationModel Klasse auslagern zahlt sich aus! 1.10 Presentation Model public class PersonModel { private StringProperty vorname = new SimpleStringProperty(); private StringProperty nachname = new SimpleStringProperty(); private StringProperty firmenname = new SimpleStringProperty(); private BooleanBinding isfirma = new BooleanBinding() { protected boolean computevalue() { return!utils.isnullorempty(getfirmenname()); ; private BooleanBinding disableeditperson = new BooleanBinding() { protected boolean computevalue() { return!utils.isnullorempty(getfirmenname()) && Utils.isNullOrEmpty(getVorname()) && Utils.isNullOrEmpty(getNachname()); 3

5 ;... Siehe auch Properties 1.11 Low-Level binding Das Binding kann selbst angepasst werden Bool invertieren Sichtbarkeit Etc Low-Level binding public class LowLevelBindingModel { public LowLevelBindingModel(){ // Listener mit Lambda bool.addlistener((o, oldval, newval) -> { boolinverted.invalidate(); ); private BooleanProperty bool = new SimpleBooleanProperty(); private BooleanBinding boolinverted = new BooleanBinding() { protected boolean computevalue() { return!bool.get(); ; EventHandling Button Controller beinhaltet Programmlogik Steuerung der UI im Presentation Model? Button aktivieren/deaktivieren? 1.14 EventHandling P-Model Im P-Model ist die Implementierung eine State-Machine Speichern erlauben, wenn jeder Validator Ok meldet -> 1 Property, Invalidate() Im Controller muss aktiv, an mehreren Stellen die UI angepasst werden Speichern-Button aktiv setzen, wenn jeder Validator OK meldet, anderenfalls sperren -> Bei jeder Änderung muss evaluiert und gesetzt werden 4

6 P-Model beschreibt Zustände, ein Controller führt aktiv Aktionen aus 1.15 Listen - ListView FXML: <ListView fx:id="list"/> Controller: list.setitems(model.getpersons()); list.setcellfactory(textfieldlistcell.forlistview(new StringConverter<ListDemoModel>() { public String tostring(listdemomodel object) { return String.format("%s (%.1f)", object.getname(), object.getage()); public ListDemoModel fromstring(string string) { return null; )); 1.16 Listen - ListView Presentation Model: private ObservableList<ListDemoModel> persons = FXCollections.observableArrayList(new ListDemoModel("Peter", 35), new ListDemoModel( "Max", 0.75f), new ListDemoModel("Isabella", 32)); public ObservableList<ListDemoModel> getpersons() { return persons; 1.17 Listen - TableView FXML: <TableView fx:id="table"> <columns> <TableColumn text="name"> <cellvaluefactory> <PropertyValueFactory property="name" /> </cellvaluefactory> </TableColumn> <TableColumn text="age"> 5

7 <cellvaluefactory> <PropertyValueFactory property="age" /> </cellvaluefactory> </TableColumn> </columns> </TableView> Controller: table.setitems(model.getpersons()); 1.18 CSS Style kann mittels CSS angegeben werden Lokal oder im Stylesheet Stylesheets können global oder lokal für ein FXML definiert werden CSS Selektoren (sollten) alle funktionieren 1.19 CSS FXML: <VBox xmlns:fx=" styleclass="pane"> <!-- Include stylesheet --> <stylesheets> <URL /> </stylesheets> <Text style="-fx-font-size: 22px;">Font size 22</Text> <Text styleclass="title">title style class</text>... </VBox>.pane { -fx-padding: 25; -fx-spacing: 10; Text.title { -fx-font-size: 2em; -fx-font-weight: bold; 1.20 CSS Globales CSS einbinden im Code Pane root = (Pane)FXMLLoader.load(getClass().getResource("Main.fxml")); Scene scene = new Scene(root,400,400); scene.getstylesheets().add(getclass().getresource("application.css").toexternalform()); primarystage.setscene(scene); primarystage.settitle("swe 2 - JavaFX Samples"); primarystage.show(); 6