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 dont 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 doesnt 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 its 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"> <property name="geometry"> <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"> <property name="geometry"> <rect> <x>20</x> <y>50</y> <width>101</width> <height>16</height> </rect> </property> <property name="text"> <string>Something optional</string> </property> </widget> <widget class="QLineEdit" name="something"> <property name="geometry"> <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"> <property name="geometry"> <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>

<property name="geometry"> <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"> <property name="geometry"> <rect> <x>200</x> <y>90</y> <width>70</width> <height>24</height> </rect> </property> <property name="styleSheet"> <string>a_style.css</string> </property> <property name="text"> <string>OK</string> </property> </widget> <widget class="QPushButton" name="button_cancel"> <property name="geometry"> <rect> <x>120</x> <y>90</y> <width>70</width> <height>24</height> </rect> </property> <property name="styleSheet"> <string>a_style.css</string> </property> <property name="text"> <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>