Salt（ワイヤフレームによるGUI 設計ツール）

基本のウィジェット
罫線の使用
Group box
セパレータの使用
木構造ウィジェット
Tree table
括弧で括る
タブの追加
メニューの使用
テーブル（上級）
OpenIconic (無料でオープンソースのアイコンセット)
Include Salt
Scroll Bars

Salt はグラフィカルインタフェースの設計を助ける PlantUML のサブプロジェクトです。

キーワード @startsalt、または、@startuml と次の行に続くキーワード salt の、いずれかを使用することができます。

基本のウィジェット

ウィンドウは中括弧で始めて中括弧で閉じなければなりません。次のように定義できます。

ボタンは [ と ] で括ります。
ラジオボタンは ( と ) で括ります。
チェックボックスは [ と ] で括ります。
テキスト領域は " で括ります。

@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

このツールの目標は簡単な見本のウィンドウについて議論することです。

罫線の使用

表は括弧 { で開始すれば自動的に作成されます。

そして | で列を分割する必要があります。

例：

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

行や列の罫線を表示したいときは、括弧で開始した直後に、以下のように定義された1文字を使用してください。：

Symbol	Result
`#`	全ての縦横の罫線を表示する
`!`	全ての縦線を表示する
`-`	全ての横線を表示する
`+`	枠線を表示する

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

Group box

more info

@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

Tree table

You can combine trees with tables.

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

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

括弧で括る

定義中に、新しい括弧で括ることによりサブ要素を定義することができます。

@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 (無料でオープンソースのアイコンセット)

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

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