Qt XML to ExtJS Rendering Script

Qt XML to ExtJS Rendering script

The TBD script has to take a Qt XML .ui file describing a dialog, parse it and generate a

javascript file that builds the same dialog using ExtJS 3. Also, a set of dialogs already

implemented in a native application that will be provided (only the compiled version), have to

be replicated using QtDesigner and the TBD script.

It has to be implemented in a way that the Qt XML parsing is independent from the ExtJS

rendering, because it will be extended to support other widget frameworks for other platforms

(native code, not only web).

There are three containing windows, with about 150 forms that use about 25 different

widgets, some of which are not implemented by Ext. These dialogs are going to be integrated

in a web application developed outside of this project.

The script is to be run only when a modification to the dialogs is made by the designers. It

should not be part of the runtime of the external web application.

The three containing windows look like the above, having a tree at the left acting as an index.

For performance reasons, the dialogs have to be assembled in a way that every form is

rendered as needed (when clicked in the tree index, not all at once). Other optimizations are

welcome.

The script will also take as input a set of XML files describing the data types of the fields in the

forms, each one identified by a unique id. This description may include the type (integer,

string, etc.), valid values or ranges, etc. The fields of the resulting dialogs have to use the tools

provided by ExtJS to check the user input according to the definitions given in the XML files.

Functional requirements

• The script has to be easily run with only the following input:

o The unmodified Qt XML files (.ui).

o The XML files defining the data types.

• The output has to be JavaScript file(s) (.js) with the definition of the dialogs. These files

will be included without modification in the application. They don’t have to include

ExtJS or any reference to it, nor any HTML surrounding structure.

• The output has to render ExtJS dialogs with the same controls, structure and behavior

(connections between components inside the dialogs) than their Qt counterparts.

Subtle visual differences corresponding to the different style of the widgets

frameworks are allowed, but the dialogs have to be functionally and structurally

equivalent.

• The output will consist of only JavaScript code, and any visual output has to be done

using ExtJS and any extensions developed. It is also possible to include 3rd

party

extensions if and only if those are stable, actively maintained and compatible in

licensing terms.

• The generated JavaScript code has to be clean and compliant to the standards. It has

to work on all major browsers, including all browsers supported by ExtJS.

• The dialogs have to be assembled in a way that every form is rendered as needed

(when clicked in the tree index, not all at once).

• The renderers (only the ExtJS one for this project) have to be developed in a plug-in

structure in order to make it easy to develop new ones with ease.

• The code of the script has to be well structured and commented in order to ease

maintaining task as well as future extensions and improvements.

• The deliverables include:

o All source code of the script.

o Qt XML files (.ui) corresponding to the dialogs to replicate, that renders cleanly

with the script into JavaScript/ExtJS (.js).

o Documentation.

Widgets needed

• Window.

• Tabbed section.

• Wizard.

• Label: Stylable, supporting drawing a horiozontal line to divide sections. Can include

other widgets like locks and links.

• Lock: Lock icon that doesn’t interact directly with the user, but can show

locked/unlocked and active/inactive.

• CheckBox: Tri-state, supporting the state “some” checked (gray, ticked).

• Labeled boxed groups for form elements. Can include other widgets like locks and

checkboxes.

• RadioButton.

• Button: Stylable: with/without icon or text.

• Horizontal slider: Stylable: with/without tickmarks.

• Dropdown Menu (ComboBox).

• TextBox

• LineEdit

• IP LineEdit: IPv4 and IPv6 versions.

• SpinBox: supporting numbers and time values

• Browse Button: It has to support not only the standard HTML functionality, but also

other functionalities, like adding paths to a list in a grid.

• TreeView: with support for icons, checkboxes and contextual menu, depending on

item clicked.

• GridView: supporting colums with text, icons and tree-like indentation.

NOTE: Reasonable equivalent controls already existing ExtJS are accepted. Not all of these

widgets require customizations as long as the Developer proposes an ExtJS equivalent that

provides the same functionality despite having some look&feel differences.

Example of a Qt XML file This files are created by QtDesigner (.ui) when saving interface design projects. The following is

a draft example that shows how the interface design XML will look like. It codes for this dialog,

here rendered using QT (just to show the general look):

The second text field is enabled only if the checkbox is checked. Initially it’s disabled.

Some remarks follow:

• There is an easy GUI way to set custom properties for widgets, so CKEYID (needed for

integration with the rest of the project), maximum and minimum values and other

properties can be expressed easily in the XML element.

• Connections between widgets are expressed in the <connections> element. In the

example developed, the checkbox enables and disables one of the line edit fields.

• The <hints> element is a GUI feature that makes it easy for the designer to see

graphically the connections between widgets. It is not parsed to generate any

functional code.

• Widgets geometry is absolute (position/size).

• CSS style sheets can be attached to any widget for customizing its look.

The GUI generated XML for the dialog:

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

<ui version="4.0">

<class>example_dialog</class>

<widget class="QDialog" name="example_dialog">

<property name="enabled">

<bool>true</bool>

</property>

<property name="geometry">

<rect>

<x>0</x>

<y>0</y>

<width>283</width>

<height>126</height>

</rect>

</property>

<property name="windowTitle">

<string>Example Dialog</string>

</property>

<widget class="QLabel" name="label">


<rect>

<x>20</x>

<y>20</y>

<width>60</width>

<height>16</height>

</rect>

</property>

<property name="text">

<string>Something</string>

</property>

</widget>

<widget class="QLabel" name="label_2">


<rect>

<x>20</x>

<y>50</y>

<width>101</width>

<height>16</height>

</rect>

</property>


<string>Something optional</string>

</property>

</widget>

<widget class="QLineEdit" name="something">


<rect>

<x>119</x>

<y>20</y>

<width>131</width>

<height>21</height>

</rect>

</property>

<property name="CKEYID" stdset="0">

<string>CKEY_username</string>

</property>

<property name="type" stdset="0">

<string>STRING</string>

</property>

<property name="max" stdset="0">

<string/>

</property>

</widget>

<widget class="QCheckBox" name="use_optional">


<rect>

<x>120</x>

<y>50</y>

<width>16</width>

<height>20</height>

</rect>

</property>

</widget>

<widget class="QLineEdit" name="something_optional">

<property name="enabled">

<bool>false</bool>

</property>


<rect>

<x>140</x>

<y>50</y>

<width>111</width>

<height>20</height>

</rect>

</property>

<property name="CKEYID" stdset="0">

<string>CKEY_password</string>

</property>

<property name="type" stdset="0">

<string>STRING</string>

</property>

<property name="max" stdset="0">

<string/>

</property>

</widget>

<widget class="QPushButton" name="button_ok">


<rect>

<x>200</x>

<y>90</y>

<width>70</width>

<height>24</height>

</rect>

</property>

<property name="styleSheet">

<string>a_style.css</string>

</property>


<string>OK</string>

</property>

</widget>

<widget class="QPushButton" name="button_cancel">


<rect>

<x>120</x>

<y>90</y>

<width>70</width>

<height>24</height>

</rect>

</property>

<property name="styleSheet">

<string>a_style.css</string>

</property>


<string>Cancel</string>

</property>

</widget>

</widget>

<resources/>

<connections>

<connection>

<sender>use_optional</sender>

<signal>clicked(bool)</signal>

<receiver>something_optional</receiver>

<slot>setEnabled(bool)</slot>

<hints>

<hint type="sourcelabel">

<x>98</x>

<y>60</y>

</hint>

<hint type="destinationlabel">

<x>136</x>

<y>61</y>

</hint>

</hints>

</connection>

</connections>

</ui>

Documents

Qt XML to ExtJS Rendering Script