NanoUi: различия между версиями

Материал из Infinity Project
Перейти к навигации Перейти к поиску
Строка 114: Строка 114:
 
Пример 1:
 
Пример 1:
  
In womdinger.dm, under the ui_interact proc, we set some text to the "someString" key:
+
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:
 +
 
 
<pre>
 
<pre>
 
     data["someString"] = "I am a string"  
 
     data["someString"] = "I am a string"  
 
</pre>
 
</pre>
And in the womdinger.tmpl template we access that data with the following tag:
+
И в womdinger.tmpl мы запрашиваем доступ к data с ключём:
 
<pre>
 
<pre>
 
     { {:data.someString}}  
 
     { {:data.someString}}  
 
</pre>
 
</pre>
When the UI is rendered the tag will have been replaced with:
+
Когда интерфейс прогрузится, тэг будет прогружен как:
 
<pre>
 
<pre>
 
     I am a string.
 
     I am a string.
 +
</pre>
 +
 +
I am a string.
 +
 +
Пример 2:
 +
 +
В womdinger.dm, в ui_interact, мы делаем список асоциаций:
 +
<pre>
 +
data["assocList"] = list("key1" = "Value1", "key2" = "Value2")
 +
</pre>
 +
 +
Вы можете получать доступ к элементам списка используя точку (.):
 +
<pre>
 +
{{:data.assocList.key1}} and {{:data.assocList.key2}}
 +
</pre>
 +
Когда интерфейс прогрузится, тэг будет заменён на:
 +
<pre>
 +
Value1 and Value2
 
</pre>
 
</pre>

Версия 13:21, 14 мая 2019

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

Код 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