Редактирование: 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> | ||
− | |||
===Тэг If=== | ===Тэг If=== | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre> |
− | {{if expression}} | + | { {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}} |
− | |||
− | {{/if}} | ||
− | |||
− | |||
− | {{if expression}} | ||
− | |||
− | {{else}} | ||
− | |||
− | {{/if}} | ||
− | |||
− | |||
− | {{if expression1}} | ||
− | |||
− | {{else expression2}} | ||
− | |||
− | {{/if}} | ||
</pre> | </pre> | ||
− | Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите {{if data.is_prog}}, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется). | + | Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите { {if data.is_prog}}, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется). |
Комбинируя if и тэг else можно отображать другую информацию если выражение равно True. | Комбинируя if и тэг else можно отображать другую информацию если выражение равно True. | ||
− | |||
− | + | "{ {else expression2}}"), выдача выражения тэгу else даёт тэгу else функционал elseif | |
− | + | Example 1: A simple if tag | |
− | + | Template example: | |
− | |||
− | |||
− | |||
− | + | { {if data.aNumber}} data.aNumber is set (not null) and is positive { {/if} | |
− | |||
− | data.aNumber | ||
− | |||
− | + | 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} | |
− | |||
− | {{if data. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | 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. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− |