JavaFXComposerTwitterTutorial

(Difference between revisions)
m (Add Components)
m (Configure Data Sources)
Line 33: Line 33:
it from the palette into the design area. Fill the fields as shown on the screenshot and enter your Twitter account credentials
it from the palette into the design area. Fill the fields as shown on the screenshot and enter your Twitter account credentials
into username ans password fields.
into username ans password fields.
 +
 +
[[File:javafxcomposer-tutorial-Twitter-s2.png]]
Push Fetch Data button and enter your Twitter account credentials when prompted. You should see your tweets (if any) in the right
Push Fetch Data button and enter your Twitter account credentials when prompted. You should see your tweets (if any) in the right

Revision as of 10:00, 16 February 2010

Contents

JavaFX Composer Data Sources - Twitter Application

Prerequisities

You need a working Twitter account so please register on Twitter in case you dont't have one. For more information about Twitter see http://www.twitter.com.

Goal

In this tutorial you will create a simple Twitter application using JavaFX Composer Data Sources support. You will learn how to fetch and POST data from/to an HTTP service.

Preparation

Create a new JavaFX project using "JavaFX | JavaFX Desktop Business Application" project template. Twitter application works in both desktop and mobile profiles but let's use Desktop for this tutorial because of its larger screen area. A project should be created and an empty design file should be opened in an Editor area.

Add Components

Drag and drop the following components from "JavaFX Controls" category in Palette to the Design:

  • list view for latest tweets
  • button for refreshing the list
  • a progress indicator showing list view refresh activity
  • text field for a entetring a new tweet
  • submit button

Move the components so that they are aligned nicely, see screenshot for an example.

File:javafxcomposer-tutorial-Twitter-s1.png

Configure Data Sources

Now add a new HTTP data source that will fetch latest tweets into the list view. Do that by gragging and dropping it from the palette into the design area. Fill the fields as shown on the screenshot and enter your Twitter account credentials into username ans password fields.

File:javafxcomposer-tutorial-Twitter-s2.png

Push Fetch Data button and enter your Twitter account credentials when prompted. You should see your tweets (if any) in the right pane formatted as Records and RecordSets. To learn more about Fx Composer data format, see this tutorial.

Now select the ".elements" field in the right pane and push the Add button. This will add a new, child data source of this master data source which will only contain the ".elements" part. This is useful when populating a list view because we will simply bind the content of this filtered data source to the "items" property of the list view.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo