Salt est un sous projet inclus dans PlantUML qui peut vous aider à modeler une interface graphique ou une maquette fonctionnelle ou un Wireframe (en anglais).
Le but de cet outil est de pouvoir contruire, échanger et discuter facilement sur des échantillons de fenêtres simples.
Vous pouvez utiliser soit le mot clé @startsalt, ou bien @startuml suivi par une ligne avec le mot clé salt.
Salt (Wireframe)
Salt is a subproject included in PlantUML that may help you to design graphical interface or Website Wireframe or Page Schematic or Screen Blueprint.
The goal of this tool is to discuss about simple and sample windows.
You can use either @startsalt keyword, or @startuml followed by a line with salt keyword.
Composants de base
Une fenêtre doit commencer et finir par une accolade.
Vous pouvez ensuite définir :
un bouton en utilisant [ et ],
un bouton radio en utilisant ( et ),
une case à cocher en utilisant [ et ],
une zone de texte utilisateur en utilisant ",
une liste déroulante en utilisant ^.
@startsalt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
@endsalt
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 ".
Droplist using ^.
@startsalt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
@endsalt
Utilisation de grille
Un tableau est créé automatiquement en utilisant une accolade ouvrante {.
Il faut utiliser | pour séparer les colomnes.
Par exemple:
Tout de suite après l'accolade ouvrante, vous pouvez utiliser un caractère pour définir si vous voulez dessiner les lignes ou les colonnes de la grille :
Symbol
Result
#
Pour afficher toutes les lignes verticales et horizontales
Vous pouvez utiliser de nombreuses lignes horizontales en tant que séparateur.
@startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
Using separator [.., ==, ~~, --]
You can use several horizontal lines as separator.
@startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
Arbre (structure arborescente) [T]
Pour faire un arbre ou une structure arborescente, vous devez commencer avec {T et utiliser + pour signaler la hiérarchie.
@startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
Tree widget [T]
To have a Tree, you have to start with {T and to use + to denote hierarchy.
@startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
Tree table [T]
You can combine trees with tables.
@startsalt
{
{T
+Region | Population | Age
+ World | 7.13 billion | 30
++ America | 964 million | 30
+++ Canada | 35 million | 30
+++ USA | 319 million | 30
++++ NYC | 8 million | 30
++++ Boston | 617 thousand | 30
+++ Mexico | 117 million | 30
++ Europe | 601 million | 30
+++ Italy | 61 million | 30
+++ Germany | 82 million | 30
++++ Berlin | 3 million | 30
++ Africa | 1 billion | 30
}
}
@endsalt
And add lines.
@startsalt
{
..
== with T!
{T!
+Region | Population | Age
+ World | 7.13 billion | 30
++ America | 964 million | 30
}
..
== with T-
{T-
+Region | Population | Age
+ World | 7.13 billion | 30
++ America | 964 million | 30
}
..
== with T+
{T+
+Region | Population | Age
+ World | 7.13 billion | 30
++ America | 964 million | 30
}
..
== with T#
{T#
+Region | Population | Age
+ World | 7.13 billion | 30
++ America | 964 million | 30
}
..
}
@endsalt
@startsalt
{
<color:Blue>Just plain text
[This is my default button]
[<color:green>This is my green button]
[<color:#9a9a9a>This is my disabled button]
[] <color:red>Unchecked box
[X] <color:green>Checked box
"Enter text here "
^This is a droplist^
^<color:#9a9a9a>This is a disabled droplist^
^<color:red>This is a red droplist^
}
@endsalt
Using << and >> you can define a pseudo-sprite or sprite-like drawing and reusing it latter.
@startsalt
{
[X] checkbox|[] checkbox
() radio | (X) radio
This is a text|[This is my button]|This is another text
"A field"|"Another long Field"|[A button]
<<folder
............
.XXXXX......
.X...X......
.XXXXXXXXXX.
.X........X.
.X........X.
.X........X.
.X........X.
.XXXXXXXXXX.
............
>>|<color:blue>other folder|<<folder>>
^Droplist^
}
@endsalt
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>.
The complete list is available on OpenIconic Website, or
you can use the following special diagram:
@startuml
listopeniconic
@enduml
OpenIconic
OpenIconic is a 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>.
