Salt - это подпроект, включенный в PlantUML и призванный помочь вам проектировать графический интерфейс или иначе - Каркасную, Контурную, Проволочную схему (диаграмму).
Вы можете использовать ключевое слово @startsalt или @startuml, после которого с новой строки стоит ключевое слово salt.
Salt (Wireframe)
Salt is a subproject included in PlantUML that may help you to design graphical interface or Website Wireframe or Page Schematic or Screen Blueprint.
The goal of this tool is to discuss about simple and sample windows.
You can use either @startsalt keyword, or @startuml followed by a line with salt keyword.
Простые виджеты
Окно должно начинаться и заканчиваться скобками.
Вы можете определить:
Кнопку, используя [ и ].
Radio button (переключатель), используя ( и ).
Checkbox (флажок), используя [ и ].
Поле ввода текста, используя ".
Раскрывающийся список (Droplist), используя ^.
@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
Цель этого инструмента - обсуждать простые и типовые окна.
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 ".
Droplist using ^.
@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
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
Group box [^]
@startsalt
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
Вы можете использовать несколько горизонтальных линий как разделитель.
@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
Древовидный виджет
Чтобы создать дерево, вам нужно начать с {T и использовать + чтобы определять иерархию.
@startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
Tree widget [T]
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
Таблица дерева иерархии
Возможно придание таблицам древовидной (иерархической) структуры.
@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
Таблица может не иметь границ, как в примере выше, либо иметь только вертикальные (T!), только горизонтальные (T-), внешние границы (T+) или все границы (T#). Используйте указанные параметры сразу после открывающей скобки {.
@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
@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
@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
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
Полосы прокрутки
Используйте параметр S, следующий сразу после открывающей скобки {, для добавления вертикальных (SI), горизонтальных (S-) или всех (S) полос прокрутки.
@startsalt
{S
Message
.
.
.
.
}
@endsalt
@startsalt
{SI
Message
.
.
.
.
}
@endsalt
@startsalt
{S-
Message
.
.
.
.
}
@endsalt
Scroll Bars [S, SI, S-]
You can use {S notation for scroll bar like in following examples:
{S: for horizontal and vertical scrollbars
@startsalt
{S
Message
.
.
.
.
}
@endsalt
{SI : for vertical scrollbar only
@startsalt
{SI
Message
.
.
.
.
}
@endsalt
{S- : for horizontal scrollbar only
@startsalt
{S-
Message
.
.
.
.
}
@endsalt
Цвет элементов
Изменяйте цвет текста в виджетах по аналогии с другими диаграммами.
Для этого поставьте код <color:ваш_цвет> перед текстом виджета.
@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
@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
Используя << и >> вы можете определить псевдо-графическое изображение (спрайт) и задать его имя, с помощью которого переиспользовать его в дальнейшем.
Спрайт представляет собой текстовое поле рамером 10 строк на 12 колонок, состоящее их пустых пикселей, задаваемых точкой (.), и заполненных пикселей, задаваемых сиволом X.
@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
Using << and >> you can define a pseudo-sprite or sprite-like drawing and reusing it latter.
@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
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>.
The complete list is available on OpenIconic Website, or
you can use the following special diagram:
@startuml
listopeniconic
@enduml
OpenIconic
OpenIconic is a 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>.
