Purpose of document

The above image shows the generic pop-up tool application. It's purpose is to act as a template for the developers when they need to develop a new application that is to be used inside the shared space. So basically, this is how your application should look like when you start developing it.

The reason why you should follow this template is that we want all the applications inside the shared space to have a coherent look and feel. That look includes the actual application window, the placement and background of the title and the placements of question, close, ok and cancel buttons.

In order to implement the above GUI we will need a combination of mxml declarations, css styles and graphical assets, which will be described below.

Implementing the Application Window

The window is done purely with css, so that we do not overload the shared space with images. The actual css declaration is:

As you can see, we define various aspect of our application such as background, border, corners, shadows and paddings. The end result should look like the picture below:

Implementing the Title

The title is done with a combination of css and a graphical asset. The css is the one shown below.

As you can see, we state into our css declaration (amongst other) that the background image of out title should be the symbol with the export link “ToolTitle” that is located inside “assets/Generic_Tool_GUI.swf”

Implementing the Help and Close Buttons

These buttons are done also with a combination of css and graphical assets. The css is shown below.

When the declaration is used for buttons, we can specify the “skins” for the various states (up, over, down, disabled). These skins are again symbols which are located inside “assets/Generic_Tool_GUI.swf”

Implementing the OK and Cancel Buttons

These buttons are done also with a combination of css and graphical assets. The css is shown below.

Creating the MXML

Now that we have all are css declarations and graphical assets ready, we are ready to create the actual application which will use all of the above. The code for this should look like the one below.

We start the coding with the inclusion of our css file “themes/default/style.css”. We continue with the TitleWindow tag and slowly building each “section” using Hbox, Spacer and Box tags in order to get the result we want.


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.

Many (if not all) of the above css declarations and assets are already included inside the shared space's main css (themes/default/style.css), so in most cases the only thing that you have to do is include this file. If more styles are needed for your app, you can either append them in the main css (if you think that they might come handy for someone else) or create another css and include that one. The same thing ofcourse goes for the assets.


The source code (flex) for the Generic Tool is located on plone at http://www.kp-lab.org/intranet/work-packages/wp6/gui-guidelines/generic-pop-up-tool/Flex_Generic_Tool_GUI_v2.zip/view


code1.gif Info on code1.gif 4027 bytes
code2.gif Info on code2.gif 3371 bytes
code3.gif Info on code3.gif 8084 bytes
code4.gif Info on code4.gif 5855 bytes
code5.gif Info on code5.gif 12039 bytes
generic-tool-window.png Info on generic-tool-window.png 2536 bytes
generic-tool.gif Info on generic-tool.gif 4967 bytes
  Page Info My Prefs Log in
This page (revision-4) last changed on 18:24 25-Mar-2017 by Thanasis Fotis.

Referenced by

JSPWiki v2.4.102