Javafx

JavaFX tutorial, Linux, Ubuntu, javafxc, javafx, get started, Free  EBook, PDF

Download and View my book Exploring JavaFX 1.3 An Introductory Tutorial

mirror sites: fileserve  or hotfile

Installation (Linux)

1. Download javafx 1.3 sdk from http://javafx.com/

untar  to some directory ${JAVAFX_HOME}

replace ${JAVAFX_HOME} with the absolute path for directory

2. put this line to your source file: 

          export PATH=${JAVAFX_HOME}/bin:${PATH}

3. verify the installation by running the following two commands:

          javafxc -version
          javafx -version

The above installation assumes that the java jdks has been installed.

Get Started

1. create a file mytest.fx with the following content:

          var mystr:String=”JAVAFX”;

           println(“Hello {mystr} !”);

2. compile the program:   

             javafxc mytest.fx
3. run the program:
             javafx mytest

            Hello JAVAFX !

The above is the development cycle for every program.

Exploring more…

  1. a basic program structure: 001_simple_window.fx
  2. some content on the scene: 002_simple_window_with_content.fx
  3. button:003_button.fx
  4. more buttons: 004_more_button.fx
  5. button event handler: 005_button_event.fx
  6. change text: 006_button_event_change_text.fx
  7. animation: moving the text: 007_moving_text.fx
  8. animation: moving the image: 008_moving_image.fx
  9. play audio: 009_play_audio.fx
  10. play audio with certain controls: 010_play_audio_buttons.fx
  11. O’Canada: play O’Canada, animation of image and text: 011_o_canada.fx
  12. Get serious on Animation. A simple path animation: 012_simple_path_animation.fx
  13. Two path animation: 013_dual_path_animation.fx
  14. Add effects onto object: 014_object_effects.fx
  15. More effects on image: 015_image_effect.fx

Javafx and Database (mysql)…

1. Assume you have mysql installed, and use the following command to find out where the JAR file is:

             sudo find / -name ‘mysql*.jar’ -print

On my machine, I have many mysql*.jar, thus I just chose the following:

            /usr/share/java/mysql-connector-java-5.1.10.jar

2. Compile the program

             javafxc insert_record.fx
3. Execute the program

             javafx -cp /usr/share/java/mysql-connector-java-5.1.10.jar insert_record

Another example : display_table.fx

20 Responses to Javafx

  1. henry416 says:
    October 10, 2011 at 7:41 pm

    The following is my further test drive on the javafx language:

    println(“Define variables…”);
    var valBool:Boolean = true;
    var valByte:Byte = -123;
    var valChar:Character = 65;
    var valDouble:Double = 1.23456789;
    var valFloat:Float = 21.23456789;
    var valInt:Integer = 8;
    var valLong:Long = 123456789;
    var valNum:Number = 1.234;
    var valShort:Short = 1234;
    var valStr:String = “Example Text”;

    println(“valBool = {valBool}”);
    println(“valByte = {valByte}”);
    println(“valChar = {valChar}”);
    println(“valDouble = {valDouble}”);
    println(“valFloat = {valFloat}”);
    println(“valInt = {valInt}”);
    println(“valLong = {valLong}”);
    println(“valNum = {valNum}”);
    println(“valShort = {valShort}”);
    println(“valStr = {valStr}”);

    println(valBool.getClass());
    println(valChar.getClass());
    println(valInt.getClass());

    // type inference

    println(“Type Inference…”);

    var infBool = false;
    var infChar = ‘A’;
    var infInt = 7;

    println(infBool.getClass());
    println(infChar.getClass());
    println(infInt.getClass());

    // arithmetic
    //def defines a constant
    println(“Arithetic”);
    def n1:Number = 1.5;
    def n2:Number =2.0;
    var nAdd = n1+n2;
    var nDiv = n1/n2;
    var nNum = n1.intValue();
    println(“nAdd={nAdd}”);

    nNum *= 2;
    println(“nNum={nNum}”);

    //logical operators
    println(“”);
    println(“Logical operators…”);
    def testVal =99;
    println(“testVal = {testVal}”);
    println(“testVal == 99 is {(testVal == 99)}”);
    println(“testVal != 99 is {(testVal != 99)}”);
    println(“testVal <= 100 is {(testVal <= 100)}");

    // translating and checking types (as, instanceof)

    println("");
    println("Translate types…");

    import java.lang.System;
    var pseudoRnd:Integer = (System.currentTimeMillis() as Integer) mod 1000;
    println("pseudoRnd={pseudoRnd}");

    println("Checking types…");
    var str:java.lang.Object = "A string";
    var inst1 = (str instanceof String);
    var inst2 = (str instanceof java.lang.Boolean);
    println("Is String type={inst1} Is Boolean type={inst2}");

    Reply
  2. henry416 says:
    October 10, 2011 at 7:44 pm

    How to define a function:

    def numOne = 100;
    def numTwo = 2;
    var result;

    add();
    subtract();
    multiply();
    divide();

    function add() {
    result = numOne + numTwo;
    println(“{numOne} + {numTwo} = {result}”);
    }

    function subtract() {
    result = numOne – numTwo;
    println(“{numOne} – {numTwo} = {result}”);
    }

    function multiply() {
    result = numOne * numTwo;
    println(“{numOne} * {numTwo} = {result}”);
    }

    function divide() {
    result = numOne / numTwo;
    println(“{numOne} / {numTwo} = {result}”);

    Reply
  3. henry416 says:
    October 10, 2011 at 7:47 pm

    Passing arguments to function:

    var result;

    add(100,10);
    subtract(50,5);
    multiply(25,4);
    divide(500,2);

    function add(argOne: Integer, argTwo: Integer) {
    result = argOne + argTwo;
    println(“{argOne} + {argTwo} = {result}”);
    }

    function subtract(argOne: Integer, argTwo: Integer) {
    result = argOne – argTwo;
    println(“{argOne} – {argTwo} = {result}”);
    }

    function multiply(argOne: Integer, argTwo: Integer) {
    result = argOne * argTwo;
    println(“{argOne} * {argTwo} = {result}”);
    }

    function divide(argOne: Integer, argTwo: Integer) {
    result = argOne / argTwo;
    println(“{argOne} / {argTwo} = {result}”);
    }

    Reply
  4. henry416 says:
    October 10, 2011 at 7:48 pm

    Accessing arguments in command line:

    var result;

    function run(args : String[]) {

    // Convert Strings to Integers
    def numOne = java.lang.Integer.parseInt(args[0]);
    def numTwo = java.lang.Integer.parseInt(args[1]);

    // Invoke Functions
    add(numOne,numTwo);
    subtract(numOne,numTwo);
    multiply(numOne,numTwo);
    divide(numOne,numTwo);
    }

    function add(argOne: Integer, argTwo: Integer) {
    result = argOne + argTwo;
    println(“{argOne} + {argTwo} = {result}”);
    }

    function subtract(argOne: Integer, argTwo: Integer) {
    result = argOne – argTwo;
    println(“{argOne} – {argTwo} = {result}”);
    }

    function multiply(argOne: Integer, argTwo: Integer) {
    result = argOne * argTwo;
    println(“{argOne} * {argTwo} = {result}”);
    }

    function divide(argOne: Integer, argTwo: Integer) {
    result = argOne / argTwo;
    println(“{argOne} / {argTwo} = {result}”);
    }

    Reply
  5. henry416 says:
    October 10, 2011 at 7:50 pm

    Testing a read only variable:

    var y;
    var x = bind y;
    println(“is x bound ? {isReadOnly(x)}”);
    println(“is y bound ? {isReadOnly(y)}”);

    Reply
  6. henry416 says:
    October 10, 2011 at 8:08 pm

    Now let’s start some object-oriented programming by defining a var referring to an object:
    Address.fx
    ————–
    public class Address {
    public var street: String;
    public var city: String;
    public var state: String;
    public var zip: String;
    }

    Customer.fx
    —————-
    public class Customer {
    public var firstName: String;
    public var lastName: String;
    public var phoneNum: String;
    public var address: Address;

    public function printName() {
    println(“Name: {firstName} {lastName}”);
    }

    public function printPhoneNum(){
    println(“Phone: {phoneNum}”);
    }

    public function printAddress(){
    println(“Street: {address.street}”);
    println(“City: {address.city}”);
    println(“State: {address.state}”);
    println(“Zip: {address.zip}”);
    }
    }

    myobjecttest.fx
    ————-
    var customer = Customer {
    firstName: “John”;
    lastName: “Doe”;
    phoneNum: “(408) 555-0101”
    address: Address {
    street: “1 Main Street”;
    city: “Santa Clara”;
    state: “CA”;
    zip: “95050”;
    }
    }

    customer.printName();
    customer.printPhoneNum();
    customer.printAddress();

    How to compile and run
    ——————————-
    javafxc Address.fx
    javafxc Customer.fx
    javafxc -cp . myobjecttest.fx
    javafx -cp . myobjecttest

    Reply
  7. henry416 says:
    October 10, 2011 at 8:19 pm

    var s1 = ‘Hello’;
    var s2 = “Hello”;

    def name = ‘Joe’;
    var s = “Hello {name}”; // s = ‘Hello Joe’

    def answer = true;
    var s = “The answer is {if (answer) “Yes” else “No”}”; // s = ‘The answer is Yes’

    def one = “This example “;
    def two = “joins two strings.”;
    def three = “{one}{two}”; // join string one and string two
    println(three); // ‘This example joins two strings.’

    def numOne = 1.0; // compiler will infer Number
    def numTwo = 1; // compiler will infer Integer

    def numOne : Number = 1.0;
    def numTwo : Integer = 1;

    var isAsleep = true;
    if (isAsleep) {
    println(“isAsleep = {isAsleep}”);
    }

    // NULL
    /*
    function checkArg(arg1: Address) {
    if(arg1 == null) {
    println(“I received a null argument.”);
    } else {
    println(“The argument has a value.”);
    }
    }
    */

    //function type
    var myFunc : function(:Object,:Integer):String;

    myFunc = function(obj : Object, k : Integer) { “Here is the Object: {obj}, and the Integer: {k}” }

    println( myFunc(4s, 777) );
    println( myFunc(null, 1234) );

    myFunc = function(obj : Object, k : Integer) { “So!” }

    Reply
  8. henry416 says:
    October 10, 2011 at 8:32 pm

    In addition to the basic data types, the JavaFX Script programming language also provides special data structures called sequences. Sequences represent ordered lists of objects (although sequences themselves are not objects). The objects within a sequence are called items. Sequences are declared with square brackets “[]”, and each item is separated by a comma.

    def weekDays = [“Mon”,”Tue”,”Wed”,”Thu”,”Fri”];
    // or this way
    // def weekDays: String[] = [“Mon”,”Tue”,”Wed”,”Thu”,”Fri”];

    def days = [weekDays, [“Sat”,”Sun”]];
    def nums = [1..100];
    def OneToFive = [1,2,3,4,5];
    def numsGreaterThanTwo = nums[n | n > 2];

    println(days[0]);
    println(days[1]);
    println(days[2]);
    println(days[3]);
    println(days[4]);
    println(days[5]);
    println(days[6]);
    println(sizeof days);

    var mydays = [“Mon”];
    insert “Tue” into mydays;
    insert “Fri” into mydays;
    insert “Sat” into mydays;
    insert “Sun” into mydays;
    insert “Thu” before mydays[2];
    insert “wed” after mydays[1];
    delete “Sun” from mydays;
    delete mydays[0];
    delete mydays;

    var nums1to5 = [1..5];
    nums1to5 = reverse nums1to5; // returns [5, 4, 3, 2, 1]

    def seq1 = [1,2,3,4,5];
    def seq2 = [1,2,3,4,5];
    println(seq1 == seq2);

    def daysagain = [“Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”,”Sun”];
    def weekendagain = daysagain[5..6];
    def weekdaysagain = daysagain[0..<5];
    def weekendagainagain = daysagain[5..];
    def daysagainagain = daysagain[0..<];

    Reply
  9. henry416 says:
    October 10, 2011 at 8:33 pm

    – Unary minus operator; negates a number
    ++ Increment operator; increments a value by 1
    — Decrement operator; decrements a value by 1
    not Logical complement operator; inverts the value of a boolean

    var result = 1; // result is now 1

    result–; // result is now 0
    println(result);

    result++; // result is now 1
    println(result);

    result = -result; // result is now -1
    println(result);

    var success = false;
    println(success); // false
    println(not success); // true

    Reply
  10. henry416 says:
    October 10, 2011 at 8:34 pm

    == equal to
    != not equal to
    > greater than
    >= greater than or equal to
    < less than
    num2); // prints false
    println(num1 >= num2); // prints false
    println(num1 < num2); // prints true
    println(num1 <= num2); // prints true

    Reply
  11. henry416 says:
    October 10, 2011 at 8:34 pm

    def username = “foo”;
    def password = “bar”;

    if ((username == “foo”) and (password == “bar”)) {
    println(“Test 1: username AND password are correct”);
    }

    if ((username == “”) and (password == “bar”)) {
    println(“Test 2: username AND password is correct”);
    }

    if ((username == “foo”) or (password == “bar”)) {
    println(“Test 3: username OR password is correct”);
    }

    if ((username == “”) or (password == “bar”)) {
    println(“Test 4: username OR password is correct”);
    }

    Reply
  12. henry416 says:
    October 10, 2011 at 8:35 pm

    The instanceof operator compares an object to a specified type

    def str1=”Hello”;
    println(str1 instanceof String); // prints true

    def num = 1031;
    println(num instanceof Integer); // prints true

    Reply
  13. henry416 says:
    October 10, 2011 at 8:42 pm

    control flow:
    block.fx
    ———-
    var nums = [5, 7, 3, 9];
    var total = {
    var sum = 0;
    for (a in nums) { sum += a };
    sum;
    }
    println(“Total is {total}.”);

    if.fx
    —–

    def age = 8;
    var ticketPrice;

    if (age < 5 ) {
    ticketPrice = 0;
    } else if (age 65) {
    ticketPrice = 5;
    } else {
    ticketPrice = 10;
    }
    println(“Age: {age} Ticket Price: {ticketPrice} dollars.”);

    range.fx
    ———–
    var nums = [1..10 step 2];
    println(nums);

    for.fx
    ——-
    var days = [“Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”,”Sun”];

    for (day in days) {
    println(day);
    }

    // Resulting sequence squares the values from the original sequence.
    var squares = for (i in [1..10]) i*i;

    // Resulting sequence is [“MON”, “TUE”, “WED”, and so on…]
    var capitalDays = for (day in days) day.toUpperCase();

    while.fx
    ———-
    var count = 0;
    while (count 5) {
    break;
    }

    if (i mod 2 == 0) {
    continue;
    }

    println(i);
    }

    ThrowTryCatchFinally.fx
    ——————————–
    import java.lang.Exception;

    foo();

    println(“The script is now executing as expected… “);

    function foo() {
    var somethingWeird = false;

    if(somethingWeird){
    throw new Exception(“Something weird just happened!”);
    } else {
    println(“We made it through the function.”);
    }
    }

    Reply
  14. henry416 says:
    October 10, 2011 at 8:47 pm

    The most important thing for javafx is BIND!!!!
    basicbind.fx
    —————
    var a = “Hello”;
    var b = bind a;
    println(“a:{a} b:{b}”);
    a = “Good-Bye”;
    println(“a:{a} b:{b}”);

    anotherbind.fx
    ——————–
    var a = 10;
    var b = bind a;
    println(“a:{a} b:{b}”);
    a = 20;
    println(“a:{a} b:{b}”);

    expressionbind.fx
    ———————–
    var a = 10;
    var b = bind (a+10);
    println(“a:{a} b:{b}”);
    a = 20;
    println(“a:{a} b:{b}”);

    objectbind.fx
    —————–
    var myStreet = “1 Main Street”;
    var myCity = “Santa Clara”;
    var myState = “CA”;
    var myZip = “95050”;

    class Address {
    var street: String;
    var city: String;
    var state: String;
    var zip: String;
    }

    def address = Address {
    street: bind myStreet;
    city: myCity;
    state: myState;
    zip: myZip;
    };

    println(“address.street == {address.street}”);
    myStreet = “100 Maple Street”;
    println(“address.street == {address.street}”);

    Reply
  15. henry416 says:
    October 14, 2011 at 9:06 pm

    001_simple_window.fx
    ——————————–
    /*
    * First JavaFX Program to demostrate very basic program structure of javafx1.3
    * Author: https://henry416.wordpress.com
    */
    import javafx.stage.Stage; // Needed for the stage

    // Stage is just a window
    // title, width, height are its attributes
    Stage
    {
    // Sets the title of the window

    title: “Simple Display Window”

    // Sets the width and height of the window

    width: 300
    height: 400
    }

    Reply
  16. henry416 says:
    October 14, 2011 at 9:08 pm

    002_simple_window_with_content.fx
    ————————————————
    /*
    * some content put on the scene
    * Author: https://henry416.wordpress.com
    */
    import javafx.scene.Scene;
    import javafx.scene.text.Font;
    import javafx.scene.text.Text;
    import javafx.stage.Stage;

    Stage {
    // Sets the title of the window

    title: “Simple Display Window”

    // Sets the width and height of the window

    width: 300
    height: 400

    // content => scene, Text, Font, etc.
    scene: Scene {
    content: [
    Text {
    content: “Hello World!”
    x:20
    y:30
    font: Font {
    name: “Sans Serif”
    size: 12
    }
    }
    ]
    }
    }

    Reply
  17. henry416 says:
    October 14, 2011 at 9:12 pm

    003_button.fx
    ——————–

    /*
    * button on the scene
    * Author: https://henry416.wordpress.com
    */
    import javafx.stage.Stage;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.HBox;

    /*
    Here we create the stage of the window
    We set the width and height of the window

    *
    */
    Stage {
    title: “Simple Button”
    width: 250
    height: 200
    /*
    Inside the scene we create a horizontal box layout
    Inside the horizontal box layout we create a button
    The button does nothing if the user clicks on it

    *
    */
    scene: Scene {

    content: [
    HBox{
    // Here we set the position of the button
    layoutX: 60
    layoutY: 50
    // Creating the button
    content:[
    Button{
    text: “Test Button”
    }
    ]
    }
    ]
    }
    }

    Reply
  18. henry416 says:
    October 14, 2011 at 9:14 pm

    004_more_button.fx
    =================

    /*
    * The program demonstrate how to create more than one buttons
    * Then it organize the buttons horizontally with spacing
    * Author: https://henry416.wordpress.com
    * Created on Dec 13, 2009, 10:13:48 PM
    */

    import javafx.stage.Stage;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.HBox;

    Stage
    {
    // Creates the title of the window
    title: “Horizontal Buttons”

    // Create the width and height of the window
    width: 500
    height: 200

    // Inside here we will create three buttons

    scene: Scene
    {
    // Creates a horizontal layout
    content:[

    // Create the position of the buttons and spacing of it
    HBox{

    layoutX: 30
    layoutY: 50
    spacing: 30

    // Creating the buttons
    content: [
    // Creates the first button
    Button {
    text: “First Button”
    },

    // Creates the second button
    Button {
    text: “Second Button”
    },

    // Creates the third button
    Button {
    text: “Third Button”
    }
    ]
    }
    ]
    }

    }

    Reply
  19. henry416 says:
    October 14, 2011 at 9:15 pm

    005_button_event.fx
    ==================
    /*
    * Button event handler.
    * create three buttons Red, Green, and Blue.
    * A click on any of the buttons change the window background color.
    * Author: https://henry416.wordpress.com
    * Created on Dec 13, 2009, 10:25:17 PM
    */

    import javafx.stage.Stage;
    import javafx.scene.Scene;
    import javafx.scene.layout.HBox;
    import javafx.scene.control.Button;
    import javafx.scene.paint.Color;

    Stage
    {
    // Assign white color to the sceneColor
    var sceneColor: Color = Color.WHITE

    // Sets the title, width and height of the window
    title:”Set Background Color”
    width: 300
    height: 250

    // Creating the scene
    scene:Scene
    {
    // Fill the window background with the color white
    fill: bind sceneColor;

    // Creating three buttons using HBox layout
    content:
    [
    HBox
    {
    // Setting the spacing and position of the buttons
    layoutX: 40
    layoutY: 180
    spacing: 30

    content:
    [
    // Creating a red button
    Button {
    text: “Red”
    action: function()
    {
    /*
    If the red button is click
    Assign the color yellow to sceneColor
    Thus, it will change the window background color
    *
    */
    sceneColor = Color.RED
    }
    }
    ,

    // Creating a green button
    Button{
    text:”Green”
    action: function()
    {
    /*
    If the green button is click
    Assign the color blue to sceneColor
    Hence, it will change the background to blue
    *
    */
    sceneColor = Color.GREEN
    }

    }
    ,

    // Creating a blue button
    Button{
    text: “Blue”
    action: function()
    {
    /*
    If the blue button is click
    Assign the color red to sceneColor
    Thus, it will change the background color to red
    *
    */
    sceneColor = Color.BLUE
    }

    }

    ]

    }

    ]

    }

    }

    Reply
  20. henry416 says:
    October 14, 2011 at 9:16 pm

    006_button_event_change_text.fx
    ============================
    /*
    change the color of the text by a click of a button
    * Author: https://henry416.wordpress.com
    */

    import javafx.stage.Stage;
    import javafx.scene.*;
    import javafx.scene.layout.VBox;
    import javafx.scene.paint.Color;
    import javafx.scene.text.*;
    import javafx.scene.control.Button;

    // Assign Text to txt, so txt can hold any text
    var txt: Text;

    // Set Color to pink then assign Color to txtColor
    var txtColor: Color = Color.BLACK;

    Stage
    {
    // Sets the title, width and height of the window
    title: “Change Text Color”
    width: 250
    height: 300

    scene:Scene
    {
    content:
    [

    // Group the text and button together
    Group
    {
    content:
    [
    /*
    Inside here we set the position of the text
    Writes the text to the screen
    Then bind it to txtColor

    *
    */
    txt = Text
    {
    layoutX: 40
    layoutY: 60
    content: “Hello World”
    fill: bind txtColor
    }

    /*
    Inside here we create three buttons
    A click of the button changes the text color
    We also set the position and spacing of the text

    *
    */
    VBox
    {
    layoutX: 80
    layoutY: 100
    spacing: 20

    content:
    [
    Button
    {
    text:”Red”
    action: function()
    {
    txtColor = Color.RED
    }

    }
    ,

    Button
    {
    text:”Green”
    action: function()
    {
    txtColor = Color.GREEN
    }

    }
    ,

    Button
    {
    text:”Blue”
    action: function()
    {
    txtColor = Color.BLUE
    }

    }

    ]
    }

    ]

    }
    ]
    }

    }

    Reply

Leave a comment