mbk-lab
/
rui_orig
mirror of https://github.com/anoshenko/rui.git
2
0
Fork 1
Code Issues Projects Releases Wiki Activity
rui_orig/README-ru.md

5689 lines
375 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Библиотека RUI
Библиотека RUI (Remote User Interface) предназначена для создания web приложений на языке go.
Особенностью библиотеки заключается в том, что вся обработка данных осуществляется на сервере,
а браузер используется как тонкий клиент. Для связи клиента и сервера используется WebSocket.
## Hello world
type helloWorldSession struct {
}
func (content *helloWorldSession) CreateRootView(session rui.Session) rui.View {
return rui.NewTextView(session, rui.Params {
rui.Text : "Hello world!!!",
})
}
func createHelloWorldSession(session rui.Session) rui.SessionContent {
return new(helloWorldSession)
}
func main() {
rui.StartApp("localhost:8000", createHelloWorldSession, rui.AppParams{
Title: "Hello world",
Icon: "icon.svg",
})
}
В функции main вызывается функция StartApp. Она создает rui приложение и запускает его основной цикл.
Функция StartApp имеет 3 параметра:
1) IP адрес по которому будет доступно приложение (в нашем примере это "localhost:8000")
2) Функция создает структуру реализующую интерфейс SessionContent
3) Дополнительные опциональные параметры (в нашем примере это заголовок и имя файла иконки)
Интерфейс SessionContent объявлен как:
type SessionContent interface {
CreateRootView(session rui.Session) rui.View
}
Функция CreateRootView интерфейса SessionContent создает корневой элемент.
Когда пользователь обращается к приложению набрав в браузере адрес "localhost:8000", то создается новая сессия,
для нее создается новый экземпляр структуры helloWorldSession и в конце вызывается функция CreateRootView.
Функция createRootView возвращает представление строки текста, создаваемое с помощью функции NewTextView.
Если вы хотите чтобы приложение было видно вне вашего компьютера, то поменяйте адрес в функции Start:
rui.StartApp(rui.GetLocalIP() + ":80", ...
## Используемые типы данных
### SizeUnit
Структура SizeUnit используется для задания различных размеров элементов интерфейса, таких как ширина, высота, отступы, размер шрифта и т.п.
SizeUnit объявлена как
type SizeUnit struct {
Type SizeUnitType
Value float64
Function SizeFunc
}
где Type - тип размера; Value - размер; Function - функция (используется только если Type == SizeFunction, в остальных случаях игнорируется).
Тип может принимать следующие значения:
| Значение | Константа | Описание |
|:--------:|----------------|-----------------------------------------------------------------------------|
| 0 | Auto | значение по умолчанию. Значение поля Value игнорируется |
| 1 | SizeInPixel | поле Value определяет размер в пикселях. |
| 2 | SizeInEM | поле Value определяет размер в em единицах. 1em равен базовому размеру шрифта, который задается в настройках браузера |
| 3 | SizeInEX | поле Value определяет размер в ex единицах. |
| 4 | SizeInPercent | поле Value определяет размер в процентах от размера родительского элемента. |
| 5 | SizeInPt | поле Value определяет размер в pt единицах (1pt = 1/72”). |
| 6 | SizeInPc | поле Value определяет размер в pc единицах (1pc = 12pt). |
| 7 | SizeInInch | поле Value определяет размер в дюймах. |
| 8 | SizeInMM | поле Value определяет размер в миллиметрах. |
| 9 | SizeInCM | поле Value определяет размер в сантиметрах. |
| 10 | SizeInFraction | поле Value определяет размер в частях. Используется только для задания размеров ячеек в GridLayout. |
| 11 | SizeFunction | поле Function задает функцию для вычисления размера. Значение поля Value игнорируется |
Для более наглядного и простого задания переменных типа SizeUnit могут использоваться функции приведенные ниже
| Функция | Эквивалентное определение |
|----------------|----------------------------------------------------|
| rui.AutoSize() | rui.SizeUnit{ Type: rui.Auto } |
| rui.Px(n) | rui.SizeUnit{ Type: rui.SizeInPixel, Value: n } |
| rui.Em(n) | rui.SizeUnit{ Type: rui.SizeInEM, Value: n } |
| rui.Ex(n) | rui.SizeUnit{ Type: rui.SizeInEX, Value: n } |
| rui.Percent(n) | rui.SizeUnit{ Type: rui.SizeInPercent, Value: n } |
| rui.Pt(n) | rui.SizeUnit{ Type: rui.SizeInPt, Value: n } |
| rui.Pc(n) | rui.SizeUnit{ Type: rui.SizeInPc, Value: n } |
| rui.Inch(n) | rui.SizeUnit{ Type: rui.SizeInInch, Value: n } |
| rui.Mm(n) | rui.SizeUnit{ Type: rui.SizeInMM, Value: n } |
| rui.Cm(n) | rui.SizeUnit{ Type: rui.SizeInCM, Value: n } |
| rui.Fr(n) | rui.SizeUnit{ Type: rui.SizeInFraction, Value: n } |
Переменные типа SizeUnit имеют текстовое представление (зачем оно нужно будет описано ниже).
Текстовое представление состоит из числа (равному значению поля Value) и следующим за ним суффиксом определяющим тип.
Исключением является значение типа Auto, которое имеет представление “auto” и
значение типа SizeFunction, которое имеет особое представление. Суффиксы перечислены в следующей таблице:
| Суффикс | Тип |
|:-------:|----------------|
| px | SizeInPixel |
| em | SizeInEM |
| ex | SizeInEX |
| % | SizeInPercent |
| pt | SizeInPt |
| pc | SizeInPc |
| in | SizeInInch |
| mm | SizeInMM |
| cm | SizeInCM |
| fr | SizeInFraction |
Примеры: auto, 50%, 32px, 1.5in, 0.8em
Чтобы преобразовать текстовое представление в структуру SizeUnit используется функция:
func StringToSizeUnit(value string) (SizeUnit, bool)
Получить текстовое представление структуры можно свойством String()
#### SizeFunc
Интерфейс SizeFunc используется для задания функции вычисляющей SizeUnit. Рассмотрим функции на примере функции min.
Функция min находит минимальное значение среди заданных аргументов. Данная функция задается с помощью функции MinSize, объявленной как:
func MinSize(arg0, arg1 any, args ...any) SizeFunc
Функция имеет 2 и более аргументов, каждый из которых может быть или SizeUnit или SizeFunc или string являющееся константой или
текстовым представлением SizeUnit или SizeFunc.
Примеры
rui.MizSize(rui.Percent(50), rui.Px(250))
rui.MizSize("50%", rui.Px(250), "40em")
rui.MizSize(rui.Percent(50), "@a1")
Функция min имеет следующее текстовое представление
"min(<arg1>, <arg2>, ...)"
где arg1, arg2, ... должны быть текстовым представлением SizeUnit или SizeFunc или константой. Например
"min(50%, 250px)"
"min(75%, @a1)"
Интерфейс SizeFunc реализует интерфейс fmt.Stringer.
Функция String() этого интерфейса возвращает текстовое представление SizeFunc.
Помимо min имеются следующие функции
| Текстовое представление | Функция для создания | Описание
|------------------------------|--------------------------------------|-------------------------------------------------|
| "min(<arg1>, <arg2>, ...)" | MaxSize(arg0, arg1 any, args ...any) | находит минимальное значение среди аргументов |
| "sum(<arg1>, <arg2>, ...)" | SumSize(arg0, arg1 any, args ...any) | находит сумму значений аргументов |
| "sub(<arg1>, <arg2>)" | SubSize(arg0, arg1 any) | находит разность значений аргументов |
| "mul(<arg1>, <arg2>)" | MulSize(arg0, arg1 any) | находит результат умножения значений аргументов |
| "div(<arg1>, <arg2>)" | DivSize(arg0, arg1 any) | находит результат деления значений аргументов |
| "clamp(<min>, <val>, <max>)" | ClampSize(min, val, max any) | ограничивает значение заданным диапазоном |
Дополнительные пояснения к функции "clamp(<min>, <val>, <max>)": результат вычисляется следующим образом:
* if min ≤ val ≤ max then val;
* if val < min then min;
* if max < val then max;
### Color
Тип Color описывает 32-битный цвет в формате ARGB:
type Color uint32
Тип Color имеет три типа текстовых представлений:
1) #AARRGGBB, #RRGGBB, #ARGB, #RGB
где A, R, G, B это шестнадцатеричная цифра описывающая соответствующую компоненту. Если альфа канал не задается, то он считается равным FF. Если цветовая компонента задается одной цифрой, то она удваивается. Например “#48AD” эквивалентно “#4488AADD”
2) argb(A, R, G, B), rgb(R, G, B)
где A, R, G, B это представление цветовой компоненты. Компонента может быть запада в виде дробного числа в диапазоне [0…1] или в виде целого числа в диапазоне [0…255] или в виде процентов от 0% до 100%.
Примеры:
“argb(255, 128, 96, 0)”
“rgb(1.0, .5, .8)”
“rgb(0%, 50%, 25%)”
“argb(50%, 128, .5, 100%)”
Для преобразования Color в строку используется метод String.
Для преобразования строки в Color используется функция:
func StringToColor(value string) (Color, bool)
3) Имя цвета. В библиотеке определены следующие цвета
| Имя | Значение |
|-----------------------|-----------|
| black | #ff000000 |
| silver | #ffc0c0c0 |
| gray | #ff808080 |
| white | #ffffffff |
| maroon | #ff800000 |
| red | #ffff0000 |
| purple | #ff800080 |
| fuchsia | #ffff00ff |
| green | #ff008000 |
| lime | #ff00ff00 |
| olive | #ff808000 |
| yellow | #ffffff00 |
| navy | #ff000080 |
| blue | #ff0000ff |
| teal | #ff008080 |
| aqua | #ff00ffff |
| orange | #ffffa500 |
| aliceblue | #fff0f8ff |
| antiquewhite | #fffaebd7 |
| aquamarine | #ff7fffd4 |
| azure | #fff0ffff |
| beige | #fff5f5dc |
| bisque | #ffffe4c4 |
| blanchedalmond | #ffffebcd |
| blueviolet | #ff8a2be2 |
| brown | #ffa52a2a |
| burlywood | #ffdeb887 |
| cadetblue | #ff5f9ea0 |
| chartreuse | #ff7fff00 |
| chocolate | #ffd2691e |
| coral | #ffff7f50 |
| cornflowerblue | #ff6495ed |
| cornsilk | #fffff8dc |
| crimson | #ffdc143c |
| cyan | #ff00ffff |
| darkblue | #ff00008b |
| darkcyan | #ff008b8b |
| darkgoldenrod | #ffb8860b |
| darkgray | #ffa9a9a9 |
| darkgreen | #ff006400 |
| darkgrey | #ffa9a9a9 |
| darkkhaki | #ffbdb76b |
| darkmagenta | #ff8b008b |
| darkolivegreen | #ff556b2f |
| darkorange | #ffff8c00 |
| darkorchid | #ff9932cc |
| darkred | #ff8b0000 |
| darksalmon | #ffe9967a |
| darkseagreen | #ff8fbc8f |
| darkslateblue | #ff483d8b |
| darkslategray | #ff2f4f4f |
| darkslategrey | #ff2f4f4f |
| darkturquoise | #ff00ced1 |
| darkviolet | #ff9400d3 |
| deeppink | #ffff1493 |
| deepskyblue | #ff00bfff |
| dimgray | #ff696969 |
| dimgrey | #ff696969 |
| dodgerblue | #ff1e90ff |
| firebrick | #ffb22222 |
| floralwhite | #fffffaf0 |
| forestgreen | #ff228b22 |
| gainsboro | #ffdcdcdc |
| ghostwhite | #fff8f8ff |
| gold | #ffffd700 |
| goldenrod | #ffdaa520 |
| greenyellow | #ffadff2f |
| grey | #ff808080 |
| honeydew | #fff0fff0 |
| hotpink | #ffff69b4 |
| indianred | #ffcd5c5c |
| indigo | #ff4b0082 |
| ivory | #fffffff0 |
| khaki | #fff0e68c |
| lavender | #ffe6e6fa |
| lavenderblush | #fffff0f5 |
| lawngreen | #ff7cfc00 |
| lemonchiffon | #fffffacd |
| lightblue | #ffadd8e6 |
| lightcoral | #fff08080 |
| lightcyan | #ffe0ffff |
| lightgoldenrodyellow | #fffafad2 |
| lightgray | #ffd3d3d3 |
| lightgreen | #ff90ee90 |
| lightgrey | #ffd3d3d3 |
| lightpink | #ffffb6c1 |
| lightsalmon | #ffffa07a |
| lightseagreen | #ff20b2aa |
| lightskyblue | #ff87cefa |
| lightslategray | #ff778899 |
| lightslategrey | #ff778899 |
| lightsteelblue | #ffb0c4de |
| lightyellow | #ffffffe0 |
| limegreen | #ff32cd32 |
| linen | #fffaf0e6 |
| magenta | #ffff00ff |
| mediumaquamarine | #ff66cdaa |
| mediumblue | #ff0000cd |
| mediumorchid | #ffba55d3 |
| mediumpurple | #ff9370db |
| mediumseagreen | #ff3cb371 |
| mediumslateblue | #ff7b68ee |
| mediumspringgreen | #ff00fa9a |
| mediumturquoise | #ff48d1cc |
| mediumvioletred | #ffc71585 |
| midnightblue | #ff191970 |
| mintcream | #fff5fffa |
| mistyrose | #ffffe4e1 |
| moccasin | #ffffe4b5 |
| navajowhite | #ffffdead |
| oldlace | #fffdf5e6 |
| olivedrab | #ff6b8e23 |
| orangered | #ffff4500 |
| orchid | #ffda70d6 |
| palegoldenrod | #ffeee8aa |
| palegreen | #ff98fb98 |
| paleturquoise | #ffafeeee |
| palevioletred | #ffdb7093 |
| papayawhip | #ffffefd5 |
| peachpuff | #ffffdab9 |
| peru | #ffcd853f |
| pink | #ffffc0cb |
| plum | #ffdda0dd |
| powderblue | #ffb0e0e6 |
| rosybrown | #ffbc8f8f |
| royalblue | #ff4169e1 |
| saddlebrown | #ff8b4513 |
| salmon | #fffa8072 |
| sandybrown | #fff4a460 |
| seagreen | #ff2e8b57 |
| seashell | #fffff5ee |
| sienna | #ffa0522d |
| skyblue | #ff87ceeb |
| slateblue | #ff6a5acd |
| slategray | #ff708090 |
| slategrey | #ff708090 |
| snow | #fffffafa |
| springgreen | #ff00ff7f |
| steelblue | #ff4682b4 |
| tan | #ffd2b48c |
| thistle | #ffd8bfd8 |
| tomato | #ffff6347 |
| turquoise | #ff40e0d0 |
| violet | #ffee82ee |
| wheat | #fff5deb3 |
| whitesmoke | #fff5f5f5 |
| yellowgreen | #ff9acd32 |
### AngleUnit
Тип AngleUnit используется для задания угловых величин.
AngleUnit объявлена как
type AngleUnit struct {
Type AngleUnitType
Value float64
}
где Type - тип угловой величины;
Value - угловая величина
Тип может принимать следующие значения:
* Radian (0) - поле Value определяет угловую величину в радианах.
* PiRadian (1) - поле Value определяет угловую величину в радианах умноженных на π.
* Degree (2) - поле Value определяет угловую величину в градусах.
* Gradian (3) - поле Value определяет угловую величину в градах (градианах).
* Turn (4) - поле Value определяет угловую величину в оборотах (1 оборот == 360°).
Для более наглядного и простого задания переменных типа AngleUnit могут использоваться функции приведенные ниже
| Функция | Эквивалентное определение |
|---------------|-----------------------------------------------|
| rui.Rad(n) | rui.AngleUnit{ Type: rui.Radian, Value: n } |
| rui.PiRad(n) | rui.AngleUnit{ Type: rui.PiRadian, Value: n } |
| rui.Deg(n) | rui.AngleUnit{ Type: rui.Degree, Value: n } |
| rui.Grad(n) | rui.AngleUnit{ Type: rui.Gradian, Value: n } |
Переменные типа AngleUnit имеют текстовое представление состоящее из числа (равному значению поля Value) и следующим за ним суффиксом определяющим тип. Суффиксы перечислены в следующей таблице:
| Суффикс | Тип |
|:-------:|----------|
| deg | Degree |
| ° | Degree |
| rad | Radian |
| π | PiRadian |
| pi | PiRadian |
| grad | Gradian |
| turn | Turn |
Примеры: “45deg”, “90°”, “3.14rad”, “2π”, “0.5pi”
Для преобразования AngleUnit в строку используется метод String.
Для преобразования строки в AngleUnit используется функция:
func StringToAngleUnit(value string) (AngleUnit, bool)
## View
View это интерфейс для доступа к элементу типа "View". View это прямоугольная область экрана.
Все элементы интерфейса расширяют интерфейс View, т.е. View является базовым элементом для всех
других элементов библиотеки.
View имеет ряд свойств, таких как высота, ширина, цвет, параметры текста и т.д. Каждое свойство
имеет текстовое имя. Для чтения и записи значения свойства используются интерфейс Properties
(View реализует данный интерфейс):
type Properties interface {
Get(tag string) any
Set(tag string, value any) bool
Remove(tag string)
Clear()
AllTags() []string
}
Функция Get возвращает значение свойства или nil если свойство не установлено.
Функция Set устанавливает значение свойства. Если значение свойства установлено успешно, то
функция возвращает true, если нет то false и в лог записывается описание возникшей ошибки.
Функция Remove удаляет значение свойства, эквивалентно Set(nil)
Для упрощения установки/чтения свойств имеются также две глобальные функции Get и Set:
func Get(rootView View, viewID, tag string) any
func Set(rootView View, viewID, tag string, value any) bool
Данные функции возвращают/устанавливают значение дочернего View
### Отслеживание изменения свойств
Вы можете установить функцию для отслеживания изменения абсолютно любого свойства View (исключений нет).
Для установки слушателя изменений интерфейс View содержит функцию:
SetChangeListener(tag string, listener func(View, string))
где первый параметр это имя отслеживаемого свойства, а второй - функция которая будет вызываться
каждый раз когда значение свойства изменится.
Например
view.SetChangeListener(rui.BackgroundColor, listener func(view View, tag string) {
// The background color changed
})
### События
При взаимодействии с приложением возникаю различные события: клики, изменение размеров,
изменение вводимых данных и т.п.
Для реакции на события предназначены слушатели событий. Слушатель это функция которая вызывается
каждый раз когда возникает событие. У каждого события может быть несколько слушателей. Разберем
слушателей на примере события изменения текста "edit-text-changed" в редакторе "EditView".
Слушателем события является функция вида
func(<View>[, <параметры>])
где первый аргумент это View в котором произошло событие. Далее идут дополнительные параметры события.
Для "edit-text-changed" основной слушатель будет иметь следующий вид:
func(EditView, string)
где второй аргумент это новое значение текста
Если вы не планируете использовать первый аргумент, то его можно опустить. Это будет дополнительный слушатель
func(string)
Для того чтобы назначить слушателя необходимо его присвоить свойству с именем события
view.Set(rui.EditTextChanged, func(edit EditView, newText string) {
// do something
})
или
view.Set(rui.EditTextChanged, func(newText string) {
// do something
})
У каждого события может быть несколько слушателей. В связи с этим в качестве слушателей могут
использоваться пять типов данных
* функция func(< View >[, <параметры>])
* функция func([<параметры>])
* массив функций []func(< View >[, <параметры>])
* массив функций []func([<параметры>])
* []any содержащий только func(< View >[, <параметры>]) и func([<параметры>])
После присваивания свойству все эти типы преобразуются в массив функций []func(<View>, [<параметры>]).
Соответственно функция Get всегда возвращает массив функций []func(<View>, [<параметры>]).
В случае отсутствия слушателей этот массив будет пуст
Для события "edit-text-changed" это
* func(editor EditView, newText string)
* func(newText string)
* []func(editor EditView, newText string)
* []func(newText string)
* []any содержащий только func(editor EditView, newText string) и func(newText string)
А свойство "edit-text-changed" всегда хранит и возвращает []func(EditView, string).
В дальнейшем при описании конкретных событий будет приводиться только формат основного слушателя.
### Свойство "id"
Свойство "id" это необязательный текстовый идентификатор View. С его помощью можно найти
дочерний View. Для этого используется функция ViewByID
func ViewByID(rootView View, id string) View
Данная функция ищет дочерний View с идентификатором id. Поиск начинается с rootView.
Если View не найден, то функция возвращает nil и в лог записывается сообщение об ошибке.
При поиске можно задавать цепочку идентификаторов. В этом случае они разделяются символом '/'.
Например
view := rui.ViewByID(rootView, "id1/id2")
эквивалентно
var view rui.View = nil
if view1 := rui.ViewByID(rootView, "id1"); view1 != nil {
view = rui.ViewByID(view1, "id2")
}
Обычно id устанавливается при создании View и в дальнейшем не меняется.
Но это необязательное условие. Вы можете поменять id в любой момент.
Для установки нового значения id используется функция Set. Например
view.Set(rui.ID, "myView")
view.Set("id", "myView")
Получить id можно двумя способами. Первый - используя функцию Get:
Например
if value := view.Get(rui.ID); value != nil {
id = value.(string)
}
И второй - используя функцию ID():
id = view.ID()
### Свойства "width", "height", "min-width", "min-height", "max-width", "max-height"
Данные свойства устанавливают:
| Свойство | Константа | Описание |
|--------------|---------------|--------------------------|
| "width" | rui.Width | Ширина View |
| "height" | rui.Height | Высота View |
| "min-width" | rui.MinWidth | Минимальная ширина View |
| "min-height" | rui.MinHeight | Минимальная высота View |
| "max-width" | rui.MaxWidth | Максимальная ширина View |
| "max-height" | rui.MaxHeight | Максимальная высота View |
Данные свойства имеют тип SizeUnit.
Если значение "width"/"height" не установлены или установлены в Auto, то высота/ширина
View определяется его содержимым и ограничено минимальной и максимальной высотой/шириной.
В качестве значения данных свойств можно установить SizeUnit структуру, текстовое представление
SizeUnit или имя константы (о константах ниже):
view.Set("width", rui.Px(8))
view.Set(rui.MaxHeight, "80%")
view.Set(rui.Height, "@viewHeight")
После получения значения функцией Get вы должны выполнить приведение типов:
if value := view.Get(rui.Width); value != nil {
switch value.(type) {
case string:
text := value.(string)
// TODO
case SizeUnit:
size := value.(SizeUnit)
// TODO
}
}
Это довольно громоздко поэтому для каждого свойства существует одноимённая глобальная функция с префиксом Get,
которая выполняет данное приведение типа, получает значение константы, если необходимо, и
возвращает его. Все функции данного типа имеют два аргумента: View и subviewID ...string.
Первый аргумент это корневой View, второй - ID дочернего View. Если ID дочернего View не задать или передать как "",
то возвращается значение корневого View.
Для свойств "width", "height", "min-width", "min-height", "max-width", "max-height" это функции:
func GetWidth(view View, subviewID ...string) SizeUnit
func GetHeight(view View, subviewID ...string) SizeUnit
func GetMinWidth(view View, subviewID ...string) SizeUnit
func GetMinHeight(view View, subviewID ...string) SizeUnit
func GetMaxWidth(view View, subviewID ...string) SizeUnit
func GetMaxHeight(view View, subviewID ...string) SizeUnit
### Свойство "resize"
Свойство "resize" (константа Resize) типа int устанавливает, можно ли изменить размер View,
и если да, то в каких направлениях. Допустимые значения
| Значение | Константа | Имя | Описание |
|:--------:|------------------|--------------|------------------------------|
| 0 | NoneResize | "none" | Нельзя изменять размер View. |
| 1 | BothResize | "both" | Отображается механизм, позволяющий пользователю изменять размер View как по горизонтали, так и по вертикали. |
| 2 | HorizontalResize | "horizontal" | Отображается механизм, позволяющий пользователю изменять размер View только по горизонтали. |
| 3 | VerticalResize | "vertical" | Отображается механизм, позволяющий пользователю изменять размер View только по вертикали. |
Значение по умолчанию для всех типов View кроме многострочного редактора текста это NoneResize (0).
Значение по умолчанию для многострочного редактора текста это BothResize (1).
Получить значение данного свойства можно с помощью функции
func GetResize(view View, subviewID ...string) int
### Свойства "margin" и "padding"
Свойство "margin" определяет внешние отступы от данного View до соседних.
Свойство "padding" устанавливает внутренние отступы от границы View до контента.
Значение свойств "margin" и "padding" хранятся в виде интерфейса BoundsProperty,
реализующего интерфейс Properties (см. выше). BoundsProperty имеет 4 свойства типа SizeUnit:
| Свойство | Константа | Описание |
|-----------|--------------|------------------|
| "top" | rui.Top | Верхний отступ |
| "right" | rui.Right | Правый отступ |
| "bottom" | rui.Bottom | Нижний отступ |
| "left" | rui.Left | Левый отступ |
Для создания интерфейса BoundsProperty используется функция NewBoundsProperty. Пример
view.Set(rui.Margin, NewBoundsProperty(rui.Params {
rui.Top: rui.Px(8),
rui.Left: "@topMargin",
"right": "1.5em",
"bottom": rui.Inch(0.3),
})))
Соответственно если вы запросите свойство "margin" или "padding" с помощью метода Get,
то вернется интерфейс BoundsProperty:
if value := view.Get(rui.Margin); value != nil {
margin := value.(BoundsProperty)
}
BoundsProperty с помощью функции "Bounds(session Session) Bounds" интерфейса BoundsProperty
может быть преобразовано в более удобную структуру Bounds:
type Bounds struct {
Top, Right, Bottom, Left SizeUnit
}
Для этого используется также могут использоваться глобальные функции:
func GetMargin(view View, subviewID ...string) Bounds
func GetPadding(view View, subviewID ...string) Bounds
Текстовое представление BoundsProperty имеет следующий вид:
"_{ top = <верхний отступ>, right = <правый отступ>, bottom = <нижний отступ>, left = <левый отступ> }"
В качестве значения свойств "margin" и "padding" методу Set может быть передано:
* интерфейс BoundsProperty или его текстовое представление;
* структура Bounds;
* SizeUnit или имя константы типа SizeUnit, в этом случай это значение устанавливается во все отступы. Т.е.
view.Set(rui.Margin, rui.Px(8))
эквивалентно
view.Set(rui.Margin, rui.Bounds{Top: rui.Px(8), Right: rui.Px(8), Bottom: rui.Px(8), Left: rui.Px(8)})
Так как значение свойства "margin" и "padding" всегда хранятся в виде интерфейса BoundsProperty,
то если вы прочитаете функцией Get свойство "margin" или "padding" установленное значением Bounds
или SizeUnit, то вы получите BoundsProperty, а не Bounds или SizeUnit.
Свойства "margin" и "padding" используются для установки сразу четырех отступов. Для установки
отдельных отступов используются следующие свойства:
| Свойство | Константа | Описание |
|------------------|--------------------|--------------------------|
| "margin-top" | rui.MarginTop | Верхний внешний отступ |
| "margin-right" | rui.MarginRight | Правый внешний отступ |
| "margin-bottom" | rui.MarginBottom | Нижний внешний отступ |
| "margin-left" | rui.MarginLeft | Левый внешний отступ |
| "padding-top" | rui.PaddingTop | Верхний внутренний отступ |
| "padding-right" | rui.PaddingRight | Правый внутренний отступ |
| "padding-bottom" | rui.PaddingBottom | Нижний внутренний отступ |
| "padding-left" | rui.PaddingLeft | Левый внутренний отступ |
Например
view.Set(rui.Margin, rui.Px(8))
view.Set(rui.TopMargin, rui.Px(12))
эквивалентно
view.Set(rui.Margin, rui.Bounds{Top: rui.Px(12), Right: rui.Px(8), Bottom: rui.Px(8), Left: rui.Px(8)})
### Свойство "border"
Свойство "border" определяет рамку вокруг View, при этом внешняя граница рамки совпадает со внешней границей View.
Т.е. рамка всегда располагается внутри View.
Линия рамки описывается тремя атрибутами: стиль линии, толщина и цвет.
Значение свойства "border" хранится в виде интерфейса BorderProperty,
реализующего интерфейс Properties (см. выше). BorderProperty может содержать следующие свойства:
| Свойство | Константа | Тип | Описание |
|----------------|-------------|----------|-----------------------------|
| "left-style" | LeftStyle | int | Стиль левой линии рамки |
| "right-style" | RightStyle | int | Стиль правой линии рамки |
| "top-style" | TopStyle | int | Стиль верхней линии рамки |
| "bottom-style" | BottomStyle | int | Стиль нижней линии рамки |
| "left-width" | LeftWidth | SizeUnit | Толщина левой линии рамки |
| "right-width" | RightWidth | SizeUnit | Толщина правой линии рамки |
| "top-width" | TopWidth | SizeUnit | Толщина верхней линии рамки |
| "bottom-width" | BottomWidth | SizeUnit | Толщина нижней линии рамки |
| "left-color" | LeftColor | Color | Цвет левой линии рамки |
| "right-color" | RightColor | Color | Цвет правой линии рамки |
| "top-color" | TopColor | Color | Цвет верхней линии рамки |
| "bottom-color" | BottomColor | Color | Цвет нижней линии рамки |
Стиль линии может принимать следующие значения:
| Значение | Константа | Имя | Описание |
|:--------:|------------|----------|--------------------------|
| 0 | NoneLine | "none" | Нет рамки |
| 1 | SolidLine | "solid" | Сплошная линия |
| 2 | DashedLine | "dashed" | Пунктирная линия |
| 3 | DottedLine | "dotted" | Линия состоящая из точек |
| 4 | DoubleLine | "double" | Двойная сплошная линия |
Все другие значения стиля игнорируются.
Для создания интерфейса BorderProperty используется функция NewBorder.
Если все линии рамки одинаковы, то для задания стиля, толщины и цвета могут использоваться следующие свойства:
| Свойство | Константа | Тип | Описание |
|----------|---------------|----------|-----------------------|
| "style" | Style | int | Стиль линии рамки |
| "width" | Width | SizeUnit | Толщина линии рамки |
| "color" | ColorTag | Color | Цвет линии рамки |
Пример
view.Set(rui.Border, NewBorder(rui.Params{
rui.LeftStyle: rui.SolidBorder,
rui.RightStyle: rui.SolidBorder,
rui.TopStyle: rui.SolidBorder,
rui.BottomStyle: rui.SolidBorder,
rui.LeftWidth: rui.Px(1),
rui.RightWidth: rui.Px(1),
rui.TopWidth: rui.Px(1),
rui.BottomWidth: rui.Px(1),
rui.LeftColor: rui.Black,
rui.RightColor: rui.Black,
rui.TopColor: rui.Black,
rui.BottomColor: rui.Black,
}))
эквивалентно
view.Set(rui.Border, NewBorder(rui.Params{
rui.Style: rui.SolidBorder,
rui.Width: rui.Px(1),
rui.ColorTag: rui.Black,
}))
Интерфейс BorderProperty может быть преобразован в структуру ViewBorders с помощью функции Border.
При преобразовании все текстовые константы заменяются реальными значениями. ViewBorders описана как
type ViewBorders struct {
Top, Right, Bottom, Left ViewBorder
}
где структура ViewBorder описана как
type ViewBorder struct {
Style int
Color Color
Width SizeUnit
}
Структура ViewBorders может быть передана в качестве параметра функции Set при установке значения свойства "border".
При этом ViewBorders преобразуется в BorderProperty. Поэтому при чтении свойства функцией Get будет возвращен интерфейс
BorderProperty, а не структура ViewBorders. Получить структуру ViewBorders без дополнительных преобразований можно
с помощью глобальной функции
func GetBorder(view View, subviewID ...string) ViewBorders
Кроме вспомогательных свойств "style", "width" и "color" есть еще 4: "left", "right", "top" и "bottom".
В качестве значения эти свойства могут принимать только структуру ViewBorder и позволяю установить все
атрибуты линии одноименной стороны.
Вы также можете устанавливать отдельные атрибуты рамки использую функцию Set интерфейса View.
Для этого используются следующие свойства
| Свойство | Константа | Тип | Описание |
|-----------------------|-------------------|------------|-----------------------------|
| "border-left-style" | BorderLeftStyle | int | Стиль левой линии рамки |
| "border-right-style" | BorderRightStyle | int | Стиль правой линии рамки |
| "border-top-style" | BorderTopStyle | int | Стиль верхней линии рамки |
| "border-bottom-style" | BorderBottomStyle | int | Стиль нижней линии рамки |
| "border-left-width" | BorderLeftWidth | SizeUnit | Толщина левой линии рамки |
| "border-right-width" | BorderRightWidth | SizeUnit | Толщина правой линии рамки |
| "border-top-width" | BorderTopWidth | SizeUnit | Толщина верхней линии рамки |
| "border-bottom-width" | BorderBottomWidth | SizeUnit | Толщина нижней линии рамки |
| "border-left-color" | BorderLeftColor | Color | Цвет левой линии рамки |
| "border-right-color" | BorderRightColor | Color | Цвет правой линии рамки |
| "border-top-color" | BorderTopColor | Color | Цвет верхней линии рамки |
| "border-bottom-color" | BorderBottomColor | Color | Цвет нижней линии рамки |
| "border-style" | BorderStyle | int | Стиль линии рамки |
| "border-width" | BorderWidth | SizeUnit | Толщина линии рамки |
| "border-color" | BorderColor | Color | Цвет линии рамки |
| "border-left" | BorderLeft | ViewBorder | Левая линия рамки |
| "border-right" | BorderRight | ViewBorder | Правая линия рамки |
| "border-top" | BorderTop | ViewBorder | Верхняя линия рамки |
| "border-bottom" | BorderBottom | ViewBorder | Нижняя линия рамки |
Например
view.Set(rui.BorderStyle, rui.SolidBorder)
view.Set(rui.BorderWidth, rui.Px(1))
view.Set(rui.BorderColor, rui.Black)
эквивалентно
view.Set(rui.Border, NewBorder(rui.Params{
rui.Style: rui.SolidBorder,
rui.Width: rui.Px(1),
rui.ColorTag: rui.Black,
}))
### Свойства "outline" и "outline-offset"
Свойство "outline" определяет рамку за пределами View.
Линия рамки описывается тремя атрибутами: стиль линии, толщина и цвет.
Свойство "outline" похоже на свойство "border". Три главных отличия рамки "outline" от рамки "border":
1) рамка "border" всегда располагается внутри границ View, а рамка "outline" может располагается как внутри View,
так и за ее пределами;
2) все стороны рамки "outline" одинаковы, в то время как стороны рамки "border" могут иметь разные цвет, стиль и толщину.
3) толщина рамки "border" добавляется к "padding", а толщина рамки "outline" не влияет на "padding".
Значение свойства "border" хранится в виде интерфейса OutlineProperty,
реализующего интерфейс Properties (см. выше). OutlineProperty может содержать следующие свойства:
| Свойство | Константа | Тип | Описание |
|-----------|-----------|----------|-----------------------|
| "style" | Style | int | Стиль линии рамки |
| "width" | Width | SizeUnit | Толщина линии рамки |
| "color" | ColorTag | Color | Цвет линии рамки |
Свойство "style" может принимать следующие значения
Стиль линии может принимать следующие значения:
| Значение | Константа | Имя | Описание |
|:--------:|------------|----------|--------------------------|
| 0 | NoneLine | "none" | Нет рамки |
| 1 | SolidLine | "solid" | Сплошная линия |
| 2 | DashedLine | "dashed" | Пунктирная линия |
| 3 | DottedLine | "dotted" | Линия состоящая из точек |
| 4 | DoubleLine | "double" | Двойная сплошная линия |
Все другие значения стиля игнорируются.
Для создания интерфейса OutlineProperty используется функция NewOutline.
По умолчанию внутренняя граница рамки "outline" совпадает с границей View (т.е. рамка рисуется вокруг View).
Для изменения этого поведения используется свойство "outline-offset" (константа OutlineOffset) типа SizeUnit.
Данное свойство определяет расстояние между внутренней границей рамки и границей View.
Положительное значение отдаляет рамку от границ View, а отрицательное заставляет рамку располагаться внутри View
(при этом рамка рисуется поверх содержимого View).
### Свойство "radius"
Свойство "radius" задает эллиптический радиус скругления углов View. Радиусы задаются интерфейсом
RadiusProperty реализующим интерфейс Properties (см. выше).
Для этого используются следующие свойства типа SizeUnit:
| Свойство | Константа | Описание |
|------------------|--------------|--------------------------------|
| "top-left-x" | TopLeftX | x-радиус верхнего левого угла |
| "top-left-y" | TopLeftY | y-радиус верхнего левого угла |
| "top-right-x" | TopRightX | x-радиус верхнего правого угла |
| "top-right-y" | TopRightY | y-радиус верхнего правого угла |
| "bottom-left-x" | BottomLeftX | x-радиус нижнего левого угла |
| "bottom-left-y" | BottomLeftY | y-радиус нижнего левого угла |
| "bottom-right-x" | BottomRightX | x-радиус нижнего правого угла |
| "bottom-right-y" | BottomRightY | y-радиус нижнего правого угла |
Если x- и y-радиусы одинаковы то можно воспользоваться вспомогательными свойствами
| Свойство | Константа | Описание |
|----------------|--------------|------------------------------|
| "top-left" | TopLeft | радиус верхнего левого угла |
| "top-right" | TopRight | радиус верхнего правого угла |
| "bottom-left" | BottomLeft | радиус нижнего левого угла |
| "bottom-right" | BottomRight | радиус нижнего правого угла |
Для установки всех радиусов одинаковыми значениями используются свойства "x" и "y"
Интерфейс RadiusProperty создается с помощью функции NewRadiusProperty. Пример
view.Set(rui.Radius, NewRadiusProperty(rui.Params{
rui.X: rui.Px(16),
rui.Y: rui.Px(8),
rui.TopLeft: rui.Px(0),
rui.BottomRight: rui.Px(0),
}))
эквивалентно
view.Set(rui.Radius, NewRadiusProperty(rui.Params{
rui.TopRightX: rui.Px(16),
rui.TopRightY: rui.Px(8),
rui.BottomLeftX: rui.Px(16),
rui.BottomLeftY: rui.Px(8),
rui.TopLeftX: rui.Px(0),
rui.TopLeftX: rui.Px(0),
rui.BottomRightX: rui.Px(0),
rui.BottomRightY: rui.Px(0),
}))
Если все радиусы одинаковы, то данное значение типа SizeUnit может быть напрямую присвоено свойству "radius"
view.Set(rui.Radius, rui.Px(4))
RadiusProperty имеет текстовое представление следующего вида:
_{ <id радиуса> = <SizeUnit text> [/ <SizeUnit text>] [, <id радиуса> = <SizeUnit text> [/ <SizeUnit text>]] … }
где <id радиуса> может принимать следующие значения:
| Свойство | Описание |
|------------------|-------------------------------------|
| "x" | Все x-радиусы |
| "y" | Все y-радиусы |
| "top-left" | x- и y-радиус верхнего левого угла |
| "top-left-x" | x-радиус верхнего левого угла |
| "top-left-y" | y-радиус верхнего левого угла |
| "top-right" | x- и y-радиус верхнего правого угла |
| "top-right-x" | x-радиус верхнего правого угла |
| "top-right-y" | y-радиус верхнего правого угла |
| "bottom-left" | x- и y-радиус нижнего левого угла |
| "bottom-left-x" | x-радиус нижнего левого угла |
| "bottom-left-y" | y-радиус нижнего левого угла |
| "bottom-right" | x- и y-радиус нижнего правого угла |
| "bottom-right-x" | x-радиус нижнего правого угла |
| "bottom-right-y" | y-радиус нижнего правого угла |
Значения вида "<SizeUnit text> / <SizeUnit text>" можно присваивать только
Свойствам "top-left", "top-right", "bottom-left" и "bottom-right".
Примеры:
_{ x = 4px, y = 4px, top-left = 8px, bottom-right = 8px }
эквивалентно
_{ top-left = 8px, top-right = 4px, bottom-left = 4px, bottom-right = 8px }
или
_{ top-left = 8px / 8px, top-right = 4px / 4px, bottom-left = 4px / 4px, bottom-right = 8px / 8px }
или
_{ top-left-x = 8px, top-left-y = 8px, top-right-x = 4px, top-right-y = 4px,
bottom-left-x = 4px, bottom-left-y = 4px, bottom-right-x = 8px, bottom-right-y = 8px }
Интерфейс RadiusProperty может быть преобразован в структуру BoxRadius с помощью функции BoxRadius.
При преобразовании все текстовые константы заменяются реальными значениями. BoxRadius описана как
type BoxRadius struct {
TopLeftX, TopLeftY, TopRightX, TopRightY, BottomLeftX, BottomLeftY, BottomRightX, BottomRightY SizeUnit
}
Структура BoxRadius может быть передана в качестве параметра функции Set при установке значения свойства "radius".
При этом BoxRadius преобразуется в RadiusProperty. Поэтому при чтении свойства функцией Get будет возвращен интерфейс
RadiusProperty, а не структура BoxRadius. Получить структуру BoxRadius без дополнительных преобразований можно
с помощью глобальной функции
func GetRadius(view View, subviewID ...string) BoxRadius
Вы также можете устанавливать отдельные радиусы использую функцию Set интерфейса View.
Для этого используются следующие свойства
| Свойство | Константа | Описание |
|-------------------------|--------------------|-------------------------------------|
| "radius-x" | RadiusX | Все x-радиусы |
| "radius-y" | RadiusY | Все y-радиусы |
| "radius-top-left" | RadiusTopLeft | x- и y-радиус верхнего левого угла |
| "radius-top-left-x" | RadiusTopLeftX | x-радиус верхнего левого угла |
| "radius-top-left-y" | RadiusTopLeftY | y-радиус верхнего левого угла |
| "radius-top-right" | RadiusTopRight | x- и y-радиус верхнего правого угла |
| "radius-top-right-x" | RadiusTopRightX | x-радиус верхнего правого угла |
| "radius-top-right-y" | RadiusTopRightY | y-радиус верхнего правого угла |
| "radius-bottom-left" | RadiusBottomLeft | x- и y-радиус нижнего левого угла |
| "radius-bottom-left-x" | RadiusBottomLeftX | x-радиус нижнего левого угла |
| "radius-bottom-left-y" | RadiusBottomLeftY | y-радиус нижнего левого угла |
| "radius-bottom-right" | RadiusBottomRight | x- и y-радиус нижнего правого угла |
| "radius-bottom-right-x" | RadiusBottomRightX | x-радиус нижнего правого угла |
| "radius-bottom-right-y" | RadiusBottomRightY | y-радиус нижнего правого угла |
Например
view.Set(rui.RadiusX, rui.Px(4))
view.Set(rui.RadiusY, rui.Px(32))
эквивалентно
view.Set(rui.Border, NewRadiusProperty(rui.Params{
rui.X: rui.Px(4),
rui.Y: rui.Px(32),
}))
### Свойство "shadow"
Свойство "shadow" позволяет задать тени для View. Теней может быть несколько. Тень описывается
с помощью интерфейса ViewShadow расширяющего интерфейс Properties (см. выше). У тени имеются следующие свойства:
| Свойство | Константа | Тип | Описание |
|-----------------|---------------|----------|---------------------------------------------------------------|
| "color" | ColorTag | Color | Цвет тени |
| "inset" | Inset | bool | true - тень внутри View, false - снаружи |
| "x-offset" | XOffset | SizeUnit | Смещение тени по оси X |
| "y-offset" | YOffset | SizeUnit | Смещение тени по оси Y |
| "blur" | BlurRadius | float | Радиус размытия тени. Значение должно быть >= 0 |
| "spread-radius" | SpreadRadius | float | Увеличение тени. Значение > 0 увеличивает тень, < 0 уменьшает |
Для создания ViewShadow используются три функции:
func NewViewShadow(offsetX, offsetY, blurRadius, spread-radius SizeUnit, color Color) ViewShadow
func NewInsetViewShadow(offsetX, offsetY, blurRadius, spread-radius SizeUnit, color Color) ViewShadow
func NewShadowWithParams(params Params) ViewShadow
Функция NewViewShadow создает внешнюю тень (Inset == false), NewInsetViewShadow - внутреннюю
(Inset == true).
Функция NewShadowWithParams используется когда в качестве параметров необходимо использовать
константы. Например:
shadow := NewShadowWithParams(rui.Params{
rui.ColorTag : "@shadowColor",
rui.BlurRadius : 8.0,
rui.Dilation : 16.0,
})
В качестве значения свойству "shadow" может быть присвоено ViewShadow, массив ViewShadow,
текстовое представление ViewShadow.
Текстовое представление ViewShadow имеет следующий формат:
_{ color = <цвет> [, x-offset = <смещение>] [, y-offset = <смещение>] [, blur = <радиус>]
[, spread-radius = <увеличение>] [, inset = <тип>] }
Получить значение данного свойства можно с помощью функции
func GetViewShadows(view View, subviewID ...string) []ViewShadow
Если тень не задана, то данная функция вернет пустой массив
### Свойство "background-color"
Константа: rui.BackgroundColor. Get функция: BackgroundColor() Color
Свойство "background-color" устанавливает цвет фона. Допустимые значения: Color, целое число, текстовой представление Color и имя константы начинающееся с '@'.
Целое число должно кодировать цвет в формате AARRGGBB
Кроме цвета в качестве фона можно также использовать изображения и градиенты (см. ниже).
В этом случае "background-color" используется для прозрачных участков изображений.
### Свойство "background-clip"
Свойство "background-clip" определяет как цвет фона и/или фоновое изображение будут выводиться под границами блока.
Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области; в противном случае граница скрывает разницу.
Свойство может принимать следующие значения:
| Значение | Константа | Имя | Описание |
|:--------:|----------------|---------------|------------------------------------------------|
| 0 | BorderBoxClip | "border-box" | Фон распространяется до внешнего края границы (но под границей в z-порядке). |
| 1 | PaddingBoxClip | "padding-box" | Фон распространяется до внешнего края отступа. Под границей фон не рисуется. |
| 2 | ContentBoxClip | "content-box" | Фон закрашивается внутри (обрезается) поля содержимого. |
### Свойство "background"
В качестве фона View, помимо цвета, можно задать также картинки и/или градиентные заливки.
Для этого используется свойство "background". Фон может содержать несколько картинок и градиентов.
Каждый элемент фона описывается интерфейсом BackgroundElement. BackgroundElement может быть трех
типов: линейный градиент, радиальный градиент и изображение.
#### Линейный градиент
Линейный градиент создается с помощью функции
func NewBackgroundLinearGradient(params Params) BackgroundElement
Линейный градиент имеет следующие параметры:
* Direction ("direction") - определяет направление линии градиента (линии вдоль которой меняется цвет).
Необязательный параметр. Направление по умолчанию - снизу вверх.
Может принимать или значение типа AngleUnit (угол наклона линии относительно вертикали)
или одно из следующих значений типа Int:
| Значение | Константа | Имя | Описание |
|:--------:|-----------------------|-------------------|-----------------------------------------|
| 0 | ToTopGradient | "to-top" | Линия идет снизу вверх |
| 1 | ToRightTopGradient | "to-right-top" | Из левого нижнего угла в правый верхний |
| 2 | ToRightGradient | "to-right" | Слева направо |
| 3 | ToRightBottomGradient | "to-right-bottom" | Из левого верхнего угла в правый нижний |
| 4 | ToBottomGradient | "to-bottom" | Сверху вниз (значение по умолчанию) |
| 5 | ToLeftBottomGradient | "to-left-bottom" | Из правого верхнего угла в левый нижний |
| 6 | ToLeftGradient | "to-left" | Справа налево |
| 7 | ToLeftTopGradient | "to-left-top" | Из правого нижнего угла в левый верхний |
* Gradient ("gradient") - массив ключевых точек градиента (обязательный параметр). Каждая точка
описывается структурой BackgroundGradientPoint, которая имеет два поля: Pos типа SizeUnit и Color.
Pos определяет положение точки относительно начала линии градиента. Массив должен иметь не менее 2 точек.
В качестве значения градиента можно также передать массив Color. В этом случае точки равномерно
распределяются вдоль линии градиента.
Также в качестве массива ключевых точек можно использовать массив типа []any.
Элементами этого массива могут быть BackgroundGradientPoint, Color, текстовое представление BackgroundGradientPoint
или Color и имя константы
* Repeating ("repeating") - булево значение, определяющее будет ли повторяться градиент после последней
ключевой точки. Необязательный параметр. Значение по умолчанию - false (не повторять)
Текстовое представление линейного градиента имеет следующий вид:
linear-gradient { gradient = <значение> [, direction = <значение>] [, repeating = <значение>] }
#### Радиальный градиент
Радиальный градиент создается с помощью функции
func NewBackgroundRadialGradient(params Params) BackgroundElement
Радиальный градиент имеет следующие параметры:
* Gradient ("gradient") - массив ключевых точек градиента (обязательный параметр). Идентичен одноименному
параметру линейного градиента.
* Repeating ("repeating") - булево значение, определяющее будет ли повторяться градиент после последней
ключевой точки. Необязательный параметр. Значение по умолчанию - false (не повторять)
* RadialGradientShape ("radial-gradient-shape") или Shape ("shape") - определяет форму градиента.
Может принимать одно из двух значений типа Int:
| Значение | Константа | Имя | Описание |
|:--------:|-----------------|-----------|--------------------------------------------|
| 0 | EllipseGradient | "ellipse" | Формой является эллипс, выровненный по оси |
| 1 | CircleGradient | "circle" | Формой является круг с постоянным радиусом |
Необязательный параметр. Значение по умолчанию EllipseGradient
* RadialGradientRadius ("radial-gradient-radius") или Radius ("radius") - задает радиус градиента.
Может принимать или значение типа SizeUnit или одно из следующих значений типа Int:
| Константа | Значение | Имя | Описание |
|------------------------|:--------:|-------------------|--------------------------------------------|
| ClosestSideGradient | 0 | "closest-side" | Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов) |
| ClosestCornerGradient | 1 | "closest-corner" | Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра |
| FarthestSideGradient | 2 | "farthest-side" | Схоже с ClosestSideGradient, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон) |
| FarthestCornerGradient | 3 | "farthest-corner" | Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра |
Необязательный параметр. Значение по умолчанию FarthestCornerGradient
* CenterX ("center-x"), CenterY ("center-y") - задает центр градиента относительно левого верхнего
угла View. Принимает значение типа SizeUnit. Необязательный параметр.
Значение по умолчанию "50%", т.е. центр градиента совпадает с центром View.
Текстовое представление линейного градиента имеет следующий вид:
radial-gradient { gradient = <значение> [, repeating = <значение>] [, shape = <значение>]
[, radius = <значение>][, center-x = <значение>][, center-y = <значение>]}
#### Конический градиент
Конический градиент создается с помощью функции
func NewBackgroundConicGradient(params Params) BackgroundElement
Радиальный градиент имеет следующие параметры:
* Gradient ("gradient") - массив ключевых углов градиента (обязательный параметр). Каждая ключевой угол
описывается структурой BackgroundGradientAngle:
type BackgroundGradientAngle struct {
Color any
Angle any
}
где Color задает цвет ключевого угла и может принимать значение типа Color или string (цветовая константа
или текстовое описание цвета);
Angle задает угол относительно начального угла задаваемого параметром From и может принимать значение типа
AngleUnit или string (угловая константа или текстовое описание угла).
Поле Color является обязательным и не может быть nil. Поле Angle опционально, если оно равно nil, то угол
задается как середина между соседними углами. Для первого элемента угол по умолчанию равен 0°, для последнего - 360°.
* Repeating ("repeating") - булево значение, определяющее будет ли повторяться градиент после последнего
ключевого угла. Необязательный параметр. Значение по умолчанию - false (не повторять)
* CenterX ("center-x"), CenterY ("center-y") - задает центр градиента относительно левого верхнего
угла View. Принимает значение типа SizeUnit. Необязательный параметр.
Значение по умолчанию "50%", т.е. центр градиента совпадает с центром View.
Текстовое представление конического градиента имеет следующий вид:
conic-gradient { gradient = <значение> [, repeating = <значение>] [, from = <значение>]
[, center-x = <значение>][, center-y = <значение>]}
#### Изображение
Изображение имеет следующие параметры:
* Source ("src") - задает URL изображения
* Fit ("fit") - необязательный параметр определяющий масштабирование изображения.
Может принимать одно из следующих значений типа Int:
| Константа | Значение | Имя | Описание |
|------------|:--------:|-----------|------------------------------------------------------------------|
| NoneFit | 0 | "none" | Нет масштабирования (значение по умолчанию). Размеры изображения определяются параметрами Width и Height |
| ContainFit | 1 | "contain" | Изображение масштабирует с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте области фона. Изображение может обрезаться по ширине или высоте |
| CoverFit | 2 | "cover" | Изображение масштабирует с сохранением пропорций так, чтобы картинка целиком поместилась внутрь области фона |
* Width ("width"), Height (height) - необязательные SizeUnit параметры задающие высоту и ширину
изображения. Используется только если параметр Fit равен NoneFit. Значение по умолчанию Auto (исходный
размер). Значение в процентах задает размер относительно высоты и ширины области фона соответственно
* Attachment - ???
* Repeat (repeat) - необязательный параметр задающий повтор изображения.
Может принимать одно из следующих значений типа int:
| Константа | Значение | Имя | Описание |
|-------------|:--------:|-------------|---------------------------------------------------------------|
| NoRepeat | 0 | "no-repeat" | Изображение не повторяется (значение по умолчанию) |
| RepeatXY | 1 | "repeat" | Изображение повторяется по горизонтали и вертикали |
| RepeatX | 2 | "repeat-x" | Изображение повторяется только по горизонтали |
| RepeatY | 3 | "repeat-y" | Изображение повторяется только по вертикали |
| RepeatRound | 4 | "round" | Изображение повторяется так, чтобы в область фона поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются |
| RepeatSpace | 5 | "space" | Изображение повторяется столько раз, сколько требуется для заполнения области фона; если это не удаётся, между картинками добавляется пустое пространство |
* ImageHorizontalAlign,
* ImageVerticalAlign,
### Свойство "background-blend-mode"
Свойство "background-blend-mode" (константа BackgroundBlendMode) типа int устанавливает,
как фоновые изображения / градиенты элемента должны смешиваться друг с другом и с цветом фона.
Может принимать одно из следующих значений:
| Константа | Значение | Имя | Описание |
|-----------------|:--------:|--------------|---------------------------------------------------------------|
| BlendNormal | 0 | "normal" | Конечный цвет это верхний цвет, независимо от того, какой нижний цвет. Эффект подобен двум непрозрачным листам бумаги, перекрывающимся друг с другом. |
| BlendMultiply | 1 | "multiply" | Конечный цвет является результатом умножения верхнего и нижнего цветов. Черный слой приводит к черному конечному слою, а белый слой не приводит к изменению. Эффект подобен наложению двух изображений, напечатанных на прозрачной пленке. |
| BlendScreen | 2 | "screen" | Конечный цвет является результатом инвертирования цветов, их умножения и инвертирования этого значения. Черный слой не приводит к изменению, а белый слой приводит к белому конечному слою. Эффект подобен двум изображениям на проекционном экране. |
| BlendOverlay | 3 | "overlay" | Конечный цвет является результатом умножения, если нижний цвет темнее, или "screen", если нижний цвет светлее. Этот режим наложения эквивалентен жесткому свету, но с перестановкой слоев. |
| BlendDarken | 4 | "darken" | Конечный цвет состоит из самых темных значений каждого цветового канала. |
| BlendLighten | 5 | "lighten" | Конечный цвет состоит из самых светлых значений каждого цветового канала. |
| BlendColorDodge | 6 | "color-dodge"| Окончательный цвет является результатом деления нижнего цвета на инверсию верхнего цвета. Черный передний план не приводит к изменениям. Передний план с обратным цветом фона приводит к полностью освещенному цвету. Этот режим наложения похож на "screen", но передний план должен быть таким же светлым, как и обратная сторона фона, чтобы создать полностью освещенный цвет. |
| BlendColorBurn | 7 | "color-burn" | Конечный цвет является результатом инвертирования нижнего цвета, деления значения на верхний цвет и инвертирования этого значения. Белый передний план не приводит к изменениям. Передний план с обратным цветом фона приводит к черному конечному изображению. Этот режим наложения похож на режим умножения, но передний план должен быть таким же темным, как и обратная сторона фона, чтобы окончательное изображение стало черным. |
| BlendHardLight | 8 | "hard-light" | Окончательный цвет является результатом умножения, если верхний цвет темнее, или "screen", если верхний цвет светлее. Этот режим наложения эквивалентен наложению, но слои меняются местами. Эффект подобен яркому прожектору на фоне. |
| BlendSoftLight | 9 | "soft-light" | Конечный цвет похож на "hard-light", но мягче. Этот режим наложения ведет себя аналогично "hard-light". Эффект подобен рассеянному свету прожектора на фоне |
| BlendDifference | 10 | "difference" | Окончательный цвет получается в результате вычитания более темного из двух цветов из более светлого. Черный слой не имеет никакого эффекта, а белый слой инвертирует цвет другого слоя. |
| BlendExclusion | 11 | "exclusion" | Конечный цвет подобен "difference", но с меньшим контрастом. Как и в случае с "difference", черный слой не имеет эффекта, а белый слой инвертирует цвет другого слоя. |
| BlendHue | 12 | "hue" | Конечный цвет имеет оттенок верхнего цвета, используя при этом насыщенность и яркость нижнего цвета. |
| BlendSaturation | 13 | "saturation" | Конечный цвет имеет насыщенность верхнего цвета при использовании оттенка и яркости нижнего цвета. Чисто серый фон, не имеющий насыщенности, не будет иметь никакого эффекта. |
| BlendColor | 14 | "color" | Конечный цвет имеет оттенок и насыщенность верхнего цвета, используя при этом яркость нижнего цвета. Эффект сохраняет уровни серого и может использоваться для раскрашивания переднего плана. |
| BlendLuminosity | 15 | "luminosity" | Окончательный цвет имеет яркость верхнего цвета, используя при этом оттенок и насыщенность нижнего цвета. Этот режим наложения эквивалентен "color", но с перестановкой слоев. |
Получить значение данного свойства можно с помощью функции
func GetBackgroundBlendMode(view View, subviewID ...string) int
### Свойство "mix-blend-mode"
Свойство "mix-blend-mode" (константа MixBlendMode) типа int устанавливает,
как содержимое View должно сочетаться с содержимым родительского View и фоном.
Возможные значения данного свойства аналогичны значениям свойства "background-blend-mode" (см. выше)
Получить значение данного свойства можно с помощью функции
func GetMixBlendMode(view View, subviewID ...string) int
### Свойство "clip"
Свойство "clip" (константа Clip) типа ClipShape задает задает область образки.
Есть 4 типа областей обрезки
#### inset
Прямоугольная область обрезки. Создается с помощью функции:
func InsetClip(top, right, bottom, left SizeUnit, radius RadiusProperty) ClipShape
где top, right, bottom, left это расстояние от соответственно верхней, правой, нижней и левой границы
View до одноименной границы обрезки; radius - задает радиусы скругления углов области обрезки
(описание типа RadiusProperty смотри выше). Если скругления углов не должно быть, то в качестве
radius необходимо передать nil
Текстовое описание прямоугольной области обрезки имеет следующий формат
inset{ top = <top value>, right = <right value>, bottom = <bottom value>, left = <left value>,
[radius = <RadiusProperty text>] }
}
#### circle
Круглая область обрезки. Создается с помощью функции:
func CircleClip(x, y, radius SizeUnit) ClipShape
где x, y - координаты центра окружности; radius - радиус
Текстовое описание круглой области обрезки имеет следующий формат
circle{ x = <x value>, y = <y value>, radius = <radius value> }
#### ellipse
Эллиптическая область обрезки. Создается с помощью функции:
func EllipseClip(x, y, rx, ry SizeUnit) ClipShape
где x, y - координаты центра эллипса; rх - радиус эллипса по оси X; ry - радиус эллипса по оси Y.
Текстовое описание эллиптической области обрезки имеет следующий формат
ellipse{ x = <x value>, y = <y value>, radius-x = <x radius value>, radius-y = <y radius value> }
#### polygon
Многоугольная область обрезки. Создается с помощью функций:
func PolygonClip(points []any) ClipShape
func PolygonPointsClip(points []SizeUnit) ClipShape
в качестве аргумента передается массив угловых точек многоугольника в следующем порядке: x1, y1, x2, y2, …
В качестве элементов аргумента функции PolygonClip могут быть или текстовые константы, или
текстовое представление SizeUnit, или элементы типа SizeUnit.
Текстовое описание многоугольной области обрезки имеет следующий формат
polygon{ points = "<x1 value>, <y1 value>, <x2 value>, <y2 value>,…" }
### Свойство "opacity"
Свойство "opacity" (константа Opacity) типа float64 задает прозрачность View. Допустимые значения от 0 до 1.
Где 1 - View полностью непрозрачен, 0 - полностью прозрачен.
Получить значение данного свойства можно с помощью функции
func GetOpacity(view View, subviewID ...string) float64
### Свойство "tabindex"
Свойство "tabindex" (константа TabIndex) типа int определяет должен ли данный View участвовать в последовательной
навигации по всей странице с помощью клавиатуры и в каком порядке. Может принимать одно из следующих видов значений:
* отрицательное значение – View может быть выделен с помощью мыши или прикосновения, однако не участвует в последовательной навигации;
* 0 – View может быть выделен и достигнут с помощью последовательной навигации, порядок навигации определён браузером (обычно в порядке добавления);
* положительное значение – элемент будет достигнут (и выделен) с помощью последовательной навигации, а навигация осуществляется по возрастанию значения "tabindex".
В случае, если несколько элементов содержат одно и то же значение "tabindex", то навигации осуществляется в порядке их добавления.
Получить значение данного свойства можно с помощью функции
func GetTabIndex(view View, subviewID ...string) int
### Свойство "z-index"
Свойство "z-index" (константа ZIndex) типа int определяет положение элемента и нижестоящих элементов по оси z.
В случае перекрытия элементов, это значение определяет порядок наложения. В общем случае, элементы
с большим z-index перекрывают элементы с меньшим.
Получить значение данного свойства можно с помощью функции
func GetZIndex(view View, subviewID ...string) int
### Свойство "visibility"
Свойство "visibility" (константа Visibility) типа int задает видимость View. Допустимые значения
| Значение | Константа | Имя | Видимость |
|:--------:|-----------|-------------|------------------------------------|
| 0 | Visible | "visible" | View видим. Значение по умолчанию. |
| 1 | Invisible | "invisible" | View невидим, но занимает место. |
| 2 | Gone | "gone" | View невидим и не занимает место. |
Получить значение данного свойства можно с помощью функции
func GetVisibility(view View, subviewID ...string) int
### Свойства "filter" и "backdrop-filter"
Свойство "filter" (константа Filter) применяет ко View такие графические эффекты, как размытие, смещение цвета, изменение яркости/контрастности и т.п.
Свойства "backdrop-filter" (константа BackdropFilter) применяет такие же эффекты но к содержимому располагающемся ниже View.
В качестве значения свойств "filter" и "backdrop-filter" используется только интерфейс ViewFilter. ViewFilter создается с помощью
функции
func NewViewFilter(params Params) ViewFilter
В аргументе перечисляются применяемые эффекты. Возможны следующие эффекты:
| Эффект | Константа | Тип | Описание |
|---------------|------------|--------------------|----------------------------------|
| "blur" | Blur | float64 0…10000px | Размытие по Гауссу |
| "brightness" | Brightness | float64 0…10000% | Изменение яркости |
| "contrast" | Contrast | float64 0…10000% | Изменение контрастности |
| "drop-shadow" | DropShadow | []ViewShadow | Добавление тени |
| "grayscale" | Grayscale | float64 0…100% | Преобразование к оттенкам серого |
| "hue-rotate" | HueRotate | AngleUnit | Вращение оттенка |
| "invert" | Invert | float64 0…100% | Инвертирование цветов |
| "opacity" | Opacity | float64 0…100% | Изменение прозрачности |
| "saturate" | Saturate | float64 0…10000% | Изменение насыщенности |
| "sepia" | Sepia | float64 0…100% | Преобразование в серпию |
Получить значение текущего фильтра можно с помощью функций
func GetFilter(view View, subviewID ...string) ViewFilter
func GetBackdropFilter(view View, subviewID ...string) ViewFilter
### Свойство "semantics"
Свойство "semantics" (константа Semantics) типа string определяет семантический смысл View.
Данное свойство может не иметь видимого эффекта, но позволяет поисковикам понимать структуру вашего приложения.
Так же оно помогает озвучивать интерфейс системам для людей с ограниченными возможностями:
| Значение | Имя | Семантика |
|:--------:|------------------|------------------------------------------------------|
| 0 | "default" | Не определена. Значение по умолчанию. |
| 1 | "article" | Самостоятельная часть приложения предназначенная для независимого распространения или повторного использования. |
| 2 | "section" | Автономный раздел который не может быть представлен более точным по семантике элементом |
| 3 | "aside" | Часть документа, чьё содержимое только косвенно связанно с основным содержимым (сноска, метка) |
| 4 | "header" | Заголовок приложения |
| 5 | "main" | Основной контент (содержимое) приложения |
| 6 | "footer" | Нижний колонтитул |
| 7 | "navigation" | Панель навигации |
| 8 | "figure" | Изображение |
| 9 | "figure-caption" | Заголовок Изображения. Должно быть внутри "figure" |
| 10 | "button" | Кнопка |
| 11 | "p" | Параграф |
| 12 | "h1" | Заголовок текста 1-го уровня. Изменяет стиль текста |
| 13 | "h2" | Заголовок текста 2-го уровня. Изменяет стиль текста |
| 14 | "h3" | Заголовок текста 3-го уровня. Изменяет стиль текста |
| 15 | "h4" | Заголовок текста 4-го уровня. Изменяет стиль текста |
| 16 | "h5" | Заголовок текста 5-го уровня. Изменяет стиль текста |
| 17 | "h6" | Заголовок текста 6-го уровня. Изменяет стиль текста |
| 18 | "blockquote" | Цитата. Изменяет стиль текста |
| 19 | "code" | Программный код. Изменяет стиль текста |
### Свойство "tooltip"
Свойство "tooltip" (константа Tooltip) типа string задает текст всплывающей подсказки.
Подсказка всплывает при наведении курсора мыши. При оформление текста подсказки можно
использовать html тэги
### Свойства текста
Все перечисленные в этом разделе свойства являются наследуемыми, т.е. свойство будет применяться не только ко View
для которого оно установлено, но и ко всем View вложенным в него.
Имеются следующие свойства для настройки параметров отображения текста:
#### Свойство "font-name"
Свойство "font-name" (константа FontName) - текстовое свойство определяет имя используемого шрифта.
Может задаваться несколько шрифтов. В этом случае они разделяются пробелом.
Шрифты применяются в том порядке в котором они перечислены. Т.е. сначала
применяется первый, если он недоступен, то второй, третий и т.д.
Получить значение данного свойства можно с помощью функции
func GetFontName(view View, subviewID ...string) string
#### Свойство "text-color"
Свойство "text-color" (константа TextColor) - свойство типа Color определяет цвет текста.
Получить значение данного свойства можно с помощью функции
func GetTextColor(view View, subviewID ...string) Color
#### Свойство "text-size"
Свойство "text-size" (константа TextSize) - свойство типа SizeUnit определяет размер шрифта.
Получить значение данного свойства можно с помощью функции
func GetTextSize(view View, subviewID ...string) SizeUnit
#### Свойство "italic"
Свойство "italic" (константа Italic) - свойство типа bool. Если значение равно true, то к тексту применяется курсивное начертание
Получить значение данного свойства можно с помощью функции
func IsItalic(view View, subviewID ...string) bool
#### Свойство "small-caps"
Свойство "small-caps" (константа SmallCaps) - свойство типа bool. Если значение равно true, то к тексту применяется начертание капителью
Получить значение данного свойства можно с помощью функции
func IsSmallCaps(view View, subviewID ...string) bool
#### Свойство "white-space"
Свойство "white-space" (константа WhiteSpace) типа int управляет тем, как обрабатываются пробельные
символы внутри View. Свойство "white-space" может принимать следующие значения:
0 (константа WhiteSpaceNormal, имя "normal") - последовательности пробелов объединяются в один пробел.
Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения
при необходимости разбивает строки для того, чтобы заполнить строчные боксы.
1 (константа WhiteSpaceNowrap, имя "nowrap") - объединяет последовательности пробелов в один пробел,
как значение normal, но не переносит строки (оборачивание текста) внутри текста.
2 (константа WhiteSpacePre, имя "pre") - последовательности пробелов сохраняются так, как они указаны
в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там,
где в источнике указаны элементы "br".
3 (константа WhiteSpacePreWrap, имя "pre-wrap") - последовательности пробелов сохраняются так, как они
указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там,
где в источнике указаны элементы "br", и при необходимости для заполнения строчных боксов.
4 (константа WhiteSpacePreLine, имя "pre-line") - последовательности пробелов объединяются в один пробел.
Строки разбиваются по символам новой строки, по элементам "br", и при необходимости для заполнения строчных боксов.
5 (константа WhiteSpaceBreakSpaces, имя "break-spaces") - поведение идентично pre-wrap со следующими отличиями:
* Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
* Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
* Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).
В приведённой ниже таблице указано поведение различных значений свойства "white-space"
| | Новые строки | Пробелы и табуляция | Перенос по словам | Пробелы в конце строки |
|-----------------------|-----------------------------|-----------------------------|-------------------|-----------------------------|
| WhiteSpaceNormal | Объединяются в одну | Объединяются в один пробел | Переносится | Удаляются |
| WhiteSpaceNowrap | Объединяются в одну | Объединяются в один пробел | Не переносится | Удаляются |
| WhiteSpacePre | Сохраняются как в источнике | Сохраняются как в источнике | Не переносится | Сохраняются как в источнике |
| WhiteSpacePreWrap | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Висят |
| WhiteSpacePreLine | Сохраняются как в источнике | Объединяются в один пробел | Переносится | Удаляются |
| WhiteSpaceBreakSpaces | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Переносятся |
#### Свойство "tab-size"
Свойство "tab-size" (константа TabSize) типа int задает размер символа табуляции (U+0009) в пробелах.
Значение свойства "tab-size" должно быть больше 0.
#### Свойство "word-break"
Свойство "word-break" (константа WordBreak) типа int определяет, где будет установлен перевод
на новую строку в случае превышения текстом границ блока.
Свойство "white-space" может принимать следующие значения:
0 (константа WordBreak, имя "normal) - поведение по умолчанию для расстановки перевода строк.
1 (константа WordBreakAll, имя "break-all) - при превышении границ блока, перевод строки будет
вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).
2 (константа WordBreakKeepAll, имя "keep-all) - перевод строки не будет использован в тексте на
китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (normal).
3 (константа WordBreakWord, имя "break-word) - при превышении границ блока, остающиеся целыми слова
могут быть разбиты в произвольном месте, если не будет найдено более подходящее для переноса строки место.
#### Свойства "strikethrough", "overline" и "underline"
Данные свойства устанавливают декоративные линии на тексте:
| Свойство | Константа | Тип декоративной линии |
|-----------------|----------------|-----------------------------|
| "strikethrough" | Strikethrough | Линия перечеркивающая текст |
| "overline" | Overline | Линия над текстом |
| "underline" | Underline | Линия под текстом |
Получить значение данных свойств можно с помощью функций
func IsStrikethrough(view View, subviewID ...string) bool
func IsOverline(view View, subviewID ...string) bool
func IsUnderline(view View, subviewID ...string) bool
#### Свойство "text-line-thickness"
Свойство "text-line-thickness" (константа TextLineThickness) - свойство типа SizeUnit.
Свойство устанавливает толщину декоративных линий на тексте заданных с помощью свойств "strikethrough", "overline" и "underline".
Получить значение данного свойства можно с помощью функции
GetTextLineThickness(view View, subviewID ...string) SizeUnit
#### Свойство "text-line-style"
Свойство "text-line-style" (константа TextLineStyle) - свойство типа int.
Свойство устанавливает стиль декоративных линий на тексте заданных с помощью свойств "strikethrough", "overline" и "underline".
Возможны следующие значения:
| Значение | Константа | Имя | Описание |
|:--------:|------------|----------|--------------------------|
| 1 | SolidLine | "solid" | Сплошная линия |
| 2 | DashedLine | "dashed" | Пунктирная линия |
| 3 | DottedLine | "dotted" | Линия состоящая из точек |
| 4 | DoubleLine | "double" | Двойная сплошная линия |
| 5 | WavyLine | "wavy" | Волнистая линия |
Если свойство не определено то используется сплошная линия (SolidLine (1)).
Получить значение данного свойства можно с помощью функции
func GetTextLineStyle(view View, subviewID ...string) int
#### Свойство "text-line-color"
Свойство "text-line-color" (константа TextLineColor) - свойство типа Color.
Свойство устанавливает цвет декоративных линий на тексте заданных с помощью свойств "strikethrough", "overline" и "underline".
Если свойство не определено то для линий используется цвет текста заданный с помощью свойства "text-color".
Получить значение данного свойства можно с помощью функции
func GetTextLineColor(view View, subviewID ...string) Color
#### Свойство "text-weight"
Свойство "text-weight" (константа TextWeight) - свойство типа int устанавливает начертание шрифта. Допустимые значения:
| Значение | Константа | Общее название начертания |
|:--------:|----------------|------------------------------------------------------------------|
| 1 | ThinFont | Тонкий (Волосяной) Thin (Hairline) |
| 2 | ExtraLightFont | Дополнительный светлый (Сверх светлый) Extra Light (Ultra Light) |
| 3 | LightFont | Светлый Light |
| 4 | NormalFont | Нормальный Normal. Значение по умолчанию |
| 5 | MediumFont | Средний Medium |
| 6 | SemiBoldFont | Полужирный Semi Bold (Demi Bold) |
| 7 | BoldFont | Жирный Bold |
| 8 | ExtraBoldFont | Дополнительный жирный (Сверх жирный) Extra Bold (Ultra Bold) |
| 9 | BlackFont | Чёрный (Густой) Black (Heavy) |
Некоторые шрифты доступны только в нормальном или полужирном начертании. В этом случае значение данного свойства игнорируется
Получить значение данного свойства можно с помощью функции
func GetTextWeight(view View, subviewID ...string) int
#### Свойство "text-shadow"
Свойство "text-shadow" позволяет задать тени для текста. Теней может быть несколько. Тень описывается
с помощью интерфейса ViewShadow (см. выше, раздел "Свойство 'shadow'"). Для тени текста используются только
Свойства "color", "x-offset", "y-offset" и "blur". Свойства "inset" и "spread-radius" игнорируются (т.е. их
задание не является ошибкой, просто никакого влияния на тень текста они не имеют).
Для создания ViewShadow для тени текста используются функции:
func NewTextShadow(offsetX, offsetY, blurRadius SizeUnit, color Color) ViewShadow
func NewShadowWithParams(params Params) ViewShadow
Функция NewShadowWithParams используется когда в качестве параметров необходимо использовать
константы. Например:
shadow := NewShadowWithParams(rui.Params{
rui.ColorTag : "@shadowColor",
rui.BlurRadius : 8.0,
})
В качестве значения свойству "text-shadow" может быть присвоено ViewShadow, массив ViewShadow,
текстовое представление ViewShadow (см. выше, раздел "Свойство 'shadow'").
Получить значение данного свойства можно с помощью функции
func GetTextShadows(view View, subviewID ...string) []ViewShadow
Если тень не задана, то данная функция вернет пустой массив
#### Свойство "text-align"
Свойство "text-align" (константа TextAlign) - свойство типа int устанавливает выравнивание текста. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|------------------------------|
| 0 | LeftAlign | "left" | Выравнивание по левому краю |
| 1 | RightAlign | "right" | Выравнивание по правому краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | JustifyAlign | "justify" | Выравнивание по ширине |
Получить значение данного свойства можно с помощью функции
func GetTextAlign(view View, subviewID ...string) int
#### Свойство "text-indent"
Свойство "text-indent" (TextIndent) - свойство типа SizeUnit определяет размер отступа (пустого места) перед первой строкой текста.
Получить значение данного свойства можно с помощью функции
func GetTextIndent(view View, subviewID ...string) SizeUnit
#### Свойство "letter-spacing"
Свойство "letter-spacing" (LetterSpacing) - свойство типа SizeUnit определяет межбуквенное расстояние в тексте.
Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации.
Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.
Получить значение данного свойства можно с помощью функции
func GetLetterSpacing(view View, subviewID ...string) SizeUnit
#### Свойство "word-spacing"
Свойство "word-spacing" (константа WordSpacing) - свойство типа SizeUnit определяет длину пробела между словами.
Если величина задана в процентах, то она определяет дополнительный интервал как процент от предварительной ширины символа.
В остальных случаях она определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.
Получить значение данного свойства можно с помощью функции
func GetWordSpacing(view View, subviewID ...string) SizeUnit
#### Свойство "line-height"
Свойство "line-height" (константа LineHeight) - свойство типа SizeUnit устанавливает величину пространства между строками.
Получить значение данного свойства можно с помощью функции
func GetLineHeight(view View, subviewID ...string) SizeUnit
#### Свойство "text-transform"
Свойство "text-transform" (константа TextTransform) - свойство типа int определяет регистр символов. Допустимые значения:
| Значение | Константа | Преобразование регистра |
|:--------:|-------------------------|-----------------------------------------|
| 0 | NoneTextTransform | Оригинальный регистр символов |
| 1 | CapitalizeTextTransform | Каждое слово начинается с большой буквы |
| 2 | LowerCaseTextTransform | Все символы строчные |
| 3 | UpperCaseTextTransform | Все символы заглавные |
Получить значение данного свойства можно с помощью функции
func GetTextTransform(view View, subviewID ...string) int
#### Свойство "text-direction"
Свойство "text-direction" (константа TextDirection) - свойство типа int определяет направление вывода текста. Допустимые значения:
| Значение | Константа | Направление вывода текста |
|:--------:|-------------------------|--------------------------------------------------------------------------|
| 0 | SystemTextDirection | Системное направление. Определяется языком операционной системы. |
| 1 | LeftToRightDirection | Слева направо. Используется для английского и большинства других языков. |
| 2 | RightToLeftDirection | Справа налево. Используется для иврит, арабский и некоторых других. |
Получить значение данного свойства можно с помощью функции
func GetTextDirection(view View, subviewID ...string) int
#### Свойство "writing-mode"
Свойство "writing-mode" (константа WritingMode) - свойство типа int определяет как располагаются строки текста
вертикально или горизонтально, а также направление в котором выводятся строки.
Возможны следующие значения:
| Значение | Константа | Значение |
|:--------:|-----------------------|--------------------------------------------------------------------|
| 0 | HorizontalTopToBottom | Горизонтальные строки выводятся сверху вниз. Значение по умолчанию |
| 1 | HorizontalBottomToTop | Горизонтальные строки выводятся снизу вверх. |
| 2 | VerticalRightToLeft | Вертикальные строки выводятся справа налево. |
| 3 | VerticalLeftToRight | Вертикальные строки выводятся слева направо. |
Получить значение данного свойства можно с помощью функции
func GetWritingMode(view View, subviewID ...string) int
#### Свойство "vertical-text-orientation"
Свойство "vertical-text-orientation" (константа VerticalTextOrientation) типа int используется, только
если "writing-mode" установлено в VerticalRightToLeft (2) или VerticalLeftToRight (3) и определяет положение
символов вертикальной строки. Возможны следующие значения:
| Значение | Константа | Значение |
|:--------:|-------------------------|--------------------------------------------------------------------|
| 0 | MixedTextOrientation | Символы повернуты на 90 по часовой стрелке. Значение по умолчанию. |
| 1 | UprightTextOrientation | Символы расположены нормально (вертикально). |
Получить значение данного свойства можно с помощью функции
func GetVerticalTextOrientation(view View, subviewID ...string) int
#### Свойство "user-select"
Свойство "user-select" (константа UserSelect) типа bool определяет может ли пользователь выделять текст.
Соответственно если свойство установлено в true, то пользователь может выделять текст. Если в false, то не может.
Значение по умолчанию зависит, от значения свойства "semantics". Если "semantics" установлено в "p", "h1"..."h6",
"blockquote" или "code", то значение по умолчанию равно "true", в остальных случаях значение по умолчанию равно "false".
Исключением является TableView. Для него значение по умолчанию равно "true".
Как и все свойства текста свойство "user-select" наследуемое, т.е. если вы установите его для контейнера,
то оно также примениться ко всем дочерним элементам
Получить значение данного свойства можно с помощью функции
func IsUserSelect(view View, subviewID ...string) bool
### Свойства трансформации
Данные свойства используются для трансформации (наклон, масштабирование и т.п.) содержимого View.
#### Свойство "perspective"
Свойство "perspective" (константа Perspective) определяет расстояние между плоскостью z = 0 и пользователем
для того чтобы придать 3D-позиционируемому элементу эффект перспективы. Каждый трансформируемый элемент с z > 0
станет больше, с z < 0 соответственно меньше.
Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение свойства perspective, не отрисовываются.
Точка схождения по умолчанию расположена в центре элемента, но её можно переместить используя свойства
"perspective-origin-x" и "perspective-origin-y".
Получить значение данного свойства можно с помощью функции
func GetPerspective(view View, subviewID ...string) SizeUnit
#### Свойства "perspective-origin-x" и "perspective-origin-y"
Свойства "perspective-origin-x" и "perspective-origin-y" (константы PerspectiveOriginX и PerspectiveOriginY)
типа SizeUnit определяют позицию, с которой смотрит зритель. Она используется свойством "perspective" как точка схода.
По умолчанию свойства "perspective-origin-x" и "perspective-origin-y" имеют значение 50%, т.е. указывают на центр View.
Получить значение данных свойств можно с помощью функции
func GetPerspectiveOrigin(view View, subviewID ...string) (SizeUnit, SizeUnit)
#### Свойство "backface-visibility"
Свойство "backface-visibility" (константа BackfaceVisible) типа bool определяет, видно ли заднюю грань элемента,
когда он повёрнут к пользователю.
Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D,
задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве.
(Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)
Получить значение данного свойства можно с помощью функции
func GetBackfaceVisible(view View, subviewID ...string) bool
#### Свойства "origin-x", "origin-y" и "origin-z"
Свойства "origin-x", "origin-y" и "origin-z" (константа OriginX, OriginY и OriginZ) типа SizeUnit устанавливают
исходную точку для преобразований элемента.
Исходная точка преобразования - это точка, вокруг которой происходит преобразование. Например, вращение.
Свойство "origin-z" игнорируется если не установлено свойство "perspective".
Получить значение данных свойств можно с помощью функции
func GetOrigin(view View, subviewID ...string) (SizeUnit, SizeUnit, SizeUnit)
#### Свойства "translate-x", "translate-y" и "translate-z"
Свойства "translate-x", "translate-y" и "translate-z" (константа TranslateX, TranslateY и TranslateZ) типа SizeUnit
позволяют задать смещение содержимого View.
Свойство "translate-z" игнорируется если не установлено свойство "perspective".
Получить значение данных свойств можно с помощью функции
func GetTranslate(view View, subviewID ...string) (SizeUnit, SizeUnit, SizeUnit)
#### Свойства "scale-x", "scale-y" и "scale-z"
Свойства "scale-x", "scale-y" и "scale-z" (константа ScaleX, ScaleY и ScaleZ) типа float64 устанавливает
коэффициент масштабирования соответственно по осям x, y и z.
Исходный масштаб равен 1. Значение от 0 до 1 используется для уменьшения. Больше 1 - для увеличения.
Значения меньше или равное 0 являются недопустимыми (функция Set будет возвращать значение false)
Свойство "scale-z" игнорируется если не установлено свойство "perspective".
Получить значение данных свойств можно с помощью функции
func GetScale(view View, subviewID ...string) (float64, float64, float64)
#### Свойства "rotate"
Свойство "rotate" (константа Rotate) типа AngleUnit задает угол поворота содержимого вокруг
вектора задаваемого свойствами "rotate-x", "rotate-y" и "rotate-z".
#### Свойства "rotate-x", "rotate-y" и "rotate-z"
Свойства "rotate-x", "rotate-y" и "rotate-z" (константа RotateX, RotateY и RotateZ) типа float64
задают вектор вокруг которого осуществляется вращение на угол заданный свойством "rotate".
Данный вектор проходит через точку заданную свойствами "origin-x", "origin-y" и "origin-z"
Свойство "rotate-z" игнорируется если не установлено свойство "perspective".
Получить значение данных свойств, а также свойства "rotate" можно с помощью функции
func GetRotate(view View, subviewID ...string) (float64, float64, float64, AngleUnit)
#### Свойства "skew-x" и "skew-y"
Свойства "skew-x" и "skew-y" (константа SkewX и SkewY) типа AngleUnit задают скос (наклон) содержимого,
превращая тем самым его из прямоугольника в параллелограмм. Скос осуществляется вокруг точки,
задаваемой свойствами transform-origin-x и transform-origin-y.
Получить значение данных свойств можно с помощью функции
func GetSkew(view View, subviewID ...string) (AngleUnit, AngleUnit)
### Пользовательские данные
Вы можете сохранить любые ваши данные в виде свойства "user-data" (константа UserData)
### События клавиатуры
Для View получившего фокус ввода могут генерироваться два вида событий клавиатуры
| Событие | Константа | Описание |
|------------------|--------------|------------------------|
| "key-down-event" | KeyDownEvent | Клавиша была нажата. |
| "key-up-event" | KeyUpEvent | Клавиша была отпущена. |
Основной слушатель данных событий имеет следующий формат:
func(View, KeyEvent)
где второй аргумент описывает параметры нажатых клавиш. Структура KeyEvent имеет следующие поля:
| Поле | Тип | Описание |
|-----------|--------|----------------------------------------------------------------------------------------------------------------------|
| TimeStamp | uint64 | Время, когда событие было создано (в миллисекундах). Точка отсчета зависит от реализации браузера (ЭПОХА, запуск браузера и т.п.). |
| Key | string | Значение клавиши, на которой возникло событие. Значение выдается с учетом текущего языка и регистра. |
| Code | string | Код клавиши, представленного события. Значение не зависит от текущего языка и регистра. |
| Repeat | bool | Повторное нажатие: клавиша была нажата до тех пор, пока её ввод не начал автоматически повторяться. |
| CtrlKey | bool | Клавиша Ctrl была активна, когда возникло событие. |
| ShiftKey | bool | Клавиша Shift была активна, когда возникло событие. |
| AltKey | bool | Клавиша Alt ( Option или ⌥ в OS X) была активна, когда возникло событие. |
| MetaKey | bool | Клавиша Meta (для Mac это клавиша ⌘ Command; для Windows - клавиша "Windows" ⊞) была активна, когда возникло событие.|
Можно также использовать слушателей следующих форматов:
* func(KeyEvent)
* func(View)
* func()
Получить списки слушателей событий клавиатуры можно с помощью функций:
func GetKeyDownListeners(view View, subviewID ...string) []func(View, KeyEvent)
func GetKeyUpListeners(view View, subviewID ...string) []func(View, KeyEvent)
### События фокуса
События фокуса возникают когда View получает или теряет фокус ввода. Соответственно возможны два событий:
| Событие | Константа | Описание |
|--------------------|----------------|-------------------------------------------------|
| "focus-event" | FocusEvent | View получает фокус ввода (становится активным) |
| "lost-focus-event" | LostFocusEvent | View теряет фокус ввода (становится неактивным) |
Основной слушатель данных событий имеет следующий формат:
func(View).
Можно также использовать слушателя следующего формата:
func()
Получить списки слушателей событий фокуса можно с помощью функций:
func GetFocusListeners(view View, subviewID ...string) []func(View)
func GetLostFocusListeners(view View, subviewID ...string) []func(View)
### События мыши
Для View могут генерироваться несколько вида событий мыши
| Событие | Константа | Описание |
|----------------------|------------------|------------------------|
| "mouse-down" | MouseDown | Клавиша мыши была нажата. |
| "mouse-up" | MouseUp | Клавиша мыши была отпущена. |
| "mouse-move" | MouseMove | Переместился курсор мыши |
| "mouse-out" | MouseOut | Курсор мыши вышел за пределы View, или зашел в дочерней View |
| "mouse-over" | MouseOver | Курсор мыши зашел в пределы View |
| "click-event" | ClickEvent | Произошел клик мышкой |
| "double-click-event" | DoubleClickEvent | Произошел двойной клик мышкой |
| "context-menu-event" | ContextMenuEvent | Нажата клавиша вызова контекстного меню (правая кнопка мыши) |
Основной слушатель данных событий имеет следующий формат:
func(View, MouseEvent)
где второй аргумент описывает параметры нажатых клавиш. Структура MouseEvent имеет следующие поля:
| Поле | Тип | Описание |
|-----------|---------|----------------------------------------------------------------------------------------------------------------------|
| TimeStamp | uint64 | Время, когда событие было создано (в миллисекундах). Точка отсчета зависит от реализации браузера (ЭПОХА, запуск браузера и т.п.). |
| Button | int | Номер кнопки мыши, нажатие на которую инициировало событие |
| Buttons | int | Битовая маска, показывающая какие кнопки мыши были нажаты в момент возникновения события |
| X | float64 | Горизонтальная позиция мыши относительно начала координат View |
| Y | float64 | Вертикальная позиция мыши относительно начала координат View |
| ClientX | float64 | Горизонтальная позиция мыши относительно левого верхнего угла приложения |
| ClientY | float64 | Вертикальная позиция мыши относительно левого верхнего угла приложения |
| ScreenX | float64 | Горизонтальная позиция мыши относительно левого верхнего угла экрана |
| ScreenY | float64 | Вертикальная позиция мыши относительно левого верхнего угла экрана |
| CtrlKey | bool | Клавиша Ctrl была активна, когда возникло событие. |
| ShiftKey | bool | Клавиша Shift была активна, когда возникло событие. |
| AltKey | bool | Клавиша Alt ( Option или ⌥ в OS X) была активна, когда возникло событие. |
| MetaKey | bool | Клавиша Meta (для Mac это клавиша ⌘ Command; для Windows - клавиша "Windows" ⊞) была активна, когда возникло событие.|
Поле Button может принимать следующие значения
| Значение | Константа | Описание |
|:--------:|----------------------|----------------------------------------------------------------------------------|
| <0 | | Не нажата ни одна кнопка |
| 0 | PrimaryMouseButton | Основная кнопка. Обычно левая кнопка мыши (может быть изменена в настройках ОС) |
| 1 | AuxiliaryMouseButton | Вспомогательная кнопка. Колёсико или средняя кнопка мыши, если она есть |
| 2 | SecondaryMouseButton | Вторичная кнопка. Обычно правая кнопка мыши (может быть изменена в настройках ОС)|
| 3 | MouseButton4 | Четвёртая кнопка мыши. Обычно кнопка браузера Назад |
| 4 | MouseButton5 | Пятая кнопка мыши. Обычно кнопка браузера Вперёд |
Поле Button представляет собой битовую маску объединяющую (с помощью ИЛИ) следующие значения
| Значение | Константа | Описание |
|:--------:|--------------------|------------------------|
| 1 | PrimaryMouseMask | Основная кнопка |
| 2 | SecondaryMouseMask | Вторичная кнопка |
| 4 | AuxiliaryMouseMask | Вспомогательная кнопка |
| 8 | MouseMask4 | Четвёртая кнопка |
| 16 | MouseMask5 | Пятая кнопка |
Можно также использовать слушателей следующих форматов:
* func(MouseEvent)
* func(View)
* func()
Получить списки слушателей событий мыши можно с помощью функций:
func GetMouseDownListeners(view View, subviewID ...string) []func(View, MouseEvent)
func GetMouseUpListeners(view View, subviewID ...string) []func(View, MouseEvent)
func GetMouseMoveListeners(view View, subviewID ...string) []func(View, MouseEvent)
func GetMouseOverListeners(view View, subviewID ...string) []func(View, MouseEvent)
func GetMouseOutListeners(view View, subviewID ...string) []func(View, MouseEvent)
func GetClickListeners(view View, subviewID ...string) []func(View, MouseEvent)
func GetDoubleClickListeners(view View, subviewID ...string) []func(View, MouseEvent)
func GetContextMenuListeners(view View, subviewID ...string) []func(View, MouseEvent)
### События указателя
Указатель - это аппаратно-независимое представление устройств ввода (таких как мышь, перо
или точка контакта на сенсорной поверхности). Указатель может указывать на конкретную координату
(или набор координат) на контактной поверхности, например на экране.
Все указатели могут генерироваться несколько вида событий
| Событие | Константа | Описание |
|------------------|---------------|------------------------------------------------------------|
| "pointer-down" | PointerDown | Указатель был нажат. |
| "pointer-up" | PointerUp | Указатель был отпущен. |
| "pointer-move" | PointerMove | Указатель перемещен |
| "pointer-cancel" | PointerCancel | События указателя прерваны. |
| "pointer-out" | PointerOut | Указатель вышел за пределы View, или зашел в дочерней View |
| "pointer-over" | PointerOver | Указатель зашел в пределы View |
Основной слушатель данных событий имеет следующий формат:
func(View, PointerEvent)
где второй аргумент описывает параметры указателя. Структура PointerEvent расширяет структуру MouseEvent
и имеет следующие дополнительные поля:
| Поле | Тип | Описание |
|--------------------|---------|-----------------------------------------------------------------------|
| PointerID | int | Уникальный идентификатор указателя, вызвавшего событие. |
| Width | float64 | Ширина (величина по оси X) в пикселях контактной геометрии указателя. |
| Height | float64 | Высота (величина по оси Y) в пикселях контактной геометрии указателя. |
| Pressure | float64 | Нормализованное давление на входе указателя в диапазоне от 0 до 1, где 0 и 1 представляют минимальное и максимальное давление, которое аппаратное обеспечение способно обнаруживать, соответственно.|
| TangentialPressure | float64 | Нормализованное тангенциальное давление на входе указателя (также известное как давление в цилиндре или напряжение цилиндра) в диапазоне от -1 до 1, где 0 - нейтральное положение элемента управления.|
| TiltX | float64 | Плоский угол (в градусах в диапазоне от -90 до 90) между плоскостью Y–Z и плоскостью, содержащей как ось указателя (например, стилуса), так и ось Y.|
| TiltY | float64 | Плоский угол (в градусах в диапазоне от -90 до 90) между плоскостью X–Z и плоскостью, содержащей как ось указателя (например, стилуса), так и ось X.|
| Twist | float64 | Вращение указателя (например, стилуса) по часовой стрелке вокруг своей главной оси в градусах со значением в диапазоне от 0 до 359.|
| PointerType | string | тип устройства, вызвавшего событие: "mouse", "pen", "touch" и т.п. |
| IsPrimary | bool | указатель является первичным указателем этого типа. |
Можно также использовать слушателей следующих форматов:
* func(PointerEvent)
* func(View)
* func()
Получить списки слушателей событий указателя можно с помощью функций:
func GetPointerDownListeners(view View, subviewID ...string) []func(View, PointerEvent)
func GetPointerUpListeners(view View, subviewID ...string) []func(View, PointerEvent)
func GetPointerMoveListeners(view View, subviewID ...string) []func(View, PointerEvent)
func GetPointerCancelListeners(view View, subviewID ...string) []func(View, PointerEvent)
func GetPointerOverListeners(view View, subviewID ...string) []func(View, PointerEvent)
func GetPointerOutListeners(view View, subviewID ...string) []func(View, PointerEvent)
### Touch события
Данные события используются для отслеживания многоточечных касаний. Одиночные касания эмулируют события мыши.
Если у вас нет необходимости отслеживания многоточечных касаний, то проще использовать события мыши
| Событие | Константа | Описание |
|----------------|-------------|-----------------------------------------------|
| "touch-start" | TouchStart | Произошло касание поверхности. |
| "touch-end" | TouchEnd | Завершено касание поверхности. |
| "touch-move" | TouchMove | Одно или несколько касаний изменили положение |
| "touch-cancel" | TouchCancel | Касание прервано. |
Основной слушатель данных событий имеет следующий формат:
func(View, TouchEvent)
где второй аргумент описывает параметры касаний. Структура TouchEvent имеет следующие поля:
| Поле | Тип | Описание |
|-----------|---------|----------------------------------------------------------------------------------------------------------------------|
| TimeStamp | uint64 | Время, когда событие было создано (в миллисекундах). Точка отсчета зависит от реализации браузера (ЭПОХА, запуск браузера и т.п.). |
| Touches | []Touch | Массив структур Touch, каждая из которых описывает одно касание |
| CtrlKey | bool | Клавиша Ctrl была активна, когда возникло событие. |
| ShiftKey | bool | Клавиша Shift была активна, когда возникло событие. |
| AltKey | bool | Клавиша Alt ( Option или ⌥ в OS X) была активна, когда возникло событие. |
| MetaKey | bool | Клавиша Meta (для Mac это клавиша ⌘ Command; для Windows - клавиша "Windows" ⊞) была активна, когда возникло событие.|
Структура Touch описывает одиночное касание и имеет следующие поля
| Поле | Тип | Описание |
|---------------|---------|--------------------------------------------------------------------------------------------------------------------------|
| Identifier | int | Уникальный идентификатор присваиваемый каждому касанию и не меняющийся до его завершения. |
| X | float64 | Горизонтальная позиция мыши относительно начала координат View |
| Y | float64 | Вертикальная позиция мыши относительно начала координат View |
| ClientX | float64 | Горизонтальная позиция мыши относительно левого верхнего угла приложения |
| ClientY | float64 | Вертикальная позиция мыши относительно левого верхнего угла приложения |
| ScreenX | float64 | Горизонтальная позиция мыши относительно левого верхнего угла экрана |
| ScreenY | float64 | Вертикальная позиция мыши относительно левого верхнего угла экрана |
| RadiusX | float64 | x-радиус эллипса в пикселях, который наиболее точно ограничивает область контакта с экраном. |
| RadiusY | float64 | y-радиус эллипса в пикселях, который наиболее точно ограничивает область контакта с экраном. |
| RotationAngle | float64 | Угол (в градусах), на который нужно повернуть по часовой стрелке эллипс, описываемый параметрами radiusX и radiusY, чтобы наиболее точно покрыть область контакта между пользователем и поверхностью. |
| Force | float64 | Величина давления от 0,0 (без давления) до 1,0 (максимальное давление), которое пользователь прикладывает к поверхности. |
Можно также использовать слушателей следующих форматов:
* func(TouchEvent)
* func(View)
* func()
Получить списки слушателей событий касания можно с помощью функций:
func GetTouchStartListeners(view View, subviewID ...string) []func(View, TouchEvent)
func GetTouchEndListeners(view View, subviewID ...string) []func(View, TouchEvent)
func GetTouchMoveListeners(view View, subviewID ...string) []func(View, TouchEvent)
func GetTouchCancelListeners(view View, subviewID ...string) []func(View, TouchEvent)
### Событие "resize-event"
Событие "resize-event" (константа ResizeEvent) вызывается когда View меняет свои положение и/или размеры.
Основной слушатель данных событий имеет следующий формат:
func(View, Frame)
где структура объявлена как
type Frame struct {
Left, Top, Width, Height float64
}
Соответственно элементы Frame содержат следующие данные
* Left - новое смещение в пикселях по горизонтали относительно родительского View (левая позиция);
* Top - новое смещение в пикселях по вертикали относительно родительского View (верхняя позиция)
* Width - новая ширина видимой части View в пикселях;
* Height - новая высота видимой части View в пикселях.
Можно также использовать слушателей следующих форматов:
* func(Frame)
* func(View)
* func()
Получить список слушателей данного события можно с помощью функции:
func GetResizeListeners(view View, subviewID ...string) []func(View, Frame)
Текущие положение и размеры видимой части View можно получить с помощью функции интерфейса View:
Frame() Frame
или глобальной функции
func GetViewFrame(view View, subviewID ...string) Frame
### Событие прокрутки
Событие "scroll-event" (константа ScrollEvent) возникает при прокрутке содержимого View.
Основной слушатель данных событий имеет следующий формат:
func(View, Frame)
где элементы Frame содержат следующие данные
* Left - новое смещение видимой области по горизонтали (в пикселях);
* Top - новое смещение видимой области по вертикали (в пикселях);
* Width - общая ширина View в пикселях;
* Height - общая высота View в пикселях.
Можно также использовать слушателей следующих форматов:
* func(Frame)
* func(View)
* func()
Получить список слушателей данного события можно с помощью функции:
func GetScrollListeners(view View) []func(View, Frame)
Текущие положение видимой области и общие размеры View можно получить с помощью функции интерфейса View:
Scroll() Frame
или глобальной функции
func GetViewScroll(view View, subviewID ...string) Frame
Для программной прокрутки могут использоваться следующие глобальные функции
func ScrollViewTo(view View, subviewID string, x, y float64)
func ScrollViewToStart(view View, subviewID ...string)
func ScrollViewToEnd(view View, subviewID ...string)
которые прокручивают view, соответственно, в заданную позицию, начало и конец
## ViewsContainer
Интерфейс ViewsContainer, реализующий View, описывает контейнер содержащий несколько
дочерних элементов интерфейса (View). ViewsContainer является базовым для других контейнеров
(ListLayout, GridLayout, StackLayout и т.д.) и самостоятельно не используется.
Помимо всех свойств View данный элемент имеет всего одно дополнительное свойство "content"
### "content"
Свойство "content" (константа Content) определяет массив дочерних View. Функция Get интерфейса
для данного свойства всегда возвращает []View.
В качестве значения свойства "content" могут быть переданы следующие 5 типов данных:
* View - преобразуется во []View, содержащий один элемент;
* []View - nil-элементы запрещены, если массив будет содержать nil, то свойство не будет
установлено, а функция Set вернет false и в лог запишется сообщение об ошибке;
* string - если строка является текстовым представление View, то создается соответствующий View,
иначе создается TextView, которому в качестве текста передается данная строка.
Далее создается []View, содержащий полученный View;
* []string - каждый элемент массива преобразуется во View как описано в предыдущем пункте;
* []any - данный массив должен содержать только View и string. Каждый string-элемент
преобразуется во View, как описано выше. Если массив будет содержать недопустимое значения,
то свойство "content" не будет установлено, а функция Set вернет false и в лог запишется сообщение об ошибке.
Поучить значение свойства "content" можно с помощи функции интерфейса ViewsContainer
Views() []View
Для редактирования свойства "content" можно использовать следующие функции интерфейса ViewsContainer:
Append(view View)
Данная функция добавляет аргумент в конец списка View
Insert(view View, index uint)
Данная функция вставляет аргумент в заданную позицию списка View. Если index больше длины
списка, то View добавляется в конец списка. Если index меньше 0, то в начало списка.
RemoveView(index uint) View
Данная функция удаляет View из заданной позиции и возвращает его. Если index указывает за
границы списка, то ничего не удаляется, а функция возвращает nil.
ViewIndex(view View) int
Данная функция возвращает индекс дочернего View или -1 если такого View нет в контейнере.
Она часто используется в паре с RemoveView если индекс дочернего View неизвестен:
if index := container.ViewIndex(view); index >= 0 {
container.RemoveView(index)
}
## ListLayout
ListLayout является контейнером, реализующим интерфейс ViewsContainer. Для его создания используется функция
func NewListLayout(session Session, params Params) ListLayout
Элементы в данном контейнере располагаются в виде списка. Расположением дочерних элементов можно управлять.
Для этого ListLayout имеет ряд свойств
### "orientation"
Свойство "orientation" (константа Orientation) типа int задает то как дочерние элементы будут
располагаться друг относительно друга. Свойство может принимать следующие значения:
| Значение | Константа | Расположение |
|:--------:|-----------------------|------------------------------------------------------------|
| 0 | TopDownOrientation | Дочерние элементы располагаются в столбец сверху вниз. |
| 1 | StartToEndOrientation | Дочерние элементы располагаются в строку с начала в конец. |
| 2 | BottomUpOrientation | Дочерние элементы располагаются в столбец снизу вверх. |
| 3 | EndToStartOrientation | Дочерние элементы располагаются в строку с конца в начала. |
Положение начала и конца для StartToEndOrientation и EndToStartOrientation зависит от значения
Свойства "text-direction". Для языков с письмом справа налево (арабский, иврит) начало находится
справа, для остальных языков - слева.
### "list-wrap"
Свойство "list-wrap" (константа ListWrap) типа int определяет расположения элементов в случае достижения
границы контейнера. Возможны три варианта:
* ListWrapOff (0) - колонка/строка элементов продолжается и выходит за границы видимой области.
* ListWrapOn (1) - начинается новая колонка/строка элементов. Новая колонка располагается по направлению
к концу (о положении начала и конца см. выше), новая строка - снизу.
* ListWrapReverse (2) - начинается новая колонка/строка элементов. Новая колонка располагается по направлению
к началу (о положении начала и конца см. выше), новая строка - сверху.
### "vertical-align"
Свойство "vertical-align" (константа VerticalAlign) типа int устанавливает вертикальное
выравнивание элементов в контейнере. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|-------------------------------|
| 0 | TopAlign | "top" | Выравнивание по верхнему краю |
| 1 | BottomAlign | "bottom" | Выравнивание по нижнему краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по высоте |
### "horizontal-align"
Свойство "horizontal-align" (константа HorizontalAlign) типа int устанавливает
горизонтальное выравнивание элементов в списке. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|------------------------------|
| 0 | LeftAlign | "left" | Выравнивание по левому краю |
| 1 | RightAlign | "right" | Выравнивание по правому краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по ширине |
### "list-row-gap" и "list-column-gap"
Свойства "list-row-gap" и "list-column-gap" (константы ListRowGap и ListColumnGap) типа SizeUnit позволяют
установить соответственно расстояния между строками и столбцами контейнера. Значение по умолчанию 0.
### "order"
Свойство "order" (константа Order) типа int используется View, помещенными в контейнер ListLayout или GridLayout (см. ниже),
для изменения своего положения в контейнере.
Свойство "order" определяет порядок, используемый для размещения View в контейнере. Элементы располагаются в восходящем порядке по значению order.
Элементы с одинаковым значением order располагаются в том порядке, в каком они добавлялись в контейнер.
Значение по умолчанию равно 0. Поэтому для помещения View в начало надо использовать отрицательные значения свойства "order".
Внимание: свойство "order" воздействует только на визуальный порядок элементов, но не логический порядок или табуляцию.
## GridLayout
GridLayout является контейнером, реализующим интерфейс ViewsContainer. Для его создания используется функция
func NewGridLayout(session Session, params Params) GridLayout
Пространство контейнера данного контейнера разбито на ячейки в виде таблицы.
Все дочерние элементы располагаются в ячейках таблицы. Ячейка адресуется по номеру строки и
столбца. Номера строк и столбцов начинаются с 0.
### "column" и "row"
Расположение View внутри GridLayout определяется с помощью свойств "column" и "row".
Данные свойства устанавливаться для каждого из дочерних View.
Дочерний View может занимать несколько ячеек внутри GridLayout. При этом они могут
перекрываться.
В качестве значения "column" и "row" можно установить:
* целое число большее или равное 0;
* текстовое представление целого числа большего или равного 0 или константу;
* структуру Range, задающую диапазон строк/столбцов:
type Range struct {
First, Last int
}
где First - номер первого столбца/строки, Last - номер последнего столбца/строки;
* строка вида "<номер первого столбца/строки>:<номер последнего столбца/строки>", являющуюся
текстовым представление структуры Range
Пример
grid := rui.NewGridLayout(session, rui.Params {
rui.Content : []View{
NewView(session, rui.Params {
rui.ID : "view1",
rui.Row : 0,
rui.Column : rui.Range{ First: 1, Last: 2 },
}),
NewView(session, rui.Params {
rui.ID : "view2",
rui.Row : "0:2",
rui.Column : "0",
}),
},
})
В данном примере view1 занимает в нулевой строке столбцы 1 и 2, а view1 занимает
в нулевом столбце строки 0, 1 и 2.
### "grid-auto-flow"
Если для дочерних View не задаются свойства "row" и "column", то используется автоматический алгоритм размещения элементов.
Возможны четыре варианта данного алгоритма. Используемый вариант задается с помощью свойства "grid-auto-flow" типа int.
Свойство "grid-auto-flow" может принимать следующие значения:
* RowAutoFlow (0) (text name "row") - Views размещаются путем заполнения каждой строки по очереди, добавляя новые столбцы по мере необходимости;
* ColumnAutoFlow (1) (text name "column") - Views размещаются путем заполнения каждого столбца по очереди, добавляя новые столбцы по мере необходимости;
* RowDenseAutoFlow (2) (text name "row-dense") - Views размещаются путем заполнения каждой строки и добавления новых строк по мере необходимости.
Алгоритм «плотной» упаковки пытается заполнить дыры в сетке передвигая более мелкие View вперед очереди.
* ColumnDenseAutoFlow (3) (text name "column-dense") - Views размещаются путем заполнения каждого столбца, добавляя новые столбцы по мере необходимости.
Алгоритм «плотной» упаковки пытается заполнить дыры в сетке передвигая более мелкие View вперед очереди.
### "cell-width" и "cell-height"
По умолчанию размеры ячеек вычисляются на основе размеров помещенных в них дочерних View.
Свойства "cell-width" и "cell-height" (константы CellWidth и CellHeight) позволяют установить
фиксированную ширину и высоту ячеек независимо от размеров дочерних элементов.
Данные свойства имеют тип []SizeUnit. Каждый элемент массива определяет размер соответствующего
столбца или строки.
Данным свойствам могут быть присвоены следующие типы данных:
* SizeUnit или текстовое представление SizeUnit (или SizeUnit константа). В этом случае
соответствующие размеры всех ячеек устанавливаются одинаковыми;
* []SizeUnit;
* string содержащая текстовые представления SizeUnit (или SizeUnit константы) разделенные запятой;
* []string. Каждый элемент должен быть текстовым представлением SizeUnit (или SizeUnit константой)
* []any. Каждый элемент должен или иметь тип SizeUnit или быть текстовым
представлением SizeUnit (или SizeUnit константой)
Если количество элементов в свойствах "cell-width" и "cell-height" меньше, чем используемое число
столбцов и строк, то недостающие элементы устанавливаются в Auto.
В значениях свойств "cell-width" и "cell-height" может использоваться SizeUnit тип SizeInFraction.
Этот тип означает 1 часть. Часть вычисляется так: из размера контейнера вычитается размер всех
ячеек имеющих тип не SizeInFraction, а затем оставшийся размер делится на количество частей.
Значение SizeUnit типа SizeInFraction может быть как целым, так и дробным.
### "grid-row-gap" и "grid-column-gap"
Свойства "grid-row-gap" и "grid-column-gap" (константы GridRowGap и GridColumnGap) типа SizeUnit позволяют
установить соответственно расстояния между строками и столбцами контейнера. Значение по умолчанию 0.
### "cell-vertical-align"
Свойство "cell-vertical-align" (константа CellVerticalAlign) типа int устанавливает вертикальное
выравнивание дочерних элементов внутри занимаемой ячейки. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|-------------------------------|
| 0 | TopAlign | "top" | Выравнивание по верхнему краю |
| 1 | BottomAlign | "bottom" | Выравнивание по нижнему краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Растягивание на всю высоту |
Значение по умолчанию StretchAlign (3)
### "cell-horizontal-align"
Свойство "cell-horizontal-align" (константа CellHorizontalAlign) типа int устанавливает
горизонтальное выравнивание дочерних элементов внутри занимаемой ячейки. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|------------------------------|
| 0 | LeftAlign | "left" | Выравнивание по левому краю |
| 1 | RightAlign | "right" | Выравнивание по правому краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Растягивание на всю ширину |
Значение по умолчанию StretchAlign (3)
## ColumnLayout
ColumnLayout является контейнером, реализующим интерфейс ViewsContainer. Все дочерние View
располагаются в виде вертикального списка выровненные по левому или правому краю и разбитого
на несколько колонок. Выравнивание зависит от свойства "text-direction".
Для создания ColumnLayout используется функция
func NewColumnLayout(session Session, params Params) ColumnLayout
### Свойство "column-count"
Свойство "column-count" (константа ColumnCount) типа int устанавливает количество колонок.
Если данное свойство равно 0 и не задано свойство "column-width", то разбитие на колонки
не выполняется, а контейнер прокручивается вниз.
Если значение данного свойства больше 0, то список разбивается на колонки. Высота колонки
равна высоте ColumnLayout, а ширина вычисляется как ширина ColumnLayout делённая на
"column-count". Каждая следующая колонка располагается в зависимости от свойства
"text-direction" справа или слева от предыдущей, а контейнер прокручивается по горизонтали.
Получить значение данного свойства можно с помощью функции
func GetColumnCount(view View, subviewID ...string) int
### Свойство "column-width"
Свойство "column-width" (константа ColumnWidth) типа SizeUnit используется только если
"column-count" равно 0 и устанавливает ширину колонки.
ВАЖНО! В качестве значения "column-width" нельзя использовать проценты (т.е. если вы зададите
значение в процентах, то это будет проигнорировано системой)
Получить значение данного свойства можно с помощью функции
func GetColumnWidth(view View, subviewID ...string) SizeUnit
### Свойство "column-gap"
Свойство "column-gap" (константа ColumnGap) типа SizeUnit устанавливает ширину разрыва между колонками.
Получить значение данного свойства можно с помощью функции
func GetColumnGap(view View, subviewID ...string) SizeUnit
### Свойство "column-separator"
Свойство "column-separator" (константа ColumnSeparator) позволяет задать линию которая будет
рисоваться в разрывах колонок. Линия рамки описывается тремя атрибутами: стиль линии, толщина и цвет.
Значение свойства "column-separator" хранится в виде интерфейса ColumnSeparatorProperty,
реализующего интерфейс Properties (см. выше). ColumnSeparatorProperty может содержать следующие свойства:
| Свойство | Константа | Тип | Описание |
|----------|---------------|----------|------------------|
| "style" | Style | int | Стиль линии |
| "width" | Width | SizeUnit | Толщина линии |
| "color" | ColorTag | Color | Цвет линии |
Стиль линии может принимать следующие значения:
| Значение | Константа | Имя | Описание |
|:--------:|------------|----------|--------------------------|
| 0 | NoneLine | "none" | Нет рамки |
| 1 | SolidLine | "solid" | Сплошная линия |
| 2 | DashedLine | "dashed" | Пунктирная линия |
| 3 | DottedLine | "dotted" | Линия состоящая из точек |
| 4 | DoubleLine | "double" | Двойная сплошная линия |
Все другие значения стиля игнорируются.
Для создания интерфейса ColumnSeparatorProperty используется функция
func NewColumnSeparator(params Params) ColumnSeparatorProperty
Интерфейс ColumnSeparatorProperty может быть преобразован в структуру ViewBorder с помощью
функции ViewBorder. При преобразовании все текстовые константы заменяются реальными значениями.
ViewBorder описана как
type ViewBorder struct {
Style int
Color Color
Width SizeUnit
}
Структура ViewBorder может быть передана в качестве параметра функции Set при установке значения
Свойства "column-separator". При этом ViewBorder преобразуется в ColumnSeparatorProperty.
Поэтому при чтении свойства функцией Get будет возвращен интерфейс ColumnSeparatorProperty,
а не структура ViewBorder. Получить структуру ViewBorders без дополнительных преобразований можно
с помощью глобальной функции
func GetColumnSeparator(view View, subviewID ...string) ViewBorder
Вы также можете устанавливать отдельные атрибуты линии использую функцию Set интерфейса View.
Для этого используются следующие свойства
| Свойство | Константа | Тип | Описание |
|--------------------------|----------------------|----------|---------------|
| "column-separator-style" | ColumnSeparatorStyle | int | Стиль линии |
| "column-separator-width" | ColumnSeparatorWidth | SizeUnit | Толщина линии |
| "column-separator-color" | ColumnSeparatorColor | Color | Цвет линии |
Например
view.Set(rui.ColumnSeparatorStyle, rui.SolidBorder)
view.Set(rui.ColumnSeparatorWidth, rui.Px(1))
view.Set(rui.ColumnSeparatorColor, rui.Black)
эквивалентно
view.Set(rui.ColumnSeparator, ColumnSeparatorProperty(rui.Params{
rui.Style: rui.SolidBorder,
rui.Width: rui.Px(1),
rui.ColorTag: rui.Black,
}))
### Свойство "column-fill"
Свойство "column-fill" (константа ColumnFill) типа int управляет тем, как содержимое элемента сбалансировано при разбиении на столбцы.
Может принимать одно из двух значений
| Значение | Константа | Имя | Описание |
|:--------:|-------------------|-----------|------------------------------------------------------------------|
| 0 | ColumnFillBalance | "balance" | Контент поровну разделен между столбцами (значение по умолчанию) |
| 1 | ColumnFillAuto | "auto" | Столбцы заполняются последовательно. Контент занимает ровно столько места, сколько ему нужно, что может привести к тому, что некоторые столбцы останутся пустыми. |
Получить значение данного свойства можно с помощью функции
func GetColumnFill(view View, subviewID ...string) int
### Свойство "avoid-break"
При формировании колонок ColumnLayout может разрывать некоторые типы View, так что начало
будет в конце одной колонки, а окончание в следующей. Например, разрывается TextView,
заголовок картинки и сама картинки и т.д.
Свойство "avoid-break" (константа AvoidBreak) типа bool позволяет избежать этого эффекта.
Необходимо установить для View, который нельзя разрывать, данное свойство со значением "true".
Соответственно значение "false" данного свойства позволяет разрывать View.
Значение по умолчанию "false".
Получить значение данного свойства можно с помощью функции
func GetAvoidBreak(view View, subviewID ...string) bool
### Свойство "column-span-all"
Свойство "column-span-all" (константа ColumnSpanAll) типа bool устанавливается для View помещенных в ColumnLayout.
Если данное свойство установлено в true, то View расширяется на всю ширину ColumnLayout, занимая все колонки.
Такое View будет как бы разрывать контейнер.
Обычно данное свойство используется для заголовков.
Значение по умолчанию "false".
Получить значение данного свойства можно с помощью функции
func IsColumnSpanAll(view View, subviewID ...string) bool
## StackLayout
StackLayout является контейнером, реализующим интерфейс ViewsContainer. Все дочерние View
располагаются друг над другом и каждый занимает все пространство контейнера. В каждый момент времени
доступен только один дочерний View (текущий).
Для создания StackLayout используется функция
func NewStackLayout(session Session, params Params) StackLayout
Помимо свойств Append, Insert, RemoveView и свойства "content" интерфейса ViewsContainer
контейнер StackLayout имеет еще две функции интерфейса для управления дочерними View: Push и Pop
Push(view View, animation int, onPushFinished func())
Данная функция добавляет новый View в контейнер и делает его текущим. Она похожа на Append,
но в отличие от нее добавление выполняется с использованием эффекта анимации. Вид анимации
задается вторым аргументом и может принимать следующие значения:
| Значение | Константа | Анимация |
|:--------:|---------------------|-----------------------------|
| 0 | DefaultAnimation | Анимация по умолчанию. Для функции Push это EndToStartAnimation, для Pop - StartToEndAnimation |
| 1 | StartToEndAnimation | Анимация из начала в конец. Начало и конец определяются направлением вывода текста |
| 2 | EndToStartAnimation | Анимация из конца в начало. |
| 3 | TopDownAnimation | Анимация сверху вниз. |
| 4 | BottomUpAnimation | Анимация снизу вверх. |
Третий аргумент onPushFinished - функция вызываемая по окончании анимации. Может быть nil.
Pop(animation int, onPopFinished func(View)) bool
Данная функция удаляет текущий View из контейнера используя анимацию.
Второй аргумент onPopFinished - функция вызываемая по окончании анимации. Может быть nil.
Функция вернёт false если StackLayout пуст и true если текущий элемент был удален.
Получить текущий (видимый) View можно с помощью функции интерфейса
Peek() View
Так же получить текущий View можно используя его индекс. Для получения индекса используется
Свойство "current" (константа Current). Пример
func peek(layout rui.StackLayout) {
views := layout.Views()
if index := rui.GetCurrent(layout); index >= 0 && index < len(views) {
return views[index]
}
return nil
}
Конечно это менее удобно по сравнению с функцией Peek. Однако свойство "current" может быть использовано
для отслеживания изменения текущего View:
layout.SetChangeListener(rui.Current, func(view rui.View, tag string) {
// current view changed
})
Для того чтобы сделать любой дочерний View текущим (видимым) используются функции интерфейса:
MoveToFront(view View) bool
MoveToFrontByID(viewID string) bool
Данная функция вернет true в случае успеха и false если дочерний View или View с таким id не существует и в
лог будет записано сообщение об ошибке.
Также чтобы сделать любой дочерний View текущим (видимым) можно использовать свойство "current".
## TabsLayout
TabsLayout является контейнером, реализующим интерфейс ViewsContainer. Все дочерние View
располагаются друг над другом и каждый занимает все пространство контейнера. В каждый момент времени
доступен только один дочерний View (текущий). Для выбора текущего View используются вкладки которые располагаются
вдоль одной из сторон контейнера
Для создания TabsLayout используется функция
func NewTabsLayout(session Session, params Params) TabsLayout
Для каждого View создается закладка. На закладке может отображаться заголовок, иконка и кнопка закрытия.
Заголовок задается с помощью текстового свойства "title" (константа Title) дочернего View.
Свойство "title" опционально. Если оно не задано, то на вкладке не будет текста.
Иконка задается с помощью текстового свойства "icon" (константа Icon) дочернего View.
В качестве значения ему присваивается имя файла иконки (если иконка располагается
в ресурсах приложения) или url. Свойство "icon" опционально. Если оно не задано, то на вкладке не будет иконки.
Отображение кнопки закрытия вкладки управляется с помощью булевского свойства "tab-close-button" (константа TabCloseButton).
Значение "true" включает отображение кнопки закрытия вкладки. Значение по умолчанию "false".
Свойства "tab-close-button" может быть задано как для дочернего View так и для самого TabsLayout.
Установка значения свойства "tab-close-button" для TabsLayout включает/выключает отображение
кнопки закрытия сразу для всех вкладок. Значение "tab-close-button" установленное для дочернего
элемента имеет более высокий приоритет по сравнению со значением установленным для TabsLayout.
Кнопка закрытия вкладки не закрывает вкладку, а только генерирует событие "tab-close-event" (константа TabCloseEvent).
Основной обработчик данного события имеет формат
func(layout TabsLayout, index int)
где второй элемент это индекс дочернего View.
Как уже было сказано, нажатие на кнопку закрытия вкладки не закрывает вкладку.
Вы сами должны закрывать вкладку. Это делается следующим образом
tabsView.Set(rui.TabCloseEvent, func(layout rui.TabsLayout, index int) {
layout.RemoveView(index)
})
Управлять текущим View можно с помощью целочисленного свойства "current" (константа Current).
Для программного переключения вкладок присвойте данному свойству значение индекса новой текущего View.
Прочитать значение свойства "current" можно с помощью функции
func GetCurrent(view View, subviewID ...string) int
Также свойство "current" может быть использовано для отслеживания изменения текущего View:
tabsView.SetChangeListener(rui.Current, func(view rui.View, tag string) {
// current view changed
})
Вкладки располагаются вдоль одной из сторон контейнера TabsLayout. Расположение вкладок
задается с помощью целочисленного свойства "tabs" (константа Tabs). Данное свойство может
принимать следующие значения
| Значение | Константа | Имя | Расположение вкладок |
|:--------:|---------------|--------------|----------------------------------------------------------------|
| 0 | TopTabs | "top" | Сверху. Значение по умолчанию. |
| 1 | BottomTabs | "bottom" | Снизу. |
| 2 | LeftTabs | "left" | Слева. Каждая вкладка повернута на 90° против часовой стрелки. |
| 3 | RightTabs | "right" | Справа. Каждая вкладка повернута на 90° по часовой стрелки. |
| 4 | LeftListTabs | "left-list" | Слева. Вкладки отображаются в виде списка. |
| 5 | RightListTabs | "right-list" | Справа. Вкладки отображаются в виде списка. |
| 6 | HiddenTabs | "hidden" | Вкладки скрыты. |
Зачем нужно значение HiddenTabs. Дело в том, что TabsLayout реализует интерфейс ListAdapter.
Что позволяет легко реализовать вкладки с помощью ListView. Именно в этом случаи и применяется значение HiddenTabs.
При отображении текущей (выбранной) вкладки типа TopTabs, BottomTabs, LeftListTabs и RightListTabs используется
стиль "ruiCurrentTab", а для вкладки типа LeftTabs и RightTabs используется стиль "ruiCurrentVerticalTab".
Если вы хотите кастомизировать отображение вкладок, то вы можете либо переопределить данные стили, либо
назначить свой стиль с помощью свойства "current-tab-style" (константа CurrentTabStyle).
Соответственно, для неактивной вкладки используются стили "ruiTab" и "ruiVerticalTab", а
назначить свой стиль можно с помощью свойства "tab-style" (константа TabStyle).
Для отображения панели вкладок используется стиль "ruiTabBar", а
назначить свой стиль можно с помощью свойства "tab-bar-style" (константа TabBarStyle).
## AbsoluteLayout
AbsoluteLayout является контейнером, реализующим интерфейс ViewsContainer. Дочерние View
могут располагаться в произвольных позициях пространства контейнера.
Для создания AbsoluteLayout используется функция
func NewAbsoluteLayout(session Session, params Params) AbsoluteLayout
Дочерние View позиционируются с помощью свойств типа SizeUnit: "left", "right", "top" и
"bottom" (соответственно константы Left, Right, Top и Bottom). Можно задавать любые из
этих свойств для дочернего View. Если ни "left" ни "right" не заданы, то дочерний View
будет прижат к левому краю контейнера. Если ни "top" ни "bottom" не заданы, то дочерний View
будет прижат к верхнему краю контейнера.
## DetailsView
DetailsView является контейнером, реализующим интерфейс ViewsContainer.
Для создания DetailsView используется функция
func NewDetailsView(session Session, params Params) DetailsView
Помимо дочерних View данный контейнер имеет свойство "summary" (константа Summary).
В качестве значения свойства "summary" может быть или View или строка текста.
DetailsView может находиться в одном из двух состояний:
* отображается только содержимое свойства "summary". Дочерние View скрыты и не занимают место на экране
* отображается сначала содержимое свойства "summary", а ниже дочерние View.
Размещение дочерних View, аналогично ColumnLayout с "column-count" равным 0.
DetailsView переключается между состояниями по клику по "summary".
Для принудительного переключения состояний DetailsView используется bool свойство
"expanded" (константа Expanded). Соответственно значение "true" показывает дочерние
View, "false" - скрывает.
Получить значение свойства "expanded" можно с помощью функции
func IsDetailsExpanded(view View, subviewID ...string) bool
а значение свойства "summary" можно получить с помощью функции
func GetDetailsSummary(view View, subviewID ...string) View
## Resizable
Resizable является контейнером в который можно поместить только один View. Resizable позволяет
интерактивно менять размеры вложенного View.
Вокруг вложенного View создается рамка, потянув за которую можно менять размеры.
Resizable не реализует интерфейс ViewsContainer. Для управлением вложенным View используется
только свойство Content. Данному свойству может быть присвоено значение типа View или
строка текста. Во втором случае создается TextView.
Рамка вокруг вложенного View может быть как со всех сторон, так и только с отдельных.
Для задания сторон рамки используется свойство "side" (константа Side) типа int.
Оно может принимать следующие значения:
| Значение | Константа | Имя | Сторона рамки |
|:--------:|--------------|----------|------------------------------------|
| 1 | TopSide | "top" | Верхняя |
| 2 | RightSide | "right" | Правая |
| 4 | BottomSide | "bottom" | Нижняя |
| 8 | LeftSide | "left" | Левая |
| 15 | AllSides | "all" | Все стороны. Значение по умолчанию |
Кроме этих значений может также использоваться or-комбинация TopSide, RightSide, BottomSide и LeftSide.
AllSides определено как
AllSides = TopSide | RightSide | BottomSide | LeftSide
Для установки ширины рамки используется SizeUnit свойство "resize-border-width" (константа ResizeBorderWidth).
Значение по умолчанию для "resize-border-width" равно 4px.
## TextView
Элемент TextView расширяющий интерфейс View предназначен для вывода текста.
Для создания TextView используется функция:
func NewTextView(session Session, params Params) TextView
Выводимый текст задается string свойством "text" (константа Text).
Помимо метода Get значение свойства "text" может быть получено с помощью функции
func GetText(view View, subviewID ...string) string
TextView наследует от View все свойства параметров текста ("font-name", "text-size", "text-color" и т.д.).
Кроме них добавляется еще один "text-overflow" (константа TextOverflow). Он определяет как обрезается
текст если он выходит за границы. Данное свойство типа int может принимать следующие значения
| Значение | Константа | Имя | Обрезка текста |
|:--------:|----------------------|------------|--------------------------------------------|
| 0 | TextOverflowClip | "clip" | Текст обрезается по границе (по умолчанию) |
| 1 | TextOverflowEllipsis | "ellipsis" | В конце видимой части текста выводится '…' |
## ImageView
Элемент ImageView расширяющий интерфейс View предназначен для вывода изображений.
Для создания ImageView используется функция:
func NewImageView(session Session, params Params) ImageView
Выводимое изображение задается string свойством "src" (константа Source).
В качестве значения данному свойству присваивается либо имя изображения в папке images ресурсов,
либо url изображения, либо inline-изображение.
inline-изображение это содержимое файла изображения закодированное в формате base64.
Для получения inline-изображение из ресурсов приложения используется функция
func InlineImageFromResource(filename string) (string, bool)
inline-изображения необходимо использовать в WebAssembly приложениях,
если вы хотите разместить изображения в ресурсах, а не на внешнем сервере.
inline-изображения могут вызывать фризы приложения в Safari, поэтому их лучше избегать.
Пример
if runtime.GOOS == "js" {
if image, ok := rui.InlineImageFromResource("image.png"); ok {
view.Set(rui.Source, image)
}
} else {
view.Set(rui.Source, "image.png")
}
ImageView позволяет выводить разные изображения в зависимости от плотности экрана
(см. раздел "Изображения для экранов с разной плотностью пикселей").
В связи с этим интерфейс ImageView имеет два дополнительных метода, которые позволяют узнать какое именно изображение отображается:
CurrentSource() string
NaturalSize() (float64, float64)
Метод CurrentSource возвращает url выводимого изображения. Пока изображение не загрузилось данный метод возвращает пустую строку.
NaturalSize() возвращает исходную ширину и высоту выводимого изображения в экранных пикселях.
Т.е. если исходное изображение имеет размер 100x200, а плотность экрана равна 2, то метод NaturalSize вернет значение (50, 100).
Пока изображение не загрузилось данный метод возвращает значение (0, 0).
Для отслеживания загрузки изображения используются два события:
* "loaded-event" (константа LoadedEvent). Данное событие возникает сразу после загрузки изображения.
* "error-event" (константа ErrorEvent). Данное событие возникает если при загрузке изображения возникла ошибка.
Основной слушатель этих событий имеет следующий формат:
func(ImageView)
Свойство "alt-text" (константа AltText) типа string позволяет задать описание изображения.
Данный текст отображается если браузер не смог загрузить изображение.
Также данный текст используется в системе озвучивания для незрячих.
Свойство "fit" (константа Fit) типа int определяет параметры масштабирования изображения.
Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|--------------|-----------------------------------|
| 0 | NoneFit | "none" | Размер изображения не изменяется |
| 1 | ContainFit | "contain" | Изображение масштабируется так чтобы сохранить соотношение сторон и вписаться в размеры ImageView |
| 2 | CoverFit | "cover" | Изображение масштабируется так чтобы полностью заполнить область ImageView. При этом сохраняется соотношение сторон изображения. Если после масштабирования изображение выходит за границы по высоте или ширине, то оно обрезается |
| 3 | FillFit | "fill" | Изображение масштабируется так чтобы полностью заполнить область ImageView. При этом соотношение сторон изображения может не сохраняться |
| 4 | ScaleDownFit | "scale-down" | Изображение масштабируется так как если бы были указаны NoneFit или ContainFit, в зависимости от того, что приведет к меньшему размеру изображения. Т.е. масштабирование может выполняться только в сторону уменьшения изображения |
Свойство "image-horizontal-align" (константа ImageHorizontalAlign) типа int устанавливает
горизонтальное выравнивание изображения относительно границ ImageView. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|------------------------------|
| 0 | LeftAlign | "left" | Выравнивание по левому краю |
| 1 | RightAlign | "right" | Выравнивание по правому краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по ширине |
Свойство "image-vertical-align" (константа ImageVerticalAlign) типа int устанавливает вертикальное
выравнивание изображения относительно границ ImageView. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|-------------------------------|
| 0 | TopAlign | "top" | Выравнивание по верхнему краю |
| 1 | BottomAlign | "bottom" | Выравнивание по нижнему краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по высоте |
Для получения значений свойств ImageView могут использоваться следующие функции:
func GetImageViewSource(view View, subviewID ...string) string
func GetImageViewAltText(view View, subviewID ...string) string
func GetImageViewFit(view View, subviewID ...string) int
func GetImageViewVerticalAlign(view View, subviewID ...string) int
func GetImageViewHorizontalAlign(view View, subviewID ...string) int
## SvgImageView
Элемент SvgImageView расширяющий интерфейс View предназначен для вывода svg изображений.
Для создания SvgImageView используется функция:
func NewSvgImageView(session Session, params Params) ImageView
Выводимое изображение задается string свойством "content" (константа Content).
В качестве значения данному свойству может присваиваться
* имя изображения в папке images ресурсов;
* url изображения;
* содержимое svg изображения.
Примеры
rui.Set(rootView, "iconView", rui.Content, "icon.svg")
rui.Set(rootView, "iconView", rui.Content, `<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-499.08 -247.12)">
<path d="m508.08 249.12 14 14-14 14" fill="none" stroke="#0f0" stroke-linecap="round" stroke-width="1px"/>
</g>
</svg>`)
Независимо от того как вы определили свойство "content" на клиент всегда передается содержимое svg изображения. Например, если вы задали изображение следующим образом
rui.Set(rootView, "iconView", rui.Content, "icon.svg")
то программа сначала загрузит в память содержимое файла "icon.svg",
а затем передаст клиенту это содержимое в качестве значения свойства "content".
Это позволяет включать svg изображения в ресурсы WebAssembly приложения.
## EditView
Элемент EditView является редактором теста и расширяет интерфейс View.
Для создания EditView используется функция:
func NewEditView(session Session, params Params) EditView
Возможно несколько вариантов редактируемого текста. Тип редактируемого текста устанавливается
с помощью int свойства "edit-view-type" (константа EditViewType).
Данное свойство может принимать следующие значения:
| Значение | Константа | Имя | Тип редактора |
|:--------:|----------------|-------------|-----------------------------------------------------|
| 0 | SingleLineText | "text" | Однострочный редактор текста. Значение по умолчанию |
| 1 | PasswordText | "password" | Редактор пароля. Текст скрывается звездочками |
| 2 | EmailText | "email" | Редактор для ввода одиночного e-mail |
| 3 | EmailsText | "emails" | Редактор для ввода нескольких e-mail |
| 4 | URLText | "url" | Редактор для ввода интернет адреса |
| 5 | PhoneText | "phone" | Редактор для ввода телефонного номера |
| 6 | MultiLineText | "multiline" | Многострочный редактор текста |
Для упрощения текста программы можно использовать свойства "type" (константа Type) вместо "edit-view-type".
Эти имена свойств синонимы. Но при описании стиля "type" использовать нельзя
Для установки/получения редактируемого текста используется string свойство "text" (константа Text)
Максимальная длина редактируемого текста устанавливается с помощью int свойства "max-length"
(константа MaxLength).
Вы можете ограничить вводимый текст с помощью регулярного выражения. Для этого используется
string свойство "edit-view-pattern" (константа EditViewPattern). Вместо "edit-view-pattern"
можно использовать синоним "pattern" (константа Pattern), за исключением описания стиля.
Для запрещения редактирования текста используется bool свойство "readonly" (константа ReadOnly).
Для включения/выключения встроенной проверки орфографии используется bool свойство "spellcheck"
(константа Spellcheck). Проверка орфографии можно включить только если тип редактора установлен
в SingleLineText или MultiLineText.
Для редактора можно установить подсказку которая будет показываться пока редактор пуст.
Для этого используется string свойство "hint" (константа Hint).
Для многострочного редактора может быть включен режим автоматического переноса. Для
этого используется bool свойство "edit-wrap" (константа EditWrap). Если "edit-wrap" выключен (значение по умолчанию),
то используется горизонтальная прокрутка. Если включен, то по достижении границы EditView
текст переносится на новую строку.
Для изменения цвета каретки ввода текста используется Color свойство "caret-color" (константа CaretColor).
Свойство "caret-color" может быть задано не только для EditView, но и для любого контейнера. В этом случае
цвет каретки меняется для всех дочерних EditView помещенных в этот контейнер
Для получения значений свойств EditView могут использоваться следующие функции:
func GetText(view View, subviewID ...string) string
func GetHint(view View, subviewID ...string) string
func GetMaxLength(view View, subviewID ...string) int
func GetEditViewType(view View, subviewID ...string) int
func GetEditViewPattern(view View, subviewID ...string) string
func IsReadOnly(view View, subviewID ...string) bool
func IsEditViewWrap(view View, subviewID ...string) bool
func IsSpellcheck(view View, subviewID ...string) bool
func GetCaretColor(view View, subviewID ...string) Color
Для отслеживания изменения текста используется событие "edit-text-changed" (константа
EditTextChangedEvent). Основной слушатель события имеет следующий формат:
func(EditView, string, string)
где второй аргумент это новое значение текста, третий аргумент - предыдущее значение текста.
Дополнительные слушатели события могут иметь следующий формат
func(EditView, newText string)
func(newText, oldText string)
func(newText string)
func(EditView)
func()
Получить текущий список слушателей изменения текста можно с помощью функции
func GetTextChangedListeners(view View, subviewID ...string) []func(EditView, string, string)
## NumberPicker
Элемент NumberPicker расширяет интерфейс View и предназначен для ввода чисел.
Для создания NumberPicker используется функция:
func NewNumberPicker(session Session, params Params) NumberPicker
NumberPicker может работать в двух режимах: редактор текста и слайдер.
Режим устанавливает int свойство "number-picker-type" (константа NumberPickerType).
Свойство "number-picker-type" может принимать следующие значения:
| Значение | Константа | Имя | Тип редактора |
|:--------:|--------------|----------|----------------------------------------|
| 0 | NumberEditor | "editor" | Редактор текста. Значение по умолчанию |
| 1 | NumberSlider | "slider" | Слайдер |
Установить/прочитать текущее значение можно с помощью свойства "number-picker-value"
(константа NumberPickerValue). В качестве значения свойству "number-picker-value" могут быть переданы:
* float64
* float32
* int
* int8…int64
* uint
* uint8…uint64
* текстовое представление любых из выше перечисленных типов
Все эти типы приводятся к float64. Соответственно функция Get всегда возвращает float64 значение.
Прочитано значение свойства "number-picker-value" может быть также с помощью функции:
func GetNumberPickerValue(view View, subviewID ...string) float64
На вводимые значения могут быть наложены ограничения. Для этого используются следующие свойства:
| Свойство | Константа | Ограничение |
|----------------------|------------------|------------------------|
| "number-picker-min" | NumberPickerMin | Минимальное значение |
| "number-picker-max" | NumberPickerMax | Максимальное значение |
| "number-picker-step" | NumberPickerStep | Шаг изменения значения |
Присвоены данным свойствам могут те же типы значений, что и "number-picker-value".
По умолчанию, в случае если "number-picker-type" равно NumberSlider, минимальное значение равно 0,
максимальное - 1. Если же "number-picker-type" равно NumberEditor то вводимые числа, по умолчанию,
ограничены лишь диапазоном значений float64.
Прочитать значения данных свойств можно с помощью функций:
func GetNumberPickerMinMax(view View, subviewID ...string) (float64, float64)
func GetNumberPickerStep(view View, subviewID ...string) float64
Для отслеживания изменения вводимого значения используется событие "number-changed" (константа
NumberChangedEvent). Основной слушатель события имеет следующий формат:
func(picker NumberPicker, newValue, oldValue float64)
где второй аргумент это новое значение, третий аргумент - предыдущее значение.
Дополнительные слушатели события могут иметь следующий формат
func(picker NumberPicker, newValue float64)
func(newValue, oldValue float64)
func(newValue float64)
func(picker NumberPicker)
func()
Получить текущий список слушателей изменения значения можно с помощью функции
func GetNumberChangedListeners(view View, subviewID ...string) []func(NumberPicker, float64, float64)
## DatePicker
Элемент DatePicker расширяет интерфейс View и предназначен для ввода дат.
Для создания DatePicker используется функция:
func NewDatePicker(session Session, params Params) DatePicker
Установить/прочитать текущее значение можно с помощью свойства "date-picker-value"
(константа DatePickerValue). В качестве значения свойству "date-picker-value" могут быть переданы:
* time.Time
* константа
* текст, который может быть преобразован в time.Time функцией
func time.Parse(layout string, value string) (time.Time, error)
Текст преобразуется в time.Time. Соответственно функция Get всегда возвращает time.Time значение.
Прочитано значение свойства "date-picker-value" может быть также с помощью функции:
func GetDatePickerValue(view View, subviewID ...string) time.Time
На вводимые даты могут быть наложены ограничения. Для этого используются следующие свойства:
| Свойство | Константа | Тип данных | Ограничение |
|--------------------|----------------|------------|----------------------------|
| "date-picker-min" | DatePickerMin | time.Time | Минимальное значение даты |
| "date-picker-max" | DatePickerMax | time.Time | Максимальное значение даты |
| "date-picker-step" | DatePickerStep | int | Шаг изменения даты в днях |
Прочитать значения данных свойств можно с помощью функций:
func GetDatePickerMin(view View, subviewID ...string) (time.Time, bool)
func GetDatePickerMax(view View, subviewID ...string) (time.Time, bool)
func GetDatePickerStep(view View, subviewID ...string) int
Для отслеживания изменения вводимого значения используется событие "date-changed" (константа
DateChangedEvent). Основной слушатель события имеет следующий формат:
func(picker DatePicker, newDate, oldDate time.Time)
где второй аргумент это новое значение даты, третий аргумент - предыдущее значение даты.
Дополнительные слушатели события могут иметь следующий формат
func(picker DatePicker, newDate time.Time)
func(newDate, oldDate time.Time)
func(newDate time.Time)
func(picker DatePicker)
func()
Получить текущий список слушателей изменения даты можно с помощью функции
func GetDateChangedListeners(view View, subviewID ...string) []func(DatePicker, time.Time, time.Time)
## TimePicker
Элемент TimePicker расширяет интерфейс View и предназначен для ввода времени.
Для создания TimePicker используется функция:
func NewTimePicker(session Session, params Params) TimePicker
Установить/прочитать текущее значение можно с помощью свойства "time-picker-value"
(константа TimePickerValue). В качестве значения свойству "time-picker-value" могут быть переданы:
* time.Time
* константа
* текст, который может быть преобразован в time.Time функцией
func time.Parse(layout string, value string) (time.Time, error)
Текст преобразуется в time.Time. Соответственно функция Get всегда возвращает time.Time значение.
Прочитано значение свойства "time-picker-value" может быть также с помощью функции:
func GetTimePickerValue(view View, subviewID ...string) time.Time
На вводимое время могут быть наложены ограничения. Для этого используются следующие свойства:
| Свойство | Константа | Тип данных | Ограничение |
|--------------------|----------------|------------|----------------------------------|
| "time-picker-min" | TimePickerMin | time.Time | Минимальное значение времени |
| "time-picker-max" | TimePickerMax | time.Time | Максимальное значение времени |
| "time-picker-step" | TimePickerStep | int | Шаг изменения времени в секундах |
Прочитать значения данных свойств можно с помощью функций:
func GetTimePickerMin(view View, subviewID ...string) (time.Time, bool)
func GetTimePickerMax(view View, subviewID ...string) (time.Time, bool)
func GetTimePickerStep(view View, subviewID ...string) int
Для отслеживания изменения вводимого значения используется событие "time-changed" (константа
TimeChangedEvent). Основной слушатель события имеет следующий формат:
func(picker TimePicker, newTime, oldTime time.Time)
где второй аргумент это новое значение времени, третий аргумент - предыдущее значение времени.
Дополнительные слушатели события могут иметь следующий формат
func(picker TimePicker, newTime time.Time)
func(newTime, oldTime time.Time)
func(newTime time.Time)
func(picker TimePicker)
func()
Получить текущий список слушателей изменения даты можно с помощью функции
func GetTimeChangedListeners(view View, subviewID ...string) []func(TimePicker, time.Time, time.Time)
## ColorPicker
Элемент ColorPicker расширяет интерфейс View и предназначен для выбора цвета в формате RGB без альфа канала.
Для создания ColorPicker используется функция:
func NewColorPicker(session Session, params Params) ColorPicker
Установить/прочитать текущее значение можно с помощью свойства "color-picker-value"
(константа ColorPickerValue). В качестве значения свойству "color-picker-value" могут быть переданы:
* Color
* текстовое представление Color
* константа
Прочитано значение свойства "color-picker-value" может быть также с помощью функции:
func GetColorPickerValue(view View, subviewID ...string) Color
Для отслеживания изменения выбранного цвета используется событие "color-changed" (константа
ColorChangedEvent). Основной слушатель события имеет следующий формат:
func(picker ColorPicker, newColor, oldColor Color)
где второй аргумент это новое значение цвета, третий аргумент - предыдущее значение цвета.
Дополнительные слушатели события могут иметь следующий формат
func(picker ColorPicker, newColor string)
func(newColor, oldColor string)
func(newColor string)
func(picker ColorPicker)
func()
Получить текущий список слушателей изменения даты можно с помощью функции
func GetColorChangedListeners(view View, subviewID ...string) []func(ColorPicker, Color, Color)
## FilePicker
Элемент FilePicker расширяет интерфейс View и предназначен для выбора одного или нескольких файлов.
Для создания FilePicker используется функция:
func NewFilePicker(session Session, params Params) FilePicker
Булевское свойство "multiple" (константа Multiple) используется для установки режима выбора нескольких файлов.
Значение "true" включает режим выбора нескольких файлов, "false" включает режим выбора одиночного файл.
Значение по умолчанию "false".
Вы можете ограничить выбор только определенными типами файлов. Для этого используется свойство "accept" (константа Accept).
Данному свойству присваивается список разрешенных расширений файлов и/или mime-типов. Значение можно задавать или в виде
строки (элементы при этом разделяются запятыми) или в виде массива строк. Примеры
rui.Set(view, "myFilePicker", rui.Accept, "png, jpg, jpeg")
rui.Set(view, "myFilePicker", rui.Accept, []string{"png", "jpg", "jpeg"})
rui.Set(view, "myFilePicker", rui.Accept, "image/*")
Для доступа к выбранным файлам используются две функции интерфейса FilePicker:
Files() []FileInfo
LoadFile(file FileInfo, result func(FileInfo, []byte))
а также соответствующие им глобальные функции
func GetFilePickerFiles(view View, subviewID ...string) []FileInfo
func LoadFilePickerFile(view View, subviewID string, file FileInfo, result func(FileInfo, []byte))
Функции Files/GetFilePickerFiles возвращают список выбранных файлов в виде среза структур FileInfo. Структура FileInfo объявлена как
type FileInfo struct {
// Name - the file's name.
Name string
// LastModified specifying the date and time at which the file was last modified
LastModified time.Time
// Size - the size of the file in bytes.
Size int64
// MimeType - the file's MIME type.
MimeType string
}
FileInfo содержит только информацию о файле, но не сам файл. Функция LoadFile/LoadFilePickerFile позволяет загрузить
содержимое одного из выбранных файлов. Функция LoadFile асинхронная. После загрузки содержимое выбранного файла
передается функции-аргументу LoadFile. Пример
if filePicker := rui.FilePickerByID(view, "myFilePicker"); filePicker != nil {
if files := filePicker.Files(); len(files) > 0 {
filePicker.LoadFile(files[0], func(file rui.FileInfo, data []byte) {
if data != nil {
// ...
}
})
}
}
эквивалентно
if files := rui.GetFilePickerFiles(view, "myFilePicker"); len(files) > 0 {
rui.LoadFilePickerFile(view, "myFilePicker", files[0], func(file rui.FileInfo, data []byte) {
if data != nil {
// ...
}
})
}
Если во время загрузки файла произойдет ошибка, то значение data передаваемое в функцию результата будет равно nil,
а описание ошибки будет записано в лог
Для отслеживания изменения списка выбранных файлов используется событие "file-selected-event"
(константа FileSelectedEvent). Основной слушатель события имеет следующий формат:
func(picker FilePicker, files []FileInfo))
где второй аргумент это новое значение списка выбранных файлов.
Получить текущий список слушателей изменения списка файлов можно с помощью функции
func GetFileSelectedListeners(view View, subviewID ...string) []func(FilePicker, []FileInfo)
## DropDownList
Элемент DropDownList расширяет интерфейс View и предназначен для выбора значения из выпадающего списка.
Для создания DropDownList используется функция:
func NewDropDownList(session Session, params Params) DropDownList
Список возможных значений задается с помощью свойства "items" (константа Items).
В качестве значения свойству "items" могут быть переданы следующие типы данных
* []string
* []fmt.Stringer
* []any содержащий в качестве элементов только: string, fmt.Stringer, bool, rune,
float32, float64, int, int8…int64, uint, uint8…uint64.
Все эти типы данных преобразуются в []string и присваиваются свойству "items".
Прочитать значение свойства "items" можно с помощью функции
func GetDropDownItems(view View, subviewID ...string) []string
Можно запретить выбор отдельных пунктов. Для этого используется свойство "disabled-items" (константа DisabledItems).
Данному свойству присваивается массив индексов запрещенных пунктов. Индекс может задаваться или числом или в виде текста
или как константа. Поэтому свойству "disabled-items" могут присваиваться следующие типы данных:
* []int
* int
* []string
* string может содержать несколько индексов разделенных запятыми
* []any содержащий в качестве элементов только: string, int, int8…int64, uint, uint8…uint64.
Все эти типы данных преобразуются в []any и присваиваются свойству "disabled-items".
Прочитать значение свойства "disabled-items" можно с помощью функции
func GetDropDownDisabledItems(view View, subviewID ...string) []int
Выбранное значение определяется int свойством "current" (константа Current). Значение по умолчанию 0.
Прочитать значение данного свойства можно с помощью функции
func GetCurrent(view View, subviewID ...string) int
Для отслеживания изменения свойства "current" используется событие "drop-down-event" (константа
DropDownEvent). Основной слушатель события имеет следующий формат:
func(list DropDownList, newCurrent, oldCurrent int)
где второй аргумент это индекс выбранного элемента, третий аргумент - предыдущее значение индекса.
Дополнительные слушатели события могут иметь следующий формат
func(list DropDownList, newCurrent int)
func(newCurrent, oldCurrent int)
func(newCurrent int)
func(list DropDownList)
func()
Получить текущий список слушателей изменения даты можно с помощью функции
func GetDropDownListeners(view View, subviewID ...string) []func(DropDownList, int, int)
## ProgressBar
Элемент DropDownList расширяет интерфейс View и предназначен для отображение прогресса в виде
заполняемой полоски.
Для создания ProgressBar используется функция:
func NewProgressBar(session Session, params Params) ProgressBar
ProgressBar имеет два свойства типа float64:
* "progress-max" (константа ProgressBarMax) - максимальное значение (по умолчанию 1);
* "progress-value" (константа ProgressBarValue) - текущее значение (по умолчанию 0).
Минимальное всегда 0.
В качестве значений этим свойствам может быть присвоено кроме float64 также float32, int,
int8…int64, uint, uint8…uint64
Прочитать значение данных свойств можно с помощью функций
func GetProgressBarMax(view View, subviewID ...string) float64
func GetProgressBarValue(view View, subviewID ...string) float64
## Button
Элемент Button реализует нажимаемую кнопку. Это CustomView (о нем ниже) на базе ListLayout и,
соответственно, обладает всеми свойствами ListLayout. Но в отличие от ListLayout может получать
фокус ввода.
Контент, по умолчанию, выровнен по центру.
Для создания Button используется функция:
func NewButton(session Session, params Params) Button
## ListView
Элемент ListView реализует список.
Для создания ListView используется функция:
func NewListView(session Session, params Params) ListView
ListView реализован на основе ListLayout и поэтому он поддерживает все свойства ListLayout:
"orientation", "list-wrap", "vertical-align", "horizontal-align", "list-row-gap" и "list-column-gap".
Помимо эти свойств ListView имеет ещё следующие:
### Свойство "items"
Элементы списка задаются с помощью свойства "items" (константа Items). Основным значением
Свойства "items" является интерфейс ListAdapter:
type ListAdapter interface {
ListSize() int
ListItem(index int, session Session) View
IsListItemEnabled(index int) bool
}
Соответственно функции этого интерфейса должны возвращать количество элементов, View i-го элемента и
статус i-го элемента разрешен/запрещен.
Вы можете реализовать этот интерфейс сами или воспользоваться вспомогательными функциями:
func NewTextListAdapter(items []string, params Params) ListAdapter
func NewViewListAdapter(items []View) ListAdapter
NewTextListAdapter создает адаптер из массива строк, второй аргумент это параметры TextView используемого
для отображения текста. NewViewListAdapter создает адаптер из массива View.
Свойству "items" могут быть присвоены следующие типы данных:
* ListAdapter;
* []View при присваивании преобразуется в ListAdapter с помощью функции NewViewListAdapter;
* []string при присваивании преобразуется в ListAdapter с помощью функции NewTextListAdapter;
* []any который может содержать элементы типа View, string, fmt.Stringer, bool, rune,
float32, float64, int, int8…int64, uint, uint8…uint64. При присваивании все типы кроме
View и string преобразуется в string, далее все string в TextView и из получившегося массива View
с помощью функции NewViewListAdapter получается ListAdapter.
Если элементы списка меняются в ходе работы, то после изменения необходимо вызывать или функцию
ReloadListViewData() интерфейса ListView или глобальную функцию ReloadListViewData(view View, subviewID ...string).
Данные функции обновляют отображаемые элементы списка.
### Свойство "orientation"
Элементы списка могут располагаться как вертикально (колонками), так и горизонтально (строками).
Свойство "orientation" (константа Orientation) типа int задает то как элементы списка будут
располагаться друг относительно друга. Свойство может принимать следующие значения:
| Значение | Константа | Расположение |
|:--------:|-----------------------|---------------------------------------------------|
| 0 | TopDownOrientation | Элементы располагаются в столбец сверху вниз. |
| 1 | StartToEndOrientation | Элементы располагаются в строку с начала в конец. |
| 2 | BottomUpOrientation | Элементы располагаются в столбец снизу вверх. |
| 3 | EndToStartOrientation | Элементы располагаются в строку с конца в начала. |
Положение начала и конца для StartToEndOrientation и EndToStartOrientation зависит от значения
Свойства "text-direction". Для языков с письмом справа налево (арабский, иврит) начало находится
справа, для остальных языков - слева.
Получить значение данного свойства можно с помощью функции
func GetListOrientation(view View, subviewID ...string) int
### Свойство "wrap"
Свойство "wrap" (константа Wrap) типа int определяет расположения элементов в случае достижения
границы контейнера. Возможны три варианта:
* WrapOff (0) - колонка/строка элементов продолжается и выходит за границы видимой области.
* WrapOn (1) - начинается новая колонка/строка элементов. Новая колонка располагается по направлению
к концу (о положении начала и конца см. выше), новая строка - снизу.
* WrapReverse (2) - начинается новая колонка/строка элементов. Новая колонка располагается по направлению
к началу (о положении начала и конца см. выше), новая строка - сверху.
Получить значение данного свойства можно с помощью функции
func GetListWrap(view View, subviewID ...string) int
### Свойства "item-width" и "item-height"
По умолчанию высота и ширина элементов списка вычисляется на основе их содержимого.
Это приводит к тому что элементы вертикального списка могут иметь разную высоту, а элементы
горизонтального - разную ширину.
Вы можете установить фиксированную высоту и ширину элемента списка. Для этого используются SizeUnit
Свойства "item-width" и "item-height"
Получить значения данных свойств можно с помощью функций
func GetListItemWidth(view View, subviewID ...string) SizeUnit
func GetListItemHeight(view View, subviewID ...string) SizeUnit
### Свойство "item-vertical-align"
Свойство "item-vertical-align" (константа ItemVerticalAlign) типа int устанавливает вертикальное
выравнивание содержимого элементов списка. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|-------------------------------|
| 0 | TopAlign | "top" | Выравнивание по верхнему краю |
| 1 | BottomAlign | "bottom" | Выравнивание по нижнему краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по высоте |
Получить значение данного свойства можно с помощью функции
func GetListItemVerticalAlign(view View, subviewID ...string) int
### Свойство "item-horizontal-align"
Свойство "item-horizontal-align" (константа ItemHorizontalAlign) типа int устанавливает
горизонтальное выравнивание содержимого элементов списка. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|------------------------------|
| 0 | LeftAlign | "left" | Выравнивание по левому краю |
| 1 | RightAlign | "right" | Выравнивание по правому краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по ширине |
Получить значение данного свойства можно с помощью функции
GetListItemHorizontalAlign(view View, subviewID ...string) int
### Свойство "current"
ListView позволяет выбирать пункты списка имеющие статус "разрешен" (см. ListAdapter).
Элемент может быть выбран как интерактивно, так и программно. Для этого используется
int свойство "current" (константа Current). Значение "current" меньше 0 означает что
не выбран ни один пункт
Получить значение данного свойства можно с помощью функции
func GetCurrent(view View, subviewID ...string) int
### Свойства "list-item-style", "current-style" и "current-inactive-style"
Данные три свойства отвечают за стиль фона и свойства текста каждого элемента списка.
| Свойство | Константа | Стиль |
|--------------------------|----------------------|-------------------------------------------------|
| "list-item-style" | ListItemStyle | Стиль невыбранного элемента |
| "current-style" | CurrentStyle | Стиль выбранного элемента. ListView в фокусе |
| "current-inactive-style" | CurrentInactiveStyle | Стиль выбранного элемента. ListView не в фокусе |
### Свойства "checkbox", "checked", "checkbox-horizontal-align" и "checkbox-vertical-align"
Свойство "current" позволяет выбрать один пункт списка.
Свойства "checkbox" позволяет добавить к каждому элементу списка чекбокс с помощью которого
можно выбрать несколько элементов списка. Свойство "checkbox" (константа ItemCheckbox) имеет тип int
и может принимать следующие значения
| Значение | Константа | Имя | Вид чекбокса |
|:--------:|------------------|------------|--------------------------------------------------|
| 0 | NoneCheckbox | "none" | Нет чекбокса. Значение по умолчанию |
| 1 | SingleCheckbox | "single" | ◉ Чекбокс позволяющий пометить только один пункт |
| 2 | MultipleCheckbox | "multiple" | ☑ Чекбокс позволяющий пометить несколько пунктов |
Получить значение данного свойства можно с помощью функции
func GetListViewCheckbox(view View, subviewID ...string) int
Получить/установить список помеченных пунктов можно с помощью свойства "checked" (константа Checked).
Данное свойство имеет тип []int и хранит индексы помеченных элементов.
Получить значение данного свойства можно с помощью функции
func GetListViewCheckedItems(view View, subviewID ...string) []int
Проверить помечен ли конкретный элемент можно с помощью функции
func IsListViewCheckedItem(view View, subviewID string, index int) bool
По умолчанию чекбокс расположен в верхнем левом углу элемента. Изменить его положение можно
с помощью int свойств "checkbox-horizontal-align" и "checkbox-vertical-align" (константы
CheckboxHorizontalAlign и CheckboxVerticalAlign)
Свойство "checkbox-horizontal-align" (константа СheckboxHorizontalAlign) может принимать следующие значения:
| Значение | Константа | Имя | Расположение чекбокса |
|:--------:|--------------|----------|-------------------------------------------------|
| 0 | LeftAlign | "left" | У левого края. Контент справа |
| 1 | RightAlign | "right" | У правого края. Контент слева |
| 2 | CenterAlign | "center" | По центру по горизонтали. Контент ниже или выше |
Свойство "checkbox-vertical-align" (константа CheckboxVerticalAlign) может принимать следующие значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|----------|-------------------------------|
| 0 | TopAlign | "top" | Выравнивание по верхнему краю |
| 1 | BottomAlign | "bottom" | Выравнивание по нижнему краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
Особый случай когда и "checkbox-horizontal-align" и "checkbox-vertical-align" равны CenterAlign (2).
В этом случае чекбокс расположен по центру по горизонтали, контент ниже
Получить значения свойств можно "checkbox-horizontal-align" и "checkbox-vertical-align" с помощью функций
func GetListViewCheckboxHorizontalAlign(view View, subviewID ...string) int
func GetListViewCheckboxVerticalAlign(view View, subviewID ...string) int
### События ListView
Для ListView есть три характерных события
* "list-item-clicked" (константа ListItemClickedEvent) - возникает когда пользователь кликнет по элементу
списка. Основной слушатель данного события имеет следующий формат: func(ListView, int). Где второй
аргумент это индекс элемента.
* "list-item-selected" (константа ListItemSelectedEvent) - возникает когда пользователь элемент списка
становится выбранным. Основной слушатель данного события имеет следующий формат: func(ListView, int).
Где второй аргумент это индекс элемента.
* "list-item-checked" (константа ListItemCheckedEvent) - возникает когда пользователь ставит/снимает
пометку чекбокса элемента списка. Основной слушатель данного события имеет следующий формат: func(ListView, []int).
Где второй аргумент это массив индексов помеченных элементов.
Получить списки слушателей данных событий можно с помощью функций:
func GetListItemClickedListeners(view View, subviewID ...string) []func(ListView, int)
func GetListItemSelectedListeners(view View, subviewID ...string) []func(ListView, int)
func GetListItemCheckedListeners(view View, subviewID ...string) []func(ListView, []int)
## TableView
Элемент TableView реализует таблицу. Для создания TableView используется функция:
func NewTableView(session Session, params Params) TableView
### Свойство "content"
Свойство "content" определяет содержимое таблицы. Для описания содержимого необходимо реализовать
интерфейс TableAdapter объявленный как
type TableAdapter interface {
RowCount() int
ColumnCount() int
Cell(row, column int) any
}
где функции RowCount() и ColumnCount() должны возвращать количество строк и столбцов в таблице;
Cell(row, column int) возвращает содержимое ячейки таблицы. Функция Cell() может возвращать
элементы следующих типов:
* string
* rune
* float32, float64
* целочисленные значения: int, int8, int16, int32, int64, uint, uint8, uint16, uint32, uint64
* bool
* rui.Color
* rui.View
* fmt.Stringer
* rui.VerticalTableJoin, rui.HorizontalTableJoin
Свойству "content" можно также присваивать следующие типы данных
* TableAdapter
* [][]any
* [][]string
[][]any и [][]string при присвоении преобразуются к TableAdapter.
### Свойство "cell-style"
Свойство "cell-style" (константа CellStyle) предназначено для настройки оформления ячейки таблицы. Данному свойству
может быть присвоено только реализация интерфейса TableCellStyle.
type TableCellStyle interface {
CellStyle(row, column int) Params
}
Данный интерфейс содержит только одну функцию CellStyle, которая возвращает параметры оформления
заданной ячейки таблицы. Можно использовать любые свойства интерфейса View. Например
func (style *myTableCellStyle) CellStyle(row, column int) rui.Params {
if row == 0 {
return rui.Params {
rui.BackgroundColor: rui.Gray,
rui.Italic: true,
}
}
return nil
}
Если не надо менять оформление какой-то ячейки, то для нее можно вернуть nil.
#### Свойства "row-span" и "column-span"
Помимо свойств интерфейса View, функцией CellStyle могут возвращаться еще два свойства типа int:
"row-span" (константа RowSpan) и "column-span" (константа ColumnSpan).
Данные свойства используются для объединения ячеек таблицы.
Свойство "row-span" указывает сколько ячеек надо объединить по вертикали,
а "column-span" - по горизонтали. Например
func (style *myTableCellStyle) CellStyle(row, column int) rui.Params {
if row == 0 && column == 0 {
return rui.Params { rui.RowSpan: 2 }
}
if row == 0 && column == 1 {
return rui.Params { rui.ColumnSpan: 2 }
}
return nil
}
В этом случае таблица будет иметь следующий вид
|------|----------------|
| | |
| |-------|--------|
| | | |
|------|-------|--------|
Если в качестве значения свойства "content" используется [][]any, то для объединения
ячеек используются пустые структуры
type VerticalTableJoin struct {
}
type HorizontalTableJoin struct {
}
Данные структуры присоединяют ячейку, соответственно, к верхней/левой. Описание приведенной выше таблицы будет
иметь следующий вид
content := [][]any {
{"", "", rui.HorizontalTableJoin{}},
{rui.VerticalTableJoin{}, "", ""},
}
### Свойство "row-style"
Свойство "row-style" (константа RowStyle) предназначено для настройки оформления строки таблицы.
Данному свойству может быть присвоены или реализация интерфейса TableRowStyle или []Params.
TableRowStyle объявлена как
type TableRowStyle interface {
RowStyle(row int) Params
}
Функция RowStyle возвращает параметры применяемые ко всей строке таблицы.
Свойство "row-style" имеет более низкий приоритет по сравнению со свойством "cell-style",
т.е. свойства заданные в "cell-style" будут использоваться вместо заданных в "row-style"
### Свойство "column-style"
Свойство "column-style" (константа ColumnStyle) предназначено для настройки оформления столбца таблицы.
Данному свойству может быть присвоены или реализация интерфейса TableColumnStyle или []Params.
TableColumnStyle объявлена как
type TableColumnStyle interface {
ColumnStyle(column int) Params
}
Функция ColumnStyle возвращает параметры применяемые ко всему столбцу таблицы.
Свойство "column-style" имеет более низкий приоритет по сравнению со свойствами "cell-style" и "row-style".
### Свойства "head-height" и "head-style"
Таблица может иметь "шапку".
Свойство "head-height" (константа HeadHeight) типа int указывает сколько первых строк таблицы образуют "шапку".
Свойство "head-style" (константа HeadStyle) задает стиль шапки. Свойству "head-style" может быть
присвоено, значение типа:
* string - имя стиля;
* []Params - перечисление свойств "шапки".
### Свойства "foot-height" и "foot-style"
Таблица может иметь в конце финализирующие строки (например строка "Итого").
Свойство "foot-height" (константа FootHeight) типа int указывает количество этих финализирующих строк.
Свойство "foot-style" (константа FootStyle) задает их стиль. Значения свойства "foot-style" аналогичны свойству "head-style".
### Свойство "cell-padding"
Свойство "cell-padding" (константа CellPadding) типа SizeUnit задает отступы от границ ячейки до
контента. Данное свойство эквивалентно
func (style *myTableCellStyle) CellStyle(row, column int) rui.Params {
return rui.Params { rui.Padding: <my padding> }
}
И введено для удобства, чтобы не надо было писать адаптер для задания отступов.
Свойство "cell-padding" имеет более низкий приоритет по сравнению со свойством "cell-style".
"cell-padding" может также использоваться при задании параметров в свойствах
"row-style", "column-style", "foot-style" и "head-style"
### Свойство "cell-border"
Свойство "cell-border" (константа CellBorder) задает рамку для всех ячеек таблицы.
Данное свойство эквивалентно
func (style *myTableCellStyle) CellStyle(row, column int) rui.Params {
return rui.Params { rui.Border: <my padding> }
}
И введено для удобства, чтобы не надо было писать адаптер для рамки.
Свойство "cell-border" имеет более низкий приоритет по сравнению со свойством "cell-style".
"cell-border" может также использоваться при задании параметров в свойствах
"row-style", "column-style", "foot-style" и "head-style"
### Свойство "table-vertical-align"
Свойство "table-vertical-align" (константа TableVerticalAlign) типа int задает вертикальное выравнивание
данных внутри ячейки таблицы. Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|---------------|------------|-------------------------------|
| 0 | TopAlign | "top" | Выравнивание по верхнему краю |
| 1 | BottomAlign | "bottom" | Выравнивание по нижнему краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3, 4 | BaselineAlign | "baseline" | Выравнивание по базовой линии |
Для горизонтального выравнивания используется свойство "text-align".
Получить значение данного свойства можно с помощью функции
func GetTableVerticalAlign(view View, subviewID ...string) int
### Свойство "selection-mode"
Свойство "selection-mode" (константа SelectionMode) типа int определяет режим
выделения (подсвечивания) элементов таблицы. Доступные режимы:
* NoneSelection (0). Режим по умолчанию. В данном режиме нельзя выделять элементы таблицы. Таблица не может
получить фокус ввода.
* CellSelection (1). В данном режиме может выделяться (подсвечиваться) одна ячейка таблицы.
Ячейка выделяется интерактивно с помощью мыши или клавиатуры (с использованием клавиш управления курсором).
В данном режиме таблица может получить фокус ввода. В данном режиме таблица генерирует два вида
событий: "table-cell-selected" и "table-cell-clicked" (о них ниже).
* RowSelection (2). В данном режиме может выделяться (подсвечиваться) только строка таблицы целиком.
В данном режиме таблица похожа на ListView. Строка выделяется интерактивно с помощью мыши или клавиатуры
(с использованием клавиш управления курсором). В данном режиме таблица может получить фокус ввода.
В данном режиме таблица генерирует два вида событий: "table-row-selected" и "table-row-clicked" (о них ниже).
Получить значение данного свойства можно с помощью функции
func GetSelectionMode(view View, subviewID ...string) int
### Свойство "current"
Свойство "current" (константа Current) задает координаты выбранной ячейки/строки
в виде структуры
type CellIndex struct {
Row, Column int
}
Если ячейка не выбрана, то значения полей Row и Column будут меньше 0.
В режиме RowSelection значение поля Column игнорируется. Также в данном режиме
Свойству "current" можно присваивать значение типа int (индекс строки).
Получить значение данного свойства можно с помощью функции
func GetTableCurrent(view View, subviewID ...string) CellIndex
### Свойство "allow-selection"
По умолчанию вы можете выделить любую ячейку/строку таблицы. Однако часто необходимо запретить
выбор определенных элементов. Свойство "selection-mode" (константа SelectionMode) позволяет
задать такое правило.
В режиме CellSelection данному свойству присваивается реализация интерфейса
type TableAllowCellSelection interface {
AllowCellSelection(row, column int) bool
}
а в режиме RowSelection - реализация интерфейса
type TableAllowRowSelection interface {
AllowRowSelection(row int) bool
}
Функция AllowCellSelection/AllowRowSelection должна возвращать "true" если ячейка/строка
может быть выделена и "false" если ячейку/строку запрещено выделять.
### События "table-cell-selected" и "table-cell-clicked"
Событие "table-cell-selected" генерируется в режиме CellSelection когда пользователь выделил
ячейку таблицы с помощью мыши или клавиатуры.
Событие "table-cell-clicked" возникает если пользователь кликнет мышью по ячейке таблицы
(при этом если она не выделена, то сначала возникает событие "table-cell-selected") или
нажимает клавишу Enter или пробел
Основной слушатель данных событий имеет следующий формат:
func(TableView, int, int)
где второй аргумент это индекс строки ячейки, третий - индекс столбца
Можно также использовать слушателя следующего формата:
func(int, int)
### События "table-row-selected" и "table-row-clicked"
Событие "table-row-selected" генерируется в режиме RowSelection когда пользователь выделил
строку таблицы с помощью мыши или клавиатуры.
Событие "table-row-clicked" возникает если пользователь кликнет мышью по строке таблицы
(при этом если она не выделена, то сначала возникает событие "table-row-selected") или
нажимает клавишу Enter или пробел
Основной слушатель данных событий имеет следующий формат:
func(TableView, int)
где второй аргумент это индекс строки.
Можно также использовать слушателя следующего формата:
func(int)
## Пользовательский View
Пользовательский View должен реализовывать интерфейс CustomView, который в свою очередь
расширяет интерфейсы ViewsContainer и View. Пользовательский View создается на основе другого,
который называется Super View.
Для упрощение задачи уже имеется базовая реализация CustomView в виде структуры CustomViewData.
Создание пользовательского View рассмотрим на примере встроенного элемента Button:
1) объявляем интерфейс Button, как расширяющий CustomView, и структуру buttonData как расширяющую CustomViewData
type Button interface {
rui.CustomView
}
type buttonData struct {
rui.CustomViewData
}
2) реализуем функцию CreateSuperView
func (button *buttonData) CreateSuperView(session Session) View {
return rui.NewListLayout(session, rui.Params{
rui.Semantics: rui.ButtonSemantics,
rui.Style: "ruiButton",
rui.StyleDisabled: "ruiDisabledButton",
rui.HorizontalAlign: rui.CenterAlign,
rui.VerticalAlign: rui.CenterAlign,
rui.Orientation: rui.StartToEndOrientation,
})
}
3) если надо, то переопределяем методы интерфейса CustomView, для Button это
функция Focusable() (так как кнопка может получать фокус, а ListLayout не получает)
func (button *buttonData) Focusable() bool {
return true
}
4) пишем функцию для создания Button:
func NewButton(session rui.Session, params rui.Params) Button {
button := new(buttonData)
rui.InitCustomView(button, "Button", session, params)
return button
}
При создании CustomView обязательным является вызов функции InitCustomView.
Данная функция инициализирует структуру CustomViewData. Первым аргументом
является указатель на инициализируемую структуру, вторым - имя присвоенное
вашему View, третьим - сессия и четвертым - параметры
5) регистрируем элемент. Регистрацию рекомендуется осуществлять в методе init пакета
rui.RegisterViewCreator("Button", func(session rui.Session) rui.View {
return NewButton(session, nil)
})
Все! Новый элемент готов
## CanvasView
CanvasView это область в которой вы можете рисовать. Для создания CanvasView используется функция:
func NewCanvasView(session Session, params Params) CanvasView
CanvasView имеет всего одно дополнительное свойство: "draw-function" (константа DrawFunction).
С помощью данного свойства задается функция рисования имеющая следующее описание
func(Canvas)
где Canvas это контекст рисования с помощью которого осуществляется рисование
Интерфейс Canvas содержит ряд функция для настройки стилей, текста и непосредственно самого рисования.
Все координаты и размеры задаются только в пикселях, поэтому при рисовании SizeUnit не используется.
Везде используется float64
### Настройка стиля линий
Для настройки цвета линий используются следующие функции интерфейса Canvas:
* SetSolidColorStrokeStyle(color Color) - линия будет рисоваться сплошным цветом
* SetLinearGradientStrokeStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint) -
линия будет рисоваться с помощью линейного градиента. Начальная точка градиента задается с помощью x0, y0 и color0,
конечная - x1, y1 и color1. Массив []GradientPoint задает промежуточные точки градиента. Если промежуточных точек нет,
то в качестве последнего параметра можно передать nil
* SetRadialGradientStrokeStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint) -
линия будет рисоваться с помощью радиального градиента. x0, y0, r0, color0 - координаты центра, радиус и цвет начальной окружности.
x1, y1, r1, color1 - координаты центра, радиус и цвет конечной окружности. Массив []GradientPoint задает промежуточные точки градиента
Структура GradientPoint описана как
type GradientPoint struct {
Offset float64
Color Color
}
где Offset - значение в диапазоне от 0 до 1 задает относительное положение промежуточной точки, Color - цвет этой точки.
Толщина линии в пикселях задается функцией
SetLineWidth(width float64)
Вид концов линии задается с помощью функции
SetLineCap(cap int)
где cap может принимать следующие значения
| Значение | Константа | Вид |
|:--------:|-----------|----------------------------------------------------------------------------------|
| 0 | ButtCap | Окончании линии обрезано в конечной точке. Значение по умолчанию. |
| 1 | RoundCap | Окончании линии скруглено. Центр окружности находится в конечной точке. |
| 2 | SquareCap | В конец линии добавляется прямоугольник с шириной равной половине толщины линии. |
Форма, используемая для соединения двух отрезков линии в месте их пересечения, задается функцией
SetLineJoin(join int)
где join может принимать следующие значения
| Значение | Константа | Вид |
|:--------:|-----------|--------|
| 0 | MiterJoin | Сегменты соединяются путем удлинения их внешних краев для соединения в одной точке с эффектом заполнения дополнительной области в форме ромба. |
| 1 | RoundJoin | Закругляет углы фигуры, заполняя дополнительный сектор диском с центром в общей конечной точке соединенных сегментов. Радиус этих закругленных углов равен ширине линии. |
| 2 | BevelJoin | Заполняет дополнительную треугольную область между общей конечной точкой соединенных сегментов и отдельными внешними прямоугольными углами каждого сегмента. |
По умолчанию рисуется сплошная линия. Если необходимо нарисовать прерывистую линию, то
необходимо сначала задать шаблон с помощью функции
SetLineDash(dash []float64, offset float64)
где dash []float64 задает шаблон линии в виде чередования длин отрезков и пропусков. Второй аргумент -
смещение шаблона относительно начала линии.
Пример
canvas.SetLineDash([]float64{16, 8, 4, 8}, 0)
Линия рисуется следующим образом: отрезок длиной 16 пикселей, затем пропуск длиной 8 пикселей,
отрезок длиной 4 пикселя, затем пропуск длиной 8 пикселей, затем снова отрезок длиной 16 пикселей и т.д.
### Настройка стиля заливки
Для настройки стиля заливки используются следующие функции интерфейса Canvas:
* SetSolidColorFillStyle(color Color) - фигура будет заливаться сплошным цветом
* SetLinearGradientFillStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint) -
фигура будет заливаться с помощью линейного градиента. Начальная точка градиента задается с помощью x0, y0 и color0,
конечная - x1, y1 и color1. Массив []GradientPoint задает промежуточные точки градиента. Если промежуточных точек нет,
то в качестве последнего параметра можно передать nil
* SetRadialGradientFillStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint) -
фигура будет заливаться с помощью радиального градиента. x0, y0, r0, color0 - координаты центра, радиус и цвет начальной окружности.
x1, y1, r1, color1 - координаты центра, радиус и цвет конечной окружности. Массив []GradientPoint задает промежуточные точки градиента
### Рисование геометрических фигур
#### Прямоугольник
Для рисования прямоугольников могут использоваться три функции:
FillRect(x, y, width, height float64)
StrokeRect(x, y, width, height float64)
FillAndStrokeRect(x, y, width, height float64)
FillRect рисует закрашенный прямоугольник.
StrokeRect рисует контур прямоугольника.
FillAndStrokeRect рисует контур и закрашивает внутренности.
#### Прямоугольник с закругленными углами
Аналогично прямоугольнику есть три функции рисования
FillRoundedRect(x, y, width, height, r float64)
StrokeRoundedRect(x, y, width, height, r float64)
FillAndStrokeRoundedRect(x, y, width, height, r float64)
где r это радиус скругления
#### Эллипс
Для рисования эллипсов также могут использоваться три функции:
FillEllipse(x, y, radiusX, radiusY, rotation float64)
StrokeEllipse(x, y, radiusX, radiusY, rotation float64)
FillAndStrokeEllipse(x, y, radiusX, radiusY, rotation float64)
где x, y - центр эллипса, radiusX, radiusY - радиусы эллипса по оси X и Y,
rotation - угол поворота эллипса относительно центра в радианах
#### Path
Интерфейс Path позволяет описать сложную фигуру. Создается Path с помощью функции NewPath().
После создания вы должны описать фигуру. Для этого могут использоваться следующие функции интерфейса:
* MoveTo(x, y float64) - переместить текущую точке в заданные координаты;
* LineTo(x, y float64) - добавить линию из текущей точки в заданную;
* ArcTo(x0, y0, x1, y1, radius float64) - добавить дугу окружности, используя заданные контрольные точки и радиус.
При необходимости дуга автоматически соединяется с последней точкой пути прямой линией.
x0, y0 - координаты первой контрольной точки;
x1, y1 - координаты второй контрольной точки;
radius - радиус дуги. Должен быть неотрицательным.
* Arc(x, y, radius, startAngle, endAngle float64, clockwise bool) - добавить дугу окружности.
x, y - координаты центра дуги;
radius - радиус дуги. Должен быть неотрицательным;
startAngle - угол в радианах, под которым начинается дуга, измеряется по часовой стрелке от положительной оси X.
endAngle - угол в радианах, под которым заканчивается дуга, измеряется по часовой стрелке от положительной оси X.
clockwise - если true, дуга будет нарисована по часовой стрелке между начальным и конечным углами, иначе - против часовой стрелки
* BezierCurveTo(cp0x, cp0y, cp1x, cp1y, x, y float64) - добавить кубическую кривую Безье из текущей точки.
cp0x, cp0y - координаты первой контрольной точки;
cp1x, cp1y - координаты второй контрольной точки;
x, y - координаты конечной точки.
* QuadraticCurveTo(cpx, cpy, x, y float64) - добавить квадратичную кривую Безье из текущей точки.
cpx, cpy - координаты контрольной точки;
x, y - координаты конечной точки.
* Ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle float64, clockwise bool) - добавить эллиптическую дугу.
x, y - координаты центра эллипса;
radiusX - радиус большой оси эллипса. Должен быть неотрицательным;
radiusY - радиус малой оси эллипса. Должен быть неотрицательным;
rotation - вращение эллипса, выраженное в радианах;
startAngle - угол начала эллипса в радианах, измеренный по часовой стрелке от положительной оси x;
endAngle - угол в радианах, под которым заканчивается эллипс, измеренный по часовой стрелке от положительной оси x.
clockwise - если true, рисует эллипс по часовой стрелке, иначе - против часовой стрелки.
Функция Close() вызывается в конце и соединяет начальную и конечную точку фигуры. Используется только для
замкнутых фигур.
После того как Path сформирован его можно нарисовать использую следующие 3 функции
FillPath(path Path)
StrokePath(path Path)
FillAndStrokePath(path Path)
#### Линия
Для рисования линии используется функция
DrawLine(x0, y0, x1, y1 float64)
### Текст
Для вывода текста в заданных координатах используются две функции
FillText(x, y float64, text string)
StrokeText(x, y float64, text string)
Функция StrokeText рисует контур текста, FillText - рисует сам текст.
Горизонтальное выравнивание текста относительно заданных координат устанавливается с помощью функции
SetTextAlign(align int)
где align может принимать одно из следующих значений:
| Значение | Константа | Выравнивание |
|:--------:|-------------|----------------------------------------------------|
| 0 | LeftAlign | Заданная точка является самой левой точкой текста |
| 1 | RightAlign | Заданная точка является самой правой точкой текста |
| 2 | CenterAlign | Текст центрируется относительно заданной точки |
| 3 | StartAlign | Если текст выводиться слева направо, то вывод текста эквивалентен LeftAlign, иначе RightAlign |
| 4 | EndAlign | Если текст выводиться слева направо, то вывод текста эквивалентен RightAlign, иначе LeftAlign |
Вертикальное выравнивание текста относительно заданных координат устанавливается с помощью функции
SetTextBaseline(baseline int)
где baseline может принимать одно из следующих значений:
| Значение | Константа | Выравнивание |
|:--------:|---------------------|---------------------------------------------------|
| 0 | AlphabeticBaseline | Относительно нормальной базовой линии текста |
| 1 | TopBaseline | Относительно верхней границы текста |
| 2 | MiddleBaseline | Относительно середины текста |
| 3 | BottomBaseline | Относительно нижней границы текста |
| 4 | HangingBaseline | Относительно подвешенной базовой линии текста (используется тибетскими и другими индийскими шрифтами) |
| 5 | IdeographicBaseline | Относительно идеографической базовой линии текста |
Идеографическая базовая линия это нижняя часть изображения символов, если основная часть символов выступает за базовую линию алфавита
(Используется китайскими, японскими и корейскими шрифтами).
Для установки параметров шрифта выводимого текста используются функции
SetFont(name string, size SizeUnit)
SetFontWithParams(name string, size SizeUnit, params FontParams)
где FontParams определена как
type FontParams struct {
// Italic - if true then a font is italic
Italic bool
// SmallCaps - if true then a font uses small-caps glyphs
SmallCaps bool
// Weight - a font weight. Valid values: 0...9, there
// 0 - a weight does not specify;
// 1 - a minimal weight;
// 4 - a normal weight;
// 7 - a bold weight;
// 9 - a maximal weight.
Weight int
// LineHeight - the height (relative to the font size of the element itself) of a line box.
LineHeight SizeUnit
}
Функция TextWidth позволяет узнать ширину выводимого текста в пикселях
TextWidth(text string, fontName string, fontSize SizeUnit) float64
### Изображение
Перед рисованием изображения его необходимо сначала загрузить. Для этого используется глобальная функция:
func LoadImage(url string, onLoaded func(Image), session Session) Image {
Изображение загружается асинхронно. После окончания загрузки будет вызвана функция передаваемая во втором аргументе.
Если изображение было загружено успешно, то функция LoadingStatus() интерфейса Image будет возвращать значение
ImageReady (1), если при загрузке произошла ошибка, то данная функция будет возвращать ImageLoadingError (2).
Текстовое описание ошибки возвращает функция LoadingError()
В отличие от ImageView при загрузке Image не учитывается плотность пикселей. Вы должны сами определить какое изображение
загружать. Это можно сделать так:
var url string
if session.PixelRatio() == 2 {
url = "image@2x.png"
} else {
url = "image.png"
}
Для рисования изображения используются следующие функции:
DrawImage(x, y float64, image Image)
DrawImageInRect(x, y, width, height float64, image Image)
DrawImageFragment(srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight float64, image Image)
Функция DrawImage выводит изображение как есть (без масштабирования): x, y - координаты левого верхнего угла изображения
Функция DrawImageInRect выводит изображение с масштабированием: x, y - координаты левого верхнего угла изображения,
width, height - ширина и высота результата
Функция DrawImageFragment выводит фрагмент изображения с масштабированием: srcX, srcY, srcWidth, srcHeight описывают исходную
область изображения, dstX, dstY, dstWidth, dstHeight - результирующая область.
Изображение можно также использовать в стиле заливке
SetImageFillStyle(image Image, repeat int)
где repeat может принимать следующие значения:
| Значение | Константа | Описание |
|:--------:|-----------|----------------------------------------------------|
| 0 | NoRepeat | Изображение не повторяется |
| 1 | RepeatXY | Изображение повторяется по вертикали и горизонтали |
| 2 | RepeatX | Изображение повторяется только по горизонтали |
| 3 | RepeatY | Изображение повторяется только по вертикали |
## AudioPlayer, VideoPlayer, MediaPlayer
AudioPlayer и VideoPlayer это элементы которые предназначены для воспроизведения аудио и видео.
Оба элемента реализуют интерфейс MediaPlayer. Большинство свойств и все события AudioPlayer и VideoPlayer
являются общими и реализуются через MediaPlayer.
### Свойство "src"
Свойство "src" (константа Source) задает один или несколько источников медиафайлов. Свойство "src" может принимать
значение следующих типов:
* string,
* MediaSource,
* []MediaSource.
Структура MediaSource объявлена как
type MediaSource struct {
Url string
MimeType string
}
где Url - обязательный параметр, MimeType - необязательный mime тип файла
Так как разные браузеры поддерживают разные форматы файлов и кодеков, то рекомендуется задавать несколько
источников в разных форматах. Плеер сам выбирает из списка источников наиболее подходящий. Задание mime
типов облегчает браузеру этот процесс
### Свойство "controls"
Свойство "controls" (константа Controls) типа bool указывает, должны ли отображаться элементы пользовательского
интерфейса для управления воспроизведения медиа ресурса. Значение по умолчанию false.
Если свойство "controls" равно false для AudioPlayer, то он будет невидим и не будет занимать место на экране.
### Свойство "loop"
Свойство "loop" (константа Loop) типа bool. Если оно установлено в true, то медиа-файл начинаться сначала,
когда он достигает конца. Значение по умолчанию false.
### Свойство "muted"
Свойство "muted" (константа Muted) типа bool включает (true) / выключает (false) беззвучный режим. Значение по умолчанию false.
### Свойство "preload"
Свойство "preload" (константа Preload) типа int определяет какие данные должны быть предварительно загружены, если таковые имеются.
Допустимые значения:
| Значение | Константа | Имя | Значение |
|:--------:|-----------------|------------|----------------------------------------------------------------------------------------|
| 0 | PreloadNone | "none" | Медиа файл не должен быть предварительно загружен |
| 1 | PreloadMetadata | "metadata" | Предварительно загружаются только метаданные |
| 2 | PreloadAuto | "auto" | Весь медиафайл может быть загружен, даже если пользователь не должен его использовать. |
Значение по умолчанию PreloadAuto (2)
### Свойство "poster"
Свойство "poster" (константа Poster) типа string используется только для VideoPlayer.
Оно задает url картинки которая будет показываться пока видео не загрузится.
Если данное свойство не задано, то будет сначала показываться черный экран, а затем первый кадр (как только он загрузится).
### Свойства "video-width" и "video-height"
Свойства "video-width" (константа VideoWidth) и "video-height" (константа VideoHeight) типа float64 используется только для VideoPlayer.
Оно определяет ширину и высоту выводимого видео в пикселях.
Если "video-width" и "video-height" не заданы, то используются реальные размеры видео, при этом размеры контейнера в
который помещено видео игнорируются и видео может перекрывать другие элементы интерфейса. Поэтому рекомендуется задавать
эти величины, например, так
rui.Set(view, "videoPlayerContainer", rui.ResizeEvent, func(frame rui.Frame) {
rui.Set(view, "videoPlayer", rui.VideoWidth, frame.Width)
rui.Set(view, "videoPlayer", rui.VideoHeight, frame.Height)
})
Если задано только одно из свойств "video-width" или "video-height", то второе вычисляется на основе пропорций видео
### События
MediaPlayer имеет две группы событий:
1) имеет обработчик вида func(MediaPlayer) (также можно использовать func()). в эту группу входят следующие события
* "abort-event" (константа AbortEvent) - Срабатывает, когда ресурс загружен не полностью, но не в результате ошибки.
* "can-play-event" (константа CanPlayEvent) - Запускается, когда пользовательский агент может воспроизводить
мультимедиа, но оценивает, что загружено недостаточно данных для воспроизведения мультимедиа до его конца
без необходимости остановки для дальнейшей буферизации контента.
* "can-play-through-event" (константа CanPlayThroughEvent) - Запускается, когда пользовательский агент может воспроизводить мультимедиа,
и оценивает, что было загружено достаточно данных для воспроизведения мультимедиа до его конца, без необходимости
остановки для дальнейшей буферизации контента.
* "complete-event" (константа CompleteEvent) -
* "emptied-event" (константа EmptiedEvent) - Запускается, когда носитель становится пустым; например, когда носитель
уже загружен (или частично загружен)
* "ended-event" (константа EndedEvent) - Срабатывает, когда воспроизведение останавливается, когда достигнут конец носителя
или если дальнейшие данные недоступны.
* "loaded-data-event" (константа LoadedDataEvent) - Запускается, когда первый кадр носителя завершил загрузку.
* "loaded-metadata-event" (константа LoadedMetadataEvent) - Запускается, когда метаданные были загружены.
* "loadstart-event" (константа LoadStartEvent) - Запускается, когда браузер начал загружать ресурс.
* "pause-event" (константа PauseEvent) - Вызывается, когда обрабатывается запрос на приостановку воспроизведения,
и действие переходит в состояние паузы, чаще всего это происходит, когда вызывается метод Pause().
* "play-event" (константа PlayEvent) - Срабатывает, когда начинается воспроизведение медиа файла, например,
в результате использования метода Play()
* "playing-event" (константа PlayingEvent) - Запускается, когда воспроизведение готово начать после приостановки
или задержки из-за отсутствия данных.
* "progress-event" (константа ProgressEvent) - Периодически запускается, когда браузер загружает ресурс.
* "seeked-event" (константа SeekedEvent) - Запускается, когда скорость воспроизведения изменилась.
* "seeking-event" (константа SeekingEvent) - Запускается, когда начинается операция поиска.
* "stalled-event" (константа StalledEvent) - Запускается, когда пользовательский агент пытается извлечь данные мультимедиа,
но данные неожиданно не поступают.
* "suspend-event" (константа SuspendEvent) - Запускается, когда загрузка медиа-данных была приостановлена.
* "waiting-event" (константа WaitingEvent) - Срабатывает, когда воспроизведение остановлено из-за временной нехватки данных
2) имеет обработчик вида func(MediaPlayer, float64) (также можно использовать func(float64), func(MediaPlayer) и func()).
В эту группу входят события связанные с изменением парамеров плеера. В качестве второго аргумента передается
новое значение измененного параметра.
* "duration-changed-event" (константа DurationChangedEvent) - запускается, когда атрибут продолжительности был обновлён.
* "time-updated-event" (константа TimeUpdatedEvent) - запускается, когда текущее время было обновлено.
* "volume-changed-event" (константа VolumeChangedEvent) - запускается при изменении громкости.
* "rate-changed-event" (константа RateChangedEvent) - запускается, когда скорость воспроизведения изменилась.
Отдельное событие, не относящееся к этим двум группам, "player-error-event" (константа PlayerErrorEvent) срабатывает,
когда ресурс не может быть загружен из-за ошибки (например, ошибки сети).
Обработчик данного события имеет вида func(player MediaPlayer, code int, message string) (также можно использовать
func(int, string), func(MediaPlayer) и func()). Где аргумент "message" это сообщение об ошибке, "code" - код ошибки:
| Код ошибки | Константа | Значение |
|:----------:|-------------------------------|------------------------------------------------------------------------------|
| 0 | PlayerErrorUnknown | Неизвестная ошибка |
| 1 | PlayerErrorAborted | Извлечение связанного ресурса было прервано запросом пользователя. |
| 2 | PlayerErrorNetwork | Произошла какая-то сетевая ошибка, которая помешала успешному извлечению носителя, несмотря на то, что он был ранее доступен. |
| 3 | PlayerErrorDecode | Несмотря на то, что ранее ресурс был определён, как используемый, при попытке декодировать медиа ресурс произошла ошибка. |
| 4 | PlayerErrorSourceNotSupported | Связанный объект ресурса или поставщик мультимедиа был признан неподходящим. |
### Методы
MediaPlayer имеет ряд методов для управления параметрами плеера:
* Play() - запускает воспроизведение медиа файла;
* Pause() - ставит воспроизведение на паузу;
* SetCurrentTime(seconds float64) - устанавливает текущее время воспроизведения в секундах;
* CurrentTime() float64 - возвращает текущее время воспроизведения в секундах;
* Duration() float64 - возвращает длительность медиа файла в секундах;
* SetPlaybackRate(rate float64) - устанавливает скорость воспроизведения. Нормальная скорость равна 1.0;
* PlaybackRate() float64 - возвращает текущую скорость воспроизведения;
* SetVolume(volume float64) - устанавливает скорость громкость в диапазоне от 0 (тишина) до 1 (максимальная громкость);
* Volume() float64 - возвращает текущую громкость;
* IsEnded() bool - возвращает true если достигнут конец медиа файла;
* IsPaused() bool - возвращает true если воспроизведение поставлено на паузу.
Для быстрого доступа к этим методам имеются глобальные функции:
func MediaPlayerPlay(view View, playerID string)
func MediaPlayerPause(view View, playerID string)
func SetMediaPlayerCurrentTime(view View, playerID string, seconds float64)
func MediaPlayerCurrentTime(view View, playerID string) float64
func MediaPlayerDuration(view View, playerID string) float64
func SetMediaPlayerVolume(view View, playerID string, volume float64)
func MediaPlayerVolume(view View, playerID string) float64
func SetMediaPlayerPlaybackRate(view View, playerID string, rate float64)
func MediaPlayerPlaybackRate(view View, playerID string) float64
func IsMediaPlayerEnded(view View, playerID string) bool
func IsMediaPlayerPaused(view View, playerID string) bool
где view - корневой View, playerID - id of AudioPlayer or VideoPlayer
## Popup
Popup это интерфейс позволяющий отобразить произвольный View в виде всплывающего окна.
Для создания интерфейса Popup используется функция
NewPopup(view View, param Params) Popup
где view - View содержимого всплывающего окна (не может быть nil);
params - параметры всплывающего окна (может быть nil). В качестве параметров всплывающего окна, могут
использоваться как любые свойства View, так и ряд дополнительных свойств (они будут описаны ниже)
После создания Popup его необходимо отобразить. Для этого используется метод Show() интерфейса Popup.
Для упрощения кода можно использовать функцию ShowPopup, которая определена как
func ShowPopup(view View, param Params) Popup {
popup := NewPopup(view, param)
if popup != nil {
popup.Show()
}
return popup
}
Для закрытия всплывающего окна используется метод Dismiss() интерфейса Popup.
Помимо методов Show() и Dismiss() интерфейс Popup имеет следующие методы:
* Session() Session - возвращает текущую сессию;
* View() View - возвращает содержимое всплывающего окна.
### Заголовок Popup
Всплывающее окно может иметь заголовок. Для того чтобы добавить заголовок необходимо добавить текст заголовка.
Для этого используется свойство "title" (константа Title) которое может принимать два типа значений:
* string
* View
Для установления стиля заголовка используется свойство "title-style" (константа TitleStyle) типа string.
Стиль заголовка по умолчанию "ruiPopupTitle". Если вы хотите чтобы все ваши всплывающие окна имели одинаковый стиль,
для этого лучше не использовать свойство "title-style", а переопределить стиль "ruiPopupTitle".
Заголовок также может иметь кнопку закрытия окна. Для ее добавления к заголовку используется свойство "close-button" типа bool.
Установка этого свойства в "true" добавляет к заголовку кнопку закрытия окна (значение по умолчанию равно "false").
### Стрелка Popup
Всплывающее окно может иметь у одной из сторон стрелку. Стрелка задается с помощью свойства "arrow" (константа Arrow).
Свойство "arrow" может принимать следующие значения
| Значение | Константа | Расположение стрелки |
|:--------:|-------------|---------------------------------------------|
| 0 | NoneArrow | Нет стрелки (значение по умолчанию) |
| 1 | TopArrow | Стрелка у верхней стороны всплывающего окна |
| 2 | RightArrow | Стрелка у правой стороны всплывающего окна |
| 3 | BottomArrow | Стрелка у нижней стороны всплывающего окна |
| 4 | LeftArrow | Стрелка у левой стороны всплывающего окна |
Размеры стрелки задаются с помощью свойств "arrow-size" (константа ArrowSize) и "arrow-width" (константа ArrowWidth) типа SizeUnit.
Они задают длину ("arrow-size") и ширину ("arrow-width") стрелки. Если данные свойства не заданы то используются константы
"@ruiArrowSize" (значение по умолчанию 16px) и "@ruiArrowWidth" (значение по умолчанию 16px).
Выравнивание стрелки относительно всплывающего окна задается с помощью свойства "arrow-align" (константа ArrowAlign).
Свойство "arrow-align" может принимать следующие значения
| Значение | Константы | Выравнивание |
|:--------:|--------------------------|------------------------------------------------|
| 0 | TopAlign / LeftAlign | Выравнивание по верхнему / левому краю стороны |
| 1 | BottomAlign / RightAlign | Выравнивание по нижнему / правому краю стороны |
| 2 | CenterAlign | Выравнивание по центру (значение по умолчанию) |
Также для стрелки можно задать дополнительное смещение. Для этого используется свойств "arrow-offset" (константа ArrowOffset) типа SizeUnit.
Если значение свойства "arrow-align" равно TopAlign/LeftAlign, то смещение задается относительно верхней / левой стороны.
Если значение свойства "arrow-align" равно BottomAlign/RightAlign, то смещение задается относительно нижней / правой стороны.
Если значение свойства "arrow-align" равно CenterAlign, то смещение (может быть как положительным так и отрицательным) добавляется в виде отступа стрелки.
Т.е по центру выравнивается стрелка со смещением
Если "arrow-offset" не задано, то значением по умолчанию для "arrow-align" равного CenterAlign является 0.
Для других значений "arrow-align" значением по умолчанию является соответствующий радиус скругления угла всплывающего окна.
### Закрытие Popup
Как было сказано выше, для закрытия всплывающего окна используется метод Dismiss() интерфейса Popup.
Если к заголовку окна добавлена кнопка закрытия, то нажатие на нее автоматически вызывает метод Dismiss().
Переопределить поведение кнопки закрытия окна нельзя.
Если все же необходимо переопределить поведение этой кнопки, то это можно сделать создав кастомный заголовок и
создав в нем свою кнопку закрытия.
Существует еще один способ автоматического вызова метода Dismiss(). Это свойство "outside-close" (константа OutsideClose) типа bool.
Если это свойство установлено в "true", то клик мышью вне пределов всплывающего окна автоматически вызывает метод Dismiss().
Для отслеживания закрытия всплывающего окна используются событие "dismiss-event" (константа DismissEvent).
Оно возникает после того как Popup исчезнет с экрана.
Основной слушатель этого события имеет следующий формат:
func(Popup)
### Область кнопок
Часто во всплывающее окно необходимо добавить кнопки, такие как "OK", "Cancel" и т.п.
С помощью свойства "buttons" (константа Buttons) вы можете добавлять кнопки, которые будут располагаться внизу окна.
Свойству "buttons" можно присваивать следующие типы данных:
* PopupButton
* []PopupButton
Где структура PopupButton объявлена как
type PopupButton struct {
Title string
OnClick func(Popup)
}
где Title - текст кнопки, OnClick - функция вызываемая при нажатии на кнопку
По умолчанию кнопки выравниваются по правому краю окна. Однако это поведение можно переопределить.
Для этого используется свойство "buttons-align" (константа ButtonsAlign) типа int, которое может принимать следующие значения:
| Значение | Константа | Имя | Выравнивание |
|:--------:|--------------|-----------|------------------------------|
| 0 | LeftAlign | "left" | Выравнивание по левому краю |
| 1 | RightAlign | "right" | Выравнивание по правому краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по ширине |
Расстояние между кнопками задается с помощью константы "ruiPopupButtonGap" типа SizeUnit. Вы можете переопределить ее в своей теме.
### Выравнивание Popup
По умолчанию всплывающее окно располагается по центру окна браузера. Изменить это поведение можно с помощью свойств
"vertical-align" (константа VerticalAlign) и "horizontal-align" (константа HorizontalAlign) типа int.
Свойство "vertical-align" может принимать следующие значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|-------------------------------|
| 0 | TopAlign | "top" | Выравнивание по верхнему краю |
| 1 | BottomAlign | "bottom" | Выравнивание по нижнему краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по высоте |
Свойство "horizontal-align" может принимать следующие значения:
| Значение | Константа | Имя | Значение |
|:--------:|--------------|-----------|------------------------------|
| 0 | LeftAlign | "left" | Выравнивание по левому краю |
| 1 | RightAlign | "right" | Выравнивание по правому краю |
| 2 | CenterAlign | "center" | Выравнивание по центру |
| 3 | StretchAlign | "stretch" | Выравнивание по ширине |
Для сдвига окна может использоваться свойство "margin".
Например, организовать выпадающее окно привязанное к кнопке можно так
rui.ShowPopup(myPopupView, rui.Params{
rui.HorizontalAlign: rui.LeftAlign,
rui.VerticalAlign: rui.TopAlign,
rui.MarginLeft: rui.Px(myButton.Frame().Left),
rui.MarginTop: rui.Px(myButton.Frame().Bottom()),
})
### Стандартные Popup
В библиотеке rui уже реализованы некоторые стандартные всплывающие окна.
Для их отображения используются следующие функции
func ShowMessage(title, text string, session Session)
Данная функция выводит на экран сообщение с заголовком заданным в аргументе title и текстом сообщения заданном в аргументе text.
func ShowQuestion(title, text string, session Session, onYes func(), onNo func())
Данная функция выводит на экран сообщение с заданным заголовком и текстом и двумя кнопками "Yes" и "No".
При нажатии кнопки "Yes" сообщение закрывается и вызывается функция onYes (если она не nil).
При нажатии кнопки "No" сообщение закрывается и вызывается функция onNo (если она не nil).
func ShowCancellableQuestion(title, text string, session Session, onYes func(), onNo func(), onCancel func())
Данная функция выводит на экран сообщение с заданным заголовком и текстом и тремя кнопками "Yes", "No" и "Cancel".
При нажатии кнопки "Yes", "No" или "Cancel" сообщение закрывается и вызывается, соответственно, функция onYes,
onNo или onCancel (если она не nil).
func ShowMenu(session Session, params Params) Popup
Данная функция выводит на экран меню. Пункты меню задаются с помощью свойства Items.
Свойство идентично Items идентично одноименному свойству ListView.
С помощью свойства "popup-menu-result" (константа PopupMenuResult) задается функция вызываемая при выборе пункта меню.
Ее формат
func(int)
Пример меню
rui.ShowMenu(session, rui.Params{
rui.OutsideClose: true,
rui.Items: []string{"Item 1", "Item 2", "Item 3"},
rui.PopupMenuResult: func(index int) {
// ...
},
})
## Анимация
Библиотека поддерживает два вида анимации:
* Анимированное изменения значения свойства (далее "анимация перехода")
* Сценарий анимированного изменения одного или нескольких свойств (далее просто "сценарий анимации")
### Интерфейс Animation
Для задания параметров анимации используется интерфейс Animation. Он расширяет интерфейс Properties.
Интерфейс создается с помощью функции:
func NewAnimation(params Params) Animation
Часть свойств интерфейса Animation используется в обоих типах анимации, остальные используются
только в сценариях анимации.
Общими свойствами являются
| Свойство | Константа | Тип | По умолчанию | Описание |
|-------------------|----------------|---------|--------------|-------------------------------------------------|
| "duration" | Duration | float64 | 1 | Длительность анимации в секундах |
| "delay" | Delay | float64 | 0 | Длительность задержки перед анимации в секундах |
| "timing-function" | TimingFunction | string | "ease" | Функция изменения скорости анимации |
Свойства используемые только в сценариях анимации будут описаны ниже
#### Свойство "timing-function"
Свойство "timing-function" описывает в текстовом виде функция изменения скорости анимации. Функции
могут быть разделены на 2 вида: простые функции и функции с параметрами.
Простые функции
| Функция | Константа | Описание |
|---------------|-----------------|-------------------------------------------------------------------------------|
| "ease" | EaseTiming | скорость увеличивается к середине, а в конце замедляется. |
| "ease-in" | EaseInTiming | скорость вначале медленная, но в конце увеличивается. |
| "ease-out" | EaseOutTiming | скорость вначале быстрая, но быстро снижается. Большая часть медленная |
| "ease-in-out" | EaseInOutTiming | скорость вначале быстрая, но быстро снижается, а в конце снова увеличивается. |
| "linear" | LinearTiming | постоянная скорость |
И есть две функции с параметрами:
* "steps(N)" - дискретная функция, где N - целое число задающее количество шагов. Вы можете задавать
данную функцию или в виде текста или использую функцию:
func StepsTiming(stepCount int) string
Например
animation := rui.NewAnimation(rui.Params{
rui.TimingFunction: rui.StepsTiming(10),
})
эквивалентно
animation := rui.NewAnimation(rui.Params{
rui.TimingFunction: "steps(10)",
})
* "cubic-bezier(x1, y1, x2, y2)" - временная функция кубической кривой Безье. x1, y1, x2, y2 имеют тип float64.
x1 и x2 должны быть в диапазоне [0, 1]. Вы можете задавать данную функцию или в виде текста или использую функцию:
func CubicBezierTiming(x1, y1, x2, y2 float64) string
### Анимация перехода
Анимация перехода может применяться к свойствам типа: SizeUnit, Color, AngleUnit, float64 и составным свойствам
в составе которых имеются элементы перечисленных типов (например "shadow", "border" и т.д.).
При попытке применить анимацию к свойствам других типов (например, bool, string) ошибки не произойдет,
просто анимации не будет.
Анимация перехода бывает двух видов:
* однократная;
* постоянная;
Однократная анимация запускается с помощью функции SetAnimated интерфейса View. Данная функция имеет следующее
описание:
SetAnimated(tag string, value any, animation Animation) bool
Она присваивает свойству новое значение, при этом изменение происходит с использованием заданной анимации.
Например,
view.SetAnimated(rui.Width, rui.Px(400), rui.NewAnimation(rui.Params{
rui.Duration: 0.75,
rui.TimingFunction: rui.EaseOutTiming,
}))
Есть также глобальная функция для анимированного однократного изменения значения свойства дочернего View
func SetAnimated(rootView View, viewID, tag string, value any, animation Animation) bool
Постоянная анимация запускается каждый раз когда изменяется значение свойства. Для задания постоянной
анимации перехода используется свойство "transition" (константа Transition). В качества значения данному
Свойству присваивается rui.Params, где в качестве ключа должно быть имя свойства, а значение - интерфейс Animation.
Например,
view.Set(rui.Transition, rui.Params{
rui.Height: rui.NewAnimation(rui.Params{
rui.Duration: 0.75,
rui.TimingFunction: rui.EaseOutTiming,
},
rui.BackgroundColor: rui.NewAnimation(rui.Params{
rui.Duration: 1.5,
rui.Delay: 0.5,
rui.TimingFunction: rui.Linear,
},
})
Вызов функции SetAnimated не меняет значение свойства "transition".
Для получения текущего списка постоянных анимаций перехода используется функция
func GetTransition(view View, subviewID ...string) Params
Добавлять новые анимации перехода рекомендуется с помощью функции
func AddTransition(view View, subviewID, tag string, animation Animation) bool
Вызов данной функции эквивалентен следующему коду
transitions := rui.GetTransition(view, subviewID)
transitions[tag] = animation
rui.Set(view, subviewID, rui.Transition, transitions)
#### События анимации перехода
Анимация перехода генерирует следующие события
| Событие | Константа | Описание |
|---------------------------|-----------------------|----------------------------------------------------|
| "transition-run-event" | TransitionRunEvent | Цикл анимации перехода стартовал, т.е. до задержки |
| "transition-start-event" | TransitionStartEvent | Анимация перехода действительно стартовала, т.е. после задержки |
| "transition-end-event" | TransitionEndEvent | Анимация перехода закончена |
| "transition-cancel-event" | TransitionCancelEvent | Анимация перехода прервана |
Основной слушатель данных событий имеет следующий формат:
func(View, string)
где второй аргумент это имя свойства.
Можно также использовать слушателя следующего формата:
func()
func(string)
func(View)
Получить списки слушателей событий анимации перехода с помощью функций:
func GetTransitionRunListeners(view View, subviewID ...string) []func(View, string)
func GetTransitionStartListeners(view View, subviewID ...string) []func(View, string)
func GetTransitionEndListeners(view View, subviewID ...string) []func(View, string)
func GetTransitionCancelListeners(view View, subviewID ...string) []func(View, string)
### Сценарий анимации
Сценарий анимации описывает более сложную анимацию, по сравнению с анимацией перехода. Для этого
в Animation добавляются дополнительные свойства:
#### Свойство "property"
Свойство "property" (константа PropertyTag) описывает изменения свойств. В качестве значения ему присваивается
[]AnimatedProperty. Структура AnimatedProperty описывает изменение одного свойства. Она описана как
type AnimatedProperty struct {
Tag string
From, To any
KeyFrames map[int]any
}
где Tag - имя свойства, From - начальное значение свойства, To - конечное значение свойства,
KeyFrames - промежуточные значения свойства (ключевые кадры).
Обязательными являются поля Tag, From, To. Поле KeyFrames опционально, может быть nil.
Поле KeyFrames описывает ключевые кадры. В качестве ключа типа int используется процент времени
прошедший с начала анимации (именно начала самой анимации, время заданное свойством "delay" исключается).
А значение это значение свойства в данный момент времени. Например
prop := rui.AnimatedProperty {
Tag: rui.Width,
From: rui.Px(100),
To: rui.Px(200),
KeyFrames: map[int]interface{
90: rui.Px(220),
}
}
В данном примере свойство "width" 90% времени будет увеличиваться со 100px до 220px. В оставшиеся
10% времени - будет уменьшаться с 220px до 200px.
Свойству "property" присваивается []AnimatedProperty, а значит можно анимировать сразу несколько свойств.
Вы должны задать хотя бы один элемент "property", иначе анимация будет игнорироваться.
#### Свойство "id"
Свойство "id" (константа ID) типа string задает идентификатор анимации. Передается в качестве параметра слушателю
события анимации. Если вы не планируете использовать слушателей событий для анимации, то данное свойство
можно не задавать.
#### Свойство "iteration-count"
Свойство "iteration-count" (константа IterationCount) типа int задает количество повторений анимации.
Значение по умолчанию 1. Значение меньше нуля заставляет повторяться анимацию бесконечно.
#### Свойство "animation-direction"
Свойство "animation-direction" (константа AnimationDirection) типа int устанавливает, должна ли анимация
воспроизводиться вперед, назад или поочередно вперед и назад между воспроизведением
последовательности вперед и назад. Может принимать следующие значения:
| Значение | Константа | Описание |
|:--------:|---------------------------|-----------------------------------------------------------------------|
| 0 | NormalAnimation | Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. |
| 1 | ReverseAnimation | Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается. |
| 2 | AlternateAnimation | Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее |
| 3 | AlternateReverseAnimation | Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное |
#### Запуск анимации
Для запуска сценария анимации необходимо созданный Animation интерфейс присвоить свойству "animation"
(константа AnimationTag). Если View уже отображается на экране, то анимация запускается сразу (с учетом
заданной задержки), в противоположном случае анимация запускается как только View отобразится на экране.
Свойству "animation" можно присваивать Animation и []Animation, т.е. можно запускать несколько анимаций
одновременно для одного View
Пример,
prop := rui.AnimatedProperty {
Tag: rui.Width,
From: rui.Px(100),
To: rui.Px(200),
KeyFrames: map[int]interface{
90: rui.Px(220),
}
}
animation := rui.NewAnimation(rui.Params{
rui.PropertyTag: []rui.AnimatedProperty{prop},
rui.Duration: 2,
rui.TimingFunction: LinearTiming,
})
rui.Set(view, "subview", rui.AnimationTag, animation)
#### Свойство "animation-paused"
Свойство "animation-paused" (константа AnimationPaused) типа bool позволяет приостановить анимацию.
Для того чтобы поставить анимацию на паузу необходимо данному свойству присвоить значение true, а
для возобновления - false.
Внимание. В момент присваивания значения свойству "animation" свойство "animation-paused" сбрасывается в false.
#### События анимации
Сценарий анимации генерирует следующие события
| Событие | Константа | Описание |
|-----------------------------|-------------------------|----------------------------------|
| "animation-start-event" | AnimationStartEvent | Анимация стартовала |
| "animation-end-event" | AnimationEndEvent | Анимация закончена |
| "animation-cancel-event" | AnimationCancelEvent | Анимация прервана |
| "animation-iteration-event" | AnimationIterationEvent | Началась новая итерация анимации |
Внимание! Не все браузеры поддерживают событие "animation-cancel-event". В данное время это только
Safari и Firefox.
Основной слушатель данных событий имеет следующий формат:
func(View, string)
где второй аргумент это id анимации.
Можно также использовать слушателя следующего формата:
func()
func(string)
func(View)
Получить списки слушателей событий анимации с помощью функций:
func GetAnimationStartListeners(view View, subviewID ...string) []func(View, string)
func GetAnimationEndListeners(view View, subviewID ...string) []func(View, string)
func GetAnimationCancelListeners(view View, subviewID ...string) []func(View, string)
func GetAnimationIterationListeners(view View, subviewID ...string) []func(View, string)
## Сессия
Когда клиент создает соединение с сервером, то для этого соединения создается интерфейс Session.
Этот интерфейс используется для взаимодействия с клиентом.
Получить текущий интерфейс Session можно вызвав метод Session() интерфейса View.
При создании сессии она получает пользовательскую реализацию интерфейса SessionContent.
type SessionContent interface {
CreateRootView(session rui.Session) rui.View
}
Данный интерфейс создается функцией передаваемой в качестве параметра при создании приложения
функцией NewApplication.
Кроме обязательной функции CreateRootView() SessionContent может иметь несколько опциональных
функций:
OnStart(session rui.Session)
OnFinish(session rui.Session)
OnResume(session rui.Session)
OnPause(session rui.Session)
OnDisconnect(session rui.Session)
OnReconnect(session rui.Session)
Сразу после создания сессии вызывается функция CreateRootView. После создания корневого View
вызывается функцию OnStart (если она реализована)
Функция OnFinish (если она реализована) вызывается когда пользователь закрывает страницу приложения в браузере
Функция OnPause вызывается когда страница приложения в браузере клиента становится неактивной.
Это происходит если пользователь переключается на другую вкладку/окно браузера, сворачивает браузер
или переключается на другое приложение.
Функция OnResume вызывается когда страница приложения в браузере клиента становится активной. Так же
эта функция вызывается сразу после OnStart
Функция OnDisconnect вызывается если сервер теряет соединение с клиентом. Это происходит либо при
обрыве связи.
Функция OnReconnect вызывается после того как сервер восстанавливает соединение с клиентом.
Интерфейс Session предоставляет следующие методы:
* DarkTheme() bool - возвращает true, если используется темная тема. Определяется настройками на стороне клиента
* TouchScreen() bool - возвращает true, если клиент поддерживает touch screen
* PixelRatio() float64 - возвращает размер логического пикселя, т.е. сколько физических пикселей образуют логический. Например, для iPhone это значение будет 2 или 3
* TextDirection() int - возвращает направление письма: LeftToRightDirection (1) или RightToLeftDirection (2)
* Constant(tag string) (string, bool) - возвращает значение константы
* Color(tag string) (Color, bool) - возвращает значение константы цвета
* SetCustomTheme(name string) bool - устанавливает тему заданным именем в качестве текущей. Возвращает false если тема с таким именем не найдена. Темы с именем "" это тема по умолчанию.
* Language() string - возвращает текущий язык интерфейса, например: "en", "ru", "ptBr"
* SetLanguage(lang string) - устанавливает текущий язык интерфейса (см. "Поддержка нескольких языков")
* GetString(tag string) (string, bool) - возвращает текстовое текстовое значение для текущего языка
(см. "Поддержка нескольких языков")
* Content() SessionContent - возвращает текущий экземпляр SessionContent
* RootView() View - возвращает корневой View сессии
* SetTitle(title string) - устанавливает текст заголовка окна/закладки браузера.
* SetTitleColor(color Color) устанавливает цвет панели навигации браузера. Поддерживается только в Safari и Chrome для Android.
* Get(viewID, tag string) any - возвращает значение свойства View с именем tag. Эквивалентно
rui.Get(session.RootView(), viewID, tag)
* Set(viewID, tag string, value any) bool - устанавливает значение свойства View с именем tag.
rui.Set(session.RootView(), viewID, tag, value)
* DownloadFile(path string) - загружает (сохраняет) на стороне клиента файл расположенный по заданному пути на сервере.
Используется когда клиенту надо передать с сервера какой-либо файл.
* DownloadFileData(filename string, data []byte) - загружает (сохраняет) на стороне клиента файл с заданным именем и
заданным содержимым. Обычно используется для передачи файла сгенерированного в памяти сервера.
## Формат описания ресурсов
Ресурсы приложения (темы, View, переводы) могут быть описаны в виде текста (utf-8). Данный текст помещается
в файл с расширением ".rui".
Корневым элементом файла ресурса должен быть объект. Он имеет следующий формат:
<имя объекта> {
<данные объекта>
}
если имя объекта содержит следующие символы: '=', '{', '}', '[', ']', ',', ' ', '\t', '\n', '\'', '"',
'`', '/' и любые пробелы, то имя объекта необходимо брать в кавычки. Если эти символы не используются,
то кавычки не обязательны.
Можно использовать три вида кавычек:
* "…" - эквивалентна такой же строке в языке go, т.е. внутри можно использовать escape последовательности:
\n, \r, \\, \", \', \0, \t, \x00, \u0000
* '…' - аналогична строке "…"
* `…` - эквивалентна такой же строке в языке go, т.е. текст внутри этой строки остается как есть. Внутри
нельзя использовать символ `.
Данные объекта представляют собой множество пар <ключ> = <значение> разделенные запятой.
Ключ это строка текста. Правила оформления такие же как и у имени объекта.
Значения могут быть 3 видов:
* Простое значение - строка текста оформленная по тем же правилам, что и имя объекта
* Объект
* Массив значений
Массив значений заключается в квадратные скобки. Элементы массива разделяются запятыми.
Элементами могут быть простые значения или объекты.
В текста могут быть комментарии. Правила оформления такие же как в языке go: // и /* … */
Пример:
GridLayout {
id = gridLayout, width = 100%, height = 100%,
cell-width = "150px, 1fr, 30%", cell-height = "25%, 200px, 1fr",
content = [
// Subviews
TextView { row = 0, column = 0:1,
text = "View 1", text-align = center, vertical-align = center,
background-color = #DDFF0000, radius = 8px, padding = 32px,
border = _{ style = solid, width = 1px, color = #FFA0A0A0 }
},
TextView { row = 0:1, column = 2,
text = "View 2", text-align = center, vertical-align = center,
background-color = #DD00FF00, radius = 8px, padding = 32px,
border = _{ style = solid, width = 1px, color = #FFA0A0A0 }
},
TextView { row = 1:2, column = 0,
text = "View 3", text-align = center, vertical-align = center,
background-color = #DD0000FF, radius = 8px, padding = 32px,
border = _{ style = solid, width = 1px, color = #FFA0A0A0 }
},
TextView { row = 1, column = 1,
text = "View 4", text-align = center, vertical-align = center,
background-color = #DDFF00FF, radius = 8px, padding = 32px,
border = _{ style = solid, width = 1px, color = #FFA0A0A0 }
},
TextView { row = 2, column = 1:2,
text = "View 5", text-align = center, vertical-align = center,
background-color = #DD00FFFF, radius = 8px, padding = 32px,
border = _{ style = solid, width = 1px, color = #FFA0A0A0 }
},
]
}
Для работы с текстовыми ресурсами используется интерфейс DataNode
type DataNode interface {
Tag() string
Type() int
Text() string
Object() DataObject
ArraySize() int
ArrayElement(index int) DataValue
ArrayElements() []DataValue
}
Данный элемент описывает базовый элемент данных.
Метод Tag возвращает значение ключа.
Тип данных возвращается методом Type. Он возвращает одно из 3 значений
| Значение | Константа | Тип данных |
|:--------:|------------|--------------------|
| 0 | TextNode | Простое значение |
| 1 | ObjectNode | Объект |
| 2 | ArrayNode | Массив |
Для получения простого значения используется метод Text.
Для получения объекта используется метод Object.
Для получения элементов массива используются методы ArraySize, ArrayElement и ArrayElements
## Ресурсы
Ресурсы (картинки, темы, переводы и т.д.) с которыми работает приложение должны размещаться по
поддиректориям внутри одного директория ресурсов. Ресурсы должны располагаться в следующих поддиректориях:
* images - в данную поддиректорию помещаются все изображения. Здесь можно делать вложенные поддиректории.
В этом случае их надо включать в имя файла. Например, "subdir/image1.png"
* themes - в данную поддиректорию помещаются темы приложения (см. ниже)
* views - в данную поддиректорию помещаются описания View
* strings - в данную поддиректорию помещаются переводы текстовых ресурсов (см. Поддержка нескольких языков)
* raw - в данную поддиректорию помещаются все остальные ресурсы: звуки, видео, двоичные данные и т.п.
Директория с ресурсами может или включаться в исполняемый файл или располагаться отдельно.
Если ресурсы необходимо включить в исполняемый файл, то имя директории должно быть "resources" и
подключаться она должны следующим образом:
import (
"embed"
"github.com/anoshenko/rui"
)
//go:embed resources
var resources embed.FS
func main() {
rui.AddEmbedResources(&resources)
app := rui.NewApplication("Hello world", createHelloWorldSession)
app.Start("localhost:8000")
}
Если ресурсы поставляются в виде отдельной директории, то ее необходимо зарегистрировать
с помощью функции SetResourcePath до создания Application:
func main() {
rui.SetResourcePath(path)
app := rui.NewApplication("Hello world", createHelloWorldSession)
app.Start("localhost:8000")
}
## Изображения для экранов с разной плотностью пикселей
Если вам необходимо добавить в ресурсы отдельные изображения для экранов с разной плотностью пикселей,
то это делается в стиле iOS. Т.е. к имени файла добавляется '@<плотность>x'. Например
image@2x.png
image@3x.jpg
image@1.5x.gif
Например, у вас есть изображения для трех плотностей: image.png, image@2x.png и image@3x.png.
В этом случае полю "src" ImageView вы присваиваете только значение "image.png". Библиотека
сама найдет остальные в директории "images" и передаст клиенту изображение с
требуемой плотностью
## Темы
Тема включает в себя три вида данных:
* константы
* константы цвета
* Стили View
Темы оформляются в виде rui файла и помещаются в папку themes.
Корневым объектом темы является объект с именем 'theme'. Данный объект может содержать следующие свойства:
* name - текстовое свойство задающее имя темы. Если данное свойство не задано или оно равно пустой строке,
то это тема по умолчанию.
* constants - свойство-объект определяющий константы. Имя объекта может быть любым. Рекомендуется использовать "_".
Объект может иметь любое количество текстовых свойств задающих пару "имя константы" = "значение".
В данном разделе помещаются константы типа SizeUnit, AngleUnit, текстовые и числовые. Для того чтобы
присвоить константу какому либо свойству View надо свойству присвоить имя константы добавив вначале символ '@'.
Например
theme {
constants = _{
defaultPadding = 4px,
buttonPadding = @defaultPadding,
angle = 30deg,
}
}
rui.Set(view, "subView", rui.Padding, "@defaultPadding")
* constants:touch - свойство-объект определяющий константы используемые только для touch screen.
Например, как сделать отступы больше на touch screen:
theme {
constants = _{
defaultPadding = 4px,
},
constants:touch = _{
defaultPadding = 12px,
},
}
* colors - свойство-объект определяющий цветовые константы для светлой темы оформления (тема по умолчанию).
Объект может иметь любое количество текстовых свойств задающих пару "имя цвета" = "цвет". Аналогично
константам, при присваивании необходимо вначале имени цвета добавить '@'. Например
theme {
colors = _{
textColor = #FF101010,
borderColor = @textColor,
backgroundColor = white,
}
}
rui.Set(view, "subView", rui.TextColor, "@textColor")
Имена цветов, такие как "black", "white", "red" и т.д., используются без символа '@'. При этом вы можете
задавать цветовые константы с такими же именами. Например
theme {
colors = _{
red = blue,
}
}
rui.Set(view, "subView", rui.TextColor, "@red") // blue text
rui.Set(view, "subView", rui.TextColor, "red") // red text
* colors:dark - свойство-объект определяющий цветовые константы для темной темы оформления
* styles - массив общих стилей. Каждый элемент массива должен быть объектом. Имя объекта является
именем стиля. Например,
theme {
styles = [
demoPage {
width = 100%,
height = 100%,
cell-width = "1fr, auto",
},
demoPanel {
width = 100%,
height = 100%,
orientation = start-to-end,
},
]
}
Для использования стилей у View есть два текстовых свойства "style" (константа Style) и "style-disabled"
(константа StyleDisabled). Свойству "style" присваивается имя свойства которое применяется ко View при
значении свойства "disabled" равного false. Свойству "style-disabled" присваивается имя свойства
которое применяется ко View при значении свойства "disabled" равного true. Если "style-disabled"
не определен, то свойство "style" используется в обоих режимах.
Внимание! Символ '@' к имени стиля добавлять НЕ НАДО. Если вы добавите символ '@' к имени, то имя
стиля будет извлекаться из одноименной константы. Например
theme {
constants = _{
@demoPanel = demoPage
},
styles = [
demoPage {
width = 100%,
height = 100%,
cell-width = "1fr, auto",
},
demoPanel {
width = 100%,
height = 100%,
orientation = start-to-end,
},
]
}
rui.Set(view, "subView", rui.Style, "demoPanel") // style == demoPanel
rui.Set(view, "subView", rui.Style, "@demoPanel") // style == demoPage
Помимо общих стилей можно задать стили для отдельных режимов работы. Для этого к имени "styles" добавляются
следующие модификаторы:
* ":portrait" или ":landscape" - соответственно стили для портретного или ландшафтного режима программы.
Внимание имеется ввиду соотношение сторон окна программы, а не экрана.
* ":width<размер>" - стили для экрана ширина которого не превышает заданный размер в логических пикселях.
* ":height<размер>" - стили для экрана высота которого не превышает заданный размер в логических пикселях.
Например
theme {
styles = [
demoPage {
width = 100%,
height = 100%,
cell-width = "1fr, auto",
},
demoPage2 {
row = 0,
column = 1,
}
],
styles:landscape = [
demoPage {
width = 100%,
height = 100%,
cell-height = "1fr, auto",
},
demoPage2 {
row = 1,
column = 0,
}
],
styles:portrait:width320 = [
samplePage {
width = 100%,
height = 50%,
},
]
}
## Стандартные константы и стили
В библиотеке определен ряд констант и стилей. Вы их можете переопределять в своих темах.
Системные стили которые вы можете переопределять:
| Имя стиля | Описание |
|---------------------|-----------------------------------------------------------------------------|
| ruiApp | Данный стиль используется для назначения стиля текста (шрифт, размер и т.д.) по умолчанию |
| ruiView | Стиль View по умолчанию |
| ruiArticle | Стиль используемый если свойство "semantics" установлено в "article" |
| ruiSection | Стиль используемый если свойство "semantics" установлено в "section" |
| ruiAside | Стиль используемый если свойство "semantics" установлено в "aside" |
| ruiHeader | Стиль используемый если свойство "semantics" установлено в "header" |
| ruiMain | Стиль используемый если свойство "semantics" установлено в "main" |
| ruiFooter | Стиль используемый если свойство "semantics" установлено в "footer" |
| ruiNavigation | Стиль используемый если свойство "semantics" установлено в "navigation" |
| ruiFigure | Стиль используемый если свойство "semantics" установлено в "figure" |
| ruiFigureCaption | Стиль используемый если свойство "semantics" установлено в "figure-caption" |
| ruiButton | Стиль используемый если свойство "semantics" установлено в "button" |
| ruiParagraph | Стиль используемый если свойство "semantics" установлено в "paragraph" |
| ruiH1 | Стиль используемый если свойство "semantics" установлено в "h1" |
| ruiH2 | Стиль используемый если свойство "semantics" установлено в "h2" |
| ruiH3 | Стиль используемый если свойство "semantics" установлено в "h3" |
| ruiH4 | Стиль используемый если свойство "semantics" установлено в "h4" |
| ruiH5 | Стиль используемый если свойство "semantics" установлено в "h5" |
| ruiH6 | Стиль используемый если свойство "semantics" установлено в "h6" |
| ruiBlockquote | Стиль используемый если свойство "semantics" установлено в "blockquote" |
| ruiCode | Стиль используемый если свойство "semantics" установлено в "code" |
| ruiTable | Стиль TableView по умолчанию |
| ruiTableHead | Стиль заголовка TableView по умолчанию |
| ruiTableFoot | Стиль итого TableView по умолчанию |
| ruiTableRow | Стиль строки TableView по умолчанию |
| ruiTableColumn | Стиль колонки TableView по умолчанию |
| ruiTableCell | Стиль ячейки TableView по умолчанию |
| ruiDisabledButton | Стиль Button если свойство "disabled" установлено в true |
| ruiCheckbox | Стиль Checkbox |
| ruiListItem | Стиль пункта ListView |
| ruiListItemSelected | Стиль выбранного пункта ListView когда ListView не владеет фокусом |
| ruiListItemFocused | Стиль выбранного пункта ListView когда ListView владеет фокусом |
| ruiPopup | Стиль всплывающего окна |
| ruiPopupTitle | Стиль заголовка всплывающего окна |
| ruiMessageText | Стиль текста всплывающего окна (Message, Question) |
| ruiPopupMenuItem | Стиль пункта всплывающего меню |
Системные цвета которые вы можете переопределять:
| Имя константы цвета | Описание |
|----------------------------|----------------------------------------------------|
| ruiBackgroundColor | Цвет фона |
| ruiTextColor | Цвет текста |
| ruiDisabledTextColor | Цвет запрещенного текста |
| ruiHighlightColor | Цвет подсветки |
| ruiHighlightTextColor | Цвет подсвеченного текста |
| ruiButtonColor | Цвет кнопки |
| ruiButtonActiveColor | Цвет кнопки в фокусе |
| ruiButtonTextColor | Цвет текста кнопки |
| ruiButtonDisabledColor | Цвет запрещенной кнопки |
| ruiButtonDisabledTextColor | Цвет текста запрещенной кнопки |
| ruiSelectedColor | Цвет фона неактивного выбранного пункта ListView |
| ruiSelectedTextColor | Цвет текста неактивного выбранного пункта ListView |
| ruiPopupBackgroundColor | Цвет фона всплывающего окна |
| ruiPopupTextColor | Цвет текста всплывающего окна |
| ruiPopupTitleColor | Цвет фона заголовка всплывающего окна |
| ruiPopupTitleTextColor | Цвет текста заголовка всплывающего окна |
| ruiTooltipBackground | Цвет фона всплывающей подсказки |
| ruiTooltipTextColor | Цвет текста всплывающей подсказки |
| ruiTooltipShadowColor | Цвет тени всплывающей подсказки |
Константы которые вы можете переопределять:
| Имя константы | Описание |
|------------------------------|-----------------------------------------------|
| ruiButtonHorizontalPadding | Горизонтальный отступ внутри кнопки |
| ruiButtonVerticalPadding | Вертикальный отступ внутри кнопки |
| ruiButtonMargin | Внешний отступ кнопки |
| ruiButtonRadius | Радиус скругления углов кнопки |
| ruiButtonHighlightDilation | Ширина внешней рамки активной кнопки |
| ruiButtonHighlightBlur | Размытие рамки активной кнопки |
| ruiCheckboxGap | Разрыв между checkbox и содержимым |
| ruiListItemHorizontalPadding | Горизонтальный отступ внутри пункта ListView |
| ruiListItemVerticalPadding | Вертикальный отступ внутри пункта ListView |
| ruiPopupTitleHeight | Высота заголовка всплывающего окна |
| ruiPopupTitlePadding | Внутренний отступ заголовка всплывающего окна |
| ruiPopupButtonGap | Разрыв между кнопками всплывающего окна |
## Поддержка нескольких языков
Если вы хотите добавить в программу поддержку нескольких языков, то необходимо поместить в папку "strings" ресурсов
файлы с переводом. Файлы перевода должны иметь расширение "rui" и следующий формат
strings {
<язык 1> = _{
<Исходный текст 1> = <Перевод 1>,
<Исходный текст 2> = <Перевод 2>,
…
},
<язык 2> = _{
<Исходный текст 1> = <Перевод 1>,
<Исходный текст 2> = <Перевод 2>,
…
},
…
}
Если перевод на каждый язык помещается в отдельный файл, то можно использовать следующий формат
strings:<язык> {
<Исходный текст 1> = <Перевод 1>,
<Исходный текст 2> = <Перевод 2>,
…
}
Например, если все переводы в одном файле strings.rui
strings {
ru = _{
"Yes" = "Да",
"No" = "Нет",
},
de = _{
"Yes" = "Ja",
"No" = "Nein",
},
}
Если в разных. Файл ru.rui
strings:ru {
"Yes" = "Да",
"No" = "Нет",
}
Файл de.rui
strings:de {
"Yes" = "Ja",
"No" = "Nein",
}
Перевод можно также разбивать на несколько файлов.
Переводы автоматически подставляются во всех View.
Однако если вы рисуете текст в CanvasView, то вы должны запрашивать перевод сами. Для этого в интерфейсе Session
есть метод:
GetString(tag string) (string, bool)
Если перевода данной строки нет, то метод вернет исходную строку и false в качестве второго параметра.
Получить текущий язык можно с помощью метода Language() интерфейса Session. Текущий язык определяется настройками
браузера пользователя. Поменять язык сессии можно с помощью метода SetLanguage(lang string) интерфейса Session.
Reference in New Issue View Git Blame Copy Permalink