Salt はグラフィカルインタフェースの設計を助ける PlantUML のサブプロジェクトです。
キーワード @startsalt
、または、@startuml
と次の行に続くキーワード salt
の、いずれかを使用することができます。
ウィンドウは中括弧で始めて中括弧で閉じなければなりません。 次のように定義できます。
[
と ]
で括ります。(
と )
で括ります。[
と ]
で括ります。"
で括ります。
@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
表は括弧 {
で開始すれば自動的に作成されます。
そして |
で列を分割する必要があります。
例:
@startsalt
{
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
行や列の罫線を表示したいときは、括弧で開始した直後に、以下のように定義された1文字を使用してください。:
Symbol | Result |
# | 全ての縦横の罫線を表示する |
! | 全ての縦線を表示する |
- | 全ての横線を表示する |
+ | 枠線を表示する |
@startsalt
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
@startsalt
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
いくつかの横線をセパレータとして使用することができます。
@startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
木構造があるなら、{T
で開始して階層を示すために +
を使用する必要があります。
@startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
定義中に、新しい括弧で括ることによりサブ要素を定義することができます。
@startsalt
{
Name | " "
Modifiers: | { (X) public | () default | () private | () protected
[] abstract | [] final | [] static }
Superclass: | { "java.lang.Object " | [Browse...] }
}
@endsalt
{/
表記を使用してタブを追加することができます。 太字のテキストを設けるように、HTML コードを使用できることに注意してください。
@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
タブは垂直方向にも配向できます:
@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
{*
表記でメニューを追加することができます。
@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
メニューを開くことも可能です:
@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
テーブルのための2つの特別な表記を使用することができます。
*
は左のセルとの結合となります.
は空のセルとなります
@startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt
OpenIconic はとても素晴らしいオープンソースのアイコンセットです。 これらのアイコンは、creole parserに統合されていますので、ワイヤフレームの箱の外でも使えます。
このような構文で使用できます。: <&ICON_NAME>
.
@startsalt
{
Login<&person> | "MyName "
Password<&key> | "**** "
[Cancel <&circle-x>] | [OK <&account-login>]
}
@endsalt
全アイコンのリストはOpenIconic Websiteにあります。or you can use the following special diagram:
@startuml
listopeniconic
@enduml
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
You can use "S" as scroll bar like in following examples:
@startsalt
{S
Message
.
.
.
.
}
@endsalt
@startsalt
{SI
Message
.
.
.
.
}
@endsalt
@startsalt
{S-
Message
.
.
.
.
}
@endsalt