Tuesday Feb 26, 2013

Managing Multiple Screens in JavaFX. (Part II)

After finishing with my first application (previous blog), I moved to my second talk I was delivering at JavaOne 2012. Now I was looking to build another UI application, for a small screen and constrained devices. I was looking into having multiple screens, but with very few UI components; I just needed to collect data from the web and displayed it. Looking at my previous framework it wasn't a good fit for this new scenario, and of course there isn't a unique solution for all applications. This is what I was trying to achieve:

  • Build an application for a city information app.

  • An application where you can explore the city's places.

  • Or you can check the map for places of interests.

  • Check the weather

  • Or even change the city

I wanted to build a more dynamic application, where screens just slide in and out... from top, bottom, right and left, like the red arrows implies. I decided to use a technique commonly used in game development, where there is a big background image, and we have a view port, like a small window, and it's by moving this window around that we get the illusion of screen changes. Notice that having a wide background picture create a great navigation effect!

    

  

Points to consider:

  • For this application I used NetBeans and JavaFX SceneBuilder, which are my favorite tools.

  • A very important consideration, from my point of view, is to have a good long background image. This will give you a nice navigation effect without any extra programming cost. It just looks good.

  • Only one big screen is designed in Scene Builder, one fxml file and one controller class. Very simple!

  • Think out of the box, your application doesn't always have to have conventional buttons, labels and other components. Navigation doesn't need to be in one direction!. If you design your UI interface correctly, the user will intuitively navigate through it without any problem! Nice looking and modern interfaces doesn't mean it will be difficult to use.

  • Customize your application using CSS. This application uses CSS heavily, giving a nice and unique touch.


    An example of the semi-transparent gray Panel areas styling looks like this:


       .my-gradientpane {
         -fx-background-radius: 10;
         -fx-background-color:
                radial-gradient(radius 100%,
                                 derive(-fx-base,-60%),
                                 derive(-fx-base,-80%)),
                derive(-fx-base,-40%),
                radial-gradient(radius 100%,
                                 derive(-fx-base,-60%),
                                 derive(-fx-base,-80%));
         -fx-background-insets: 0,1,2;
       }


    Or customizing your ChoiceBox could be something like this:



       .choice-box {
           -fx-background-color:
                  radial-gradient(radius 100%,
                                  derive(-fx-base,-60%),
                                  derive(-fx-base,-80%)),
                  derive(-fx-base,-40%),
                  radial-gradient(radius 100%,
                                  derive(-fx-base,-60%),
                                  derive(-fx-base,-80%));
           -fx-background-insets: 0 0 -1 0, 0, 1, 2;
           -fx-background-radius: 25, 25, 24;
           -fx-padding: 0.0em 0.5em 0.0em 0.0em;
           -fx-alignment: CENTER;
           -fx-content-display: LEFT;
       }


    You can find more detailed information about CSS here.

  • The viewport in my application was simply a container; in this case a Panel. This panel was smaller than the image in the background, it was just the screen's size. The rest of the screens were just not visible.

  • Moving around screens is easy. All the screens have the same width and height, so only a simple TranslateTransition was required here. A sample of this:



      ...
         @FXML
         private void showPlaces(MouseEvent event) {
            moveScreen(0, -MyEmbeddedApp.DEVICE_HEIGHT);
         }
     
         @FXML
         private void showWeather(MouseEvent event) {
            moveScreen(MyEmbeddedApp.DEVICE_WIDTH, 0);
         }
     
         private void moveScreen(int toX, int toY) {
            TranslateTransition moveMe = TranslateTransitionBuilder.
                     create().
                     toX(toX).
                     toY(toY).
                     duration(Duration.seconds(0.5)).
                     node(pane).
                     build();
                     moveMe.play();
         }
      ...


    The annotation @FXML in front of the showPlaces and showWeather methods is to be able to bind these methods to the UI components in your fxml code. More information about this can be found here.

This concludes this second part of how to manage applications with multiple screens using JavaFX. As you can see, there isn't a one-size-fits-all solution, but it's definitely a lot of fun when you need to design your UI interfaces. Have fun, design, think out of the box, and make the life of the user a bit easier and more enjoyable.

You can also see a related video I've created on our YouTube Java Channel, so you can see these applications live.

About

Angela Caicedo

Search

Categories
Archives
« February 2013 »
SunMonTueWedThuFriSat
     
1
2
3
4
5
6
7
9
10
11
12
13
15
16
17
18
19
20
21
22
23
24
25
27
28
  
       
Today