Редактирование: 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: | ||
− | < | + | <pre> |
− | + | <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: | Строка 149: | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre><nowiki> {{:data.variable}}</nowiki></pre> |
Тэг вывода выводит на окно значение переменной как сроку | Тэг вывода выводит на окно значение переменной как сроку | ||
Строка 167: | Строка 157: | ||
В 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><nowiki> |
− | {{:data.someString}} </ | + | {{:data.someString}} |
− | </ | + | </pre></nowiki> |
Когда интерфейс прогрузится, тэг будет прогружен как: | Когда интерфейс прогрузится, тэг будет прогружен как: | ||
− | <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><nowiki> |
− | {{:data.assocList.key1}} and {{:data.assocList.key2}}</ | + | {{:data.assocList.key1}} and {{:data.assocList.key2}} |
− | </ | + | </pre></nowiki> |
Когда интерфейс прогрузится, тэг будет заменён на: | Когда интерфейс прогрузится, тэг будет заменён на: | ||
− | <pre | + | <pre> |
Value1 and Value2 | Value1 and Value2 | ||
</pre> | </pre> | ||
− | |||
===Тэг If=== | ===Тэг If=== | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre><nowiki> |
− | {{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}} |
− | + | </pre></nowiki> | |
− | {{/if}} | + | Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите { {if data.is_prog}}, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется). |
− | |||
− | |||
− | {{if expression}} | ||
− | |||
− | {{else}} | ||
− | |||
− | {{/if}} | ||
− | |||
− | |||
− | {{if expression1}} | ||
− | |||
− | {{else expression2}} | ||
− | |||
− | {{/if}}</ | ||
− | </ | ||
− | Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите {{if data.is_prog}}, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется). | ||
Комбинируя if и тэг else можно отображать другую информацию если выражение равно True. | Комбинируя if и тэг else можно отображать другую информацию если выражение равно True. | ||
<nowiki>"{{else expression2}}"</nowiki>), выдача выражения тэгу else даёт тэгу else функционал elseif | <nowiki>"{{else expression2}}"</nowiki>), выдача выражения тэгу else даёт тэгу else функционал elseif | ||
− | |||
====Пример 1:==== | ====Пример 1:==== | ||
Пример темплейта: | Пример темплейта: | ||
− | + | <pre><nowiki> | |
− | <pre | + | {{if data.aNumber}} data.aNumber is set (not null) and is positive {{/if} |
− | <nowiki> | + | </pre></nowiki> |
− | {{if data.aNumber}}data.aNumber | + | Когда интерфейс прогрузится тэг будет заменён на: |
− | </ | + | <pre> |
− | + | data.aNumber is set (not null) and is positive | |
− | Когда интерфейс прогрузится | ||
− | <pre | ||
− | data.aNumber | ||
</pre> | </pre> | ||
+ | Потому что data.aNumber обозначен (не null) и положителен (it's value is 123). | ||
====Пример 2:==== | ====Пример 2:==== | ||
Строка 242: | Строка 212: | ||
Пример темплейта: | Пример темплейта: | ||
− | <pre | + | <pre>{{if data.someString == "Who goes there?"}} Some string is "Who goes there?" { {else}} Some string is not "Who goes there?" { {/if}</pre> |
Когда интерфейс прогрузится тэг будет заменён на: | Когда интерфейс прогрузится тэг будет заменён на: | ||
− | <pre | + | <pre> |
Some string is not "Who goes there?" | Some string is not "Who goes there?" | ||
</pre> | </pre> | ||
Строка 253: | Строка 223: | ||
Пример темплейта: | Пример темплейта: | ||
− | <pre | + | <pre><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} |
− | </ | + | </pre></nowiki> |
Когда интерфейс прогрузится тэг будет заменён на: | Когда интерфейс прогрузится тэг будет заменён на: | ||
− | <pre | + | <pre> |
data.aNumber is less than 150 | data.aNumber is less than 150 | ||
</pre> | </pre> | ||
Строка 265: | Строка 235: | ||
====Формат:==== | ====Формат:==== | ||
− | <pre | + | <pre><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: | Строка 243: | ||
Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)). | Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)). | ||
− | И примером этого является использование тега вывода для печати содержимого (например, {{: value.key1}} и {{: value.key2}}). | + | И примером этого является использование тега вывода для печати содержимого (например, { {: value.key1}} и { {: value.key2}}). |
В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст. | В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст. | ||
Строка 280: | Строка 250: | ||
Пример темплейта: | Пример темплейта: | ||
− | |||
<nowiki> | <nowiki> | ||
{{for data.arrayOfAssocLists}} | {{for data.arrayOfAssocLists}} | ||
− | {{:index}} -> {{:value.key1}} and {{:value.key2}} | + | { {:index}} -> { {:value.key1}} and { {:value.key2}}<br> |
{{/for} | {{/for} | ||
</nowiki> | </nowiki> | ||
− | |||
Когда интерфейс прогрузится, тэги будут заменены на: | Когда интерфейс прогрузится, тэги будут заменены на: | ||
Строка 292: | Строка 260: | ||
1 -> ValueB1 and ValueB2 | 1 -> ValueB1 and ValueB2 | ||
2 -> ValueC1 and ValueC2 | 2 -> ValueC1 and ValueC2 | ||
− | |||
====Пример 2==== | ====Пример 2==== | ||
Пример темплейта: | Пример темплейта: | ||
− | + | <nowiki> | |
− | {{for data.emptyArray}} | + | { {for data.emptyArray}} |
− | + | { {:value.key}} | |
− | {{empty}} | + | { {empty}} |
− | + | This list is empty. | |
− | {{/for}</nowiki | + | { {/for} |
+ | </nowiki> | ||
Когда интерфейс прогрузится, тэги будут заменены на: | Когда интерфейс прогрузится, тэги будут заменены на: | ||
− | <pre | + | <pre> |
− | + | This list is empty. | |
</pre> | </pre> | ||
=== Template Helpers === | === Template Helpers === | ||
− | Helpers | + | Helpers are functions written in JavaScript which can be called within templates. They are used within the above markup tags, most commonly the print tag. |
+ | |||
+ | Helpers are accessed via the "helper" object. | ||
==== 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: | Строка 327: | ||
'''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]] |