"http://java.sun.com/developer/technicalArticles/scripting/javafx/lc/part1/
Sep 17, 2007
Article
Learning Curve Journals, Part 1: Exploring JavaFX Script
By John O'Conner, August 2007
Articles Index Explore JavaFX Script alongside SDN staff writer and developer John O'Conner, who candidly records his experiences with learning Sun's latest software innovation. This Learning Curve Journal series begins with an introduction to the technology and how to get started using it. JavaFX Script was announced at the 2007 JavaOne Conference in May. The technology is still very new, but Sun Microsystems and the community are making dramatic progress each week. So it is a good time to get involved with the language. It has progressed enough that you can actually download and use it. Several beautiful demo applications exist, showing the possibilities of this language. JavaFX Script is a new scripting language that developers can use to create dynamic graphical content. The language provides libraries to help you use the Swing user interface toolkit and Java 2D APIs conveniently. It doesn't replace either Swing or Java 2D; the goal is to make those APIs more accessible to rich content developers. The language provides both procedural and declarative syntax. You can declaratively create a rich user interface, and then you can add event-handling routines and operations. However, most of us have to start more modestly, and that's the purpose of this article. Its goal is to show you how to get started with JavaFX Script. First, you'll need four things: an up-to-date Java Development Kit access to accurate, up-to-date information the JavaFXPad demo application the JavaFX Script plugins for your integrated development environment (IDE) Setting Up the Java Platform As a developer, you no doubt have a Java SE Development Kit (JDK) on your system. However, if you haven't updated your system in a while, make sure you have either Java SE 5 or Java SE 6. If you use Solaris, Windows, or Linux, you can download the latest JDK from the Java SE Downloads page of the Sun Developer Network. If you use Mac OS X, you can get Apple's latest release of the Java platform development kit directly from their Java section of the Apple Developer Connection. Going to the Source When you experiment with a new environment or language, you're going to hit dead-ends and difficult places. That's part of the deal we all make when we adopt leading-edge technology. However, to smooth the learning curve, good documentation and examples are absolutely critical. Along with the JavaFX Technology hub of the Sun Developer Network, the Project OpenJFX web site provides the latest documentation and demo resources you need to get accurate information. Inevitably, there are holes in the documentation, but people are working hard on filling those holes. So bookmark these two sites in your browser, and refer to them early and often: JavaFX Technology hub, Sun Developer Network Project OpenJFX Some of you will want to start programming immediately, barely reading a word of the language specification. Others of you will read everything you can before actually using JavaFX Script. Even if you're the type that dives in right away, you have to start with some sort of language specification or tutorial. Before you can scribble out the prototypical "Hello, world," example, you need to know some basic language syntax. These documents are the best places to start: The JavaFX Script Programming Language Reference Getting Started with the JavaFX Script Language
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
1 of 19
Using JavaFXPad JavaFXPad is a Java Web Start application that provides a split-pane environment, with a live canvas window above and a simple editor below. As you type script code into the editor, the canvas window shows the interpreted results. It's the fastest, easiest way to experiment with the language when you're just starting out. The user interface shows the immediate results of your code. You're probably not going to use this tool for all your development needs, but it does its job well, which is to provide a quick and easy way to tinker with the scripting language. After you've read at least some of the language specification document, run the JavaFXPad demo. If you've installed the JDK correctly, you should be able to do this from your browser; just click the link. Alternatively, you can always run the command line utility javaws to launch the application. From the command line, just enter the following:
javaws http://download.java.net/general/openjfx/demos/javafxpad.jnlp
If you've successfully launched the application, you should see a window like this:
Figure 1. JavaFXPad Editor The JavaFXPad editor provides basic formatting and code completion. Programmers new to JavaFX Script -- that's all of us -- aren't always sure what the language syntax expects, but code completion helps. Pressing the Ctrl + Space keys activates code completion in the editor.
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
2 of 19
Once you have successfully run JavaFXPad, you can begin experimenting with the language. After clearing the initial demo code, begin your own program. Of course, who can resist starting with "Hello, world!" Type the following into the empty editor window:
import javafx.ui.Label; Label { text: "Hello, world!" }
You'll see the output just above the editor:
Figure 2. Your Basic "Hello, world!" Not impressed? OK, although I'm really just trying to show you how to get set up, I'll stry something a little more interesting. The JavaFX environment implements all of the Swing UI components, so you don't have to limit yourself to a label. You can use other widgets too, like buttons or dialogues. Here's an example that introduces an event handler on a button. Having seen the action and operation syntax from the language specification, let's try to display a message box when you press a button:
import javafx.ui.Button; import javafx.ui.MessageDialog; Button { text: "Press me!" action: operation() { MessageDialog { title: "You pressed me" message: "Hey, don't do that!" visible: true } } }
After typing this into JavaFXPad and pressing the button, you'll see something like this:
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
3 of 19
Figure 3. "Press me!" Button Message JavaFXPad also has "Open" and "Save" file operations, so you don't have to start from a clean slate every time you use the tool. Although JavaFXPad may not be your long-term development editor, it is convenient and simple, perfect to help you get started. Once you feel comfortable with this tool, you can always use the same files in a different editor or even an integrated development environment (IDE). Graduating to an IDE When you do decide to tackle JavaFX Script from your IDE, you'll find plugins for at least two popular tools: NetBeans and Eclipse. The plugins enhance editor- and project-support to include JavaFX Script files. The plugins provide the core libraries for the script engine and its libraries as well. The plugin download instructions on the Project OpenJFX site work well. Use the following links: plugin instructions for NetBeans IDE 5.5 plugin instructions for NetBean IDE 6.0, the next major version of NetBeans plugin instructions for Eclipse 3.2.2 The instructions work for the updated NetBeans IDE 5.5.1 too. I did deviate slightly from the Project OpenJFX instructions; I created a new "JavaFX Script" update center in NetBeans instead of overwriting the existing NetBeans Update Center Beta node. After creating a new update center node, I followed the rest of the instructions exactly. Once you have the update center configured correctly, getting the plugins doesn't take long. Select the Update Center you configured in the instructions, and the Update Center Wizard should eventually present you with the following modules to download: JavaFX JavaFX JavaFX JavaFX Editor UserLibrary Library Projects
The wizard will look like this after it finds the plugins at the Update Center:
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
4 of 19
Figure 4. JavaFX Plugins on Update Center Once NetBeans downloads the modules, the wizard will prompt you to install them. Select the check boxes beside the module names and continue the installation.
Figure 5. Choosing Modules to Install Once you have installed the plugins, you can edit and run script files in your IDE. You have two ways to launch scripts from the IDE: use the net.java.javafx.FXShell class or the script-engine support built into Java SE 6. The IDE plugin sets your project's main class to the FXShell, which is a script launcher provided by the JavaFX libraries. To launch a specific script, you must provide the fully qualified script name as an argument to FXShell. In the NetBeans IDE, you do that by configuring the Run settings in your project properties. The following image shows a Run configuration for launching a script named com.sun.demo.javafx.ui.PressMe defined by the file com/sun/demo/javafx/ui/PressMe.fx in my source directory.
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
5 of 19
Figure 6. PressMe Script Summary When investigating new technology, starting off correctly is important. Make sure you get started with the right information and tools. The best way to do that is to follow this four-step process 1. 2. 3. 4. Get the latest Java SE Development Kit. Use the Project OpenJFX site and JavaFX Technology hub as your information source. Use the JavaFXPad demo to experiment with your first scripts. Get the development plugins for your IDE.
Part 2 of this series to follow.
DISCLAIMER This article contains information provided by Sun "as is," as a courtesy only. Sun disavows any endorsement for the accuracy of such information, and disclaims any and all warranties pertaining thereto, including any warranties of merchantability, fitness for a particular purpose, or non-infringement. Sun shall not be liable for any damages whatsoever arising out of or in connection with the use by anyone of such information. Rate and Review Tell us what you think of the content of this page. Excellent Comments: Good Fair Poor
Your email address (no reply is possible without an address): Sun Privacy Policy Note: We are not able to respond to all submitted comments.
Submit »
copyright © Sun Microsystems, Inc
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
6 of 19
http://java.sun.com/developer/technicalArticles/scripting/javafx/lc/part2/
Sep 17, 2007
Article
Learning Curve Journal, Part 2: Declarative User Interfaces
By John O'Conner, September 2007
Articles Index Having used the Java language to define user interfaces for nearly a decade, my first experiences with JavaFX Script quickly highlighted a major difference between the two environments. Although programmers use procedural code to define the user interface (UI) in the Java language, in JavaFX Script, you can use declarative statements to define the UI. That's a significant difference and adapting to it can take some time and effort. To learn this new declarative style for creating UIs, I decided to port an existing application UI from its Java language implementation to JavaFX Script. I picked an image viewer application that I had created for a Swingworker article on the Java language hub of the Sun Developer Network. The original application demonstrates how to use the Swingworker class in Java SE 6, but the UI itself seemed simple enough to provide an easy transition to JavaFX Script. The Existing User Interface The existing application lets users search, list, and display images from the well-known Flickr website. Users can enter search words, and the application uses REST APIs to query Flickr for a list of matching thumbnail images. Users can select one of the thumbnails to retrieve a larger, more detailed image. The existing application, with the results of a search, is shown here:
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
7 of 19
Figure 1. Application UI With Search Results This UI comprises the following components, from top to bottom: Main frame window container Search label and search text field Search match label and progress bar List of matching thumbnails with a short description Selection label and progress bar Label showing the selected image The UI consists of generic Swing components: JFrame, JLabel, JProgressBar, JScrollPane, and JList.
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
8 of 19
The JList component has a custom renderer to display the thumbnails and accompanying short descriptions, but it is still a relatively simple UI, one that will help me investigate the declarative UI aspect of JavaFX Script. In the future, I may try to implement the entire application; for now, just getting a reasonable approximation of the existing UI is enough. Although less dramatic than the working demo, the inactive UI is shown here, representing my initial goal for a declarative UI in JavaFX Script:
Figure 2. Application UI I implemented the original UI using the NetBeans IDE and its Matisse GUI editor. All of the original code can be downloaded from the Swingworker article; the code around the generated UI follows. It gives you an idea of how NetBeans uses GroupLayout to create this UI.
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
9 of 19
private void initComponents() { lblSearch = new javax.swing.JLabel(); txtSearch = new javax.swing.JTextField(); lblImageList = new javax.swing.JLabel(); scrollImageList = new javax.swing.JScrollPane(); listImages = new JList(listModel); lblSelectedImage = new javax.swing.JLabel(); lblImage = new javax.swing.JLabel(); progressMatchedImages = new javax.swing.JProgressBar(); progressSelectedImage = new javax.swing.JProgressBar(); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setTitle("Image Search"); lblSearch.setText("Search"); lblImageList.setText("Matched Images"); // ... // event listeners, models, and cell renderers removed for this example // lblSelectedImage.setText("Selected Image"); lblImage.setBorder(javax.swing.BorderFactory.createLineBorder( new java.awt.Color(204, 204, 204))); lblImage.setFocusable(false); lblImage.setMaximumSize(new java.awt.Dimension(500, 500)); lblImage.setMinimumSize(new java.awt.Dimension(250, 250)); lblImage.setOpaque(true); lblImage.setPreferredSize(new java.awt.Dimension(500, 250)); javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane()); getContentPane().setLayout(layout); layout.setHorizontalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGrou .addContainerGap() .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILI .addComponent(lblImage, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.DEFAULT_SIZE, 462, Short.MAX_VALUE) .addComponent(scrollImageList, javax.swing.GroupLayout.DEFAULT_SIZE, 462, Short.MAX_VALUE) .addGroup(javax.swing.GroupLayout.Alignment.LEADING, layout.createSequent .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignmen .addComponent(lblImageList) .addComponent(lblSelectedImage)) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignmen .addComponent(progressMatchedImages, javax.swing.GroupLayout.DEFA 350, Short.MAX_VALUE) .addComponent(progressSelectedImage, javax.swing.GroupLayout.DEFA 350, Short.MAX_VALUE))) .addGroup(javax.swing.GroupLayout.Alignment.LEADING, layout.createSequent .addComponent(lblSearch) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addComponent(txtSearch, javax.swing.GroupLayout.DEFAULT_SIZE, 411, Short.MAX_VALUE))) .addContainerGap()) ); layout.setVerticalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addContainerGap() .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELI .addComponent(lblSearch) To access links, go to the website Copyright (c) Sun Microsystems, Ltd. 10 of 19 .addComponent(txtSearch, javax.swing.GroupLayout.PREFERRED SIZE,
Laying out the UI using NetBeans IDE is easy — just drag and drop. In this example, NetBeans has generated UI code using javax.swing.GroupLayout, which provides correct size, position, and spacing among components across different host platforms. The resulting code isn't particularly easy to read, but tool support is excellent, making it unnecessary to manually work with the layout code directly. The Declarative JavaFX Script Interface Although GUI tools will no doubt be provided for JavaFX Script, NetBeans doesn't yet provide UI design support for this language. For now, I used JavaFXPad, a demo application from the Project OpenJFX site. Using JFXPad, you can manually enter UI code and see the results immediately. It's a surprisingly good early tool, despite being a demo itself. All the GUI components needed for this interface are in the package javafx.ui. JavaFX Script is similar to the Java language in that it supports package structures and import statements. Instead of importing the entire package while learning the components, I imported one specific component at a time. This is tedious, but it does show what components are available in the package by making you explicitly use each one. JavaFX Script components have attributes like height, width, text, and content. The content attribute holds child components. Depending on the component, a content attribute can contain multiple components declared as an array. Declaring a user interface for the Image Search application involves selecting and using the appropriate JavaFX Script components and then setting their attributes. For example, the following short script defines an empty frame. This code creates a frame container without any content:
import javafx.ui.Frame; Frame { title: "JFX Image Search" height: 500 width: 500 visible: true }
The JavaFX Script equivalent of Swing's JFrame is javafx.ui.Frame. The title attribute declares the window frame title, which is the text shown in the frame. The height and width attributes define size dimensions in pixels. Finally, the visible attribute declares whether the frame should be visible, which is similar to the setVisible method in Swing's JFrame class. FlowPanels and Boxes The javafx.ui package contains the components Label, SimpleLabel, Box, FlowPanel, ProgressBar, ScrollPane, and ListBox. Those names sound like common Swing components, so I tried using those first to implement the target UI. Although JavaFX Script does support GroupLayout and GroupPanel components, I steered away from those widgets on my first attempt at duplicating the UI. I don't think GroupLayout is something you'd want to manually code in Java, and at this point I've already made a similar assumption for JavaFX Script. Opting for the simpler FlowPanel and Box components, I created the following JavaFXImageSearchUI1.fx code:
To access links, go to the website
Copyright (c) Sun Microsystems, Ltd.
11 of 19
package com.sun.demo.jfx; import import import import import import import import import import import import javafx.ui.Frame; javafx.ui.Box; javafx.ui.FlowPanel; javafx.ui.SimpleLabel; javafx.ui.Label; javafx.ui.TextField; javafx.ui.ScrollPane; javafx.ui.ListBox; javafx.ui.ProgressBar; javafx.ui.LineBorder; javafx.ui.EmptyBorder; javafx.ui.Color;
Frame { title: "JFX Image Search" content: Box { border: EmptyBorder { top: 10 left: 10 right: 10 bottom: 10 } orientation: VERTICAL content: [ FlowPanel { alignment: LEADING content: [ SimpleLabel { text: "Search" }, TextField { preferredSize: {width: 425} } ] }..."
|
You need to upgrade your Flash Player , or try to enable javascript in order see this document properly.
|
|
Comments
