QtJambi Tutorial 3: Hello World with JUI files

Qt supports a very nice abstraction layer between the Graphical representation and the control logic. This separation makes the code much cleaner, much more debuggable (in terms of unit testing) and increases confidence (you can be sure that changing the graphical representation should have no effect on the logic behind). QtDesigner lets the programmer design their user interfaces in an xml format (User interface or .ui files as they are called) which can be linked with any programming language including C++, Python, Java, Ruby, etc. This has an obvious scalability factor for reusing and maintaining the same look and feel across several platforms.

This tutorial covers a Hello World example working with JUI files.

Creating a Java Project

1. Create a new Java Project File -> New -> Project -> Java -> Java Project



2. Give the project a suitable name
3. Click Finish



4. Create a new package. Right click the Project -> New -> Package
5. Give the package a suitable name
6. Click Finish



7. Right click the created Package -> New -> Class
8. Give the class a suitable Name
9. Click Finish

Converting an existing .ui file to .java class

For QtJambi the usual .ui files have to be modified first to Java specific .jui files. This requires a conversion process. I intend to automate it since it is really straight forward. 

.ui file to .jui file

1. Open the .ui file using a text editor (I used gedit)
2. Remove the first line of the file which looks something like this:
   <?xml version="1.0" encoding="UTF-8"?>
3. Delete the whitespace on the top of the file.
4. Modify this line of code : <ui version="4.0"> to look like this <ui version="4.0" language="jambi"> This line should be at the top of the file.
5. Modify the file extension to be .jui

.jui file to .java file

1. Go to the QtJambi Installation path e.g. C:\qtjambi-4.8.6\bin
2. Open the command prompt and enter the following line. Replace the <variable> with suitable names according to your needs.
   juic.exe <filename.jui> -d <output_dir> -p <eclipse package name>
3. Alternatively, you could also add the QtJambi Installation path to the windows $PATH so you dont have to navigate to the bin folder.

Add Qt libraries to the project

1. Right click package -> Build Path -> Configure Build Path …
2. Click Library -> Add External Jar
3. Browse to C:\qtjambi-4.8.6 and select qtjambi-4.8.6.jar file
4. Select the added jar file. Open the drop down list -> Native library location -> Edit
5. Click External Folder and Browse to the QtJambi Installation path e.g. C:\qtjambi-4.8.6\lib
6. Click Ok
7. The package should now find the references
8. Make sure the class name matches with the .java file

Reference the ui file in the Main Java class

After we have the generated Ui_<ui_class_name>.java file, we can integrate it in the java class library. Here is a template on how to do that:

class_name.java

package <package_name>;

import com.trolltech.qt.gui.*;

public class <class_name> 
{

    public static void main(String[] args) 
    {
        // TODO code application logic here
        QApplication.initialize(args);
        QMainWindow window = new QMainWindow();
        Ui_<ui_class_name> ui = new Ui_<ui_class_name>();
        ui.setupUi(window);
        window.show();
        QApplication.execStatic();
    }
}

Here is a working example:

QtJambiCls.java

package QtJambiJuiPck;

import com.trolltech.qt.gui.*;

public class QtJambiCls {

    public static void main(String[] args) 
    {
        // TODO code application logic here
        QApplication.initialize(args);
        QMainWindow window = new QMainWindow();
        Ui_TestJuiForm ui = new Ui_TestJuiForm();
        ui.setupUi(window);
        window.show();
        QApplication.execStatic();
    }
}

Congratulations, now you can develop GUI applications with .ui files