The Data Export Tool is different than many other tools inside the shared space because:
Because of the above, the design must be created in a way that can be implemented with HTML (the output for this tool) and be coherent with the rest of the tools, despite its diversity.
The main window shows the available options for this tool. We can see that the KP-Lab logo is clearly shown, to inform the user that this tool “belongs” to KP-Lab, although it is opened in a different window. Right next to the logo, we can see the title of the tool. Tabs are used to group different kind of actions.
In order to implement the above design we will need certain graphical assets which are shown in the table below.
(used as pattern with repeat-x)
|Tab Up Image|
|Tab Roll Image|
|Button Up State (left, pattern, right images)|
|Button Roll State (left, pattern, right images)|
|Button Press State (left, pattern, right images)|
|Button Disabled State (left, pattern, right images)|
The screen for the user action log is similar to the main screen therefore it can be implemented using the same graphical assets that we used before. We only need a small icon – a calendar – so that when the user clicks on it, we can show him a calendar to select the dates.
Nothing much to say here, because the above picture speaks for it self. We again use the same graphical assets as before and use the above guide for keeping spaces and margins correct.
As we stated earlier, our buttons are consisted of three graphical assets, representing the left side of the button, the pattern and the right side of the button. What we need is a bit of a code, to make it act and feel like a normal button, so we will start of with the css.
The above css declarations are for the up state of the button. We must also create the declarations for the roll, pressed and disabled states, which will look exactly like the above, but they will use different background images for each state.
We must then create some HTML code to utilize the above.
In the above code, we can see the usage of the classes we created earlier (button_up_left, button_up_pattern, button_up_right). We set the width of the button using a style declaration (style="width:40px;") and the label for the button by assigning a value (value="Test"). The output will be something like the one below.
As you can see from the above, we wrote some code to handle the appropiate events (rollOver, rollOut. Click) and we implemented that code into our previous html block (onclick, onmouseover, onmouseout events).
So what about the disabled button? That is very easy because this button is static by itself so we don't need any code to make it work. We just utilize the appropriate class that we created earlier.
The end result is something that looks like the one below.
So if we wanted to open Data Export Tool in a pop-up window with 600px width and 400px height, we could create a link like the one below.
The output would be something similar to the picture below
The coding standards used above are not the “defacto”. You are free to change anything above to suit your needs, or maybe even find a better way to implement all of the above. However, the result must look the same, in order to have a coherent look and feel across all applications.
You can find a working demo of the steps used to create the button on plone, at http://www.kp-lab.org/intranet/work-packages/wp6/gui-guidelines/data-export/data-export-example.zip