SOLoist™

3.4      GUI Style Configuration

In this step, we will complete the construction of our GUI with the following:

·        setting the icon and caption that appear next to the icon for objects of class Department;

·        setting the icon and caption that appear next to the icon for objects of class Employee;

·        specifying that a Department will have its subdepartments as its subnodes when rendered in tree views;

·        specifying that a double-click on an Employee shows up the Employee details panel, with the clicked Employee provided on its input pin;

·        specifying that a double-click on a Department shows up the Department details panel, with the clicked Department provided on its input pin.

In SOLoist, these and similar specifications are configured through the GUI style configuration. For each type of GUI items, such as objects of a certain class, the GUI item setting for that kind of item can specify how the icon, the caption, the tooltip, the subnodes, and other GUI style features are obtained. SOLoist provides a reach set of features that can be specified through GUI item settings. For example, you can specify that the icon for one particular object, or for all objects of some class are fixed, or are obtained from a particular pictorial attribute of the object. The similar holds for the caption rendered next to the icon – it can be a fixed text, or a text obtained dynamically from a certain attribute of the object, etc. All these are added as GUI item features for the particular GUI item setting. The following Java code fragment illustrates how this can be done through code:

Note: SOLoist Cloud does not support uploading Java code for the application. Therefore, creating GUI structure from code is not available in SOLoist Cloud. You should have SOLoist Professional installed on your personal computer, as well as Eclipse to use Java code for building GUI structures.

// Object setting Department

GUIObjectSetting departmentOS = GUIObjectSetting.create(context, Department.CLASSIFIER);

GUIPictureFeature.createSmallIcon(departmentOS, "res/img/department.png");

GUITextFeature.createName(departmentOS, "name");

GUINavigatorFeature.createSubnodes(departmentOS, "subDepts");

// Object setting Employee

GUIObjectSetting employeeOS = GUIObjectSetting.create (context, Employee.CLASSIFIER);

GUIPictureFeature.createSmallIcon(employeeOS, "res/img/employee.png");

GUITextFeature.createName(employeeOS, "name");

// Tooltip Department

GUITextFeature tooltipDept = new GUITextFeature();

tooltipDept.name.set(new Text("Tooltip"));

tooltipDept.isFixed.set(new Boolean(true));

tooltipDept.textValue.set(new Text("Double click to see details"));

departmentOS.features.add(tooltipDept);

// Tooltip Employee

GUITextFeature tooltipEmpl = new GUITextFeature();

tooltipEmpl.name.set(new Text("Tooltip"));

tooltipEmpl.isFixed.set(new Boolean(true));

tooltipEmpl.textValue.set(new Text("Double click to see details"));

employeeOS.features.add(tooltipEmpl);

Similarly, the reaction on a double click is specified in the GUI item setting with bindings to one ore more target input pins of components. For example, we will create a double-click binding feature for objects of Employee to the input and show input pins of the Employee panel, and to the show input pin of the Employee command panel. This is illustrated by the following code fragment:

// Binding feature Department

GUIBindingsFeature bfDepartment = new GUIBindingsFeature();

bfDepartment.name.set(new Text(GUIFeatureNames.BINDINGS));

GUIComponentBinding.create(bfDepartment.doubleClick, departmentPanel.input);

GUIComponentBinding.create(bfDepartment.doubleClick, departmentPanel.show);

GUIComponentBinding.create(bfDepartment.doubleClick, departmentCommandPanel.show);

departmentOS.features.add(bfDepartment);

// Binding feature Employee

GUIBindingsFeature bfEmployee = new GUIBindingsFeature();

bfEmployee.name.set(new Text(GUIFeatureNames.BINDINGS));

GUIComponentBinding.create(bfEmployee.doubleClick, employeePanelTab.show);

GUIComponentBinding.create(bfEmployee.doubleClick, employeeCommandPanel.show);

GUIComponentBinding.create(bfEmployee.doubleClick, employeePanelTab.input);

employeeOS.features.add(bfEmployee);

Let us just mention that GUI item settings can be organized into GUI contexts, and can be inherited or redefined in subcontexts, as described in the Book. This allows rich and powerful GUIs without redundant information in the application.

Now you can follow the instructions to configure the GUI style as just explained:

If you want to skip this step:

To skip this step and get the final GUI structure developed here, take the ready GUI structure available under the application named “CompanyOrganization – step 5”. You also have to set the root Department in both Department tree view components. You can see that application directly over its URL in your browser, or you can open the application by selecting it and pressing Open application.

1. Select the GUI Style configuration option in the main menu of SOLoist Application Control Center.

2. Select the default context and create a new object setting for the class Department.

 

 

 

3. Go to the details of the newly created object setting to configure it.

 

 

4. Add a small icon feature for this object setting and upload the icon you want to use for Departments .

 

 

 

 

 

 

 

 

 

 

5. Add a caption feature for this object setting and specify it to refer to the attribute name of this class.

 

 

 

 

6. Add a tooltip feature for this object setting and specify the text you want to appear as a tooltip for Departments.

 

 

7. Add a subnodes feature for this object setting and specify it to refer to the property subDepts of this class.

 

 

8. Add a bindings feature for this object setting and add three bindings from the output pin doubleClick of this feature and input and show input pins of the Department panel component and the show input pin of the Department command panel.

 

 

 

 

 

 

 

 

 

 

9. Do the similar procedure for a new object setting for rendering objects of class Employee.

10. Run the prepared application and watch the result. You will see the improvements in the appearance, as well as the reaction on double clicks.