Scribd
Upload
62 views17 pages

Lecture 01 - Introduction To UI and JavaFX - Tagged

This document provides an introduction to a module on user interface design and development in JavaFX. The module aims to teach students code quality techniques and user interface design. It will run for 12 weeks and include lectures, labs, and self-guided study. The document defines what a user interface and JavaFX are, compares JavaFX and Java Swing, and outlines the features, requirements, and structure of a JavaFX application. Examples of a login form in both JavaFX and Java Swing are also included.

Uploaded by

fawzan muhammed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
62 views17 pages

Lecture 01 - Introduction To UI and JavaFX - Tagged

This document provides an introduction to a module on user interface design and development in JavaFX. The module aims to teach students code quality techniques and user interface design. It will run for 12 weeks and include lectures, labs, and self-guided study. The document defines what a user interface and JavaFX are, compares JavaFX and Java Swing, and outlines the features, requirements, and structure of a JavaFX application. Examples of a login form in both JavaFX and Java Swing are also included.

Uploaded by

fawzan muhammed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

User Interfaces & Code Quality

Programming Principles 02 - Design

MINOLI DE SILVA – [email protected]


KRISHNAKRIPA JAYAKUMAR – [email protected]
Introduction to the Module
Aims and Objectives
The aim of this module is to provide students with the necessary knowledge in perfecting code
in tried and tested quality techniques and also to learn user interface design and development
in JavaFX.
Teaching and Learning
Duration – 12 weeks
Lecture – 24 hours
Lab – 24 hours (FT) / 12 hours (PT)
Self-Guided – 22 hours
The user interface (UI) is the
What is a point of human-computer
User
Interface? interaction and
communication in a device.
Types of User Interfaces
The two main types of UI are,
• Graphical User Interface (GUI)
• Command Line Interface (CLI)

In addition to those,
Menu-driven Interfaces, Touch Interfaces, Voice UI, Touch UI, Form Based
Interfaces, Natural Language Interfaces
..are also available.
“JavaFX is a Java library that is used
to develop Desktop applications as
What is well as Rich Internet Applications
(RIA). The applications built in
JavaFx? JavaFX, can run on multiple
platforms including Web, Mobile
and Desktops.”
Java GUI Toolkits

AWT
(Abstract
Java Swing JavaFx
Window
Toolkit)
JavaFX vs Java Swing
JavaFX Java Swing
Less components More components

GUI components with advanced look Standard UI components


and feel
Rich new toolkit No new functionality introduced at
present
Supports MVC but not consistent Friendly with MVC
across components
Java Swing Login Form Java FX Login Form
Java Library
FXML
Scene Builder
Web View
Features of Built in UI Components
JavaFX CSS Styling
Canvas API
Integrated Graphics Library
High Performance Media Engine
etc.
Requirements for JavaFX
Prerequisites
Programming knowledge in Java

Software Requirements
JDK – Java Development Toolkit (JavaFX bundled with versions prior to Java 11)
IDE (Integrated Development Environment)
◦ JetBrains IntelliJ IDEA (Recommended)
◦ Eclipse

Scene Builder Application (http://gluonhq.com/products/scene-builder/)


JavaFX
Applicati
on
Structur
e
Stage (javafx.Stage)
 Defines a window of the application
 Top level container of a JavaFX application
 Primary stage is created by the platform itself
Scene (javafx.Scene)
 A scene represents the physical contents of a JavaFX application.
 It contains all the contents of a scene graph.
Node
 Node is a class of javafx.scene package
 Super class of all the nodes
 3 types of nodes
◦ Root Node
◦ Branch Nodes
◦ Leaf Nodes

 A node may include


◦ Geometrical 2D, 3D objects – circle, polygon, rectangle etc.
◦ UI Controls – Button, TextField, TextAre, Label
◦ Containers – Layout Panes such as Anchor Pane, Grid Pane
◦ Media Elements - Audio, Video, Images
Types of Nodes
Root Node
The first Scene Graph is known as the Root Node
Branch Node/Parent Node
Nodes that contain child nodes are known as Branch Nodes
Leaf Node 
Nodes without child nodes are known as Leaf Nodes
Simple GUI
Demonstration
Thank You!

You might also like