Редактирование: NanoUi
Перейти к навигации
Перейти к поиску
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы ваша отмена правки была сохранена.
Текущая версия | Ваш текст | ||
Строка 1: | Строка 1: | ||
{{WIP}} | {{WIP}} | ||
− | + | =Основы NanoUi= | |
− | Мы начнём с создания простейшего NanoUi. Чтобы понять как <b><s>писать | + | =='''Код Dream Maker'''== |
− | <br> | + | Мы начнём с создания простейшего NanoUi. Чтобы понять как <b><s>писать быдлокод</s></b> оно работает. |
+ | <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: | Строка 41: | ||
Массив <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)") | ||
Строка 92: | Строка 83: | ||
Высота - высота окна ui в пикселях | Высота - высота окна ui в пикселях | ||
− | < | + | <h3>Это всё что нам нужно в DM файле, прейдём к темплейтам.</h3> |
− | =Создаём темплейт и учим HTML= | + | ==Создаём темплейт и учим HTML== |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |