Salt est un sous-projet de PlantUML qui peut vous aider à concevoir une interface graphique ou une page web
Wireframe d'un site web ou schéma d'une page ou plan d'un écran.
Il est très utile pour concevoir des
interfaces graphiques, des schémas et des plans. Il permet d'aligner les
structures conceptuelles sur la
conception visuelle, en mettant l'accent sur
la fonctionnalité plutôt que sur l'esthétique. Les
wireframes, qui sont au cœur de ce processus, sont utilisés dans diverses disciplines.
Les développeurs, les concepteurs et les professionnels de l'expérience utilisateur les utilisent pour visualiser les
éléments d'interface et les
systèmes de navigation, et pour faciliter la collaboration. Ils varient en
fidélité, des croquis peu détaillés aux représentations très détaillées, cruciales pour le
prototypage et la
conception itérative. Ce processus collaboratif intègre différentes expertises, de l'
analyse commerciale à la
recherche sur les utilisateurs, garantissant que la conception finale s'aligne à la fois sur les
exigences del'entreprise et de l'
utilisateur.
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
^
.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
WARNING
This translation need to be updated. WARNING
Here is an attempt to create a
text area:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
This is a long
text in a textarea
.
" "
}
@endsalt
|
Note:
- the dot (
.
) to fill up vertical space; - the last line of space (
" "
) to make the area wider.
[Ref. QA-14765] Then you can add
scroll bar:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{SI
This is a long
text in a textarea
.
" "
}
@endsalt
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{S-
This is a long
text in a textarea
.
" "
}
@endsalt
|
Vous pouvez ouvrir une liste déroulante, en ajoutant des valeurs entourées de
^
, comme :
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
^This is a closed droplist^ |
^This is an open droplist^^ item 1^^ item 2^ |
^This is another open droplist^ item 1^ item 2^
}
@endsalt
|
[Réf. QA-4184]
Un tableau est automatiquement créé lorsque vous utilisez une parenthèse ouvrante
{
. Et vous devez utiliser
|
pour séparer les colonnes.
Par exemple
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
Juste après le crochet ouvrant, vous pouvez utiliser un caractère pour définir si vous voulez dessiner des lignes ou des colonnes de la grille
Symbole | Résultat |
# | Pour afficher toutes les lignes verticales et horizontales |
! | Pour afficher toutes les lignes verticales |
- | Pour afficher toutes les lignes horizontales |
+ | Pour afficher les lignes externes |
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
Plus d'information ici 🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
Vous pouvez utiliser de nombreuses lignes horizontales en tant que séparateur.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
|
Pour faire un arbre ou une structure arborescente, vous devez commencer avec
{T
et utiliser
+
pour signaler la hiérarchie.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
|
Vous pouvez combiner des arbres avec des tableaux.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
Et ajouter des lignes
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
[Réf. QA-1265]
Vous pouvez définir des sous-éléments en créant une accolade ouvrante.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
Name | " "
Modifiers: | { (X) public | () default | () private | () protected
[] abstract | [] final | [] static }
Superclass: | { "java.lang.Object " | [Browse...] }
}
@endsalt
|
Vous pouvez ajouter des onglets avec la notation
{/
. Notez que vous pouvez utiliser du code HTML pour avoir un texte en gras.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
{/ <b>General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt
|
Les onglets peuvent également être orientés verticalement:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
{/ <b>General
Fullscreen
Behavior
Saving } |
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
[Close]
}
}
@endsalt
|
Vous pouvez ajouter un menu en utilisant la notation
{*
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
{* 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]
}
@endsalt
|
Il est également possible d'ouvrir un menu
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
{* 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]
}
@endsalt
|
Comme il est possible d'ouvrir une liste déroulante
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{+
{* File | Edit | Source | Refactor }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^^Normal Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt
|
[Réf. QA-4184]
Vous pouvez utiliser deux notations spéciales pour les tableaux :
*
pour indiquer que la cellule de gauche peut s'étendre sur l'actuelle.
pour indiquer une cellule vide
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt
|
Vous pouvez utiliser la commande
{S
pour afficher les barres de défilement comme dans les exemples suivants :
{S
: barres de défilement verticale et horizontale
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{S
Message
.
.
.
.
}
@endsalt
|
{SI
: barre de défilement verticale seulement
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{SI
Message
.
.
.
.
}
@endsalt
|
{S-
: barre de défilement horizontale seulement
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{S-
Message
.
.
.
.
}
@endsalt
|
Il est possible de modifier la
couleur du texte du widget
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
[Ref. QA-12177]
You can use
Creole or HTML Creole on salt:
En utilisant
<<
et
>>
, vous pouvez définir un dessin de type pseudo-sprite ou sprite et le réutiliser ultérieurement
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @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
|
[Réf. QA-5849]
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>
.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
Login<&person> | "MyName "
Password<&key> | "**** "
[Cancel <&circle-x>] | [OK <&account-login>]
}
@endsalt
|
The complete list is available on
OpenIconic Website, or you can use the following special diagram:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
listopeniconic
@enduml
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
title My title
header some header
footer some footer
caption This is caption
legend
The legend
end legend
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
(Voir aussi : Commandes communes)Sans zoom (par défaut)
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
Scale
Vous pouvez utiliser la commande
scale
pour zoomer l'image générée.
Vous pouvez utiliser un nombre ou une fraction pour définir le facteur d'échelle. Vous pouvez également indiquer soit la largeur, soit la hauteur (en pixels). Et vous pouvez également donner à la fois la largeur et la hauteur : l'image est mise à l'échelle pour s'adapter à la dimension spécifiée
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
scale 2
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
(Voir aussi : [Zoom sur les commandes communes](commons#zw5yrgax40mpk362kjbn))
DPI
Vous pouvez également utiliser la commande
skinparam dpi
pour zoomer l'image générée
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam dpi 200
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
|
You can
read the following explanation.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
(*) --> "
{{
salt
{+
<b>an example
choose one option
()one
()two
[ok]
}
}}
" as choose
choose -right-> "
{{
salt
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
}}
" as wait
wait -right-> "
{{
salt
{+
<b>success
congratulations!
[ok]
}
}}
" as success
wait -down-> "
{{
salt
{+
<b>error
failed, sorry
[ok]
}
}}
"
@enduml
|
It can also be combined with
define macro.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
!unquoted procedure SALT($x)
"{{
salt
%invoke_procedure("_"+$x)
}}" as $x
!endprocedure
!procedure _choose()
{+
<b>an example
choose one option
()one
()two
[ok]
}
!endprocedure
!procedure _wait()
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
!endprocedure
!procedure _success()
{+
<b>success
congratulations!
[ok]
}
!endprocedure
!procedure _error()
{+
<b>error
failed, sorry
[ok]
}
!endprocedure
(*) --> SALT(choose)
-right-> SALT(wait)
wait -right-> SALT(success)
wait -down-> SALT(error)
@enduml
|
You can include
salt
on while condition of activity diagram.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
start
while (\n{{\nsalt\n{+\nPassword | "**** "\n[Cancel] | [ OK ]}\n}}\n) is (Incorrect)
:log attempt;
:attempt_count++;
if (attempt_count > 4) then (yes)
:increase delay timer;
:wait for timer to expire;
else (no)
endif
endwhile (correct)
:log request;
:disable service;
@enduml
|
[Ref. QA-8547] You can include
salt
on 'repeat while' condition of activity diagram.
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startuml
start
repeat :read data;
:generate diagrams;
repeat while (\n{{\nsalt\n{^"Next step"\n Do you want to continue? \n[Yes]|[No]\n}\n}}\n)
stop
@enduml
|
[Ref. QA-14287] You can use
[only] some
skinparam command to change the skin of the drawing.
Some example:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam Backgroundcolor palegreen
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam handwritten true
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
FIXME
🚩 FYI, some other skinparam does not work with salt, as:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
skinparam defaultFontName monospaced
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
You can use
[only] some
style command to change the skin of the drawing.
Some example:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
<style>
saltDiagram {
BackgroundColor palegreen
}
</style>
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
FIXME
🚩 FYI, some other style does not work with salt, as:
🎉 Copied! ![Copy to clipboard](/clipboard1.svg)
![Edit online](/edit1.svg) | @startsalt
<style>
saltDiagram {
Fontname Monospaced
FontSize 10
FontStyle italic
LineThickness 0.5
LineColor red
}
</style>
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
[Ref. QA-13460]