NanoUi

Тихо! Идёт работа!
Статья или раздел находится в процессе написания и использовать её на сервере необходимо с осторожностью, информация может быть неточной. Вы можете помочь с её заполнением.

Код Dream Maker

Мы начнём с создания простейшего NanoUi. Чтобы понять как писать индусский код оно работает.
Для начала создадим простейший интерфейс для объекта "womdinger".

Вот файл нашего объекта:

/obj/item/device/wombdinger
       name = "womdinger"
       desc = "It's some kind of crude alien device."
       icon = 'icons/obj/wombdinger.dmi'
       icon_state = "0"

Создадим для него прок attack_self куда мы будем передавать, как mob, того кто использовал предмет.

Файл теперь выглядит так:

/obj/item/device/wombdinger
       name = "womdinger"
       desc = "It's some kind of crude alien device."
       icon = 'icons/obj/wombdinger.dmi'
       icon_state = "0"
/obj/item/device/wombdinger/attack_self(mob/user as mob)

Теперь чтобы открыть NanoUi нужно поместить в attack_self прок вызова Ui, то есть ui_interact, которому нужно передать пользователя.

Файл теперь выглядит так:

/obj/item/device/wombdinger
       name = "womdinger"
       desc = "It's some kind of crude alien device."
       icon = 'icons/obj/wombdinger.dmi'
       icon_state = "0"
/obj/item/device/wombdinger/attack_self(mob/user as mob)
       ui_interact(user)

Теперь нужно создать сам прок ui_interact, создадим его в этом же файле:

/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)

Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса.

Массив data передаёт значения в нужный темплейт. О темплейтах позже.

/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
       var/list/data = list()
       // Добавим простые данные в массив
       data["myName"] = name
       data["myDesc"] = desc
       data["someString"] = "I am a string."
       data["aNumber"] = 123
       
       data["assocList"] = list("key1" = "Value1", "key2" = "Value2")
       
       // Обратный слэш говорит компилятору игнорировать перенос строки, полезно для улучшения читабельности кода.
       data["arrayOfAssocLists"] = list(\ 
           list("key1" = "ValueA1", "key2" = "ValueA2"),\
           list("key1" = "ValueB1", "key2" = "ValueB2"),\
           list("key1" = "ValueC1", "key2" = "ValueC2")
       )
       
       data["emptyArray"] = list()
       
       // обновляет ui с данными переданными данными если они переданы, возврашает null если ui не найдено, или ui не передаётся, или если force_open == 1 или true
       ui = nanomanager.try_update_ui(user, src, ui_key, ui, data, force_open)	
       //Если ui не открыт то мы открываем его:
       if (!ui)
           // Список параметров ui можно найти в \code\modules\nano\nanoui.dm
           ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)
           // Если ui открыт первый раз то мы используем эти данные:
           ui.set_initial_data(data)		
           // Открываем новое окно ui
           ui.open()

Две важные вещи в коде выше это data, а точнее список ассоциаций и создание NanoUi: ("ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)")

Первые три параметра nanoui никогда не меняются user(пользователь), src(цель пользователя), ui_key(ui ключ(уточнить)).

Остальные четыре параметра это темплейт который будет использоваться, заголовок окна, ширина и высота:

Темплейт должен именоваться именем файла в \nano\templates\

Ширина - это ширина как ни странно окна ui в пикселях.

Высота - высота окна ui в пикселях

Это всё что нам нужно в DM файле, прейдём к темплейтам.

Создаём темплейт и учим HTML

NanoUI разделяет разметку отображения и код логики (файлы DM) и помещает его в файлы шаблонов (.tmpl). Файлы шаблонов - это в основном HTML-документы с разметкой, добавленной для динамических элементов, такие как кнопки.

В предыдущем разделе мы настроили наш файл womdinger.dm. В этом файле, в рамках процедуры ui_interact, имеется ссылка на файл «womdinger.tmpl». Нам нужно создать этот файл в папке \nano\templates\

Примечание: начиная с последнего обновления библиотеки NanoUI больше нет необходимости добавлять файлы шаблонов в клиентский процесс send_resources, поскольку это обрабатывается автоматически.

Теперь создадим темплейт кода для womdinger.tmpl:

Тихо! Идёт работа!
Статья или раздел находится в процессе написания и использовать её на сервере необходимо с осторожностью, информация может быть неточной. Вы можете помочь с её заполнением.

Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.).

Стиль по умолчанию для шаблона предоставляется файлом shared.css в папке /nano/css

Вот и все, самый простой пользовательский интерфейс, который вы можете создать в NanoUI. В следующем разделе мы рассмотрим использование дополнительных тегов разметки для динамического содержимого.

Спец тэги разметки темплейтов

Специальный тэги разметки используются для добавления в темплейт динамических элементов зависящих от .dm части кода.

Тэг вывода

Формат:

    { {:data.variable}}

Тэг вывода выводит на окно значение переменной как сроку

Пример 1:

В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:

    data["someString"] = "I am a string" 

И в womdinger.tmpl мы запрашиваем доступ к data с ключём:

    { {:data.someString}} 

Когда интерфейс прогрузится, тэг будет прогружен как:

    I am a string.

I am a string.

Пример 2:

В womdinger.dm, в ui_interact, мы делаем список асоциаций:

data["assocList"] = list("key1" = "Value1", "key2" = "Value2") 

Вы можете получать доступ к элементам списка используя точку (.):

{{:data.assocList.key1}} and {{:data.assocList.key2}} 

Когда интерфейс прогрузится, тэг будет заменён на:

Value1 and Value2

Тэг If

Формат:

{ {if expression}} <expression true content> { {/if}} { {if expression}} <expression true content> { {else}} <expression false content> { {/if}} { {if expression1}} <expression1 true content> { {else expression2}} <expression2 true content> { {/if}} 

Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите { {if data.is_prog}}, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется).

Комбинируя if и тэг else можно отображать другую информацию если выражение равно True.

"{ {else expression2}}"), выдача выражения тэгу else даёт тэгу else функционал elseif

Example 1:

Template example:

{ {if data.aNumber}} data.aNumber is set (not null) and is positive { {/if} 

When the UI is rendered the tag will have been replaced with:

data.aNumber is set (not null) and is positive 

Because data.aNumber is set (not null) and is positive (it's value is 123).

Example 2:

Template example:

{ {if data.someString == "Who goes there?"}} Some string is "Who goes there?" { {else}} Some string is not "Who goes there?" { {/if}

When the UI is rendered the tag will have been replaced with:

Some string is not "Who goes there?" 

Because the expression provided (someString == "Who goes there?") is not true.

Example 3:

Template example:

{ {if data.aNumber < 50}} data.aNumber is less than 50 { {else data.aNumber < 100}} data.aNumber is less than 100 { {else data.aNumber < 150}} data.aNumber is less than 150 { {else}} None of the expressions above are true. { {/if}

When the UI is rendered the tag will have been replaced with:

data.aNumber is less than 150 

Because the expression provided to the second else tag (data.aNumber < 150) is true.