AccueilNouveautés !Démarrage rapideOnline ServerUtilisationQuestions/RéponsesTéléchargementForumThemePréprocesseurLibrairie StandardHitchhiker's GuideDocumentation PDF
PlantUMLLanguage specificationSalt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Salt (Wireframe)

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.

Edit in DokuwikiEdit in AsciidocEdit in Markdown
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 ^.

🎉 Copied! 

@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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Text area

Here is an attempt to create a text area:

🎉 Copied! 

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

@startsalt
{SI
   This is a long
   text in a textarea
   .
   "                         "
}
@endsalt

🎉 Copied! 

@startsalt
{S-
   This is a long
   text in a textarea
   .
   "                         "
}
@endsalt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Ouvrir, fermer une liste déroulante

Vous pouvez ouvrir une liste déroulante, en ajoutant des valeurs entourées de ^, comme :

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Utilisation de la grille [| et #, !, -, +]

Un tableau est automatiquement créé lorsque vous utilisez une parenthèse ouvrante {. Et vous devez utiliser | pour séparer les colonnes.

Par exemple

🎉 Copied! 

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

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Regroupement de champs

Plus d'information ici

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Utilisation des séparateurs

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

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Arbre (structure arborescente) [T]

Pour faire un arbre ou une structure arborescente, vous devez commencer avec {T et utiliser + pour signaler la hiérarchie.

🎉 Copied! 

@startsalt
{
{T
 + World
 ++ America
 +++ Canada
 +++ USA
 ++++ New York
 ++++ Boston
 +++ Mexico
 ++ Europe
 +++ Italy
 +++ Germany
 ++++ Berlin
 ++ Africa
}
}
@endsalt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Arbre et Tableau [T]

Vous pouvez combiner des arbres avec des tableaux.

🎉 Copied! 

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

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Accolades délimitantes [{, }]

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

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
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.

🎉 Copied! 

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

@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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Utilisation de menu [*]

Vous pouvez ajouter un menu en utilisant la notation {*

🎉 Copied! 

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

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

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Tableaux avancés

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! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Barres de défilement [S, SI, S-]

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! 

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

  • {SI : barre de défilement verticale seulement

🎉 Copied! 

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

  • {S- : barre de défilement horizontale seulement

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Couleurs

Il est possible de modifier la couleur du texte du widget

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Creole on Salt

You can use Creole or HTML Creole on salt:

🎉 Copied! 

@startsalt
{{^==Creole
  This is **bold**
  This is //italics//
  This is ""monospaced""
  This is --stricken-out--
  This is __underlined__
  This is ~~wave-underlined~~
  --test Unicode and icons--
  This is <U+221E> long
  This is a <&code> icon
  Use image : <img:http://plantuml.com/logo3.png>
}|
{^<b>HTML Creole 
 This is <b>bold</b>
  This is <i>italics</i>
  This is <font:monospaced>monospaced</font>
  This is <s>stroked</s>
  This is <u>underlined</u>
  This is <w>waved</w>
  This is <s:green>stroked</s>
  This is <u:red>underlined</u>
  This is <w:#0000FF>waved</w>
  -- other examples --
  This is <color:blue>Blue</color>
  This is <back:orange>Orange background</back>
  This is <size:20>big</size>
}|
{^Creole line
You can have horizontal line
----
Or double line
====
Or strong line
____
Or dotted line
..My title..
Or dotted title
//and title... //
==Title==
Or double-line title
--Another title--
Or single-line title
Enjoy!
}|
{^Creole list item
**test list 1**
* Bullet list
* Second item
** Sub item
*** Sub sub item
* Third item
----
**test list 2**
# Numbered list
# Second item
## Sub item
## Another sub item
# Third item
}|
{^Mix on salt
  ==<color:Blue>Just plain text
  [This is my default button]
  [<b><color:green>This is my green button]
  [ ---<color:#9a9a9a>This is my disabled button-- ]
  []  <size:20><color:red>Unchecked box
  [X] <color:green>Checked box
  "//Enter text here//   "
  ^This is a droplist^
  ^<color:#9a9a9a>This is a disabled droplist^
  ^<b><color:red>This is a red droplist^
}}
@endsalt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Pseudo sprite [<<, >>]

En utilisant << et >>, vous pouvez définir un dessin de type pseudo-sprite ou sprite et le réutiliser ultérieurement

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
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>.

🎉 Copied! 

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

@startuml
listopeniconic
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Ajouter un titre, un en-tête, un pied de page, une légende

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Zoom, DPI

Sans zoom (par défaut)

🎉 Copied! 

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

@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 dpipour zoomer l'image générée

🎉 Copied! 

@startsalt
skinparam dpi 200
{
  <&person> Login  | "MyName   "
  <&key> Password  | "****     "
  [<&circle-x> Cancel ] | [ <&account-login> OK   ]
}
@endsalt

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Include Salt "on activity diagram"

You can read the following explanation.

🎉 Copied! 

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

@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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Include salt "on while condition of activity diagram"

You can include salt on while condition of activity diagram.

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Include salt "on repeat while condition of activity diagram"

You can include salt on 'repeat while' condition of activity diagram.

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Skinparam

You can use [only] some skinparam command to change the skin of the drawing.

Some example:

🎉 Copied! 

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

🎉 Copied! 

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

FIXME
🚩 FYI, some other skinparam does not work with salt, as:

🎉 Copied! 

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Style

You can use [only] some style command to change the skin of the drawing.

Some example:

🎉 Copied! 

@startsalt
<style>
saltDiagram {
  BackgroundColor palegreen
}
</style>
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

FIXME
🚩 FYI, some other style does not work with salt, as:

🎉 Copied! 

@startsalt
<style>
saltDiagram {
  Fontname Monospaced
  FontSize 10
  FontStyle italic
  LineThickness 0.5
  LineColor red
}
</style>
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

[Ref. QA-13460]

Privacy Policy      Advertise