Kawwa Portal Reference

1. KAWWA PORTAL
Reference
Date : April 06, 2012 / January 2012
Author : Angela RICCI/Emmanuel DEMEY

2. 1
The Anatomy of
Components

3. The Anatomy of Components
Component’s parent folder
DOCUMENTATION *
CATEGORY’s NAME
1
*
TEMPLATES Theme X LOGS
EN
FR
META*
info.properties
1 CURRENT CATEGORIES
COMPONENT’s NAME * META* 1. Page structure
2. Navigation
metadata.properties
3. Forms
4. Tables
(see next page for details) 5. Site Utilities
6. Blocks
7. Editorial
8. eCommerce
* Mandatory elements

4. The Anatomy of Components (continued)
Component’s folder content
COMPONENT’s NAME *
DEPENDENCIES META * HTML* JS FOREWORDS * AFTERWORDS
READMORE
(.js or .html) XHTML
metadata.properties snippet.html snippet.js forewords.html afterwords.html readmore.xx
RESOURCES *
HTML
DOCUMENTATION META*
info.properties
FOREWORDS TML JAVA
TAPESTRY 01_TapestryIntegration
forewords.html snippet.tml snippet.java
* Mandatory elements

5. The Anatomy of Components (continued)
Description of the Component’s folder content
THE FOLDERS
- dependencies: this folder must be present only in the case of “rich” components that need javascript plugins or
jQuery files
- resources: add this folder if your component needs specific images or additional files for its demo (besides the
images that depend of the graphical theme). For example, the “jpg” images that illustrate the “k-article”
component
- documentation: this optional folder must contain the “info.properties” file with information about documents
related to the component. See the “Contextual Documentation Scheme” chapter for more information.
- tapestry: this optional folder is present only in the case of Kawwa Components that are part of the Tapestry5-
jQuery Kawwa library. Please refer to the “Tapestry Integration Scheme” chapter for more information.
- xhtml: this optional folder will contain a XHTML version of the component’s snippet. Please refer to the “Version
Scheme” chapter for more information.
* Mandatory elements

6. The Anatomy of Components (continued)
Description of the Component’s folder content
THE FILES
- metadata.properties *: this file contains all meta keywords used to assemble the component’s page (see the
« Components Metadata » chapter for more information)
- snippet.html *: this file contains the HTML template for the component.
- snippet.js: this file contains javascript functions definitions and, above all, the « call » for the js function or plugin
on page load.
- forewords.html *: this file contains the text that presents the component and explains when and how to use it.
You must use the HTML syntax here.
- afterwords.html: this file contains some optional afterword text. You must use the HTML syntax here.
- readmore.xx (« .js » or « .html »): this file contains a single paragraph with additional instructions about the HTML
and/or javascript code. It will be added in the end of the « HTML Plain Code » or « How to Apply » blocks. Do not
add the <p> tag in this file.
* Mandatory elements

7. Minimal Structure for a new component
HTML5 version only HTML5 & XHTML versions
mynewcomponent mynewcomponent
metadata.properties metadata.properties
snippet.html snippet.html
forewords.html forewords.html
tapestry* xhtml
snippet.html
tapestry*
* Tapestry integration is shown here as a reference as it is conditional to the type of component

8. 2
Components
Metadata

9. Components’ Metadata
The Metadata of a component is stored in the « metadata.properties » file, which
must be found on the component’s root folder.
In this file, you will find the following data:
• The « name » keyword: contains the « visible » name of the component, that will
be used to present the component in the index, menu and component’s page.
This is a mandatory keyword.
• The « type » keyword: this keyword may have one of the two values,
« component » or « group ». In the case of a component, the only valid value is
« component ». The « group » value must be used only to categories’ folders.
This is a mandatory keyword.

10. Components’ Metadata (continued)
• The « urlParam » keyword: contains the name of the component as it must appear in the
component’s URL. For example, if the value of « urlParam » is « modal », the URL to the
modal window components will be
https://kawwa.atosworldline.com/component/modal
This keyword is also used as a search pattern in the style-sheet to comment the style
declarations related to the component.
This is a mandatory keyword.
• The « tags » keyword: contains a list of predefined, case-sensitive values that will identify
the component. Possible values are « jquery » or « tapestry ». Although this is a
mandatory keyword, there’s no mandatory value (it can be empty), and the order in
which the values appear is not important.
• The « css » keyword: contains the name of the components’ css class (or classes). This is
a mandatory keyword.
• The « version » keyword: contains the component’s version. If this keyword is missing, it
implies version 1.0.

11. 3
Component data
sources on the
Kawwa Portal

12. Component Data Sources on Kawwa Portal
1 COMPONENT CATEGORY 12
Select a theme:
2 Component Name i 3
Lorem ipsum sit amet consectetur omnia sol temperat purus e sotilis. Novo mundo
reserat faciem aprilis. 4
basket 13
HTML5 VERSION XHTML VERSION TAPESTRY INTEGRATION 5
14
Dependencies
Component demo 6 -jquery.js [20 Kb]
-jquery.ui.core.js [20 Kb]
15
Related documentation
HTML plain code + 7
CSS code + 8 -The sheet 1 [PDF, 20 Kb]
- Kawwa Guidelines [PDF, 20 Kb]
How to apply + 9
– Chapter 5, page 56
IE Backward campatibility +
10
Lorem ipsum sit amet consectetur omnia sol temperat purus e sotilis. Novo mundo
reserat faciem aprilis.
11

13. Component Data Sources on Kawwa Portal
Hereafter we explain the sources of content used to feed the component’s page on the
Kawwa Portal:
1. Component’s category name: comes from the meta keyword « name » defined on
« metadata.properties » file on category’s root folder
2. Component’s name: comes from the meta keyword « name » defined on
« metadata.properties » file on the component’s root folder
3. Component’s info (class name, version, interactive feature, Tapestry Integration): meta
keywords « css », « name », « tags », « version », defined on « metadata.properties » file
on the component’s root folder
4. Forewords: comes from the HTML text from the « forewords.html » file

14. Component Data Sources on Kawwa Portal
5. Versions tabs: HTML5 is the default tab. If the meta keyword « tags » has the value
« tapestry » (defined on « metadata.properties » file, on the component’s root folder), the
“Tapestry Integration” tab will be present. The XHTML tab will be present if there’s a
“xhtml” folder inside the component’s root folder.
6. Component’s demo: the component’s demo is assembled using the source snippet files
present in the component’s root folder. The style of the demo is defined by the current
graphical theme of the portal
7. HTML plain code block: the content of the « snippet.html » file. If a file « readmore.html »
exists, some information will be added in the end of this block.
8. CSS code block: the css declarations of the « CSS Code » block are directly taken from
the style-sheet of the current graphical theme of the portal. In order to find the matching
declarations for the component, the system searches for an opening and closing
comment (see “Style-sheets management” chapter for more information).

15. Component Data Sources on Kawwa Portal
9. How to apply block: this block is optional. Its presence is conditioned by the existence
or not of the « snippet.js » file. If this file exists, the content of the block will be read from
it. If a file « readmore.js » exists, some information will be added in the end of the block.
10. Afterwords: HTML text from « afterwords.html » file.
11. Dependencies: The content of the « dependencies » folder. It contains all jQuery plugins
and/or javascript functions needed, in the case of a rich component
12. Documentation block: The content of this block is read from the “info.properties” file,
contained in the « documentation » folder.
13. IE backwards compatibility: The content of this block is static. It presents links to the
two files needed in order to support IE versions <9, stored on the portal server. Please
refer to “Backwards Compatibility Scheme” chapter for more information.

16. 4
Style-sheets
Management

17. Style-sheet Management
Style-sheets Stacks
* All graphical themes takes into account both HTML and XHTML
GRAPHICAL THEMES* versions of components
1 2 3 4
css css css css
k-structure.css
k-theme0.css i-theme0.css iehacks0.css
(default theme)
css css css
k-theme1.css i-theme1.css iehacks1.css
css css css
k-themeX.css..... i-themeX.css… iehacksX.css…
Styles for portal specific content

18. Style-sheet Management (continued)
Style declarations pattern
metadata.properties file Theme Style-sheet
name = Main navigation /* ---------- MAIN NAV/FIRST LEVEL */ Opening
type = component /* CB/ mainNav */
pattern
urlParam = mainNav
tags = tapestry,html5,
css = k-navbar
. . . CSS declarations . . .
Closing
/* CE/ mainNav */
pattern

19. Style-sheet Management (continued)
Feeding the component’s page with style declarations
Reads « urlParam » keyword in
the « metadata.properties » file
on the current component’s
folder
Component’s
Reads style-sheet of the current Searches for the opening comment
page is
graphical theme pattern
requested to the
server
Checks current graphical theme
YES Found
Stop writing to
Closing Writes CSS line into the
component’s comment « CSS Code » block
page pattern?
NO

20. 5
Demo Scheme

21. Component’s Demo Scheme
In each component’s page the user can see and test the component in its « real state » (design,
interaction, etc.). Hereafter we explain how the component’s demo is assembled:
YES Does Component’s
Writes to « How «snippet.js»
to apply » Reads from « snippet.js » file page is
exists?
block requested to the
server
Writes content
(via k-load.js)
Searches for and reads from into the
Is there a folder « snippet.html » file « HTML plain
called NO code » block
« dependencies » in Javascript function applies
the component’s to component code
folder?
Writes content into the
Demo block
YES (#i-component)
Current
graphical theme
Loads dependencies styles apply
Adds infoblock
Displays
block and
writes links to component in its
js files « real state »
contained in
folder

22. 6
Backwards
Compatibility
Scheme

23. Backwards Compatibility Scheme
Supporting Internet Explorer Versions <9
In order to support older versions of Internet Explorer, we propose the use of two main files:
• ieGeneralFix.js: this JavaScript file defines fallback functions for unsupported CSS selectors used in
the main style-sheets
• iehacksX.css (where « X » is the number of the graphical theme): this style-sheet will fix display
problems and style definitions called by the fallback functions in « ieGeneralFix.js ». This style-sheet
is graphical theme’s dependent (one per proposed graphical theme)
Both files are called using Conditional Comments, in the form:
<!--[if lt IE 9]>
... Code ...
<![endif]-->
Those files are proposed in the components page.
NOTE : On the Templates pack, IE fallback functions are defined in the “k-general.js” file

24. 7
Contextual
Documentation
Scheme

25. Contextual Documentation Scheme
The “info.properties” file
A component may present one or more links to specific documents that will explain its use.
The « info.properties », located in a folder called « documentation », is a file that lists those documents titles and references.
There may be a local « documentation » folder in the component’s folder listing documentation for a given component, or a
documentation folder in a category’s folder, listing contextual documentation for a whole category of components.
The syntax for this file is (one line per referenced document):
Usability_Guidelines_Navigation.doc = fiche 4.9 | sheet 4.9
Page, sheet or chapter
Document file name reference (English version)
Page, sheet or chapter
reference (french version)
- not used today

26. Contextual Documentation Scheme
Documentation links at component’s page load
Component’s
page is
requested to the NO
server
Is there a
«documentation»
Checks component’s folder folder?
YES Checks one folder up
Reads « info.properties » file
NO
YES
Is there a file
with the same Creates new info block on
Gets document’s name
name in the component’s page
current folder?
Adds to the new
info block the
links to the
related
documentation

27. 8
The Templates
Pack

28. The Templates Pack
The user may choose to download the Templates Pack with 7 predefined templates and 1 empty page.
At download, it will be the current graphical theme’s style-sheets and images that will be packed along with the templates.
Notice that, for each graphical theme, we will have two packs: one pack for the XHTML version and one pack for the HTML5 version of templates and related
files.
Here below you present the content of a HTML5 Template pack :
k-themeX
css img js templates
article.html
k-structure.css plugins [1]
k-themeX
empty_template.html
k-themeX.css ui [2]
image_examples
iehacksX.css autocomplete_tags.txt [3] form.html
Eventually, web fonts files … jquery.js list_of_articles.html
k-general.js product_catalog.html
k-load.js product_details.html
results_list.html
[1] jQuery plugins treeview.html
[2] jQuery UI files
[3] Autocomplete search source example