
= User's Guide =

The uses of the MDE Rich Text Widget is easy and straightforward. The user interface is splitted into two sections. The toolbar and the text area.

=== Toolbar ===

The toolbar contains tools which helps for formatting the typed text in the text area. For instances it contains bold tool to turn into '''bold style'''  the selected text or newly typed characters after activating the tool.

Here, an example of toolbar which contains most used tools

[[File:../img/richtext_toolbar.png|Toolbar]]

Commonly used Tools (also, called items):

{|
|[[File:../img/openInEditor.gif|Open in editor]]
|'''Open in Editor''' 
| Allows to open an Eclipse editor which contains a MDE Rich Text Widget binded to the current model element
|-
|[[File:../img/save_image.gif|Save editor content]]
|'''Save editor content'''
| Allows to set the content of the editor to the feature of the element associated to the editor
|-
|[[File:../img/refresh.gif|Refresh editor]]
|'''Refresh editor'''
| Allows to refresh the content of the editor
|-
|[[File:../img/richtext_styles.png|Style]]
|'''Styles'''
| Allows to apply a style on the selected or typed characters
|-
|[[File:../img/richtext_paragraph_format.png|Paragraph format]]
|'''Paragraph Format'''
| Allows to apply a style on the paragraph
|-
|[[File:../img/richtext_font.png|Font name]]
|'''Font Name'''
| Allows to apply a font on the selected or typed characters
|-
|[[File:../img/richtext_font_size.png|Font size]]
|'''Font Size'''
| Allows to apply a size on the selected or typed characters
|-
|[[File:../img/richtext_clipboard.png|Clipboard]]
|'''Clipboard'''
| Allows to cut, copy selected characters, and past new characters in text area
|-
|[[File:../img/richtext_clean.png|Toolbar]]
|'''Clean content'''
| Allows to remove all content in text area
|-
|[[File:../img/richtext_char_style.png|Basic styles]]
|'''Baisc Styles'''
| Allows to apply a basic style (bold, italic...) on selected or typed characters
|-
|[[File:../img/richtext_colors.png|Colors]]
|'''Colors'''
| Allows to apply text and background color on selected or typed characters
|-
|[[File:../img/richtext_paragraph.png|Paragraph]]
|'''Paragraph'''
| Allows to add list (numbered or bulleted) and increase or decrease indentation of selected or typed characters. See [[#List_Properties|List Properties]] section for the customization of list properties
|-
|[[File:../img/richtext_links.png|Links]]
|'''Links'''
| Allows to add links and pictures. See the [[#links_management|Link management]] section for more information
|}

=== Text area ===

The text area is used to add text content, links and images. It looks like following picture

[[File:../img/richtext_text_area.png|Text area]]

<span id="List_Properties"/>
=== List properties ===

===== Numbered List Properties =====

A default behavior at adding numbered list ([[File:../img/richtext_numbered_list_tool.png|Numbered list tool enable]]) is enumerating items by decimal as shown below in text area:

[[File:../img/richtext_numbered_list.png|Numbered List]]

To access to the properties of the list, right-click on an item of the list and then, choose ''Numbered List Properties'' as shown after:

[[File:../img/richtext_numbered_list_properties_menu.png|Numbered List Properties Menu]]

This window will appear.

[[File:../img/richtext_numbered_list_properties.png|Numbered List Properties]]

The available customizations are:
# The start index of the list. By default is 1
# The type of enumeration. It could be:
## Decimal (1, 2, ...)
## Lower or upper Roman number(I, II, ...)
## Lower or upper alphabetical order (A, B, ...)

For instance, With Upper roman enumeration and start index to 100:

[[File:../img/richtext_numbered_list_properties_roman.png|Roman enumeration List starts with index 100]]

===== Bulleted List Properties =====

A default behavior at adding bulleted list ([[File:../img/richtext_bulleted_list_tool.png|Bulleted list tool enable]]) is enumerating items by disc as shown below in text area:

[[File:../img/richtext_bulleted_list_properties.png|Bulleted List]]

To access to the properties of the list, right-click on an item of the list and then, choose ''Bulleted List Properties'' as shown after:

[[File:../img/richtext_bulleted_list_properties_menu.png|Bulleted List Properties Menu]]

This window will appear.

[[File:../img/richtext_bulleted_list_properties_window.png|Bulleted List Properties]]

The available customizations are:
# Circle, which corresponds to non filled disc
# Disc, which corresponds to filled circle
# Square, which corresponds to filled square

For instance, With square type:

[[File:../img/richtext_bulleted_list_properties_square.png|Square bulleted List]]

''NB: No Set has the same effect as Decimal or Disc type''

<span id="links_management"/>
=== Links management ===

==== links tool ====

MDE Rich text provides a tool ([[File:../img/richtext_links_tool.png]]) for adding links into the contents and in the same way the navigation to the target of the links with the appropriate tool.

The link types allowed are:

{|
|URL
| for instance: http://www.polarsys.org/kitalpha/
|-
|File (Absolute Path) '''not recommended'''
| Choice not recommended if you want to share information and collaborate. Use URL link instead.
Link to the files on the local disk of the computer. For instance: /home/me/folders/program.c
|-
|File (Project Relative Path) '''not recommended'''
| Choice not recommended if you want to share information and collaborate. Use URL link instead.
Link to the file in the workspace. For instance: /project.name/model.componentsample
|-
|Model Element
| Link to any model element of the resource set of the element being editing.
|-
|Diagram Element
| Link to Sirius Diagrams.
|}


===== Add Link wizard =====

Clicking on a Add link item will open this wizard

[[File:../img/richtext_add_link_wizard.png]]

The first field '''Add link''' specifies the type of the link to add (See before)

The second field '''URL''' specifies the concrete location (for instance, with URL type, www.polarsys.org). This field shows a Browse button. This button allows to select the link's target of the ''File (Absolute or Project Relative Path'', ''Model or Diagram element'' types.
For the ''Model or Diagram Element'' URL type, this field is in read only mode. The user, must use the '''Browse''' button to select the target of the links 

The third field '''URL Display''' allows to the user to give a humain readable content of the link. This will be appears in the text area of the widget. For instance, the URL: [[www.polarsys.org]], the displayed text will be [[http://www.polarsys.org|Polarsys]].

===== Navigation =====

Navigation refers to the opening of the target of the links with the appropriate tool.

For example, navigation on the URL type link opens the target with the default browser

To navigate to the target of a link, righ-click on the link and choose the menu ''Open Link''

[[File:../img/richtext_open_link_menu.png]]
