Configurable SVG Images

I am the type of person who has a certain vision of what i want to achieve in mind and i struggle a lot finding the exact vision already implemented somewhere else. I strive to find a solution as close as possible to what i imagined in my mind and sometimes I have to settle for the closest option. In other cases, I have to implement the complete solution like i envisioned having the downside that it takes much more time and effort than actually necessary. Case in discussion here is finding the right icons for a GUI, webpage or even for my CV!

Why scalar vector graphics?
Simply because it is based on XML should be reason enough to go with scalar vector graphics. One can not only programmatically define the image, but applying changes to the svg images is also much easier. The main benefit however is that (as the name implies) they can be scaled to the desired resolution without Raster effects.

So coming back to the topic, it is often the case that while searching for the icons I cannot find the right icon that i need. It could that it is not available in the desired resolution or does not have the colors that i desire it to have. What i would like to have is a configurator which allows to take an already defined icon and customize it based on the user's requirements and then generate the corresponding SVG file. A stretch goal would be to provide a converter class for different image formats.(see example below)

Although my instinct tells me to use javascript and develop it as a web application, I would be implementing the application using Java (JavaFX to be more specific) just because I am new to the language and want to experiment with different aspects while creating something useable. The aspects I am interested in exploring are:

1. Template generation: I have decided to use Freemarker for the SVG template since it is lightweight and very straight forward to use.
2. Binding: Using the Model View Controller, bind the model elements with the UI elements.
3. Modeling: Using an ecore model, how can i automate most of the GUI generation. I would like to use Eclipse Client Platform for that. 

The code can be found at the github on the following location:

TODO: <Enter github link to the project here>.

Testing Syntax highlighting

I have integrated syntax highlighting in my post by following the well written tutorial here:

Example usage:

<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}

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

QtJambi Tutorial 2: Hello World

Now that we have the environment setup, let the fun begin.

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 : <package_name>
6. Click Finish
   
   


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

Add Qt libraries to the project

Inorder for Eclipse to recognize the qt library, we have to add the Qt Libraries.

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 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

Run the Jambi class

Based on how you have set <project_name> and <class_name>, the Jambi class would look something similar to the template below:

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();
     }
}

class_name.java

Below is a working example code.

QtJambiSimpleCls.java

package QtJambiSimplePck;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QWidget;

public class QtJambiSimpleCls extends QWidget
{

    public QtJambiSimpleCls() 
    {

        setWindowTitle("Quit button");

        initUI();

        resize(250, 150);
        move(300, 300);
        
        show();
    }

    private void initUI() 
    {

        QPushButton quit = new QPushButton("Quit", this);
        quit.setGeometry(30, 30, 75, 30);

        quit.clicked.connect(this, "close()");
    }
    
    public static void main(String args[])
    {
        QApplication.initialize(args);
        new QtJambiSimpleCls();
        QApplication.execStatic();
    }
}

1. Right click the <class_name> -> Run As -> Java Application
2. A Qt Application should launch as shown

Congratulations, you have successfully written the first QtJambi Application.

QtJambi Tutorial 1: Installation

This tutorial ​aims to setup the development environment for QtJambi.

Eclipse Installation: 

First you need to install an eclipse environment. The latest eclipse version is available from:
https://eclipse.org/downloads/
Select the appropriate version of eclipse according to your platform.

QtJambi Installation:

Next step is to download and install QtJambi. Note that you don't need to install the complete Qt framework. Just the Java binding QtJambi should also suffice.
Download the latest version of QtJambi from their website according your platform:
http://qtjambi.org/downloads

QtJambi: Java with Qt framework

Java is one of most popular cross-platform programming language. Qt is a cross-platform application framework. 

QtJambi is the Java binding for Qt framework. There are bindings available for Qt with Python as well. One major benefit of using Qt is that it separates the Graphical representation with the logic cleanly. This is extremely useful because the programmer can focus solely on the logic without worrying about the Graphical representation. The other main benefit is the reuse, I can use the same graphical representation of the application with different programming languages. e.g. I developed an application in Python, but i can reuse the same graphical representation with Java.

More information about Java, Qt and QtJambi can be found here:
 https://en.wikipedia.org/wiki/Java_(programming_language)
https://en.wikipedia.org/wiki/Qt_(software)
 https://en.wikipedia.org/wiki/Qt_Jambi

My first post

I have a very bad habit of forgetting stuff. From now on I have decided that I will actively write what I have learnt in this blog. I would focus on Programming mostly but could also write personal posts. Lets see how this evolves.  *fingers crossed*