Редактирование: NanoUi

{{WIP}}
=Основы NanoUi=
=='''Код Dream Maker'''==
Мы начнём с создания простейшего NanoUi. Чтобы понять как <b><s>писать быдлокод</s></b> оно работает.
<br/>
Для начала создадим простейший интерфейс для объекта <i>"womdinger"</i>.

Вот файл нашего объекта:
<pre>/obj/item/device/wombdinger
       name = "womdinger"
       desc = "It's some kind of crude alien device."
       icon = 'icons/obj/wombdinger.dmi'
       icon_state = "0"</pre>

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

Файл теперь выглядит так:
<pre>/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)</pre>

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

Файл теперь выглядит так:
<pre>/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)</pre>

Теперь нужно создать сам прок ui_interact, создадим его в этом же файле:
<pre>/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)</pre>

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

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

<pre>/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()</pre>

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

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

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

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

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

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

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

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