The custom scene graph node we are creating in Java

Paint QR Code 2d barcode in Java The custom scene graph node we are creating

That s what we want it to look like; let s dive straight into the source code with listing 8.8. GalleryView.fx is presented in four parts: listings 8.8, 8.9, 8.10, and 8.11. Here we see the variables in the top part of our GalleryView class.

Listing 8.8 GalleryView.fx (part 1)

package jfxia.chapter8; import javafx.animation.Interpolator;

import import import import import import import import import import import javafx.animation.transition.TranslateTransition; javafx.scene.CustomNode; javafx.scene.Group; javafx.scene.Node; javafx.scene.image.Image; javafx.scene.image.ImageView; javafx.scene.input.MouseEvent; javafx.scene.paint.Color; javafx.scene.shape.Rectangle; javafx.scene.text.Font; javafx.scene.text.Text; class GalleryView extends CustomNode { thumbWidth:Number = FlickrPhoto.THUMB; thumbHeight:Number = FlickrPhoto.THUMB; thumbBorder:Number = 10;

public-init var apiKey:String; Flickr details public-init var userId:String; package var width:Number = 0; package def height:Number = thumbHeight + thumbBorder*2; package var action:function(:FlickrPhoto, :Image,:Number,:Number);

public-read var page:Integer = 1 New page means on replace { thumbs reload loadPage(); }; public-read var pageSize:Integer = bind { def aw:Number = width; Width determines def pw:Number = thumbWidth + thumbBorder*2; thumbnail count (aw/pw).intValue(); } Rebuild scene on replace { graph on change if(pageSize>0) createUI(); loadPage(); }; var service:FlickrService; var result:FlickrResult; var thumbImages:Image[];

var topGroup:Group = Group{}; Handy scene var thumbGroup:Group; graph stuff var textDisplay:Text; // ** Part 2 is listing 8.9; part 3, listing 8.10; part 4 is listing 8.11

At its head we see a few handy constants being defined: the maximum dimensions of a thumbnail (brought in from the FlickrPhoto class for convenience) and the gap between each thumbnail. The other variables are:

apiKey and userId should be familiar from the first part of the project. We set these when we create a GalleryView, so it can access the Flickr service. The height of the bar we can calculate from the size of the thumbnails and their surrounding frames, but the width is set externally by using the size of the screen.

The action function type holds the callback we use to tell the outside application that a thumbnail has been clicked. The parameters are the FlickrPhoto associated with this thumbnail, the thumb Image already downloaded, and the x/y location of the thumbnail in the bar. The page and pageSize variables control which page of thumbnails is loaded and how many thumbnails are on that page. Changing either causes an access to the web service to fetch fresh data, which is why both have an on replace block. A change to pageSize will also cause the contents of the scene graph to be rebuilt, using the function we created for this very purpose. The page size is determined by the number of thumbnails we can fit inside the width, which explains the bind. The private variables service, results, and thumbImages all relate directly to the web service. The first is the interface we use to load each page of thumbnails, the second is the result of the last page load, and finally we have the actual thumbnail images themselves. Private variables topGroup, thumbGroup, and textDisplay are all parts of the scene graph that need manipulating in response to events.

Now we ll turn to the actual code that initializes those variables. Listing 8.9 sets up the web service and returns the top-level node of our bit of the scene graph.

Listing 8.9 GalleryView.fx (part 2)

// ** Part 1 is listing 8.8 Flickr web init { service class service = FlickrService { apiKey: bind apiKey; userId: bind userId; photosPerPage: bind pageSize; onSuccess: function(res:FlickrResult) { result = res; Do this on assignThumbs(result); success } onFailure: function(s:String) Do this on { println("{s}"); failure } }; } override function create() : Node { Return scene topGroup; graph node } // ** Part 3 is listing 8.10; part 4, listing 8.11

The code shouldn t need too much explanation. We register two functions with the FlickrService class: onSuccess will run when data has been successfully fetched, and onFailure will run if it hits a snag. In the case of a successful load, we store the result object so we can use its data later, and we call a private function (see later for the code) to copy the URLs of the new thumbnails out of the result and into the thumbImage sequence, causing them to start loading.