Thursday, October 31, 2013

CodenameOne project settings and Splash

Project Settings


At the beginning of the project I want to have a higher degree of control of how the application would behave on the phone and therefor I started with basic things (for a native developer) like orientation and fullscreen mode and I ended up spending some time to find the solution. At the end I discovered how to do it:

Fullscreen,

 not supported in the emulator, but available for Android an iOS via the build properties send to the build server. How to change it? Project Properties>CodenameOne> Build Hints add:
 ios.statusbar_hidden
android.statusbar_hidden having both the value "true"
















Orientation,

 this is available during runtime, but I wouldn't bet that it works on all platforms:

  if (Display.getInstance().canForceOrientation())
Display.getInstance().lockOrientation(false);
for portrait lockOrientation(true);
landscape lockOrientation(false);

Now that I got what I wanted lets continue

Splash screen


My goal was to have a background image cover all the screen and on top of it to add things like loading and a brands. I managed to do this by a combination between of themes with GUI or code.

First thing, to have a background image was more complicated than expected, and the way to do this is by adding a custom form selector inside the Themes with the Designer tool (double click the theme.res)



While, having the image in the project is done via Images > Quick Add multi images, where you want to add a big size to cover the HD and the smaller ones will be scaled from it.

The name of the component is important, if you select Form and keep it like this the change of property will be applied to all the Forms. In my case I want this background for Splash only, so I set the name to be SplashForm.

There is a trick, the same custom form selector has to be set for all the Form states, like Selected, Unselected, Pressed and Disabled (maybe not all in case of Splash, but better to be sure :P)



Also important is that for the Form that it is on Splash you change the UIID to SplashForm (instead of Form). If you are using GUI the way to do this is very simple...

For the code (I used the Add GUI > Splash and rewritten it into code):

        Form splash = new Form();
    splash.setUIID("SplashForm");
    BorderLayout bl = new BorderLayout();
    bl.setCenterBehavior(BorderLayout.CENTER_BEHAVIOR_CENTER_ABSOLUTE);
    splash.setLayout(bl);
   
    Container c = new Container(new FlowLayout());
    c.addComponent(new Label("petrumo"));
    splash.addComponent(BorderLayout.NORTH, c);
   
    c = new Container(new BoxLayout(BoxLayout.Y_AXIS));
    Container i = new Container(new FlowLayout(Component.CENTER));
    i.addComponent(new InfiniteProgress());
    c.addComponent(i);
   
    i = new Container(new FlowLayout(Component.CENTER));
    i.addComponent(new Label("Loading"));
    c.addComponent(i);
   
    splash.addComponent(BorderLayout.SOUTH, c);

        splash.show();

resulting in a nice Splash screen :)


Topics: #codenameone #setup #splashscreen #fullscreen #orientation

No comments:

Post a Comment