Updates from mxshrestha Toggle Comment Threads | Keyboard Shortcuts

  • mxshrestha 1:44 am on March 11, 2013 Permalink | Reply
    Tags: business, company customer relationship, consumer, customer, customer business relationship, customer punishment, punishment   

    Customer’s Punishment and Business 

    Many products are available in the market today for the consumers. People spend lot of time researching the product they need and spend a lot of money for it. Businesses thrive to gain customers daily too. It would have been a beautiful world for both businesses and consumers if the product meets the consumers expectation and the consumers are happy with the product. Unfortunately, in reality this does not happen very frequently and this is where customer’s punishment comes to play.

    What is customer’s punishment? In short, it is the hassle that a customer creates to the business organization over their product. In this competitive market today, businesses challenge each other with their product to attract consumers and make them their customers. Every business knows that there is only one way to succeed in this market and that is “Make your customers happy”. In fact, businesses that do not care about their customers does not last very long. Consumers also trust the product of the business organization and set certain expectations from the product. When the expectations of the customers are not met, this is when customer’s punishment happen.

    In my perspective there are different forms of customer’s punishment. The most simplest one is people simply return the product once they are not satisfied with it and then always doubt before buying another product from the same company. Now, what does this mean for the company? This means the company is loosing money, and more importantly they are loosing customers. Not only are they loosing one customer, but they are loosing the customer’s friends and family as well. Also, with today’s technology people post review for the products online. That means, a bad review of the product online is visible to many others who are researching to buy it. So, company looses consumers even before they can make them a customer.

    The other form of punishment is a painful steps of troubleshooting the product’s issue with the customer. This is not completely a punishment to the company but is also a pain for the customer. In fact, this is even worse than the punishment I mentioned above. Troubleshooting a product involves the customer to contact the customer support of the company, spend their valuable time talking to a person for a hassle they did not want, and in the worst case shipping or exchanging the product to and fro. And to push it to the edge, the issue is not resolved and the customer ends of returning the product or asks for a refund. Now, what does this mean to the company again? The company is definitely loosing money and customers, and getting a bad review for their product. Now along with this, the company is also loosing the money they spent for customer support and the product that ended up getting returned. Worst of all, the customer is now angry because of all the hassle they had to go through and not get the issue resolved. In the customers mind, the whole thing is a waste of extremely valuable time they spent researching, buying and troubleshooting the issue. Now they have to go and look for another product and start all over again.

    Now I am not saying that the company must always make 100% of their customers happy. In fact, it is impossible to do so. There are always customers whose expectation is not met by the product. For example, a customer buys a dvd player and expects to play a blu-ray disc on it then there is nothing that the company can do to meet the expectation of the customer. In fact when such scenario’s happen, the customers themselves realizes that they bought the wrong product for their expectation. Now, lets say a customer buys a dvd player which states that it plays all format of DVDs like DVD+R, DVD-R, DVD-RW. Now, the dvd player works perfectly when playing DVD+R and DVD-R but has issues playing DVD-RW like loosing sound or loosing video every once in a while. This product now does not meet the expectation of the customer who wants to play a DVD-RW on this dvd player. The customer now is very unhappy with the product and looks towards other alternatives to meet their expectation. Hence, the company now looses this customer and ends up getting a bad review for their product.

    How can a company prevent customer’s punishment? Simple, make the product complete to what it states that it does. And most importantly, make sure that it does what it supposed to do perfectly.

    Advertisements
     
  • mxshrestha 7:03 pm on July 2, 2011 Permalink | Reply
    Tags: android, android batter life, android music, Android phone improvements, android user interface, android vs iphone, android vs phone, iphone, iphone vs android   

    Some Improvements Android phones needs… 

    Since the release of first android phone (G1), it was eminent that android was going to take a big chunk of mobile phone market. The growth of android phone in the past 3 years has proliferated. With the emerging new technologies and hardware improvements, the hardware specifications and software updates for android has made the phones and tablets much more faster and user friendly. However, android mobile devices (phones and tablets) still lacks to provide stable performance, and the user experience up to the level of complete contentment. Three main areas where android phones fails to provide satisfactory user experience is music, battery life and user interface.

    With my personal experience, till now i have never come across any android phones that provide the same audio quality and music user experience like iPhone does. Isn’t three years enough time to figure out how to level up with the iPhone music? Is it the hardware? or, is it just the software? The closest android phone that strives to level up with iPhone’s sound quality is Samsung Vibrant. My experience with HTC android phones tells me that “if you want your phone to be a great music player as well then HTC phones are not for you”. One of the most irritating and user experience degrading thing about android phones is that when listening to music and multitasking the music is sometimes stopped or the song stutters. I have owned G1, behold II, mytouch, myTouch4G, and Samsung Vibrant and I have experienced this issue on all the phones. However, I have never had that experience with iPhone. No matter how many applications you run on iPhone and listen to the music at the same time, the music never stutters or stops, even if the other applications running are huge memory hogger. The sound quality is also just amazing. Why can android phones not accomplish that? If it is impossible to do so, then how is iPhone providing that experience? One of the main reason people today buy smart phones is for listening to music when resting, jogging, surfing net, driving, or playing games. So, android phone manufacturers must keep this in mind and strive to make improvement in providing better music experience. I don’t know about others but i hate it when my music stutters when surfing the net at the same time or playing games or when i am jogging.

    It is impossible to believe the battery life that android phones offers. Android users have to constantly keep watch for the GPS, applications running in the background, the brightness of the screen, ringer volume, and wifi status to save the battery. Even with constant monitoring, sometimes the battery doesn’t last for a day. Really? Is that all android phones can offer? Android phones today comes with dual core processors and RAM enough to run Windows XP fluidly on it. Why can’t they provide better battery? The battery life is so poor in android phones that if you surf the net  for some time, play some games, make a few calls, and listen to music then it barely lasts for four hours. If you do the same with iPhone then the battery lasts almost the double amount of time. The big questions is, “what is the purpose of all the great hardware with great specifications on the phone, if you cannot provide enough battery life to support the use of it for better user experience?”. Whenever I surf the internet or play games in my Vibrant, I constantly have to check for my battery life to make sure I can make it last for a day. I actually carry a replacement battery with me all the time. The same goes for myTouch4G. I think it is even worst in the case of myTouch4G. This issue has to be addressed by phone manufacturers and they should provide better battery for their devices.

    Why can’t the user interface of android phones level up with the fluidity of user interface of iPhone? Even, windows phone 7 provides better fluid interface than android phones. Is 1Ghz processor and 512MB of RAM not enough for android phones to create a user interface that does not lag or force close? The worst of all is, sometimes the phone needs to be restarted to get the user interface working fluidly again. Also, the cache has to be cleared from time to time to get things done smoothly? Why can’t the OS manage the cache? Today the user interface offered by android phones have a lot of improvement but i think its about time to remove all the lags and force closes from user interface.

    Lets start with G1. When it was introduced, it was the only phone in the market that challenged iPhone. But, the performance of G1 was no where close to the performance of iPhone with similar hardware specification. Granted that at the time, android was in fairly new, emerging and flourishing stage. But still today, with significant hardware and software improvements, android mobile devices fail to provide the performance and the user experience that is desired. Big companies like HTC, Samsung, LG, and Sony have introduced many new android phones and strive to provide better performance and user experience. Android phones today like HTC Sensation, Samsung Galaxy S lines, LG G2x, and myTouch4G outmatch the hardware specification of iPhone4, but yet again iPhone4 performs better and provides better user experience. Why is that? Is iOS so superior that android phones cannot level up to them at all? Today’s android phone manufacturers should keep these issues in mind and strive to provide phones that will outmatch the user experience that iPhone offers. Also if you check out the forums for iPhone and android phones, you can see that android phone has a bunch of hardware and software related issues but iPhone has only few and most of the issues in iPhones forum are about using the phone effectively.

     

     

     

     
    • Humberto 12:23 pm on October 28, 2013 Permalink | Reply

      Sorry buddy, but I agree with you only at how hungry Android phones are for battery. The other two, you have options.

      For the audio player, I’m using a player called “Power Amp”. Believe me, it does the job and makes the Iphone’s player a joke!

      For the home screen, I’m using a custom firmware, from Cyanogen. I didn’t make any modification, just customized the icons for my own use. It’s smooth and there’s no lag.

      Btw, I have a HTC Sensation 4G, old but still good.

      • mxshrestha 5:14 am on October 29, 2013 Permalink | Reply

        Yes, Power Amp does make the audio a little better, but there is only so much a software can do to your audio quality. A better audio hardware is needed for better audio output. Also, you have to use a custom firmware to get the phone working smoothly. Cyanogen Mod is great and I like it too, but the reason you look for alternatives other than the Android that already comes with your phone is because you are not satisfied with it. Having said that, with Jelly bean update I would say Android is now on par with iPhone on smoothness. Also, HTC One has audio quality that may actually be better than that of iPhone. For some reason, I’m not really a fan of HTC Sense. I always thought it was a cool UI when it first started. I am currently using Nexus 4, and the audio is not that good and does not even come close to the quality of HTC One or iPhone no matter what app I use to play the songs.

  • mxshrestha 1:40 am on April 20, 2011 Permalink | Reply
    Tags: keyframes, keyframes in javaFx, timeline, timeline in javaFx   

    Using Timeline and KeyFrames in javaFx 

    JavaFx  provides timeline and key frames to  process actions in a specific order in time. Within timelines there can exists multiple key frames where the actual actions to be taken at a specific time can be specified.  Once specified timeline can be executed by calling the play() or playFromStart() method for the timeline.  Repetition of timeline can be specified by setting value for the repeatCount variable. By setting the value of repeatCount to Timeline.INDEFINITE, we can run the timeline repeatedly until the stop() function is called. Timeline can also be paused by calling the pause() function.

    KeyFrame is where we specify what action to take at what time within the timeline. A KeyFrame has an action (function type) which is executed at the specified time in the time variable. A timeline can have multiple KeyFrames. These key frames are executed once the timeline is started by a play() or playFromStart() function.

    ex:

    
    var timeLine = Timeline
    {
       var contents = hltNodes
       var interval:Duration = 0s;
       repeatCount: 4
    
       keyFrames:
       [
          for (nodes in contents)
          {
             var frame:KeyFrame = KeyFrame
             {
               time: 0s + interval;
    
               action:function():Void
               {
                  nodes.requestFocus();
               }
             }
    
             interval = interval + 5s;
             frame;
          },
          KeyFrame
          {
             time: interval;
          }
       ]
    }
    
    

    This code calls the requestFocus() for all the nodes inside the sequence hltNode in 5 second intervals. After each 5 second, the requestFocus() is moved on to the next node. This timeline is executed 4 times because the value for the repeatCount variable is specified as 4.

     
  • mxshrestha 4:24 am on April 13, 2011 Permalink | Reply
    Tags: container, customnode, , extending custom node in JavaFx, , javaFx container custom node, JavaFX customNode, JavaFX extending Container, JavaFX extending custom node   

    Why use Custom Node and Container? 

    JavaFx has many predefined nodes and layout containers made readily available for use. Also, JavaFx provides the facility to extend custom node to create user defined node and container to create user defined layout.  Predefined nodes like imageview, rectangle, circle, groups, HBox, VBox, e.t.c are great and easy to use and provides lot of flexibility with predefined functions for the nodes. So, when to create a user defined node or user defined container?

    Creating a user defined node by extending custom node allows user to add more flexibility and customization on a node.Consider a group node which has a rectangle node and a ImageView node centered within the rectangle. Now, lets say we have five such group nodes within a VBox node and the visibility of rectangle on all group within the VBox is set to false. Now using the functions defined for VBox, we can easily select each group node within it and request focus for each group node but it would be very tedious or impossible to turn the visibility of rectangle inside the group to true. This is where extending custom node comes to play. We can create a custom node with the group and rectangle and the VBox with the group and rectangle within it. Now in the custom node we can define a function which can turn the visibility of rectangle to true and false. Now using this custom node instead of just the VBox that we used  earlier, we can set the visibility of rectangle to true or false at any point or any where in the code.

    Similarly a user defined container by extending container class allows user to add more flexibility and customization for laying out nodes. Using predefined layout containers like HBox, Tiles, VBox, e.t.c it is possible to create attractive and interesting layouts but the layouts are constrained. Lets say we want to develop an image gallery such that the first row displays one image, second row displays two image, third row displays three image and so on.  It is possible to create such image gallery using HBox, Tiles, or VBox but the code would look nasty and would be tedious to do so. However, by extending a container and creating a custom layout we can do so easily using the positionNode() and layoutNode() methods provided. We can easily use a for loop and within it use the positionNode() function to position the images. Also, for resizable nodes we can resize the nodes within the container.

    From my perspective, extending customNode and container provides great flexibility and customization,but it is always good to use predefined nodes unless creating custom node or container is really required. It keeps the code simple and manageable. While extending custom Node or container, it is always required to override the create() function and the doLayout() function respectively.

     
  • mxshrestha 4:23 am on April 6, 2011 Permalink | Reply
    Tags: fullscreen in javaFx, , image gallery, image gallery using javaFx, image tiles, monitor height, monitor width, screen height using javaFx, screen width using javaFx, scrollView, tiles, tiles in javaFx, typeCasting in javaFx,   

    Quick Image Gallery using Tiles and ScrollView 

    Tiles and scrollview in javaFx can be used to develop a simple image gallery. Using Tile layout, we can easily specify the number of rows and columns we want to display images in image gallery along with the spacing between rows and columns. ScrollView can be used in image gallery to scroll up and down or left and right when the contents (image Thumbs) to be displayed take more space than the size of the screen specified. The basic idea is to load the images in a sequence type (More about sequence type: https://mxshrestha.wordpress.com/2011/02/08/duration-types-and-sequence-types-in-javafx/) then create a thumb for the images and then display it in the screen using the Tile layout.

    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;
    
    
     
    • Francois 4:44 am on September 13, 2013 Permalink | Reply

      Hi,

      I’m trying to build an image manager in JavaFX (quite new to JavaFX and eloring the features) and I think this would solve on of my issues. I’m trying to create a new project in NetBean to run this sample and play with it but I’m unable to… This isn’t written in Java? Is it Groovy? How can I incorporate that into a working project? Many thanks!

      • mxshrestha 5:01 am on September 13, 2013 Permalink | Reply

        Hi Francois,
        The examples are in JavaFx. However the logics are commented out for some operations. Also make sure that the path for folder with the images are correct. Otherwise images will not be loaded.

  • mxshrestha 4:59 am on March 30, 2011 Permalink | Reply
    Tags: bounds, bounds in JavaFx, Bounds in local, Bounds In Parent, , , center the node in the screen, , , layout Bounds, , node positioning, position node, reflection effect, rotate effect, translateX, translateY   

    More about bounds and positioning nodes 

    On my last post about bounds titled “Bounds in Java”, I introduced the different types of bounds available in JavaFx and what bounds are. This post is centered towards when to use those bounds and a simple trick to center your node in the screen. Just a quick review, bounds in JavaFx can be accessed in three different ways i.e. accessing  the layoutBounds, boundsInLocal, and boundsInParent of the nodes.  At first I really didn’t like the idea of having three different way to access the bounds and it was more confusing to me coming from a Java Swing background. However, now I think of it, I agree that it is a neat idea and gives the programmer more control and flexibility towards designing the UI. The best and easy way for me to figure out when to use which bounds is to remember this:

    layoutBounds :- node

    boundsInLocal:-node+effect/clip

    boundsInParent:node +effect/clip + transformations(transform/scale/translations)

    So we decide which bound variables we want to use looking at how we want the node to be displayed. Lets suppose I have a ImageView node with reflection effect and rotate(45 degrees) effect applied on it (i will provide the code below). Now, I use the layoutBounds variables if I just want to center the node in the screen. Keep in mind using layout bounds will just center the node (i.e. the image without the reflection part is centered and the reflection is positioned respectively after the node is centered). If I want to center the node along with the reflection of the node (i.e. center the whole image + its reflection) then I use the boundsInLocal variables. The case of boundsInParent is a bit unexplainable because it did not work as I thought it was supposed to be. I applied a rotate transform effect and then tried to center the node along with the reflection and the rotate effect using the boundsinParent variables but the result was not as what i expected. My guess is that boundsInParent comes in handy if we are messing around with groups. Anyways, boundsInParent and boundsInLocal are not recommended to be used.

    QuickTip on how to position nodes at the center of the screen:

    nodes can be positions at the center of the screen using this formula:

    translateX/layoutX/x = (width of screen – width of node)/2;

    translateY/layoutY/y = (height of screen – height of node)/2;

    We can get the width and height of the node using layoutBounds, BoundsInLocal and BoundsinParent variables. Like i said above, if we use laoyoutBounds then only the node without its effect and transform will be centered, and if we use BoundsInLocal then the node along with the effect will be centered. BoundsInParent case was not as expected so I still need to do more research on it (or someone please explain me).

    Here is the example I ran:

    
    var test: ImageView = ImageView
    {
         image: Image
         {
           url: "{__DIR__}Images/a10.jpg" //change this url to point to an image in your folder
         }
    
          effect:Reflection
         {
           fraction: 0.75
           topOffset: 0.0
           topOpacity: 0.5
           bottomOpacity: 0.0
         }
    
         rotate: 45
    
         //centers image only and then reflection is applied.
         translateX: bind (stage.scene.width - test.layoutBounds.width)/2;
         translateY: bind (stage.scene.height - test.layoutBounds.height)/2;
    
        //uncomment this one to see the boundsInLocal in action. this will center the image along with the reflection effect.
        /*
        translateX: bind (stage.scene.width - test.boundsInLocal.width)/2;
        translateY: bind (stage.scene.height - test.boundsInLocal.height)/2;
       */
        //uncomment this one to see the boundsInParent in action. creates unexpected result in my case.
       //Please shine some light on this one to me.
       /*
       translateX: bind (stage.scene.width - test.boundsInParent.width)/2;
       translateY: bind (stage.scene.height - test.boundsInParent.height)/2;
       */
    
    }
    
    

    Below is the result of using layoutBounds, BoundsInLocal and BoundsInParent from left to right respectively on an imageview. We can clearly see that layoutBounds center the image only, BoundsInLocal center the image along with the reflection effect, and BoundsInParent is not even rotating right.(Explain!!!)

    layoutBounds, BoundsInLocal, BoundsInParent

     
  • mxshrestha 4:34 am on March 23, 2011 Permalink | Reply
    Tags: , 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
        }
    }
    
     
  • mxshrestha 2:01 am on March 9, 2011 Permalink | Reply
    Tags: connecting to database in JavaFX, connecting to MySQL using JavaFx, JavaFX & MySQL, MySQL and javaFX   

    MySQL & JavaFx 

    Connecting to database in JavaFx is very similar to connecting to database in Java. Good thing about JavaFx is that it can leverage all Java libraries. So, here in this example we are going to use java.sql.* libraries and MySQL connector(must be downloaded). Here is a simple code to connect to MySQL.

    
    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.lang.Class;
    import java.sql.DriverManager;
    import java.lang.InstantiationException;
    import java.lang.IllegalAccessException;
    import java.sql.SQLException;
    import java.sql.PreparedStatement;
    
    public class DBConnection
    {
     var userName = "user";//username to connect to mysql
     var password = "user";//password to connect to mysql
     var driverClass = "com.mysql.jdbc.Driver";//driver class to connect to mysql
                                               //needs mysql connector jar
     var db_url = "jdbc:mysql://localhost/LOGIN";//LOGIN is the database.
     var connectionString:Connection;
    
     function getConnection():Connection
     {
       var conString: Connection = null;
       try
       {
          Class.forName(driverClass).newInstance();
          conString = DriverManager.getConnection(db_url, userName, password);
    
          if(not conString.isClosed())
          {
             println("Connection Successful");
          }
       }
       catch(ex : InstantiationException)
       {
          ex.printStackTrace();
       }
       catch(ex : IllegalAccessException)
       {
          ex.printStackTrace();
       }
    
       return conString;
     }
    
     public function login(userName:String, password:String): Boolean
     {
        connectionString = getConnection();
    
        var success:Boolean = false;
        var rs:ResultSet = null;
    
        var query:String = "SELECT FIRSTNAME FROM USERS WHERE USER_ID = ? AND PASSWORD = ?";
    
        try
        {
           var statement: PreparedStatement = connectionString.prepareStatement(query);
    
           statement.setString(1, userName);
           statement.setString(2, password);
    
           rs = statement.executeQuery();
    
           if(rs.first())
              success = true;
    
        }
        catch(ex : SQLException)
        {
           ex.printStackTrace();
        }
    
        return success;
      }
    }
    
    

    One thing we need to make sure is that the mysql connector jar
    is downloaded and is in the class path of the project. Also the database
    and the tables should exist.

     
  • mxshrestha 10:55 pm on March 1, 2011 Permalink | Reply
    Tags: , , , JavaFX layoutBounds, javaFx layouts, layout bounds in javaFx, , maxX, maxY, minX, minY   

    Bounds in JavaFX 

    Bounds in JavaFX:
    Bounds refers to the node’s size and position in JavaFx. A nodes rectangular bounds are represented by the Bounds class which provides init-only minX (minimum x value), minY (minimum y value), maxX (maximum x value), maxY (maximum y value) , width , height variables. The X/Y values can also be negative. When a node is created there are three different ways we can access the size and position of the nodes. i.e., boundsInLocal, boundsInParents, and layoutBounds.

    boundsInLocal – physical bounds in the node’s local coordinate grid (not the parent’s coordinate grid.), untransformed coordinate space, including shape geometry, space required for a non-zero strokeWidth that may fall outside the shape’s position/size geometry, the effect and the clip.

    boundsinParent – physical bounds of the node after ALL transform have been applied to the node’s coordinate space, including transforms[], scaleX/scaleY, rotate, translateX/translateY, and layoutX/layoutY. The rectangle will be defined in terms of the parent node’s coordinate system.

    layoutBounds – logical bounds used as basis for layout calculations; by default only includes a node’s shape geometry, however its definition may be overridden in subclasses. It does not necessarily correspond to the node’s physical bounds.

    It is important to understand that each node when created have its own coordinate grid systems that is different from its parents coordinate grid. For example, if we create a rectangle node and put it in the scene. The boundsInLocal references to the bounds of the rectangle within the coordinate grid of the rectangle node (includes the bound differences applied by the effect on the node), boundsInParent refers to the bounds of the rectangle within the coordinate grid of the scene (includes the bound differences applied by the effect on the node ), and the layoutBounds refers to the bounds within the coordinate grid of the rectangle node (doesn’t include bound differences applied by the effect and gives the actual shape geometry of the node).

    For example: for the following rectangle:

    var rect:Rectangle = Rectangle
    {
      translateX:10,
      translateY:10,
      x:130,
      y: 0;
      width: 120,
      height: 120
      fill: Color.BLACK
    }
    

    Rectangle Bounds In Local bounds:
    width: 120.0
    height: 120.0
    minX: 130.0 (x value specified)
    minY: 0.0 (y value specified)
    maxX: 250.0 (minX + width)
    maxY:120.0 (minY + height)

    Rectangle Bounds in Parent bounds:
    width: 120.0
    height: 120.0
    minX: 140.0 (x value + translateX. remember this refrences to the scene coordinate grid)
    minY: 10.0 (y value + translateY)
    maxX: 260.0 (minX + width)
    maxY: 130.0 (minY + height)

    Rectangle layout bounds:
    width: 120.0
    height: 120.0
    minX: 130.0
    minY: 0.0
    maxX: 250.0
    maxY: 120.0

    The layoutBounds bounds in this case is the same as the boundsInLocal bounds because no effect is applied to the rectangle. Now lets apply a drop shadow effect to the rectangle and see how the bounds change.

    var rect:Rectangle = Rectangle
    {
      translateX:10,
      translateY:10,
      x:130,
      y: 0;
    
      width: 120,
      height: 120
      fill: Color.BLACK
    
      effect: DropShadow
      {
        offsetX: 10
        offsetY:10
    
        color:Color.GREEN
        radius:20
    
      }
    }
    

    Rectangle Bounds In Local bounds:
    width: 160.0 (considers the difference due to the drop shadow effect)
    height: 160.0 (considers the difference due to the drop shadow effect)
    minX: 120.0 (considers the difference due to the drop shadow effect)
    minY: -10.0 (considers the difference due to the drop shadow effect. remember that bound values can be negative)
    maxX: 280.0 (minX + width)
    maxY: 150.0 (minY + height)

    Rectangle Bounds in Parent bounds:
    width: 160.0 (considers the difference due to the drop shadow effect)
    height: 160.0 (considers the difference due to the drop shadow effect)
    minX: 130.0 (considers the difference due to the drop shadow effect and is 130 here instead of 120 as in above because it adds the translateX value. This is because, it is in scene coordinate grid)
    minY:  0.0 (considers the difference due to the drop shadow effect and is 0 here instead of -10 as in above because it adds the translateY value. This is because, it is in scene coordinate grid)
    maxX:  290.0 (minX + width)
    maxY: 160.0 (minY + height)

    Rectangle layout bounds:
    width: 120.0  (actual width specified )
    height: 120.0 (actual height specified)
    minX: 130.0 (actual x specified)
    minY: 0.0 (actual y specified)
    maxX: 250.0 (minX + width)
    maxY: 120.0 (minY + height)

    Imortant points:
    Bounds minX/minY and maxX/maxY can be negative. ex: circle is centered on (0,0).
    layout bounds is a logical concept. ex: spin an icon without disturbing the layout of its neighbors
    Always use layoutBounds when measuring the current size and position of nodes for the purpose of the layout.
    All containers in javafx.scene.layout reference the node’s layoutBounds.
    if you want layoutBounds to match a node’s physical bounds(including effects, clip, and transform) then wrap it in a Group. ex: if you want a node to scale up on mouse-over and you want its neighbor to scoot over to make room for the magnified node.

    References made from:

    http://weblogs.java.net/blog/2009/07/09/javafx12-understanding-bounds#chase

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