JavaFXComposerTwitterTutorial

(Difference between revisions)
m (Binding Data to UI)
(Configure Data Source)
 
(13 intermediate revisions not shown)
Line 31: Line 31:
Now add a new HTTP data source that will fetch latest tweets into the list view. Do that by gragging and dropping
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
+
it from the palette into the design area. Fill the fields as shown on the screenshot (tweets URL: http://twitter.com/statuses/home_timeline.xml) and enter your Twitter account credentials into username ans password fields.
-
into username ans password fields.
+
[[File:javafxcomposer-tutorial-Twitter-s2.png]]
[[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 if 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.
+
pane formatted as Records and RecordSets. To learn more about Fx Composer data format, see this:  [[JavaFXComposerDSTutorial|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.  
+
Now select any of the "status" fields 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 "status" records.
[[File:javafxcomposer-tutorial-Twitter-s3.png]]
[[File:javafxcomposer-tutorial-Twitter-s3.png]]
Line 50: Line 49:
=== Binding Data to UI ===
=== Binding Data to UI ===
-
Now let's bind list of tweets coming from the data source to the list viewm. Select the list view in the design pane and push the button next to the "items" property in the Property sheet. This will open property customizer for the "items" property. Push the Bind button and select "httpDataSource[.elements]" in the first list box and "All Records" in the second list box. Bind code will be automatically generated for you. This instructs the list box to always display all records present in the data source.
+
Now let's bind list of tweets coming from the data source to the list view. Select the list view in the design pane and push the button next to the "items" property in the Property sheet. This will open property customizer for the "items" property. Push the Bind button and select "httpDataSource[status]" in the first list box and "All Records" in the second list box. Bind code will be automatically generated for you. This instructs the list box to always display all records present in the data source.
[[File:javafxcomposer-tutorial-Twitter-s5.png]]
[[File:javafxcomposer-tutorial-Twitter-s5.png]]
-
Now since JavaFX list view can only show Strings and we need to display Records in it, we need a converter function that will extract a "display name" of our Records (remember each tweet is Record, to visualize the data structure open the data source customizer at any time, fetch and browse data there). To do that, select the httpDataSource in the Navigator view and click on the Record Display Name customizer button as shown on the screenshot.
+
Next we need to define how tweets (records) from data source should render in the list view. This is done by creating a cell renderer for each item in the list view. Select the list view in the design pane to show its properties in the Properties window. Click the Plus sign by the Cell Factory property to create a new cell renderer factory. JavaFX Composer will create a new simple factory (a factory that creates Label components) for you, you just need to specify what text should it display. Open the "Text" property customizer by clicking on this depicted icon.
[[File:javafxcomposer-tutorial-Twitter-s6.png]]
[[File:javafxcomposer-tutorial-Twitter-s6.png]]
-
Select the "Generate Empty Function" option and the Composer creates an empty convertor function and switches the view to source editor. Enter the following code:
+
Once the customizer opens, select "listCell", "item" and "as Record" in the first, second and third list boxes, respectively. Finally append ".getXmlElementText("text")" to the generated expression as shown on the screenshot. This expression takes a list cell item, casts it to a Record and takes the inner text of the "text" XML element where the actual tweet is located.
[[File:javafxcomposer-tutorial-Twitter-s7.png]]
[[File:javafxcomposer-tutorial-Twitter-s7.png]]
-
It retrieves the text inside the "text" XML element which is the actual tweet content.
+
=== Progress Indication and Refresh Button ===
-
 
+
-
=== Progress Indication and Reffresh Button ===
+
It is nice to indicate progress if something is going on so let's bind the progress indicator visibility that you have places earlier to the special "fetchingData" property of the data source. Data sources set it to true while they are in the process of downloading data from their source. Click on the progress indicator component in the design pane and click on the button next to the Visible property in the property sheet. Click on Bind and bind it to the master datasource's fetchingData property.
It is nice to indicate progress if something is going on so let's bind the progress indicator visibility that you have places earlier to the special "fetchingData" property of the data source. Data sources set it to true while they are in the process of downloading data from their source. Click on the progress indicator component in the design pane and click on the button next to the Visible property in the property sheet. Click on Bind and bind it to the master datasource's fetchingData property.
Line 70: Line 67:
[[File:javafxcomposer-tutorial-Twitter-s8.png]]
[[File:javafxcomposer-tutorial-Twitter-s8.png]]
[[File:javafxcomposer-tutorial-Twitter-s9.png]]
[[File:javafxcomposer-tutorial-Twitter-s9.png]]
 +
 +
Now select the Refresh Button and in its property sheet click on the pen icon next to the Action property and let it generate an empty function.
 +
 +
[[File:javafxcomposer-tutorial-Twitter-s10.png]]
 +
 +
Once in the source editor, enter the following code that will simply force the data source to reload the data:
 +
 +
[[File:javafxcomposer-tutorial-Twitter-s11.png]]
 +
 +
=== Posting New Tweets ===
 +
 +
First off you need to create additional data source object that you will use for POSTing data to twitter. It is not practical to reuse existing httpDataSource for this purpose because many fundamental properties change (url, http method). Switch to the source editor view and insert the following piece of code:
 +
 +
[[File:javafxcomposer-tutorial-Twitter-s13.png]]
 +
 +
As you can see it defines a data "source" with a special URL for posting to twitter service. It also overrides the dataFetched method in the original HttpDataSource to clear the input text box and refresh list of tweets once the new tweet is posted.
 +
 +
Finally, you need to write code for the Tweet button to actually post this data when user presses it. Use the same steps as for the Refresh button and enter the following handler code:
 +
 +
[[File:javafxcomposer-tutorial-Twitter-s12.png]]
 +
 +
The queryParams property is filled with the actual POST data. For twitter, you need to set the "status" property to the content of the tweet text box.
 +
 +
You're done, you now have a working twitter app in JavaFX!

Current revision as of 13:11, 22 April 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 Source

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 (tweets URL: http://twitter.com/statuses/home_timeline.xml) 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 if 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 any of the "status" fields 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 "status" records.

File:javafxcomposer-tutorial-Twitter-s3.png

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.

File:javafxcomposer-tutorial-Twitter-s4.png

Binding Data to UI

Now let's bind list of tweets coming from the data source to the list view. Select the list view in the design pane and push the button next to the "items" property in the Property sheet. This will open property customizer for the "items" property. Push the Bind button and select "httpDataSource[status]" in the first list box and "All Records" in the second list box. Bind code will be automatically generated for you. This instructs the list box to always display all records present in the data source.

File:javafxcomposer-tutorial-Twitter-s5.png

Next we need to define how tweets (records) from data source should render in the list view. This is done by creating a cell renderer for each item in the list view. Select the list view in the design pane to show its properties in the Properties window. Click the Plus sign by the Cell Factory property to create a new cell renderer factory. JavaFX Composer will create a new simple factory (a factory that creates Label components) for you, you just need to specify what text should it display. Open the "Text" property customizer by clicking on this depicted icon.

File:javafxcomposer-tutorial-Twitter-s6.png

Once the customizer opens, select "listCell", "item" and "as Record" in the first, second and third list boxes, respectively. Finally append ".getXmlElementText("text")" to the generated expression as shown on the screenshot. This expression takes a list cell item, casts it to a Record and takes the inner text of the "text" XML element where the actual tweet is located.

File:javafxcomposer-tutorial-Twitter-s7.png

Progress Indication and Refresh Button

It is nice to indicate progress if something is going on so let's bind the progress indicator visibility that you have places earlier to the special "fetchingData" property of the data source. Data sources set it to true while they are in the process of downloading data from their source. Click on the progress indicator component in the design pane and click on the button next to the Visible property in the property sheet. Click on Bind and bind it to the master datasource's fetchingData property.

File:javafxcomposer-tutorial-Twitter-s8.png File:javafxcomposer-tutorial-Twitter-s9.png

Now select the Refresh Button and in its property sheet click on the pen icon next to the Action property and let it generate an empty function.

File:javafxcomposer-tutorial-Twitter-s10.png

Once in the source editor, enter the following code that will simply force the data source to reload the data:

File:javafxcomposer-tutorial-Twitter-s11.png

Posting New Tweets

First off you need to create additional data source object that you will use for POSTing data to twitter. It is not practical to reuse existing httpDataSource for this purpose because many fundamental properties change (url, http method). Switch to the source editor view and insert the following piece of code:

File:javafxcomposer-tutorial-Twitter-s13.png

As you can see it defines a data "source" with a special URL for posting to twitter service. It also overrides the dataFetched method in the original HttpDataSource to clear the input text box and refresh list of tweets once the new tweet is posted.

Finally, you need to write code for the Tweet button to actually post this data when user presses it. Use the same steps as for the Refresh button and enter the following handler code:

File:javafxcomposer-tutorial-Twitter-s12.png

The queryParams property is filled with the actual POST data. For twitter, you need to set the "status" property to the content of the tweet text box.

You're done, you now have a working twitter app in JavaFX!

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