Deutsch      Español      Français      日本語      한국어      Русский      中文

Translation support

You can click here to access the wiki and update the translation.

You can go back to the translated webpage.

To help you in the translation process, here is a comparison with the English version :

Zeichnen Sie GUI-Mockup mit Salz

Salt ist ein Teilprojekt in PlantUML enthalten, die Sie grafische Oberfläche zu entwerfen kann helfen. Sie können Schaltfläche, Optionsfeld, Kontrollkästchen, Fenster, Baum, Menü, Tabelle definieren ...

Draw GUI mockup with Salt

Salt is a subproject included in PlantUML that may help you to design graphical interface. You can define button, radio button, checkbox, window, tree, menu, table…

 

 

Salt

Salt ist ein Unterprojekt, das in PlantUML enthalten ist und das beim Entwickeln von graphischen Oberflächen nützlich ist.

Man kann entweder das Schlüsselwort @startsalt oder @startuml gefolgt von einer Zeile mit dem Schlüsselwort salt verwenden.

 

 

Salt (wireframe)

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.

 

 

Standard-Steuerelemente

Ein Fenster muss mit einer geschweiften Klammer beginnen und enden. Darin kann folgendes definiert werden:

  • ein Button mit [ und ].
  • Radio-Button mit ( und ).
  • eine Checkbox mit [ und ].
  • Freitextfeld mit ".

@startuml
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^
}
@enduml
Das Ziel dieses Werkzeugs ist das Darstellung von einfachen und Beispiel-Fenstern.

 

 

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

@startuml
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^
}
@enduml

The goal of this tool is to discuss about simple and sample windows.

 

 

Nutzung von Gittern

Eine Tabelle wird automatisch erstellt, wenn ein öffnende Klammer { benutzt wird.

Zum trennen von Spalten wird | verwendet.

Ein Bespiel:

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

Gleich nach der öffnenden Klammer kann durch das erste Zeichen angegeben werden, ob die Linien des Gitters gezeichnet werden sollen:

Symbol Result
# Um alle senkrechten und waagerechten Linien anzuzeigen
! Alle senkrechten Linien
- Alle waagerechten Linien
+ Alle äusseren Linien

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

 

 

Using grid

A table is automatically created when you use an opening bracket {. And you have to use | to separate columns.

For example:

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

Just after the opening bracket, you can use a character to define if you want to draw lines or columns of the grid :

Symbol Result
# To display all vertical and horizontal lines
! To display all vertical lines
- To display all horizontal lines
+ To display external lines

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

 

 

Group box

more info

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

 

 

Group box

more info

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

 

 

Verwendung von Trennern

Sie können mehrere horizontale Linien als Trenner verwenden.

@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

 

 

Baum Widget ( Tree Widget )

Um einen Baum zu erhalten, beginnen Sie mit {T und verwenden + um die Hierarchie Tiefe zu kennzeichnen.

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

 

 

Tree widget

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

 

 

Klammerung

Subelemente können durch Klammern definiert werden.

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

 

 

Enclosing brackets

You can define subelements by opening a new opening bracket.

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

 

 

Hinzufügen von Reitern

Sie können Reiter durch die {/ Notation hinzufügen. Durch HTML Befehle können Sie auch Fettdruck erstellen.

@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

Reiter können auch vertikal angeordnet sein:

@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

 

 

Adding tabs

You can add tabs using {/ notation. Note that you can use HTML code to have bold text.

@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

Tab could also be vertically oriented:

@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

 

 

Benutzung von "menu"

Du kannst ein Menü durch die {* Notation hinzufügen.

@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

Es ist auch möglich ein menü zu öffnen:

@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

 

 

Using menu

You can add a menu by using {* 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

It is also possible to open a 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

 

 

Erweiterte Tabellen

Du kannst 2 spezielle Notationen für Tabellen benutzen:

  • * um eine Zelle mit der Linken zu verbinden
  • . um eine leere Zelle zu definieren

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

 

 

Advanced table

You can use two special notations for table :

  • * to indicate that a cell with span with left
  • . to denotate an empty cell

@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

 

 

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

see: http://forum.plantuml.net/2427/salt-with-minimum-flowchat-capabilities?show=2427#q2427

@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 function SALT($x)
"{{
salt
%invoke_void_func("_"+$x)
}}" as $x
!endfunction

!function _choose()
{+
<b>an example
choose one option
()one
()two
[ok]
}
!endfunction

!function _wait()
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
!endfunction

!function _success()
{+
<b>success
congratulations!
[ok]
}
!endfunction
 
!function _error()
{+
<b>error
failed, sorry
[ok]
}
!endfunction

(*) --> SALT(choose)
-right-> SALT(wait)
wait -right-> SALT(success)
wait -down-> SALT(error)
@enduml

 

 

Include Salt

see: http://forum.plantuml.net/2427/salt-with-minimum-flowchat-capabilities?show=2427#q2427

@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 function SALT($x)
"{{
salt
%invoke_void_func("_"+$x)
}}" as $x
!endfunction

!function _choose()
{+
<b>an example
choose one option
()one
()two
[ok]
}
!endfunction

!function _wait()
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
!endfunction

!function _success()
{+
<b>success
congratulations!
[ok]
}
!endfunction
 
!function _error()
{+
<b>error
failed, sorry
[ok]
}
!endfunction

(*) --> 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

 

 

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

This page is generated once per day from the wiki content.