Wentworth Institute Of Technology COMP1050 –Computer .

2y ago
18 Views
3 Downloads
6.80 MB
60 Pages
Last View : 30d ago
Last Download : 3m ago
Upload by : Randy Pettway
Transcription

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyJavaFX BasicsLecture 7JavaFX BasicsFebruary 27, 20171

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyGraphical User Interface So far all our interaction with the user hasbeen via terminal (System.in), commandline arguments (args), and files We now look at the basics of GUIs(pronounced “gooey”) – graphical userinterfaces– Window(s), menus, buttons, etc.JavaFX BasicsFebruary 27, 20172

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyJavaFX JavaFX is a relatively new framework fordeveloping Java GUI programs The JavaFX API is an excellent example ofOOP JavaFX replaces older frameworks– Abstract Window Toolkit (AWT): prone toplatform-specific bugs, original GUI framework– Swing: replaced AWT, now superseded byJavaFXJavaFX BasicsFebruary 27, 20173

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyOlder Java GUIsJavaFX BasicsFebruary 27, 20174

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyJavaFX Features Runs on a desktop or from a Web browser Provides a multi-touch support for touchenabled devices (tablets and smartphones) Has built-in 2D/3D animation support,video and audio playbackJavaFX BasicsFebruary 27, 20175

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyYour First JavaFX Project Create a new project in Eclipse– Name: MyJavaFX Create a new class– MyJavaFX Extend the “Application” class– Include a main methodpublic class MyJavaFX extends Application {public static void main(String[] args) {}}JavaFX BasicsFebruary 27, 20176

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyIncluding JavaFX All JavaFX applications need the JavaFX runtimelibrary (jfxrt.jar) added to the class path (locationjava looks for libraries) In Eclipse 1.2.3.Right-click project, PropertiesJava Build Path - LibrariesAdd External JARs Mac: /Library/Java/JavaVirtualMachines/jdk1.8.X X.jdk/Contents/Home/jre/lib/ext 4.Windows:C:\Program Files\Java\jdk1.8.X X\jre\extOrder and Export - move jfxrt.jar to the top, OKJavaFX BasicsFebruary 27, 20177

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyScreenshots (1)JavaFX BasicsFebruary 27, 20178

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyScreenshots (2)JavaFX BasicsFebruary 27, 20179

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyMy First JavaFX avafx.stage.Stage;public class MyJavaFX extends Application {public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {primaryStage.setTitle("Hello World!");final Button btn new Button();btn.setText("Click Me!");final StackPane root new ge.setScene(new Scene(root, 300, 250));primaryStage.show();}}JavaFX BasicsFebruary 27, 201710

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyPlatform-Independent GUIJavaFX BasicsFebruary 27, 201711

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyBasic Structure of JavaFX1. Extend Application2. launch(args) inmain3. Overridestart(Stage)4. Populate––StageSceneButtonStage (Window):primary default, canhave multipleScene: hierarchicalgraph of nodesJavaFX BasicsFebruary 27, 201712

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyMultiple Windowspublic void start(Stage primaryStage) {Scene scene new Scene(new Button("OK"), 200, e.setScene(scene);primaryStage.show();Stage stage new Stage();stage.setTitle("Second Stage");stage.setScene(new Scene(new Button("New Stage"),100, 100));stage.show();}JavaFX BasicsFebruary 27, 201713

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyUML RelationshipsJavaFX BasicsFebruary 27, 201714

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 ane;javafx.stage.Stage;public class MyJavaFX extends Application {public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) {primaryStage.setTitle("Hello World!");final Button btn new Button();btn.setText("Click Me!");final StackPane root new StackPane(); // Forms the root of the nodes, organize verticallyroot.getChildren().add(btn); // Add the button to the rootprimaryStage.setScene(new Scene(root, 300, 250)); // Place the pane in the sceneprimaryStage.show();}}JavaFX BasicsFebruary 27, 201715

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyAnother Examplepublic void start(Stage primaryStage) {final Circle c new r.WHITE);Pane pane new Pane();pane.getChildren().add(c);Scene scene new Scene(pane, 200, .setScene(scene);primaryStage.show();}JavaFX BasicsFebruary 27, 201716

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyNotes(0,0)(100,100)JavaFX BasicsFebruary 27, 201717

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyResizing the Window :(JavaFX BasicsFebruary 27, 201718

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskySolution 1: No ResizingprimaryStage.setResizable(false);JavaFX BasicsFebruary 27, 201719

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskySolution 2: Property Binding JavaFX introduces a new concept calledproperty binding that enables a targetobject to be bound to a source object If the value in the source object changes, thetarget object is also changed automatically The target object is called a binding object ora binding property and the source object iscalled a bindable object or observable objectJavaFX BasicsFebruary 27, 201720

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyExamplepublic void start(Stage primaryStage) {Pane pane new Pane();final Circle c new Scene scene new Scene(pane, 200, .setScene(scene);primaryStage.show();}JavaFX BasicsFebruary 27, 201721

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyThe Color ClassJavaFX BasicsFebruary 27, 201722

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyExampleRectangle rec1 new Rectangle(5, 5, 50, REEN);rec1.setStrokeWidth(3);Rectangle rec2 new Rectangle(65, 5, 50, 40);rec2.setFill(Color.rgb(91, 127, 255));rec2.setStroke(Color.hsb(40, 0.7, 0.8));rec2.setStrokeWidth(3);JavaFX BasicsFebruary 27, 201723

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyThe Font ClassJavaFX BasicsFebruary 27, 201724

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 idPane grid new GridPane();// setPadding(new Insets(25, 25, 25, 25));Text scenetitle new Text("Howdy :)");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);Scene scene new Scene(grid, 300, w();JavaFX BasicsFebruary 27, 201725

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyThe Image ClassJavaFX BasicsFebruary 27, 201726

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyThe ImageView ClassJavaFX BasicsFebruary 27, 201727

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyExampleprimaryStage.setTitle("Load Image");StackPane sp new StackPane();Image img new lelogo/2x/googlelogo color 272x92dp.png");ImageView imgView new ImageView(img);sp.getChildren().add(imgView);Scene scene new e.show();JavaFX BasicsFebruary 27, 201728

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyThe MediaPlayer ClassJavaFX BasicsFebruary 27, 201729

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyExampleMediaPlayer player;@Overridepublic void start(Stage primaryStage) throws Exception {final Button b new Button("pause");b.setOnAction(new EventHandler ActionEvent () { // more on this later!@Overridepublic void handle(ActionEvent event) {if (player.getStatus() Status.PAUSED) {player.play();b.setText("pause");} else {player.pause();b.setText("play!");}}});final StackPane sp new StackPane();sp.getChildren().add(b);player new MediaPlayer(new ()));player.play();primaryStage.setScene(new Scene(sp));primaryStage.show();}JavaFX BasicsFebruary 27, 201730

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyLayout Panes JavaFX provides many types of panes fororganizing nodes in a container– Pane: base class– FlowPane: row-by-row vertically, or column-bycolumn horizontally– BorderPane: top-right-left-bottom-center– StackPane: stack vertically in the center– GridPane: 2D grid– HBox: single row– VBox: single columnJavaFX BasicsFebruary 27, 201731

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyFlowPaneJavaFX BasicsFebruary 27, 201732

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyBorderPaneJavaFX BasicsFebruary 27, 201733

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyFYI: Code@Overridepublic void start(Stage primaryStage) throws Exception {BorderPane pane new BorderPane();pane.setTop(new CustomPane("Top"));pane.setRight(new CustomPane("Right"));pane.setBottom(new CustomPane("Bottom"));pane.setLeft(new CustomPane("Left"));pane.setCenter(new CustomPane("Center"));Scene scene new ;}class CustomPane extends StackPane {public CustomPane(String title) {getChildren().add(new Label(title));setStyle("-fx-border-color: red");setPadding(new Insets(11.5, 12.5, 13.5, 14.5));}}JavaFX BasicsFebruary 27, 201734

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyHBox and VBoxJavaFX BasicsFebruary 27, 201735

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyShapesJavaFX BasicsFebruary 27, 201736

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyTextJavaFX BasicsFebruary 27, 201737

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyLineJavaFX BasicsFebruary 27, 201738

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyRectangleJavaFX BasicsFebruary 27, 201739

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyCircleJavaFX BasicsFebruary 27, 201740

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyEllipseJavaFX BasicsFebruary 27, 201741

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyArc (1)JavaFX BasicsFebruary 27, 201742

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyArc (2)(a) Negative starting angle –30 andnegative spanning angle –20 –30 –50 –20 20 (b) Negative starting angle –50 and positive spanning angle 20 JavaFX BasicsFebruary 27, 201743

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyPolygon and PolylineJavaFX BasicsFebruary 27, 201744

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 Derbinskye(fx)clipse Provides JavaFX tooling for the Eclipse http://www.eclipse.org/efxclipse/JavaFX BasicsFebruary 27, 201745

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyInstalling e(fx)clipse (1)JavaFX BasicsFebruary 27, 201746

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyInstalling e(fx)clipse (2) Eclipse - Help - Install New SoftwareJavaFX BasicsFebruary 27, 201747

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyInstalling e(fx)clipse (3) Add location ofe(fx)clipse update site ased/2.4.0/siteJavaFX BasicsFebruary 27, 201748

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyInstalling e(fx)clipse (4) Select “e(fx)clipse install” - “e(fx)clipse- IDE”JavaFX BasicsFebruary 27, 201749

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyInstalling e(fx)clipse (5) NextJavaFX BasicsFebruary 27, 201750

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyInstalling e(fx)clipse (6) Agree, FinishJavaFX BasicsFebruary 27, 201751

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyInstalling e(fx)clipse (7) RestartJavaFX BasicsFebruary 27, 201752

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyUsing e(fx)clipse File - New - ProjectJavaFX BasicsFebruary 27, 201753

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskySceneBuilder A Visual Layout Tool for JavaFX Applications Quickly design JavaFX GUI via drag-anddrop components that write an FXML file FXML file can be combined with a Javaproject http://gluonhq.com/products/scene-builder/JavaFX BasicsFebruary 27, 201754

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyUsing SceneBuilder Install In Eclipse - Preferences - JavaFX– Set path to SceneBuilder In Project, New - Other - JavaFX - New FXML Document Right click - Open with SceneBuilderJavaFX BasicsFebruary 27, 201755

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyExampleJavaFX BasicsFebruary 27, 201756

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyCorresponding FXMLJavaFX BasicsFebruary 27, 201757

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyCode@Overridepublic void start(Stage primaryStage) throws Exception {Parent root "));Scene scene new JavaFX BasicsFebruary 27, 201758

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyPotential Issue Update to latest JDK Eclipse Eclipse - Preferences- Java - InstalledJREs Update it to latest JREversionJavaFX BasicsFebruary 27, 201759

Wentworth Institute of TechnologyCOMP1050 – Computer Science II Spring 2017 DerbinskyTake Home Points You have now seen the basics of usingJavaFX for creating graphical userinterfaces (GUIs) Start playing around!– This will be necessary for your project– Install the tool(s) you plan to use More to come: how to respond to events (e.g.user clicks a button)JavaFX BasicsFebruary 27, 201760

Wentworth Institute of Technology COMP1050 –Computer Science II Spring 2017 Derbinsky Including JavaFX All JavaFX applications need the JavaFX runtime library (jfxrt.jar) added to the class path (location java looks for libraries) In Eclipse 1. Right-click project, Properties 2. Java Build P

Related Documents:

1861 Spirit Merchants' Licenses for Wentworth and Hay. . 175 Jan 1861 Deaths at Menindee and at Bagot's station. . 175 1861 Wentworth Meetings concerning and letters of objection against Chief Constable

WENTWORTH BY THE SEA HOTEL & SPA 588 Wentworth Road - New Castle, NH 03854 - 603-422-7322. . Country Sausage Spa Inspired Continental Breakfast Selection of Juices - Orange, Grapefruit, Cranberry, Apple and V-8 Naked Juice and Smoothies Fresh Sliced Seasonal Fruit and Berries

Indian Institute of Technology Roorkee Roorkee IITR* Indian Institute of Technology Mandi Mandi IITMandi Indian Institute of Technology Ropar Ropar IITRPR South Zone Indian Institute of Technology Madras Chennai IITM* Indian Institute of Technology Hyderabad Hyderabad IITH Indian Institute of Technology Palakkad Palakkad IITPKD

cowardice following a navel defeat in the Battle of Ushant to the French in 1 . Elsecar/Wentworth Circular Walk page 2 of 5 1778. Its entasis visibly bulges, due to a height adjustment caused by funding problems after the death of the Marquess 3. Take the right hand of two paths as it crosses a field and continues to climb. Cross the stile, then a further three fields (and stiles). The route .

3 T h A N K Yo U 2011 Independence Chapter Diamond Business Partner Mo r g a n We n t W o rt h, LLC Premier Placement and career alignment Firm www.morganwentworth.com Morgan Wentworth helps your firm to select A people A People Hire A People B People Hire C People We at Morgan Wentworth have had the privilege of

Cook Calumet City SD 155 Wentworth Intermediate School 365 9 97.5% Cook Calumet City SD 155 Wentworth Jr High School 352 2 99.4% Cook Calumet Public SD 132 Burr Oak Academy 355 13 96.3%

SOA 3120 FALL 2017 DR. CHELSEA WENTWORTH Course Policies REQUIREMENTS AND OUT-OF-CLASS WORK In addition to attending class, students at HPU are expected to spend at least 2 hours each week engaged in out-of-class work for every hour of credit ea

1 Introduction Formal ontologies provide a conceptual model of a domain of interest by describing the vocabulary of that domain in terms of a logical language, such as a description logic (DL). To cater for different applications and uses of ontologies, DLs and other ontology languages vary significantly regard-ing expressive power and computational complexity (Baader et al. 2003). For .