Редактирование: 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>.
  
 
Вот файл нашего объекта:
 
Вот файл нашего объекта:
−
<div class="blockofcode">
+
<pre>/obj/item/device/wombdinger
−
/obj/item/device/wombdinger
+
      name = "womdinger"
−
name = "womdinger"
+
      desc = "It's some kind of crude alien device."
−
desc = "It's some kind of crude alien device."
+
      icon = 'icons/obj/wombdinger.dmi'
−
icon = 'icons/obj/wombdinger.dmi'
+
      icon_state = "0"</pre>
−
icon_state = "0"
 
−
</div>
 
  
 
Создадим для него прок <i>attack_self</i> куда мы будем передавать, как mob, того кто использовал предмет.
 
Создадим для него прок <i>attack_self</i> куда мы будем передавать, как mob, того кто использовал предмет.
  
 
Файл теперь выглядит так:
 
Файл теперь выглядит так:
−
<div class="blockofcode">
+
<pre>/obj/item/device/wombdinger
−
/obj/item/device/wombdinger
+
      name = "womdinger"
−
name = "womdinger"
+
      desc = "It's some kind of crude alien device."
−
desc = "It's some kind of crude alien device."
+
      icon = 'icons/obj/wombdinger.dmi'
−
icon = 'icons/obj/wombdinger.dmi'
+
      icon_state = "0"
−
icon_state = "0"
+
/obj/item/device/wombdinger/attack_self(mob/user as mob)</pre>
−
/obj/item/device/wombdinger/attack_self(mob/user as mob)
 
−
</div>
 
  
 
Теперь чтобы открыть NanoUi нужно поместить в attack_self прок вызова Ui, то есть ui_interact, которому нужно передать пользователя.
 
Теперь чтобы открыть NanoUi нужно поместить в attack_self прок вызова Ui, то есть ui_interact, которому нужно передать пользователя.
  
 
Файл теперь выглядит так:
 
Файл теперь выглядит так:
−
<div class = "blockofcode">
+
<pre>/obj/item/device/wombdinger
−
/obj/item/device/wombdinger
+
      name = "womdinger"
−
name = "womdinger"
+
      desc = "It's some kind of crude alien device."
−
desc = "It's some kind of crude alien device."
+
      icon = 'icons/obj/wombdinger.dmi'
−
icon = 'icons/obj/wombdinger.dmi'
+
      icon_state = "0"
−
icon_state = "0"
+
/obj/item/device/wombdinger/attack_self(mob/user as mob)
 +
      ui_interact(user)</pre>
  
−
/obj/item/device/wombdinger/attack_self(mob/user as mob)
 
−
ui_interact(user)
 
−
</div>
 
 
Теперь нужно создать сам прок ui_interact, создадим его в этом же файле:
 
Теперь нужно создать сам прок ui_interact, создадим его в этом же файле:
−
<div class = "blockofcode">
+
<pre>/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)</pre>
−
/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
 
−
</div>
 
  
 
Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса.
 
Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса.
Строка 48: Строка 40:
 
Массив <i>data</i> передаёт значения в нужный темплейт. О темплейтах позже.
 
Массив <i>data</i> передаёт значения в нужный темплейт. О темплейтах позже.
  
−
<div class = "blockofcode">
+
<pre>/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
−
/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
+
      var/list/data = list()
−
var/list/data = list()
+
      // Добавим простые данные в массив
−
// Добавим простые данные в массив
+
      data["myName"] = name
−
data["myName"] = name
+
      data["myDesc"] = desc
−
data["myDesc"] = desc
+
      data["someString"] = "I am a string."
−
data["someString"] = "I am a string."
+
      data["aNumber"] = 123
−
data["aNumber"] = 123
+
     
−
+
      data["assocList"] = list("key1" = "Value1", "key2" = "Value2")
−
data["assocList"] = list("key1" = "Value1", "key2" = "Value2")
+
     
−
+
      // Обратный слэш говорит компилятору игнорировать перенос строки, полезно для улучшения читабельности кода.
−
// Обратный слэш говорит компилятору игнорировать перенос строки, полезно для улучшения читабельности кода.
+
      data["arrayOfAssocLists"] = list(\  
−
data["arrayOfAssocLists"] = list(\  
+
          list("key1" = "ValueA1", "key2" = "ValueA2"),\
−
list("key1" = "ValueA1", "key2" = "ValueA2"),\
+
          list("key1" = "ValueB1", "key2" = "ValueB2"),\
−
list("key1" = "ValueB1", "key2" = "ValueB2"),\
+
          list("key1" = "ValueC1", "key2" = "ValueC2")
−
list("key1" = "ValueC1", "key2" = "ValueC2")
+
      )
−
)
+
     
−
+
      data["emptyArray"] = list()
−
data["emptyArray"] = list()
+
     
−
+
      // обновляет ui с данными переданными данными если они переданы, возврашает null если ui не найдено, или ui не передаётся, или если force_open == 1 или true
−
// обновляет ui с данными переданными данными если они переданы, возврашает null если ui не найдено, или ui не передаётся, или если force_open == 1 или true
+
      ui = nanomanager.try_update_ui(user, src, ui_key, ui, data, force_open)
−
ui = nanomanager.try_update_ui(user, src, ui_key, ui, data, force_open)
+
      //Если ui не открыт то мы открываем его:
−
//Если ui не открыт то мы открываем его:
+
      if (!ui)
−
if (!ui)
+
          // Список параметров ui можно найти в \code\modules\nano\nanoui.dm
−
// Список параметров ui можно найти в \code\modules\nano\nanoui.dm
+
          ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)
−
ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)
+
          // Если ui открыт первый раз то мы используем эти данные:
−
// Если ui открыт первый раз то мы используем эти данные:
+
          ui.set_initial_data(data)
−
ui.set_initial_data(data)
+
          // Открываем новое окно ui
−
// Открываем новое окно ui
+
          ui.open()</pre>
−
ui.open()
 
−
</div>
 
  
 
Две важные вещи в коде выше это 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:
−
<div class = "blockofcode"><nowiki>
+
{{WIP}}
−
<div class="item">
 
−
<div class="itemLabel">
 
−
<b>Object Name</b>:
 
−
</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>
 
−
</nowiki></div>
 
 
Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.).
 
Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.).
  
Строка 159: Строка 108:
  
 
====Формат:====
 
====Формат:====
−
<pre class="blockofcode"><nowiki>{{:data.variable}}</nowiki></pre>
+
<pre>   { {:data.variable}}</pre>
  
 
Тэг вывода выводит на окно значение переменной как сроку
 
Тэг вывода выводит на окно значение переменной как сроку
Строка 167: Строка 116:
 
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:
 
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:
  
−
<pre class="blockofcode">
+
<pre>
−
data["someString"] = "I am a string"  
+
    data["someString"] = "I am a string"  
 
</pre>
 
</pre>
 
И в womdinger.tmpl мы запрашиваем доступ к data с ключём:
 
И в womdinger.tmpl мы запрашиваем доступ к data с ключём:
−
<pre class="blockofcode"><nowiki>
+
<pre>
−
{{:data.someString}} </nowiki>
+
    { {:data.someString}}  
 
</pre>
 
</pre>
 
Когда интерфейс прогрузится, тэг будет прогружен как:
 
Когда интерфейс прогрузится, тэг будет прогружен как:
−
<pre class="blockofcode">
+
<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 class="blockofcode">
+
<pre>
 
data["assocList"] = list("key1" = "Value1", "key2" = "Value2")  
 
data["assocList"] = list("key1" = "Value1", "key2" = "Value2")  
 
</pre>
 
</pre>
  
 
Вы можете получать доступ к элементам списка используя точку (.):
 
Вы можете получать доступ к элементам списка используя точку (.):
−
<pre class="blockofcode"><nowiki>
+
<pre>
−
{{:data.assocList.key1}} and {{:data.assocList.key2}}</nowiki>
+
{{:data.assocList.key1}} and {{:data.assocList.key2}}  
 
</pre>
 
</pre>
 
Когда интерфейс прогрузится, тэг будет заменён на:
 
Когда интерфейс прогрузится, тэг будет заменён на:
−
<pre class="blockofcode">
+
<pre>
 
Value1 and Value2
 
Value1 and Value2
 
</pre>
 
</pre>
−
 
 
===Тэг If===
 
===Тэг If===
  
 
====Формат:====
 
====Формат:====
−
<pre class="blockofcode"><nowiki>
 
−
{{if expression}}
 
−
<То что будет отображаться при истинности expression>
 
−
{{/if}}
 
  
 +
{ {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 expression}}
+
The if tag displays content conditionally based on the provided expression being true.
−
<То что будет отображаться при истинности expression>
 
−
{{else}}
 
−
<То что будет отображаться при ложность expression>
 
−
{{/if}}
 
  
 +
When combined with the else tag the if tag can also show content if the provided expression is false.
  
−
{{if expression1}}
+
The else tag can optionally have an expression provided (e.g. "{{else expression2}}"), giving it "elseif" functionality.
−
<То что будет отображаться при истинности expression>
 
−
{{else expression2}}
 
−
<То что будет отображаться при истинности expression2>
 
−
{{/if}}</nowiki>
 
−
</pre>
 
−
Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите {{if data.is_prog}}, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется).
 
  
−
Комбинируя if и тэг else можно отображать другую информацию если выражение равно True.
+
Example 1: A simple if tag
−
<nowiki>"{{else expression2}}"</nowiki>), выдача выражения тэгу else даёт тэгу else функционал elseif
 
  
−
====Пример 1:====
+
Template example:
  
−
Пример темплейта:
+
{{if data.aNumber}} data.aNumber is set (not null) and is positive {{/if}
  
−
<pre class="blockofcode">
+
When the UI is rendered the tag will have been replaced with:
−
<nowiki>
 
−
{{if data.aNumber}}data.aNumber существует (не null) и положительный{{/if}}</nowiki>
 
−
</pre>
 
  
−
Когда интерфейс прогрузится, при истинности выражения, тег будет заменён на:
+
data.aNumber is set (not null) and is positive
−
<pre class="blockofcode">
 
−
data.aNumber существует (не null) и положительный
 
−
</pre>
 
  
−
====Пример 2:====
+
Because data.aNumber is set (not null) and is positive (it's value is 123).
  
−
Пример темплейта:
+
Example 2: If and else tags combined
  
−
<pre class="blockofcode">{{if data.someString == "Who goes there?"}} Some string is "Who goes there?" {{else}} Some string is not "Who goes there?" {{/if}</pre>
+
Template example:
  
−
Когда интерфейс прогрузится тэг будет заменён на:
+
{{if data.someString == "Who goes there?"}} Some string is "Who goes there?" {{else}} Some string is not "Who goes there?" {{/if}
−
<pre class="blockofcode">
 
−
Some string is not "Who goes there?"  
 
−
</pre>
 
−
Потому что выражение (someString == "Who goes there?") не истинно.
 
  
−
====Пример 3:====
+
When the UI is rendered the tag will have been replaced with:
  
−
Пример темплейта:
+
Some string is not "Who goes there?"  
−
<pre class="blockofcode"><nowiki>
 
−
{{if data.aNumber < 50}} data.aNumber меньше 50 {{else data.aNumber < 100}} data.aNumber меньше 100 {{else data.aNumber < 150}} data.aNumber меньше 150 {{else}} None of the expressions above are true. {{/if}</nowiki>
 
−
</pre>
 
−
Когда интерфейс прогрузится тэг будет заменён на:
 
−
<pre class="blockofcode">
 
−
data.aNumber is less than 150
 
−
</pre>
 
−
Потому что выражение подходит под второй else тэг (data.aNumber < 150).
 
  
−
===Тэг for===
+
Because the expression provided (someString == "Who goes there?") is not true.
−
====Формат:====
 
  
−
<pre class="blockofcode"><nowiki>
+
Example 3: If and multiple else tags combined
−
  {{for array}} <list entry content> {{/for}}
 
−
  {{for array}} <list entry content> {{empty}} <empty list content> {{/for}}
 
−
</nowiki></pre>
 
−
Цикл по элементам массива (массив - список с нумерацией элементов начинающейся с 0 (it does not use strings as keys).
 
  
−
Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)).
+
Template example:
  
−
И примером этого является использование тега вывода для печати содержимого (например, {{: value.key1}} и {{: value.key2}}).
+
{{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}
  
−
В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст.
+
When the UI is rendered the tag will have been replaced with:
  
−
====Пример 1====
+
data.aNumber is less than 150
−
 
 
−
Пример темплейта:
 
−
<pre class="blockofcode">
 
−
<nowiki>
 
−
    {{for data.arrayOfAssocLists}}
 
−
        {{:index}} -> {{:value.key1}} and {{:value.key2}}
 
−
    {{/for}   
 
−
</nowiki>
 
−
</pre>
 
−
Когда интерфейс прогрузится, тэги будут заменены на:
 
−
 
 
−
  0 -> ValueA1 and ValueA2
 
−
  1 -> ValueB1 and ValueB2
 
−
  2 -> ValueC1 and ValueC2
 
−
 
 
−
====Пример 2====
 
−
 
 
−
Пример темплейта:
 
−
<pre class="blockofcode"><nowiki>
 
−
{{for data.emptyArray}}
 
−
  {{:value.key}}
 
−
{{empty}}
 
−
  Этот список пуст.
 
−
{{/for}</nowiki></pre>
 
−
Когда интерфейс прогрузится, тэги будут заменены на:
 
−
<pre class="blockofcode">
 
−
  Этот список пуст.
 
−
</pre>
 
−
 
 
−
=== Template Helpers ===
 
−
 
 
−
Helpers - функции написанные на JavaScript, которые можно вызывать вместе с темплейтами.
 
−
 
 
−
==== Link Helper ====
 
−
 
 
−
Формат:
 
−
<pre class="blockofcode"><nowiki>{{:helper.link(text, icon, parameters, status, elementClass, elementId)}}</nowiki></pre>
 
−
 
 
−
Генерирует ссылку (которая стандартно стилизована как кнопка). При нажатии на кнопку будут отправлены настроенные параметры на сервер.
 
−
 
 
−
Аргументы:
 
−
 
 
−
* text - строка - Текст на кнопке.
 
−
* icon - строка - Иконка в начале кнопки. Примеры: 'refresh', 'shuffle', 'radiation', 'power'.
 
−
* parameters - JSON - Параметры отсылаемые серверу по нажатию.
 
−
* status - null/строка - Опциональный статус ссылки. Может быть null для активной, 'disabled' для неактивной или 'selected' для выбранных.
 
−
* elementClass - null/строка - Если предоставленно, то кнопке будет присвоен класс (используется для стилизации CSS или JavaScript селекторов).
 
−
* elementId - null/строка - Если предоставленно, то кнопке будет присвоен идентификатор (используется для стилизации CSS или JavaScript селекторов).
 
−
 
 
−
'''Example 1: Basic usage'''
 
−
 
 
−
<pre class="blockofcode"><nowiki>{{:helper.link('Toggle Power', 'power', { 'option' : 'togglePower' })}}</nowiki></pre>
 
−
 
 
−
Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:
 
−
<pre class="blockofcode">list("src" = "\ref[src]", "option" = "togglePower")</pre>
 
−
 
 
−
'''Example 2: Multiple parameters'''
 
−
 
 
−
<pre class="blockofcode"><nowiki>{{:helper.link('Cut Red Wire', 'scissors', { 'wireColor' : 'red', 'action' : 'cut' })}}</nowiki></pre>
 
−
 
 
−
Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:
 
−
<pre class="blockofcode">list("src" = "\ref[src]", "wireColor" = "red", "action" = "cut")</pre>
 
−
 
 
−
==== Bar Helper ====
 
−
'''Format:'''
 
−
<pre class="blockofcode"><nowiki>{{:helper.displayBar(value, rangeMin, rangeMax, styleClass, styleClass, showText)}}</nowiki></pre>
 
−
 
 
−
This helper creates a bar.
 
−
 
 
−
Parameters:
 
−
* value - number - Current value of progress bar
 
−
* rangeMin - number - Lower bound of value
 
−
* rangeMax - number - Upper bound of value
 
−
* styleClass - optional string - List of styles to apply, seperated by spaces. Acceptable styles include alignRight, good, notgood, average, bad, and highlight.
 
−
* showText - optional string - The text that is shown. Do not include the number itself.
 
−
 
 
−
'''Example 1: Health'''
 
  
−
<pre class="blockofcode"><nowiki>
+
Because the expression provided to the second else tag (data.aNumber < 150) is true.
−
{{if data.occupant.health >= 0}}
 
−
{{:helper.displayBar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}}
 
−
{{else}}
 
−
{{:helper.displayBar(data.occupant.health, 0, data.occupant.minHealth, 'average alignRight')}}
 
−
{{/if}}</nowiki></pre>
 
−
{{Navbox guide}}[[Категория:Руководства]]
 

Обратите внимание, что все добавления и изменения текста статьи рассматриваются как выпущенные на условиях лицензии Creative Commons Attribution Non-Commercial Share Alike (см. Infinity Project:Авторские права). Если вы не хотите, чтобы ваши тексты свободно распространялись и редактировались любым желающим, не помещайте их сюда.
Вы также подтверждаете, что являетесь автором вносимых дополнений или скопировали их из источника, допускающего свободное распространение и изменение своего содержимого.
НЕ РАЗМЕЩАЙТЕ БЕЗ РАЗРЕШЕНИЯ МАТЕРИАЛЫ, ОХРАНЯЕМЫЕ АВТОРСКИМ ПРАВОМ!

Отменить Справка по редактированию (в новом окне)

Шаблоны, используемые на этой странице:

Источник — https://wiki.infinity-ss13.ru/index.php/NanoUi