CodenameOne the setup

Setup

Setting up the evironment of codenameOne was quite straightforward. I chose the Eclipse route and pretty much followed the instructions.

After linking to the build server, my environment is ready to develop :)

Getting started

Creating the first project is common flow in Eclipse, however at one point you get to the choice of what kind of project do you want:

• HelloWorld (Visual)
• HelloWorld (Manual)
• ...

At the beginning this wasn't so clear what I am about to get with each project. After a few trial and error I discovered that the Visual was giving me a visual project where whatever I can change it in the visual editor and the Manual was an empty one where I have to create the UI structure by code.

What are the differences between this two types of project?

From the folder structure, I would say that the visual project has extra StateMachines in the generated and userclasses folder. I am sure that there are more in the properties and in the themes.res

From the source code point of the view, the instantiation is quite different.
In case of Manual

    public void start() {
     ...
        Form hi = new Form("Hi World");
        hi.addComponent(new Label("Hi World"));
        hi.show();
    }

all the Forms have to be coded

while for the Visual

public void start() {
       ...
        new StateMachine("/theme");      
 }

it is relaying on the instatiation of StateMachine

What is the common part?

By double clicking on the theme.res, you will open the CodenameOne Designer.

Regardless from what kind of project you open the Designer, it looks the same. At least in case of Theme. My initial disappointment was actually that in case of Visual you can create new GUI Builder elements and they will reflect in the project, while in case of Manual you can do the same, but nothing happens to your project. I would prefer not to have this distinction and start by developing visual and later switch to coding.

Workaround

For this potential problem, without too much hassle or need of digging into it, either I created 2 projects one Manual and one Visual in addition to the one I am working on and use them to combine the Visual creation of the items and afterwards translating them into code for a greater control or I convert them in between

How to convert from Visual into Manual (Hello world example)

• From codenameone_settings.properties remove 

mainForm=Main
package=generated
baseClass=src/generated/StateMachineBase.java
userClass=src/userclasses/StateMachine.java
guiResource=theme.res

• Delete from theme.res the GUI Element called Main.

• Delete from the src/ folder the genereted/ and userclasses/ folders

• From MyApplication 

Replace inside the -> start() the new StateMachine("/theme");

with

 Form hi = new Form("Hi World");
 hi.addComponent(new Label("Hi World"));
 hi.show();

 Make sure your init method is initializing the theme

public void init(Object context) {
        try{
            Resources theme = Resources.openLayered("/theme");
            UIManager.getInstance().setThemeProps(theme.getTheme(theme.getThemeResourceNames()[0]));
       }catch(IOException e){
            e.printStackTrace();
        }
    }

• Reorganize imports and you are good to go :)

How to convert from Manual into Visual (Hello world example)

The order of doing this is important, so please follow closely

• Add into codenameone_settings.properties 

mainForm=Main
package=generated
baseClass=src/generated/StateMachineBase.java
userClass=src/userclasses/StateMachine.java
guiResource=theme.res

• At this point, you want to copy from a GUI project the src/ generated and /userclasses folder, don't bother with already inside they will be overridden. 

Add into theme.res a new GUI Element called Main, whatever form you want, save the theme.res. This cause the /generated files to be overridden.

• in the MyApplication inside the start() method replace the creation of forms with the 

new StateMachine("/theme");

Also make sure the theme is not initialized inside the init(Object context)

public void init(Object context) {
    }

Now you have Visual project :)


Continued on creating a SplashScreen


Topics: #codenameone #setup #helloworld