PlantUMLLanguage specificationSalt
Donate225Patreon111


Salt

Salt est un sous projet inclus dans PlantUML qui peut vous aider à modeler une interface graphique.

Vous pouvez utiliser soit le mot clé @startsalt, ou bien @startuml suivi par une ligne avec le mot clé salt.

widgets de base

Une fenêtre doit commencer et finir par une accolade. Vous pouvez ensuite définir: 

@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

Le but de cet outil est de discuter des échantillons de fenêtres simples.

Utilisation de grille

Un tableau est créé automatiquement en utilisant une accolade ouvrante {.

Il faut utiliser | pour séparer les colomnes.

Par exemple: 

@startsalt
{
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

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
! Pour afficher toutes les lignes verticales
- Pour afficher toutes les lignes horizontales
+ Pour afficher les lignes extérieurs 

@startsalt
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Regroupement de champs

Plus d'information ici

@startsalt
{^"My group box"
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

Utilisation des séparateurs

Vous pouvez utiliser de nombreuses lignes horizontales en tant que séparateur. 

@startsalt
{
  Text1
  ..
  "Some field"
  ==
  Note on usage
  ~~
  Another text
  --
  [Ok]
}
@endsalt

Widget d'arbre

Pour faire un arbre 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

Accolades délimitantes

Vous pouvez définir des sous-éléments en créant une accolade ouvrante. 

@startsalt
{
Name         | "                 "
Modifiers:   | { (X) public | () default | () private | () protected
                [] abstract | [] final   | [] static }
Superclass:  | { "java.lang.Object " | [Browse...] }
}
@endsalt

Ajout d'onglet

Vous pouvez ajouter des onglets avec la notation {/. Notez que vous pouvez utiliser du code HTML pour avoir un texte en gras. 

@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: 

@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

Utiliser les menus

Vous pouvez ajouter un menu en utilisant la notation {*. 

@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: 

@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

Tableaux avancés

Vous pouvez utiliser deux notations spéciales pour les tableaux : 

@startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt

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>. 

@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: 

@startuml
listopeniconic
@enduml

Include Salt

You can read the following explanation. 

@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. 

@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

Scroll Bars

You can use "S" as scroll bar like in following examples: 

@startsalt
{S
Message
.
.
.
.
}
@endsalt


@startsalt
{SI
Message
.
.
.
.
}
@endsalt


@startsalt
{S-
Message
.
.
.
.
}
@endsalt