Chapter 34 Advanced JavaFX

Slides:



Advertisements
Similar presentations
Tutorial 3 – Creating a Multiple-Page Report
Advertisements

Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Chapter 4 Transforming and Distorting Objects. Objectives Transform objects Offset and outline paths Create compound paths Work with the Pathfinder panel.
Chapter 3 Drawing and Composing an Illustration. Objectives Draw straight lines Draw curved lines Draw elements of an illustration Apply attributes to.
Transforming and Distorting Objects
GUI and Swing, part 2 The illustrated edition. Scroll bars As we have previously seen, a JTextArea has a fixed size, but the amount of text that can be.
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
1 L38 Graphics and Java 2D™ (3). 2 OBJECTIVES In this chapter you will learn:  To understand graphics contexts and graphics objects.  To understand.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
© 2010 Delmar, Cengage Learning Chapter 4 Transforming and Distorting Objects.
© Copyright 1992–2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Chapter 28 - Java Graphics and Java2D Outline 28.1Introduction.
Chapter 28 - Java Graphics and Java2D Outline 28.1Introduction 28.2Graphics Contexts and Graphics Objects 28.3Color Control 28.4Font Control 28.5Drawing.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
XP New Perspectives on Microsoft Word 2002 Tutorial 31 Microsoft Word 2002 Tutorial 3 – Creating a Multiple-Page Report.
Element. The element Used to dynamically draw graphics using javascript. Capable of drawing paths, circles, rectangles, text, and images.
Chapter One An Introduction to Visual Basic 2010 Programming with Microsoft Visual Basic th Edition.
Advanced User Interfaces with Java SD’98 - Session 3206 Ted Faison Faison Computing Inc.
© 2011 Delmar, Cengage Learning Chapter 1 Getting to Know Illustrator.
Working with Objects. Objectives Create an object Transform an object Arrange and lock an object Step and repeat an object Use Live Distribute Use the.
Computer Graphics 2D Transformations. 2 of 74 Contents In today’s lecture we’ll cover the following: –Why transformations –Transformations Translation.
Session 9 Managerial Spreadsheet Modeling -- Prof. Juran1.
Chapter 11: Block References and Attributes. After completing this Chapter, you will be able to use the following features: Create and insert block references.
Introducing Cascading Style Sheets. Cascading Style Sheet Basics  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles.
Swing - 2 Session 13. Swing - 2 / 2 of 38 Objectives (1) Discuss trees and tables Discuss progress bars Discuss MVC architecture Describe menus.
Overview Excel is a spreadsheet, a grid made from columns and rows. It is a software program that can make number manipulation easy and somewhat painless.
© 2011 Delmar, Cengage Learning Chapter 12 Using Clipping Masks, Paths, & Shapes.
Positioning Objects with CSS and Tables
Descriptive Geometry. Introduction  What is Descriptive Geometry? →It is the study of points, lines, and planes in space to determine their locations.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand advanced production methods for web-based digital media.
Jeopardy Angles Parallel Lines Interior/ Exterior Angles Transformation Similar Polygons Q $100 Q $200 Q $300 Q $400 Q $500 Q $100 Q $200 Q $300 Q $400.
1 Pertemuan 10 Using Type Matakuliah: U0344 / DESKTOP 1 Tahun: 2006.
Main characteristics of Vector graphics  Vector graphics provide an elegant way of constructing digital images (diagrams, technical illustration and.
Adobe Illustrator CS Design Professional WITH ILLUSTRATOR GETTING STARTED.
CSS.
Chapter 1: An Introduction to Visual Basic .NET
12 Graphics and Java 2D™.
Drawing Geometric Objects
Java FX: Scene Builder.
Lecture 5 Basic geometric objects
Cascading Style Sheets Boxes
Microsoft Office 2007-Illustrated
Chapter 1: An Introduction to Visual Basic 2015
2D Transformations By: KanwarjeetSingh
2D Transformations with Matrices
Building a User Interface with Forms
Working with Tabs and Tables
Using Cascading Style Sheets Module B: CSS Structure
Modeling 101 For the moment assume that all geometry consists of points, lines and faces Line: A segment between two endpoints Face: A planar area bounded.
Fill and Stroke Stroke is the outline of a shape, text or image.
Line and Character Attributes 2-D Transformation
Chapter 13: Advanced GUIs and Graphics
Chapter 14 JavaFX Basics Dr. Clincy - Lecture.
Computer Application AutoCAD Program
Chapter 5 Curves and Fractals.
Tutorial 3 – Creating a Multiple-Page Report
Graphic Editing Terms Cropping
1.
Transformations and Symmetry
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Otasuke GP-EX! Chapter 1 Menu Screen.
2D - GEOMETRY POSITIONS ON THE GRID TRANSLATIONS REFLECTIONS ROTATIONS
Transforming and Distorting Objects
Chapter 49 Java 2D.
Transforming functions
Chapter 10 Sheet Metal Design
Creating Vectors – Part One
CSS Boxes CS 1150 Fall 2016.
S.JOSEPHINE THERESA, DEPT OF CS, SJC, TRICHY-2
Milestone Review Big Ideas Note Cards.
Balancing Chemical Equations
Presentation transcript:

Chapter 34 Advanced JavaFX

Objectives To specify styles for UI nodes using JavaFX CSS (§34.2). To simplify creating JavaFX nodes using the builder classes (§34.3). To create quadratic curve, cubic curve, and path using the QuadCurve, CubicCurve, and Path classes (§34.4). To translation, rotation, and scaling to perform coordinate transformations for nodes (§34.5). To define a shape’s border using various types of strokes (§34.6). To create menus using the Menu, MenuItem, CheckMenuItem, and RadioMemuItem classes (§34.7). To create context menus using the ContextMenu class (§34.8). To use SplitPane to create adjustable horizontal and vertical panes (§34.9). To create tab panes using the TabPane control (§34.10). To create and display tables using the TableView and TableColumn classes (§34.11).

JavaFX CSS A JavaFX style property is defined with a prefix –fx- to distinquish it from a property in CSS. All the available JavaFX properties are defined in http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html. Listing 34.1 gives an example of a style sheet .

Style Class and Style ID A style sheet uses the style class or style id to define styles. Mutiple style classes can be applied to a single node and a style id to a unique node. The syntax .styleclass defines a style class. The syntax #styleid defines a style id. mystyle.css StyleSheetDemo Run

Builder Classes The builder classes can be used to simplify creating JavaFX nodes. JavaFX provides a builder class for every node. Using the builder class can sometimes simplify coding. It is particularly useful when creating multiple objects of the same type with common properties. BuilderClassDemo Run

QuadCurve A quadratic curve is mathematically defined as a quadratic polynomial. To create a QuadCurve, use its no-arg constructor or the following constructor: QuadCurve(double startX, double startY, double controlX, double controlY, double endX, double endY)

QuadCurve

CubicCurve A cubic curve is mathematically defined as a cubic polynomial. To create a CubicCurve, use its no-arg constructor or the following constructor: CubicCurve(double startX, double startY, double controlX1, double controlY1, double controlX2, double controlY2, double endX, double endY)

CubicCurve CurveDemo Run

Curve Demo CurveDemo Run

Path The Path class models an arbitrary geometric path. A path is constructed by adding path elements into the path. The PathElement is the root class for the path elements MoveTo, HLineTo, VLineTo, LineTo, ArcTo, QuadCurveTo, CubicCurveTo, and ClosePath. PathDemo Run

Path PathDemo Run ClosePath HLineTo VLineTo LineTo CubicCurveTo ArcTo QuadCurveTo PathDemo Run

Coordinate Transformations JavaFX supports coordinate transformations using translation, rotation, and scaling.

Translations You can use the setTranslateX(double x), setTranslateY(double y), and setTranslateZ(double z)methods in the Node class to translate the coordinates for a node. TransitionDemo Run

Rotations You can use the rotate(double theta) method in the Node class to rotate a node by theta degrees from its pivot point clockwise, where theta is a double value in degrees. The pivot point is automatically computed based on the bounds of the node. RotationDemo Run

Scaling You can use the setScaleX(double sx), setScaleY(double sy) , and setScaleY(double sy) methods in the Node class to specify a scaling factor. The node will appear larger or smaller depending on the scaling factor. Scaling alters the coordinate space of the node such that each unit of distance along the axis is multiplied by the scale factor. As with rotation transformations, scaling transformations are applied to enlarge or shrink the node around the pivot point. For a node of the rectangle shape, the pivot point is the center of the rectangle.

Scaling ScaleDemo Run

Strokes

strokeType The setStrokeType(type) method sets a type for the stroke. The type defines whether the stroke is inside, outside, or in the center of the border using the constants StrokeType.INSIDE, StrokeType.CENTERED (default), or StrokeType.OUTSIDE,

strokeLineCap The setStrokeType(type) method sets a type for the stroke. The type defines whether the stroke is inside, outside, or in the center of the border using the constants StrokeType.INSIDE, StrokeType.CENTERED (default), or StrokeType.OUTSIDE,

strokeLineJoin The setStrokeLineJoin method defines the decoration applied where path segments meet. You can specify three types of line join using the constants StrokeLineJoin.MITER (default), StrokeLineJoin.BEVEL, and StrokeLineJoin.ROUND.

strokeDashArray The Shape class has a property named strokeDashArray of the ObservableList<Double> type. This property is used to define a dashed pattern for the stroke. Alternate numbers in the list specify the lengths of the opaque and transparent segments of the dashes.

Stroke Demo StrokeDemo Run

Menu Menus make selection easier and are widely used in window applications. JavaFX provides five classes that implement menus: MenuBar, Menu, MenuItem, CheckMenuItem, and RadioButtonMenuItem. MenuBar is a top-level menu component used to hold the menus. A menu consists of menu items that the user can select (or toggle on or off). A menu item can be an instance of MenuItem, CheckMenuItem, or RadioButtonMenuItem. Menu items can be associated with nodes and keyboard accelerators.

Creating Menus MenuDemo Run

Context Menu A context menu, also known as a popup menu, is like a regular menu, but does not have a menu bar and can float anywhere on the screen. Creating a context menu is similar to creating a regular menu. First, you create an instance of ContextMenu, then you can add MenuItem, CheckMenuItem, and RadioMenuItem to the context menu.

Creating Context Menus ContextMenuDemo Run

SplitPane The SplitPane class can be used to display multiple panes and allow the user to adjust the size of the panes.

Using SplitPane SplitPaneDemo Run

TabPane The TabPane class can be used to display multiple panes with tabs.

The TabPane Class

The Tab Class TabPaneDemo Run

TableView You can display tables using the TableView class. TableViewDemo Run

The TableView Class

The TableColumn Class

Add New Row You can display tables using the TableView class. AddNewRowDemo Run