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

The if tag displays content conditionally based on the provided expression being true.

When combined with the else tag the if tag can also show content if the provided expression is false.

The else tag can optionally have an expression provided (e.g. "Шаблон:Else expression2"), giving it "elseif" functionality.

Example 1: A simple if tag

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: If and else tags combined

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: If and multiple else tags combined

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.