Monday, May 25, 2009

Java Basics Using Qt Jambi Tutorial

The Basics

Using Qt Designer:

  1. First, we need to set-up the Java environment:

    1. run this then re-login:

$sudo bash -c "echo JAVA_HOME=/usr/lib/jvm/java-6-sun/ >> /etc/environment"

    1. Or, go to your home directory, view hidden files and copy this code to your .bashrc file:

export JAVA_HOME=[path to java directory]

Usually, the path is “/usr/lib/jvm/java-6-sun”.

    1. Or, using Nautilus, create empty file and name it Qt_Jambi_Designer.

    2. Copy and paste this inside the file:

export JAVADIR=/usr/lib/jvm/java-6-sun

sh [path/to/designer.sh in qt jambi]

    1. Save the file and make it executable.

  1. In Linux, you create a launcher having a command: [path/to/designer.sh in qt jambi]. In Windows, Go to Start->Programs->Qt->Qt Designer.

  2. Launch Qt Designer. Choose Main Window then press Create.


You will see the widget box on the left (where the line edits or textboxes, push buttons, or command buttons in Visual Studio). In the middle of the Main Window or Form where you place widgets to create your applications and what it would look like. On the right, is the property editor where you modify or edit the values like Name of the Main Window, Title or Name of push buttons, etc.


  1. Designing the Application:

    1. On the widget box display widget category, click label and hold left mouse button the drag to the Main Window.

    2. Place a Push Button (Buttons Category) and double-click on the push button label and change it to Hello World.

    3. You may resize it by clicking in the small boxes (handles) and drag. Go to property editor Qlabel category and delete Textlabel, you may also change the object name to helloWorldLabel or helloWorldPushButton.

    4. On the Qt Designer Menu, click on the form and preview. As you can see a preview of what your app will look like. (The Hello World button does nothing yet because we haven't put some code or assign Signals and Slots).

    5. Assign Signal and Slots using Qt Designer

      1. Click the Hello World push button and click the + button below the Signal/Slot editor on the right of the designer.

      2. Assign the values:

        1. Sender->hello world push button.

        2. Signal->pressed

        3. Receiver->helloworld label

        4. Slot->hide()

      3. Then Add + Another Signal/Slot:

        1. Sender->helloworld push button

        2. Signal->released

        3. Receiver->hello world label

        4. Slot->show()

    6. Running the App in Preview

      1. Form->Preview

      2. Click the button and see what happens.


When you press the button and hold, the label will disappear (hide) and when you release the left-mouse button, the label hello world will show again.


Where is the code?


This is where our IDE or editor comes in.

  1. Save the Main Window: File->Save as HelloWorld.jui (it must be jui not ui).

  2. Open the terminal or console window inside your folder where HelloWorld.jui resides.

  3. Go to your Qt Jambi you extracted then copy the location of your bin folder where juic executable resides: $[path/to/juic]juic HelloWorld.jui

  4. You will see HelloWorld.jui to Ui_HelloWorldMainWindow.java.

  5. Launch your editor and open Ui_helloWorldMainWindow.java


There is the Java generated code!

to be continued...

1 comment:

Khairul Imam said...

hey, i cant save my layout as .jui there's no option to save as .jui, any suggestion?