General Considerations

The Data Export Tool is different than many other tools inside the shared space because:

  1. It's not built using Flex or Flash (Actionscript 3.0)
  2. It opens in a completely new window (or tab)

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.

Data Export – Main Screen

Data Export Main Screen

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.

KP-Lab Logo
Tabs' Background
(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)

As you can see from the above, we use three different graphical assets (left, pattern, right) to create a button. The reason for this is because if we used only one, we would be limited by that certain image (in the number of characters for our labels). So if for example the image we used for our button was 60px, we could give the button a label “Submit”, but we couldn't give it a label “Specification” because the word has too many characters. We could get away by creating another image with more px. But that would still give us a restriction. So in order to be “safe” and use whatever label we want, we create 3 assets and then we “glue” them together with some html, javascript and css (an example of how to do this is given later on).

Data Export – User Action Log

Data Export User Action Log

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.

Data Export – Summary Table

Data Export Summary Table

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.

Creating Complex Buttons

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.

However, this button is pretty static so in order to implement a rollover and press state, we must include some javascript code to the above example.

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.

Accessing this Tool from the Shared Space

As we said earlier, this tool opens in a completely new window (or tab), giving the user the “feeling” that he is navigated away the shared space. In order to reduce this “feeling”, we can open this window as a centered popup by using some javascript code. This way, the previous window (shared space in this case) will stay underneath, making the “transition” between the two windows more user friendly.

Below, we have an example of the javascript code to use to accomplish that.

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

Data Export Tool In A Popup Window

Conclusion

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.

References

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

Attachments

activity_analysis.jpg Info on activity_analysis.jpg 128770 bytes
button_disabled.png Info on button_disabled.png 538 bytes
button_press.png Info on button_press.png 634 bytes
button_roll.png Info on button_roll.png 577 bytes
button_up.png Info on button_up.png 593 bytes
calendar.png Info on calendar.png 1126 bytes
code1.gif Info on code1.gif 5585 bytes
code2.gif Info on code2.gif 4311 bytes
code3.gif Info on code3.gif 14182 bytes
code4.gif Info on code4.gif 4778 bytes
code5.gif Info on code5.gif 4566 bytes
code6.gif Info on code6.gif 1924 bytes
dataexport-popup.png Info on dataexport-popup.png 304095 bytes
disabled-button.png Info on disabled-button.png 1289 bytes
kplab-logo.png Info on kplab-logo.png 7047 bytes
main_screen.jpg Info on main_screen.jpg 107130 bytes
tab-background.png Info on tab-background.png 1013 bytes
tab_roll.gif Info on tab_roll.gif 697 bytes
tab_up.gif Info on tab_up.gif 709 bytes
test-button.png Info on test-button.png 1154 bytes
user_action.jpg Info on user_action.jpg 77067 bytes
  Page Info My Prefs Log in
This page (revision-3) last changed on 18:24 25-Mar-2017 by Thanasis Fotis.
 

Referenced by
...nobody

JSPWiki v2.4.102
[RSS]