Tagged: HBox Toggle Comment Threads | Keyboard Shortcuts

  • mxshrestha 4:34 am on March 23, 2011 Permalink | Reply
    Tags: HBox, JavaFX abstract class, JavaFX pages, JavaFX screens, multiple pages in JavaFx, multiple scenes in javaFx, Multiple Screens in javaFx, pages in JavaFx, pages/screens/scenes, scenes, scenes in JavaFx, screens in JavaFx,   

    Managing multiple scenes in JavaFx 

    Although JavaFx scenes are different than Java panels, they both can be used for displaying what needs to be shown in the screen at run time. Suppose that we  have a login screen that is displayed when the application runs, and after the user submits  the user name and password lets say the application directs the user to the respective page according to the user credential. Learning how this works was quite a handful and one of the approach that I found was interesting and useful was by using abstract class. Keep in mind that this can be done other ways as well.  Here, I am introducing a method using abstract class to navigate to different pages that needs to be displayed.

    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
        }
    }
    
    Advertisements
     
  • mxshrestha 10:41 pm on February 22, 2011 Permalink | Reply
    Tags: HBox, HBox javaFx, , VBox javaFx   

    Using HBox and VBox in JavaFx 

    HBox:

    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.

     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel