======Salt======
Salt is a subproject included in PlantUML that may help you to design graphical interface.
You can use either @startsalt keyword, or @startuml followed by a line with
salt keyword.
======Basic widgets======
A window must start and end with brackets. You can then define:
* Button using [ and ].
* Radio button using ( and ).
* Checkbox using [ and ].
* User text area using "
salt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
The goal of this tool is to discuss about simple and sample windows.
======Using grid======
A table is automatically created when you use an opening bracket {.
And you have to use | to separate columns.
For example:
salt
{
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
Just after the opening bracket, you can use a character to define if you want
to draw lines or columns of the grid :
^character^lines ^
|#|To_display_all_vertical_and_horizontal_lines|
|!|To_display_all_vertical_lines |
|-|To_display_all_horizontal_lines |
|+|To_display_external_lines |
salt
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
======Using separator======
You can use several horizontal lines as separator.
salt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
======Tree widget======
To have a Tree, you have to start with {T and to use + to denote hierarchy.
salt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
======Enclosing brackets======
You can define subelements by opening a new opening bracket.
salt
{
Name | " "
Modifiers: | { (X) public | () default | () private | ()
protected
[] abstract | [] final | [] static }
Superclass: | { "java.lang.Object " | [Browse...] }
}
======Adding tabs======
You can add tabs using {/ notation. Note that you can use HTML code to have bold text.
salt
{+
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
Tab could also be vertically oriented:
salt
{+
{/ General
Fullscreen
Behavior
Saving } |
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
[Close]
}
}
======Using menu======
You can add a menu by using {* notation.
salt
{+
{* File | Edit | Source | Refactor }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
It is also possible to open a menu:
salt
{+
{* File | Edit | Source | Refactor
Refactor | New | Open File | - | Close | Close All }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
======Advanced table======
You can use two special notations for table :
* * to indicate that a cell with span with left
* . to denotate an empty cell
salt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
======OpenIconic======
OpenIconic is an very nice open source icon set. Those icons have been
integrated into the creole_parser, so you can use them out-of-the-box.
You can use the following syntax: **%%<&ICON_NAME>%%**.
salt
{
Login<&person> | "MyName "
Password<&key> | "**** "
[Cancel <&circle-x>] | [OK <&account-login>]
}
The complete list is available on [[http://useiconic.com/open|OpenIconic Website]], or you can use the
following special diagram:
listopeniconic