Codename One : Creating the GUIs

This tutorial is the first in a series that helps you create a codename one application. I recently wrote an article to introduce you to codename one if you need it. If not, let’s get started.
We will create a humble app that stores and manages different informations about books. Let’s call it ‘Shelfie’. Starting with creating our GUIs in this tutorial, we will pass to connecting our app to a mysql database. Then, keeping things simple, the last tutorials will be about integrating an API to the app.

Which way to GUI ?

First thing that might come to our minds is if we should use the GUI builder provided by codename one, or just code our guis and go slowly but surely. Well, in this tutorial we will go for writing code ! But, If you want to learn how to use the designer and go faster with building your guis, I can help you with these few links :
– Tutorials on the codename.com : using the new gui builder | working with the gui builder
– Youtube video tutorials : codename one : how to make the guis | a look at using the designer tool

If not, let the fun begin ! We’ll create a main interface (saying it’s the home interface in a real app ! ), and few other UIs : for adding a book, displaying a single book’s informations, displaying the books in our bookshelf and eventually deleting or editing one book’s infos.

Code your GUI

Create a new codename one project . Name your main package guis, and your main class Shelfie :

Add the following code to Shelfie.java :

public class Shelfie {
    
    private Form current;
    public static Form mainForm;
    private Button addBookBtn,listBooksBtn;
    private Container mainContainer;
    private Resources theme;

    public void init(Object context) {
        theme = UIManager.initFirstTheme("/theme");
    }
    
    public void start() {
        if(current != null){
            current.show();
            return;
        }
        UIBuilder ui = new UIBuilder();
        addBookBtn = new Button("Add new book");
        addBookBtn.getUnselectedStyle().setFgColor(5542241);
        listBooksBtn = new Button("My books");
        listBooksBtn.getUnselectedStyle().setFgColor(5542241);
        mainContainer = new Container();
        mainContainer.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
        mainContainer.add(addBookBtn);
        mainContainer.add(listBooksBtn);
        mainForm=new Form();
        mainForm.setLayout(new BorderLayout());
        mainForm.add(BorderLayout.CENTER,mainContainer);
        addBookBtn.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent evt) {
                new AddBook().show();
            }
        });
        listBooksBtn.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent evt) {
               
            }
        });
        mainForm.show();
    }

    public void stop() {
        current = Display.getInstance().getCurrent();
        if(current instanceof Dialog) {
            ((Dialog)current).dispose();
            current = Display.getInstance().getCurrent();
        }
    }
    
    public void destroy() {
    }
}

This is the very basic code we write to create an interface with two buttons, with each taking us to a new interface. You can notice that the addBtnClick shows a new AddBook ui. The listBooksBtn’s click retrieve books list from the database and displays it. We learn this in the coming tutorial.
Now let’s create the AddBook.java class :

public class AddBook extends Form {
    
    private final Label l1,l2,l3,l4,l5;
    private final TextField titleTf,authorTf,categoryTf,isbnTf;
    private final Container mainContainer;
    private final Button addBtn,backBtn;
    
   public AddBook(){
       
        this.setLayout(new BorderLayout());
        mainContainer =new Container();
        mainContainer.setLayout(new GridLayout(8,2));
        l1 = new Label("Add new book");
        l1.setAlignment(CENTER);
        //l1.getUnselectedStyle().setAlignment(Component.CENTER);
        l1.getUnselectedStyle().setFgColor(-16777216);
        Font l1_font = Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_LARGE);
        l1.getUnselectedStyle().setFont(l1_font);
        l2 = new Label("Title:");
        titleTf = new TextField(""); 
        l3 = new Label("Author:");
        authorTf = new TextField("");
        l4 = new Label("Category:");
        categoryTf= new TextField("");
        l5 = new Label("ISBN:");
        isbnTf= new TextField("");
        addBtn= new Button("Add");
        addBtn.getUnselectedStyle().setFgColor(5542241);
        mainContainer.add(l1);
        mainContainer.add(new Label());
        Statics.setLabelStyle(l2);
        mainContainer.add(l2);
        Statics.setLabelStyle(l3);
        mainContainer.add(l3);
        mainContainer.add(titleTf);
        mainContainer.add(authorTf);
        Statics.setLabelStyle(l4);
        mainContainer.add(l4);
        Statics.setLabelStyle(l5);
        mainContainer.add(l5);
        mainContainer.add(categoryTf);
        mainContainer.add(isbnTf);
        mainContainer.add(addBtn);
        backBtn = Statics.createBackBtn(); 
        mainContainer.add(backBtn);
        addBtn.addActionListener((ActionListener) (ActionEvent evt) -> {
            // add a book 
            });
        this.add(BorderLayout.NORTH, mainContainer);
   }
    
}

The AddBook class extends the Form class, which itself extends Container, which extends Component. Genius!So we have ‘ a gui ‘ created once we call the AddBook constructor. In Our gui, we added different components, we styled few of them, defined a layout for our main component (the form) and anchored the elements to it. We provided navigation between forms (or guis) through the backBtn’s ActionListener.
In general terms, that’s what it takes to creat your interfaces and it’s up to you to add your touches, by positioning, styling, polishing, or animating. Before passing to the next tutorial about adding to and selecting from a database, I have to mention that I added a Statics.java class in a utils package where I coded some methods we’re going to use more than once in different classes through our project. The setLabelStyle() method will be used in more than a ui, and the createBackBtn as well.
Here is the code for Statics.java :

public class Statics {
    
    public static void setLabelStyle(Label l){
        l.getUnselectedStyle().setFgColor(-16777216);
        l.getUnselectedStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_ITALIC, Font.SIZE_MEDIUM));
    }
     
     public static Button createBackBtn(){
         Button b=new Button("Back");
         b.getUnselectedStyle().setFgColor(5542241);
         b.addActionListener((ActionListener) (ActionEvent evt) -> {
             Shelfie.mainForm.show();
         });
         return b;
     }    
}

Besides, clicking the listBooksBtn on the main ui, creates a new form, adds a list of books to it and shows it. The list is populated from the database, that’s why I skipped this ui’s code to discuss it in the next tutorial.

To wrap up

That’s all coders ! You’ve now created your first simple codename one project . You can check  the next tutorial to create your first MySQL database project.