您可以点击此处在此页面上做出贡献  (Menu)

 

 

Salt

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

在启用关键词后,你可以使用以下字符来绘制表格中的线及列 :

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

 

 

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

 

 

添加选项卡

你可以通过 {/ 标记增加对应的选项卡。 注意:可以使用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

 

 

高级表格

对于表格有两种特殊的标记 :

@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

 

 

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
!definelong SALT(x)
"{{
salt
_##x
}}
" as x
!enddefinelong

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

!definelong _wait
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
!enddefinelong

!definelong _success
{+
<b>success
congratulations!
[ok]
}
!enddefinelong
 
!definelong _error
{+
<b>error
failed, sorry
[ok]
}
!enddefinelong

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