Salt - это подпроект, включенный в PlantUML и призванный помочь вам проектировать графический интерфейс или иначе - Каркасную, Контурную, Проволочную схему (диаграмму). Вы можете использовать ключевое слово @startsalt или @startuml, после которого с новой строки стоит ключевое слово salt.
Простые виджеты
Окно должно начинаться и заканчиваться скобками. Вы можете определить:
Кнопку, используя [ и ].
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
Цель этого инструмента - обсуждать простые и типовые окна.
Использование сетки
Таблица автоматически создаётся, когда вы используете открывающую скобку {. Ещё вам нужно использовать | для деления на колонки. Например:
Виджеты могут быть объединены в группу со своим наименованием. Используйте символ ^, следующий сразу после открывающей скобки {. Наименование группы задается в кавычках " сразу после символа группы ^.
@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
{
{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
{+
{* 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
Полосы прокрутки
Используйте параметр S, следующий сразу после открывающей скобки {, для добавления вертикальных (SI), горизонтальных (S-) или всех (S) полос прокрутки.
@startsalt
{S
Message
.
.
.
.
}
@endsalt
@startsalt
{SI
Message
.
.
.
.
}
@endsalt
@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
Используя << и >> вы можете определить псевдо-графическое изображение (спрайт) и задать его имя, с помощью которого переиспользовать его в дальнейшем. Спрайт представляет собой текстовое поле рамером 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
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>.
Hitchhiker's Guide
