Example:

public class gallery

{
     //reading the image location as string and storing it in sequence imageList
     //for the sake of example my images are named 0-10, so that i can easily read
     //it using a for loop. You can load the images as you want
     def imageList:String[] = for (cnt in [0..10])
                     {
                         {"{__DIR__}Images/{cnt}.jpg"};
                     }

     //placeholder to be displayed when image is being loaded
     var imagePlaceHolder: Image = Image
     {
          url: "{__DIR__}Images/placeholder.jpg"
     }

     var thumbNails: Group[] =
     for(image:String in imageList)
     {
         //background to place the thumbnail on. just to make it look better
         var bgRect: Rectangle = Rectangle
         {
             width: 210
             height: 235
             fill: Color.WHEAT
             arcHeight:20
             arcWidth:20
         }

        //creates a thumbnail of the image of size 200*200
         var thumbImage:Image = Image
         {
             url: image
             width: 200;
             height: 200;
             placeholder: imagePlaceHolder
             backgroundLoading:true
         }
         //creates a image view to be displayed of the image
         var thumb:ImageView = ImageView
         {
             image: thumbImage
         }
        //gets the filename of the image.
         var imgLabel: String =
         {
             var offset = {image.lastIndexOf("/") + 1}
             image.substring(offset)
         }
         //title of tht image thumb
         var title: Label = Label
         {
             width:20
             text: imgLabel;
         }
        //to create a thumb with image and the title below the image
         var imageThumb: VBox = VBox
         {
             spacing: 5
             nodeHPos: HPos.CENTER
             content:
             [
                thumb,
                title
             ]
                 //to center the thumb within the bgRect that we created earlier
             layoutX:bind (bgRect.layoutBounds.width - imageThumb.layoutBounds.width)/2;
             layoutY:bind (bgRect.layoutBounds.height - imageThumb.layoutBounds.height)/2;
         }

        //group the bgRect and the thumb together
         var thumbGrp:Group = Group
         {
             blocksMouse=true;
             content:
             [
                 bgRect,
                 imageThumb
             ]

            //scale the image thumb when mouse is entered
             onMouseEntered: function(e: MouseEvent): Void
             {
                 thumbGrp.scaleX = 1.2;
                 thumbGrp.scaleY = 1.2;
             }
             //scale out the image thumb when mouse is removed
             onMouseExited: function(e: MouseEvent): Void
             {
                 thumbGrp.scaleX = 1.0;
                 thumbGrp.scaleY = 1.0;
             }


             onMousePressed: function(e: MouseEvent): Void
             {
                //  showFullImage(image);//implementation is not shown.
                                      //just create an imageView and
                                     //center it in the screen using the
                                    //center formula as above for the rectangle
                                    //and  the thumb
                                    //uncomment and write function to implement it.
             }
         }
     }

      var imageTile:Tile = Tile
      {
         layoutX: bind (galleryScrollView.layoutBounds.width - imageTile.layoutBounds.width)/2;
         layoutY: bind (galleryScrollView.layoutBounds.minY + 10);

         hgap:30//gap between columns
         vgap:40//gap between rows


        //235 = 200 for image + 5 for spacing + 30 hgap
        //245 = 200 for image + 5 for spacing + 30 vgap
        //dynamically calculate row columns according to the screen size
         columns: bind (galleryScrollView.layoutBounds.width) / 240 as Integer;//typecasting in integer
         rows: bind (galleryScrollView.layoutBounds.height) /275 as Integer;//typecasting in integer

         content:bind thumbNails
      }

      var galleryScrollView: ScrollView = ScrollView
      {
           //screenWidth and screenHeight is the desired width and height of the screen.
           //screenWidth and screenHeight changes as the user changes the size of the screen.
           translateX: bind (screenWidth - galleryScrollView.layoutBounds.width)/2;
           translateY: bind (screenHeight - galleryScrollView.layoutBounds.height)/2;

           //layout info of scrollview
           layoutInfo:LayoutInfo
           {
              width:bind screenWidth
              height:bind screenHeight
           }

           node:imageTile

           //handles the scrollbar policy
           //scrollbars are displayed only when needed
           hbarPolicy: ScrollBarPolicy.AS_NEEDED
           vbarPolicy: ScrollBarPolicy.AS_NEEDED
     }
}

var stage: Stage = Stage
{
 title: "Image Gallery"

 width: Screen.primary.bounds.width //gets the width of monitor
 height:Screen.primary.bounds.height //gets the height of monitor

 fullScreen:true; //changes the display to fullscreen

 scene: Scene
 {
       width: 800 //width of the scene
       height: 800 /height of the scene

       content:
       [
           galleryScrollView
       ]
  }
}

var screenWidth = bind stage.scene.width;
var screenHeight = bind stage.scene.height;

Lets start with the abstract class. This class will be extended by all other pages or screens that needs to be displayed.

public abstract class View extends CustomNode
{
  protected var currentView: Node; //holds the value of the current page to be  displayed
  protected var controller:Controller;//business logic to decide what to display

  protected abstract function createView():Void;

  override function create(): Node
  {
     createView();
     return currentView
  }
}

The abstract class extends CustomNode and overrides the function create()
to return the current node of interest. the currentView holds the node
that needs to be displayed and the controller is of type Controller class
which I will introduce now. Basically what the controller class does is
decide on what page needs to be displayed and then forwards the page to the
scene to be displayed.

public class Controller
{
    public var contents: Node;
    public var loginForm: Login; //holds login page
    public var adminScreen: AdminPage; //holds admin page
    public var guestScreen: GuestPage;//holds guest page

    public function showLoginScreen()
    {
       if(loginForm == null)
       {
         loginForm = Login
         {
           controller: this;
         }
       }

       contents = loginForm;
    }

    public function showAdminPage()
    {
        if(adminScreen == null)
        {
            adminScreen = AdminPage
            {
                controller: this;
            }
        }
        contents= adminScreen;
    }

    public function showGuestPage()
    {
        if(guestScreen == null)
        {
            guestScreen = GuestPage
            {
               controller: this;
            }
        }
        contents = guestScreen;
    }
}

Now that the hard part is over, lets introduce the Main.fx.

var controller = new Controller;

var stage: Stage = Stage
{
   title: "Demo"
   scene: Scene
   {
      width: 800
      height: 800

      content: bind
      [
         controller.contents
      ]
   }
}

The content of the stage is bound to the contents of the controller. So,
everytime the content of the controller changes the scene is updated with the
new content.

Here is a simple code for login.fx

public class Login extends View
{
   var userNameLbl = Label
   {
      text:"User Name:"
   }

   var passwordLbl = Label
   {
      text:"Password:"
   }

   var userNameTxt = TextBox
   {
      columns:10
   }

   var passwordTxt = PasswordBox
   {
      columns:10
   }

   var submitBtn = Button
   {
      action: function()
      {
         if((userNameTxt.text.compareTo("admin") == 0) and (passwordTxt.text.compareTo("admin") == 0))
         {
             controller.showAdminPage();
         }
         else
         {
             controller.showGuestPage();
         }
      }
      text:"Login"
   }

   var loginBox:VBox = VBox
   {
      spacing: 5
      nodeHPos: HPos.RIGHT

      content:
      [
          HBox
          {
              nodeVPos: VPos.BOTTOM //bottom aligning the nodes

              spacing: 2 //spacing between the two corresponding nodes

             content:
             [
               userNameLbl,
               userNameTxt
             ]
          }

          HBox
          {
             hpos: HPos.RIGHT //right align within the containers width
             nodeVPos: VPos.BOTTOM //bottom align the nodes
             spacing: 2 //spacing between the two corresponding nodes
             content:
             [
                passwordLbl,
                passwordTxt,

             ]
          }

          submitBtn
       ]
    }

    //must override this function
    override function createView():Void
    {
       currentView = loginBox;
    }

}

Here a simple login form is created and the class extends the abstract class
view. So, when the create() method (called automatically) of the View is called
the createView() method of this class is called which will assign the loginBox to currentView.

Similarly we create AdminPage class and the GuestPage class. Both extends the view class

public class AdminPage extends View
{
   /*
     write the code for what needs to be displayed in admin page
     For example: adminPageView.AdminPageView can be any node i.e.
     Group, Image, label, HBox, etc.
   */
   override function  createView():Void
   {
      currentView = adminPageView;
   }
}

public class GuestPage extends View
{
    /*
      write the code for what needs to be displayed in guest page
      For example: guestPageView. GuestPageView can be any node i.e.
       Group, Image, label, HBox, etc.
     */
    override function createView():Void
    {
       currentView = guestPageView
    }
}

HBox is a container in JavaFx  and it lays out its content nodes horizontally in a single row. Spacing between the content nodes can also be specified using spacing variable.

A simple example of HBox is:

var pageBox: HBox = HBox

{

   spacing:2;

   content:

   [

     for (pages in [0..noPages])

     {

        PageIndicator

        {

           pageNo: pages;

           changePageNo: changePageNumber;

        }
    }
  ]
}

Horizontal position of the row of nodes can also be specified by using the hPos variable  and similarly vPos variable can be used to specify the vertical positioning of the row of nodes. Vertical positioning of each nodes can be specified by using nodeVPos variable.

The output with total no of Pages 2 is:

More info:

http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.2/docs/api/javafx.scene.layout/javafx.scene.layout.HBox.html

VBox:

VBox is a container in JavaFx  and it lays out its content nodes vertically in a single column. Similar to HBox, spacing between the content nodes can also be specified using spacing variable. The hPos and vPos variables can be used to specify the horizontal positioning of the column of nodes and the vertical positioning of the column of nodes respectively. Also as in HBox, nodeHPos variable in VBox can be used to  specify the horizontal position of each node within the layout space.