46 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, 2017

Transcription

1 46 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, FXML and CSS A program intended for interactive use may provide a large number of user interface (UI) components, as shown here: The UI shown above is implemented using Java Swing and all the menu items, buttons, labels, tree views etc. are implemented in procedual code; all items are created, layouted and have functionality associated with them using Java code. The perferred way to build a UI in the context of JavaFX is not to use to procedual code but rather to specify the UI using FXML. FXML features 1 : it is a scriptable, XML-based markup language allows one to construct Java object graphs provides an alternative to using procedural code is ideally suited for defining the UI of a JavaFX program because the hierarchial structure of an XML document mirrors the structure of a scene graph FXML FXML provides elements for representing: class instances properties of class instances static properties define blocks scriptable code In the following we discuss some of the main features of FXML, with the goal of getting a basic understanding of how FXML operates. We will be using an interactive tool called SceneBuilder to create FXML files. 1 This chapter is based on: Introducing FXML - A Markup Language for JavaFX, Greg Brown, 8/15/2011, http: //fxexperience.com/wp-content/uploads/2011/08/introducing-fxml.pdf

2 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, Creating class instances Class instances can be constructed in FXML in several ways: instance declaration by name referencing or copying existing instances, e.g. from included external FXML files For example, a Label object with the text Hello World! can be constructed as follows: <j a v a f x. scene. c o n t r o l. Label t e x t= Hello, World! /> or <?import j a v a f x. scene. c o n t r o l. Label?> <Label t e x t= Hello, World! /> FXML supports more advanced constructs as well. For example, if you want to setup a HashMap and provide some entries, then that can be done as follows: <HashMap peptidea= AVVLPVLVAVAC peptideb= GGGHGHGEEGEC /> This will create a map with two key-value pairs: (peptidea,avvlpvlvavac) and (peptideb,ggghghgeegec). Classes that provide a valueof() method can be inialized as shown in these examples: <S t r i n g f x : value= Hello, World! /> <Double f x : value= 1. 0 /> <Boolean f x : value= f a l s e /> FXML supports the use of factories and builders to setup instances of classes. For example, the following produces a color object: <Color red= 1. 0 green= 0. 0 blue= 0. 0 /> Properties If an element represents a property setter, the contents of the element (which must be either a text node or a nested class instance element) are passed as the value to the setter for the property, like this: <?import j a v a f x. scene. c o n t r o l. Label?> <Label> <text >Hello, World!</ text > </Label> This has the same effect as the construct reported above: <?import j a v a f x. scene. c o n t r o l. Label?> <Label t e x t= Hello, World! /> FXML uses type coercion to convert property values to the appropriate type as needed. This is required because XML only supports elements, text and attributes with text values. However, Java supports a number of different data types including built- in primitive value types as well as extensible reference types. For example, based on type coercion, this works as intended: <Rectangle x= 10 y= 10 width= 320 h e i g h t= 240 f i l l = #f f /> The result is a Rectangle object with the given dimensions and fill color. FXML provides a mechanism for adding elements to a list, for example, this adds children to a group:

3 48 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, 2017 <Group> <Rectangle f x : i d= r e c t a n g l e x= 10 y= 10 width= 320 h e i g h t= 240 f i l l = #f f />... </Group> Static properties Static properties are usually defined by some other class (often, the parent container of a control). For example, when using a grid pane in procedural code, you may want to do something like this: GridPane gridpane = new GridPane ( ) ; Label label = new Label ( ) ; label. settext ( My Label ) ; GridPane. setrowindex ( label, 0 ) ; GridPane. setcolumnindex ( label, 0 ) ; gridpane. g e t C h i l d r e n ( ). add ( label ) ; This can be expressed like this in FXML: <GridPane> <Label t e x t= My Label > <GridPane. rowindex >0</GridPane. rowindex> <GridPane. columnindex >0</GridPane. columnindex> </Label> </GridPane> Define blocks FXML allows one to create objects that exist outside of the object hierarchy and need to be referred to. For example, recall that a ToggleGroup object is required to link a set of radio buttons. This shows how to do this: <VBox> <f x : d e f i n e > <ToggleGroup f x : i d= mytogglegroup /> </f x : d e f i n e > <RadioButton t e x t= A togglegroup= $mytogglegroup /> <RadioButton t e x t= B togglegroup= $mytogglegroup /> <RadioButton t e x t= C togglegroup= $mytogglegroup /> </VBox> Referencing elements How to reference the toggle group in the previous example? An FXML document defines a variable namespace in which elements can be uniquelly named and identified. Assigning an fx:id value to an element creates a variable that can later be referenced. Above, we use fx:id="mytogglegroup" to setup a name for the toggle group and then use "$mytogglegroup" to reference it. The $ is known as the variable resolution operator.

4 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, Additionally, if the corresponding object s type has an id property, then the value will be passed to the objects setid() method Binding expressions FXML allows one to setup bindings between properties of different controls. For example, the following binds the text property of a label to the text property of a TextInput object: <TextInput f x : i d= t e x t I n p u t /> <Label t e x t= ${ t e x t I n p u t. t e x t /> To distinguish a binding from a simple setting of the property, the variable name must be enclosed by curly brackets (after the variable resolution operator $) Event handling We can add behaviors to elements by defining event handlers for any class that defines a seton<event>() method. Similarly, we can setup listeners for property changes. There are two ways to do this: A script event handler defines the functionality in the FXML file using a scripting language. A controller event handler is provided by the Java controller class (discussed below) associated with the FXML document and the functionality is implemented in Java. Here is an example of functionality implemented in JavaScript: <?language j a v a s c r i p t?>... <VBox> <Button t e x t= C l i c k Me! onaction= java. lang. System. out. p r i n t l n ( You c l i c k e d me! ) ; /> </VBox> The script part of this construct can be placed in a separate file (called clickme.js, say), to keep the code separate from the markup for better readability. For more complex functionality, it is preferable to implement this in your Java program. The attribute fx:controller allows one to associate a controller class with an FXML document. This class implements the code that corresponds to the object hierarchy defined in the FXML document. Here is a simple example of a controller class: package mypackage ; public class MyController { public void handlebuttonaction ( ActionEvent event ) { System. out. p r i n t l n ( You c l i c k e d me! ) ; This is how to reference this in FXML: <VBox f x : c o n t r o l l e r= mypackage. MyController xmlns : f x= http : / / j a v a f x. com/ fxml > <Button t e x t= C l i c k Me! onaction= #handlebuttonaction /> </VBox>

5 50 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, 2017 Clicking on the button will cause the Java method handlebuttonaction(event) to be called and the text You clicked me! to be written to the console The controller class While the previous example does work, in practice there are two additional issues to discuss. First, the controller class should implement the interface javafx.fxml.initializable and provide a method with this signature: public void i n i t i a l i z e (URL l o c a t i o n, Resources r e s o u r c e s ) ; This method gets called once the FXML document has been parsed and allows the program to initialize stuff. This is useful in the context of instance variable injection. For example, consider this FXML code: <VBox f x : c o n t r o l l e r= mypackage. MyController xmlns : f x= http : / / j a v a f x. com/ fxml > <Button f x : i d= button t e x t= C l i c k Me! /> </VBox> Here, an identifier fx:id=button is assigned to the button and it can be used in the controller class to access the button. If the controller class contains a Button member field called button and when the controller is constructed by the FXML loader, then a reference to the button is injected into the variable. This allows the following code to work: package mypackage ; public class MyController implements I n i t i a l i z a b l e { public Button button ; // w i l l g e t i n j e c t e d public void i n i t i a l i z e (URL l o c a t i o n, Resources r e s o u r c e s ) button. setonaction (new EventHandler<ActionEvent >() { public void handle ( ActionEvent event ) { System. out. p r i n t l n ( You c l i c k e d me! ) ; ) ; In this example, the button must be declared as a public member field to allow injection. However, we generally do not want to allow direct access to member fields. (This is the second issue.) To allow injection into private member fields, one can use the FXML annotation: package mypackage ; public class MyController implements I n i t i a l i z a b l e private Button button ; public void i n i t i a l i z e (URL l o c a t i o n, Resources r e s o u r c e s ) button. setonaction (new EventHandler<ActionEvent >() { public void handle ( ActionEvent event ) { System. out. p r i n t l n ( You c l i c k e d me! ) ; ) ;

6 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, Here is an example that shows how the FXML file is loaded and how one can access the corresponding controller object. Note that in this example all three files are contained in the same package: public class BlastProgram extends A p p l i c a t i o n { public void s t a r t ( Stage primarystage ) throws Exception { FXMLLoader fxmlloader=new FXMLLoader ( ) ; Parent r o o t ; try ( InputStream i n s=g e t C l a s s ( ). getresource ( BlastProgram. fxml ). openstream ( ) ) { r o o t=fxmlloader. load ( i n s ) ; B l a s t C o n t r o l l e r b l a s t C o n t r o l l e r=fxmlloader. g e t C o n t r o l l e r ( ) ; // can do something with t h e c o n t r o l l e r here... primarystage. s e t S c e n e (new Scene ( root, 8 0 0, ) ) ; primarystage. s e t T i t l e ( NCBI B l a s t C l i e n t ) ; primarystage. show ( ) ; 11.2 SceneBuilder For the project, please use the program SceneBuilder to design your UI. You should use one FXML file per window or complex dialog. In the Model-View-Presenter pattern, your FXML files can be considered part of the View, whereas your controller classes are part of the Presenter (or Controller in MVC). Please name files so that it is clear how they belong together. For example, if you are writing a program for viewing PDB files and the main program is implemented in PDBViewer.java, then the FXML file defining the main GUI should be called PDBViewer.fxml and the controller program should be called PDBViewerController.java. Once you have an FXML file in your source tree and you have setup SceneBuilder correctly, then Intellij will let you launch the program directly like this: SceneBuilder is an interactive program for setting up your UI. It produces an FXML file as discussed above. This is what a simple project might look like in SceneBuilder:

7 52 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, 2017 Stuff to add Contains Controls Menu items Shapes etc Hierarchy Set controller here Editable layout Properties layout fx:id etc of individual controls This is how you define the fx:id for an element (in this case, the apply button). Select the item in the left hand hierachical view, or in the center layout, and then use the bottom right panel to set the variable: The Show Preview in Window menu item allows you to test your UI: The Show Sample Controller Skeleton menu item allows you to preview and copy the basic structure of the controller file that should be associated with this FXML file:

8 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, CSS What is CSS (Cascading Style Sheets)? 2 A language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of displays. It is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. Similar is true for seperation between programming logic, FXML and CSS. Allows separation of structure and content from presentation. CSS can be used to determine the presentation of nodes in the JavaFX scene graph. There are three issues to discuss: How to select nodes for styling? What properties do nodes have for styling? How to actually apply styling to the selected nodes? This is the general syntax of CSS:.my-button { color:blue; font-size:12px... selector prop:value prop:value The selector defines the set of elements to which the style should be applied, whereas the property-value pairs define the properties and their values. One can select nodes by their type; use the Java method gettypeselector() to obtain the type selector of a node. Each node in the scene-graph has a styleclass property. This is analogous to the class=... attribute used in HTML and can be used to select by class. Each node in the scene-graph has a string id and this can be used by id selectors. We won t look at this in detail, but here are some examples: 2 Source:

9 54 Advanced Java for Bioinformatics, WS 17/18, D. Huson, December 21, r o o t { fx font s i z e : 16 pt ; fx font f a m i l y : Courier New ; fx base : rgb (132, 145, 4 7 ) ; fx background : rgb (225, 228, ) ; Here the selector is the root node of the scene graph and this style is applied to all nodes in the graph. This code sets the color of a check box that has focus to golden:. check box : f o c u s e d { fx c o l o r : golden ; This is one way to use selection by id: Button buttonfont = new Button ( Font ) ; buttonfont. s e t I d ( font button ) ; We can now specify some CSS for this specific id: #f ont button { fx f o n t : bold i t a l i c 20 pt A r i a l ; fx e f f e c t : dropshadow ( one pass box, black, 8, 0. 0, 2, 0 ) ; A CSS file can be loaded into a scene like this: scene. g e t S t y l e s h e e t s ( ). add ( path / mystyle. c s s ) ; CSS styling elements can be applied in Java code like this: Button abutton = new Button ( Color ) ; abutton. s e t S t y l e ( fx background c o l o r : s l a t e b l u e ; fx text f i l l : white ; ) ; The SceneBuilder program allows one to define CSS for nodes in the FXML file. For each Node, there are many different properties that can be styled using CSS, see the documentation for details: html Here is an example of a styled dialog: