Fork us on GitHub

GUI Builder Walkthru

A quick view of how working with the new GUI builder should feel like
Post Image

GUI Builder Walkthru

Since we announced the new GUI builder work we got quite a few questions in the discussion forum and offline so I prepared a quick video showing how the new GUI builder will look when released (more or less). Notice that a lot of things will change with the GUI builder but some things are pretty much fixed such as the basic architecture with the XML to Java process. This is unlikely to change much.

Some developers asked for samples of the XML and Java code the new GUI builder generates. For your convenience this is the code for the demo above specifically the XML gui file is:

<?xml version="1.0" encoding="UTF-8"?>

<component type="Form" layout="BoxLayout" boxLayoutAxis="Y"  title="TestForm" name="TestForm">
  <component type="TextField" text="TextField" name="Text_Field_1">
  </component>
  <component type="Label" text="Label" name="Label_1">
  </component>
  <component type="Container" layout="FlowLayout" flowLayoutFillRows="false" flowLayoutAlign="1" flowLayoutValign="0"  name="Container_1">
    <component type="Button" text="This Button" name="Button_2">
    </component>
  </component>
  <component type="Button" text="Hi World" name="Button_1" actionEvent="true">
  </component>
</component>

The Java code to match that is:

public class TestForm extends com.codename1.ui.Form {
    public TestForm() {
        this(com.codename1.ui.util.Resources.getGlobalResources());
    }
    
    public TestForm(com.codename1.ui.util.Resources resourceObjectInstance) {
        initGuiBuilderComponents(resourceObjectInstance);
    }

//-- DON'T EDIT BELOW THIS LINE!!!
    private com.codename1.ui.TextField gui_Text_Field_1 = new com.codename1.ui.TextField();
    private com.codename1.ui.Label gui_Label_1 = new com.codename1.ui.Label();
    private com.codename1.ui.Container gui_Container_1 = new com.codename1.ui.Container(new com.codename1.ui.layouts.FlowLayout());
    private com.codename1.ui.Button gui_Button_2 = new com.codename1.ui.Button();
    private com.codename1.ui.Button gui_Button_1 = new com.codename1.ui.Button();

// <editor-fold defaultstate="collapsed" desc="Generated Code">                          
    private void guiBuilderBindComponentListeners() {
        EventCallbackClass callback = new EventCallbackClass();
        gui_Button_1.addActionListener(callback);
    }

    class EventCallbackClass implements com.codename1.ui.events.ActionListener, com.codename1.ui.events.DataChangedListener {
        private com.codename1.ui.Component cmp;
        public EventCallbackClass(com.codename1.ui.Component cmp) {
            this.cmp = cmp;
        }

        public EventCallbackClass() {
        }

        public void actionPerformed(com.codename1.ui.events.ActionEvent ev) {
            if(ev.getSource() == gui_Button_1) {
                onButton_1ActionEvent(ev);
            }
        }

        public void dataChanged(int type, int index) {
        }
    }
    private void initGuiBuilderComponents(com.codename1.ui.util.Resources resourceObjectInstance) {
        guiBuilderBindComponentListeners();
        setLayout(new com.codename1.ui.layouts.BoxLayout(com.codename1.ui.layouts.BoxLayout.Y_AXIS));
        setTitle("TestForm");
        setName("TestForm");
        addComponent(gui_Text_Field_1);
        addComponent(gui_Label_1);
        addComponent(gui_Container_1);
        gui_Container_1.setName("Container_1");
        gui_Container_1.addComponent(gui_Button_2);
        gui_Button_2.setText("This Button");
        gui_Button_2.setName("Button_2");
        addComponent(gui_Button_1);
        gui_Text_Field_1.setText("TextField");
        gui_Text_Field_1.setName("Text_Field_1");
        gui_Label_1.setText("Label");
        gui_Label_1.setName("Label_1");
        gui_Container_1.setName("Container_1");
        gui_Button_1.setText("Hi World");
        gui_Button_1.setName("Button_1");
    }// </editor-fold>

//-- DON'T EDIT ABOVE THIS LINE!!!
    public void onButton_1ActionEvent(com.codename1.ui.events.ActionEvent ev) {
        Dialog.show("Hi", "Hi world: " + gui_Text_Field_1.getText(), "OK", null);
    }
}
Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.