Редактирование: NanoUi
Перейти к навигации
Перейти к поиску
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы ваша отмена правки была сохранена.
Текущая версия | Ваш текст | ||
Строка 2: | Строка 2: | ||
<h1>Код Dream Maker</h1> | <h1>Код Dream Maker</h1> | ||
Мы начнём с создания простейшего NanoUi. Чтобы понять как <b><s>писать индусский код</s></b> оно работает. | Мы начнём с создания простейшего NanoUi. Чтобы понять как <b><s>писать индусский код</s></b> оно работает. | ||
− | <br> | + | <br/> |
Для начала создадим простейший интерфейс для объекта <i>"womdinger"</i>. | Для начала создадим простейший интерфейс для объекта <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, того кто использовал предмет. | Создадим для него прок <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, которому нужно передать пользователя. | Теперь чтобы открыть 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, создадим его в этом же файле: | Теперь нужно создать сам прок ui_interact, создадим его в этом же файле: | ||
− | < | + | <pre>/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)</pre> |
− | |||
− | </ | ||
Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса. | Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса. | ||
Строка 48: | Строка 40: | ||
Массив <i>data</i> передаёт значения в нужный темплейт. О темплейтах позже. | Массив <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)") | Две важные вещи в коде выше это data, а точнее список ассоциаций и создание NanoUi: ("ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)") | ||
Строка 104: | Строка 94: | ||
Теперь создадим темплейт кода для womdinger.tmpl: | Теперь создадим темплейт кода для womdinger.tmpl: | ||
− | + | {{WIP}} | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.). | Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.). | ||
Строка 159: | Строка 108: | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre> { {:data.variable}}</pre> |
Тэг вывода выводит на окно значение переменной как сроку | Тэг вывода выводит на окно значение переменной как сроку | ||
Строка 167: | Строка 116: | ||
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data: | В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data: | ||
− | <pre | + | <pre> |
− | data["someString"] = "I am a string" | + | data["someString"] = "I am a string" |
</pre> | </pre> | ||
И в womdinger.tmpl мы запрашиваем доступ к data с ключём: | И в womdinger.tmpl мы запрашиваем доступ к data с ключём: | ||
− | <pre | + | <pre> |
− | {{:data.someString}} | + | { {:data.someString}} |
</pre> | </pre> | ||
Когда интерфейс прогрузится, тэг будет прогружен как: | Когда интерфейс прогрузится, тэг будет прогружен как: | ||
− | <pre | + | <pre> |
− | I am a string. | + | I am a string. |
</pre> | </pre> | ||
− | I am a string. | + | I am a string. |
====Пример 2:==== | ====Пример 2:==== | ||
В womdinger.dm, в ui_interact, мы делаем список асоциаций: | В womdinger.dm, в ui_interact, мы делаем список асоциаций: | ||
− | <pre | + | <pre> |
data["assocList"] = list("key1" = "Value1", "key2" = "Value2") | data["assocList"] = list("key1" = "Value1", "key2" = "Value2") | ||
</pre> | </pre> | ||
Вы можете получать доступ к элементам списка используя точку (.): | Вы можете получать доступ к элементам списка используя точку (.): | ||
− | <pre | + | <pre> |
− | {{:data.assocList.key1}} and {{:data.assocList.key2}} | + | {{:data.assocList.key1}} and {{:data.assocList.key2}} |
</pre> | </pre> | ||
Когда интерфейс прогрузится, тэг будет заменён на: | Когда интерфейс прогрузится, тэг будет заменён на: | ||
− | <pre | + | <pre> |
Value1 and Value2 | Value1 and Value2 | ||
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |