Редактирование: NanoUi
Перейти к навигации
Перейти к поиску
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы ваша отмена правки была сохранена.
Текущая версия | Ваш текст | ||
Строка 29: | Строка 29: | ||
Файл теперь выглядит так: | Файл теперь выглядит так: | ||
− | < | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000">/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 style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000">/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)</pre> |
− | |||
− | </ | ||
Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса. | Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса. | ||
Строка 48: | Строка 44: | ||
Массив <i>data</i> передаёт значения в нужный темплейт. О темплейтах позже. | Массив <i>data</i> передаёт значения в нужный темплейт. О темплейтах позже. | ||
− | < | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000">/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: | Строка 98: | ||
Теперь создадим темплейт кода для womdinger.tmpl: | Теперь создадим темплейт кода для womdinger.tmpl: | ||
− | < | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
− | + | <div class="item"> | |
− | + | <div class="itemLabel"> | |
− | + | <b>Object Name</b>: | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | + | <div class="itemContent"> | |
− | + | {{:data.myName}} | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="item"> | |
− | + | <div class="itemLabel"> | |
− | + | <b>Object Description</b>: | |
− | + | </div> | |
− | </ | + | <div class="itemContent"> |
+ | {{:data.myDesc}} | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <div class="itemLabel"> | ||
+ | <b>Some String</b>: | ||
+ | </div> | ||
+ | <div class="itemContent"> | ||
+ | {{:data.someString}} | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <div class="itemLabel"> | ||
+ | <b>A Number</b>: | ||
+ | </div> | ||
+ | <div class="itemContent"> | ||
+ | {{:data.aNumber}} | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <div class="itemLabel"> | ||
+ | <b>Associated list values</b>: | ||
+ | </div> | ||
+ | <div class="itemContent"> | ||
+ | {{:data.assocList.key1}} and {{:data.assocList.key2}} | ||
+ | </div> | ||
+ | </div> | ||
+ | </pre> | ||
Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.). | Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.). | ||
Строка 159: | Строка 153: | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"><nowiki> {{:data.variable}}</nowiki></pre> |
Тэг вывода выводит на окно значение переменной как сроку | Тэг вывода выводит на окно значение переменной как сроку | ||
Строка 167: | Строка 161: | ||
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data: | В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
− | data["someString"] = "I am a string" | + | data["someString"] = "I am a string" |
</pre> | </pre> | ||
И в womdinger.tmpl мы запрашиваем доступ к data с ключём: | И в womdinger.tmpl мы запрашиваем доступ к data с ключём: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"><nowiki> |
− | {{:data.someString}} </nowiki> | + | {{:data.someString}} </nowiki> |
</pre> | </pre> | ||
Когда интерфейс прогрузится, тэг будет прогружен как: | Когда интерфейс прогрузится, тэг будет прогружен как: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
− | I am a string. | + | I am a string. |
</pre> | </pre> | ||
Строка 184: | Строка 178: | ||
В womdinger.dm, в ui_interact, мы делаем список асоциаций: | В womdinger.dm, в ui_interact, мы делаем список асоциаций: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
data["assocList"] = list("key1" = "Value1", "key2" = "Value2") | data["assocList"] = list("key1" = "Value1", "key2" = "Value2") | ||
</pre> | </pre> | ||
Вы можете получать доступ к элементам списка используя точку (.): | Вы можете получать доступ к элементам списка используя точку (.): | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"><nowiki> |
{{:data.assocList.key1}} and {{:data.assocList.key2}}</nowiki> | {{:data.assocList.key1}} and {{:data.assocList.key2}}</nowiki> | ||
</pre> | </pre> | ||
Когда интерфейс прогрузится, тэг будет заменён на: | Когда интерфейс прогрузится, тэг будет заменён на: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
Value1 and Value2 | Value1 and Value2 | ||
</pre> | </pre> | ||
Строка 200: | Строка 194: | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"><nowiki> |
{{if expression}} | {{if expression}} | ||
− | < | + | <expression true content> |
{{/if}} | {{/if}} | ||
{{if expression}} | {{if expression}} | ||
− | < | + | <expression true content> |
{{else}} | {{else}} | ||
− | < | + | <expression false content> |
{{/if}} | {{/if}} | ||
{{if expression1}} | {{if expression1}} | ||
− | < | + | <expression1 true content> |
{{else expression2}} | {{else expression2}} | ||
− | < | + | <expression2 true content> |
{{/if}}</nowiki> | {{/if}}</nowiki> | ||
</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. | ||
Строка 228: | Строка 222: | ||
Пример темплейта: | Пример темплейта: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
<nowiki> | <nowiki> | ||
− | {{if data.aNumber}}data.aNumber | + | {{if data.aNumber}} data.aNumber is set (not null) and is positive {{/if}}</nowiki> |
</pre> | </pre> | ||
− | Когда интерфейс прогрузится | + | Когда интерфейс прогрузится тэг будет заменён на: |
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
− | data.aNumber | + | data.aNumber is set (not null) and is positive |
</pre> | </pre> | ||
+ | Потому что data.aNumber обозначен (не null) и положителен (it's value is 123). | ||
====Пример 2:==== | ====Пример 2:==== | ||
Строка 242: | Строка 237: | ||
Пример темплейта: | Пример темплейта: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000">{{if data.someString == "Who goes there?"}} Some string is "Who goes there?" { {else}} Some string is not "Who goes there?" { {/if}</pre> |
Когда интерфейс прогрузится тэг будет заменён на: | Когда интерфейс прогрузится тэг будет заменён на: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
Some string is not "Who goes there?" | Some string is not "Who goes there?" | ||
</pre> | </pre> | ||
Строка 253: | Строка 248: | ||
Пример темплейта: | Пример темплейта: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"><nowiki> |
− | {{if data.aNumber < 50}} data.aNumber | + | {{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}</nowiki> |
</pre> | </pre> | ||
Когда интерфейс прогрузится тэг будет заменён на: | Когда интерфейс прогрузится тэг будет заменён на: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
data.aNumber is less than 150 | data.aNumber is less than 150 | ||
</pre> | </pre> | ||
Строка 265: | Строка 260: | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"><nowiki> |
{{for array}} <list entry content> {{/for}} | {{for array}} <list entry content> {{/for}} | ||
{{for array}} <list entry content> {{empty}} <empty list content> {{/for}} | {{for array}} <list entry content> {{empty}} <empty list content> {{/for}} | ||
Строка 273: | Строка 268: | ||
Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)). | Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)). | ||
− | И примером этого является использование тега вывода для печати содержимого (например, {{: value.key1}} и {{: value.key2}}). | + | И примером этого является использование тега вывода для печати содержимого (например, { {: value.key1}} и { {: value.key2}}). |
В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст. | В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст. | ||
Строка 280: | Строка 275: | ||
Пример темплейта: | Пример темплейта: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
<nowiki> | <nowiki> | ||
{{for data.arrayOfAssocLists}} | {{for data.arrayOfAssocLists}} | ||
Строка 296: | Строка 291: | ||
Пример темплейта: | Пример темплейта: | ||
− | + | <nowiki> | |
− | {{for data.emptyArray}} | + | { {for data.emptyArray}} |
− | + | { {:value.key}} | |
− | {{empty}} | + | { {empty}} |
− | + | This list is empty. | |
− | {{/for}</nowiki | + | { {/for} |
+ | </nowiki> | ||
Когда интерфейс прогрузится, тэги будут заменены на: | Когда интерфейс прогрузится, тэги будут заменены на: | ||
− | <pre | + | <pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"> |
− | + | This list is empty. | |
</pre> | </pre> | ||
=== Template Helpers === | === Template Helpers === | ||
− | Helpers - функции написанные на JavaScript, которые можно вызывать вместе с темплейтами. | + | Helpers - функции написанные на JavaScript, которые можно вызывать вместе с темплейтами. Они чаще вызываются в начале файла над HTML кодом. |
+ | |||
+ | Helpers вызываются с помощью объекта "helper". | ||
==== Link Helper ==== | ==== Link Helper ==== | ||
− | + | '''Format: | |
− | + | <nowiki>{{:helper.link(text, icon, parameters, status, elementClass, elementId)}}</nowiki>''' | |
− | + | The link helper generates a link (which by default is styled as a button). When clicked the button will send the supplied parameters to the server. | |
− | + | Parameters: | |
− | * text - | + | * text - string - The text which appears on the link. |
− | * icon - | + | * icon - string - An icon to show on the link. Icon names can be found at http://fontawesome.io/icons/. Examples: 'refresh', 'shuffle', 'radiation', 'power'. * parameters - JSON - Parameters to send to the server when the link is clicked. The "src" parameter is added automatically, do not add it here. |
− | * parameters - JSON - | + | * status - optional null/string - Optional status of the link. Can be null for active, 'disabled' for disabled or 'selected' for selected. Defaults to active if nothing is passed. |
− | * status - null/ | + | * elementClass - optional string - If provided this string will be added to the link as a class (used for custom styling in CSS or as a JavaScript selector). |
− | * elementClass - | + | * elementId - optional string - If provided this string will be added to the link as an id (used for custom styling in CSS or as a JavaScript selector). |
− | * elementId - | ||
'''Example 1: Basic usage''' | '''Example 1: Basic usage''' | ||
− | + | <nowiki>{{:helper.link('Toggle Power', 'power', { 'option' : 'togglePower' })}}</nowiki>''' | |
+ | |||
+ | If clicked the receiving object's Topic proc's href_list will have the following entries (src is added automatically and should not be changed): | ||
− | + | list("src" = "\ref[src]", "option" = "togglePower") | |
− | |||
'''Example 2: Multiple parameters''' | '''Example 2: Multiple parameters''' | ||
− | + | <nowiki>{{:helper.link('Cut Red Wire', 'scissors', { 'wireColor' : 'red', 'action' : 'cut' })}}</nowiki>''' | |
+ | |||
+ | If clicked the receiving object's Topic proc's href_list will have the following entries (src is added automatically and should not be changed): | ||
− | + | list("src" = "\ref[src]", "wireColor" = "red", "action" = "cut") | |
− | |||
==== Bar Helper ==== | ==== Bar Helper ==== | ||
'''Format:''' | '''Format:''' | ||
− | + | <nowiki>{{:helper.displayBar(value, rangeMin, rangeMax, styleClass, styleClass, showText)}}</nowiki> | |
This helper creates a bar. | This helper creates a bar. | ||
Строка 356: | Строка 355: | ||
'''Example 1: Health''' | '''Example 1: Health''' | ||
− | + | <nowiki>{{if data.occupant.health >= 0}} | |
− | {{if data.occupant.health >= 0}} | + | {{:helper.displayBar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}} |
− | + | {{else}} | |
− | {{else}} | + | {{:helper.displayBar(data.occupant.health, 0, data.occupant.minHealth, 'average alignRight')}} |
− | + | {{/if}}</nowiki> | |
− | {{/if}}</nowiki> | + | [[Category:Codebase Guides]] |
− | + | [[Category:Guides]] |