PlantUMLLanguage specificationSalt

         

Edit in DokuwikiEdit in AsciidocEdit in Markdown 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. Edit in DokuwikiEdit in AsciidocEdit in Markdown 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 ". 🎉 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 Das Ziel dieses Werkzeugs ist das Darstellung von einfachen und Beispiel-Fenstern. 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 Open, close droplist You can open a droplist, by adding values enclosed by ^, as: 🎉 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 [Ref. QA-4184] Edit in DokuwikiEdit in AsciidocEdit in Markdown Nutzung von Gittern Eine Tabelle wird automatisch erstellt, wenn ein öffnende Klammer { benutzt wird. Zum trennen von Spalten wird | verwendet. Ein Bespiel: 🎉 Copied! @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 🎉 Copied! @startsalt {+ Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt WARNING  This translation need to be updated.  WARNING Edit in DokuwikiEdit in AsciidocEdit in Markdown Group box [^] 🎉 Copied! @startsalt {^"My group box" Login | "MyName " Password | "**** " [Cancel] | [ OK ] } @endsalt [Ref. QA-5840] Edit in DokuwikiEdit in AsciidocEdit in Markdown Verwendung von Trennern Sie können mehrere horizontale Linien als Trenner verwenden. 🎉 Copied! @startsalt { Text1 .. "Some field" == Note on usage ~~ Another text -- [Ok] } @endsalt Edit in DokuwikiEdit in AsciidocEdit in Markdown Baum Widget ( Tree Widget ) Um einen Baum zu erhalten, beginnen Sie mit {T und verwenden + um die Hierarchie Tiefe zu kennzeichnen. 🎉 Copied! @startsalt { {T + World ++ America +++ Canada +++ USA ++++ New York ++++ Boston +++ Mexico ++ Europe +++ Italy +++ Germany ++++ Berlin ++ Africa } } @endsalt Edit in DokuwikiEdit in AsciidocEdit in Markdown Tree table [T] You can combine trees with tables. 🎉 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 And add lines. 🎉 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 [Ref. QA-1265] Edit in DokuwikiEdit in AsciidocEdit in Markdown Klammerung Subelemente können durch Klammern definiert werden. 🎉 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 Hinzufügen von Reitern Sie können Reiter durch die {/ Notation hinzufügen. Durch HTML Befehle können Sie auch Fettdruck erstellen. 🎉 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 Reiter können auch vertikal angeordnet sein: 🎉 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 Benutzung von "menu" Du kannst ein Menü durch die {* Notation hinzufügen. 🎉 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 Es ist auch möglich ein menü zu öffnen: 🎉 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 *[Ref. [QA-4184](https://forum.plantuml.net/4184)]* WARNING  This translation need to be updated.  WARNING Edit in DokuwikiEdit in AsciidocEdit in Markdown 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 🎉 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 Scroll Bars [S, SI, S-] You can use {S notation for scroll bar like in following examples: {S: for horizontal and vertical scrollbars 🎉 Copied! @startsalt {S Message . . . . } @endsalt {SI : for vertical scrollbar only 🎉 Copied! @startsalt {SI Message . . . . } @endsalt {S- : for horizontal scrollbar only 🎉 Copied! @startsalt {S- Message . . . . } @endsalt Edit in DokuwikiEdit in AsciidocEdit in Markdown Colors It is possible to change text color of 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 [<<, >>] Using << and >> you can define a pseudo-sprite or sprite-like drawing and reusing it latter. 🎉 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 [Ref. 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 Add title, header, footer, caption or legend 🎉 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 (See also: Common commands) Edit in DokuwikiEdit in AsciidocEdit in Markdown Zoom, DPI Whitout zoom (by default) 🎉 Copied! @startsalt { <&person> Login | "MyName " <&key> Password | "**** " [<&circle-x> Cancel ] | [ <&account-login> OK ] } @endsalt Scale You can use the scale command to zoom the generated image. You can use either a number or a fraction to define the scale factor. You can also specify either width or height (in pixel). And you can also give both width and height: the image is scaled to fit inside the specified dimension. 🎉 Copied! @startsalt scale 2 { <&person> Login | "MyName " <&key> Password | "**** " [<&circle-x> Cancel ] | [ <&account-login> OK ] } @endsalt (See also: Zoom on Common commands) DPI You can also use the skinparam dpicommand to zoom the generated image. 🎉 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]

Standard-Steuerelemente Text area Open, close droplist Nutzung von Gittern Group box [^] Verwendung von Trennern Baum Widget ( Tree Widget ) Tree table [T] Klammerung Hinzufügen von Reitern Benutzung von "menu" Erweiterte Tabellen Scroll Bars [S, SI, S-] Colors Creole on Salt Pseudo sprite [<<,>>] OpenIconic Add title, header, footer, caption or legend Zoom, DPI Include Salt "on activity diagram" Include salt "on while condition of activity diagram" Include salt "on repeat while condition of activity diagram" Skinparam Style