Редактирование: NanoUi

Перейти к навигации Перейти к поиску

Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.

Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы ваша отмена правки была сохранена.

Текущая версия Ваш текст
Строка 50: Строка 50:
 
<div class = "blockofcode">
 
<div class = "blockofcode">
 
/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()
+
          ui.open()
 
</div>
 
</div>
  
Строка 159: Строка 159:
  
 
====Формат:====
 
====Формат:====
−
<pre class="blockofcode"><nowiki>{{:data.variable}}</nowiki></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: Строка 167:
 
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:
 
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:
  
−
<pre class="blockofcode">
+
<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 class="blockofcode"><nowiki>
+
<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 class="blockofcode">
+
<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: Строка 184:
  
 
В womdinger.dm, в ui_interact, мы делаем список асоциаций:
 
В womdinger.dm, в ui_interact, мы делаем список асоциаций:
−
<pre class="blockofcode">
+
<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 class="blockofcode"><nowiki>
+
<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 class="blockofcode">
+
<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: Строка 200:
  
 
====Формат:====
 
====Формат:====
−
<pre class="blockofcode"><nowiki>
+
<pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000"><nowiki>
 
{{if expression}}
 
{{if expression}}
−
<То что будет отображаться при истинности expression>
+
<expression true content>
 
{{/if}}
 
{{/if}}
  
  
 
{{if expression}}
 
{{if expression}}
−
<То что будет отображаться при истинности expression>
+
<expression true content>
 
{{else}}
 
{{else}}
−
<То что будет отображаться при ложность expression>
+
<expression false content>
 
{{/if}}
 
{{/if}}
  
  
 
{{if expression1}}
 
{{if expression1}}
−
<То что будет отображаться при истинности expression>
+
<expression1 true content>
 
{{else expression2}}
 
{{else expression2}}
−
<То что будет отображаться при истинности 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: Строка 228:
 
Пример темплейта:
 
Пример темплейта:
  
−
<pre class="blockofcode">
+
<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 существует (не null) и положительный{{/if}}</nowiki>
+
{{if data.aNumber}} data.aNumber is set (not null) and is positive {{/if}}</nowiki>
 
</pre>
 
</pre>
  
−
Когда интерфейс прогрузится, при истинности выражения, тег будет заменён на:
+
Когда интерфейс прогрузится тэг будет заменён на:
−
<pre class="blockofcode">
+
<pre style="background:#373737; color:#aaf; border-radius: 5px; border: #474747 solid;box-shadow: -5px 5px 10px #000">
−
data.aNumber существует (не null) и положительный
+
data.aNumber is set (not null) and is positive
 
</pre>
 
</pre>
 +
Потому что data.aNumber обозначен (не null) и положителен (it's value is 123).
  
 
====Пример 2:====
 
====Пример 2:====
Строка 242: Строка 243:
 
Пример темплейта:
 
Пример темплейта:
  
−
<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>
+
<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 class="blockofcode">
+
<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: Строка 254:
  
 
Пример темплейта:
 
Пример темплейта:
−
<pre class="blockofcode"><nowiki>
+
<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 меньше 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>
+
{{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 class="blockofcode">
+
<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: Строка 266:
 
====Формат:====
 
====Формат:====
  
−
<pre class="blockofcode"><nowiki>
+
<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: Строка 274:
 
Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)).
 
Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)).
  
−
И примером этого является использование тега вывода для печати содержимого (например, {{: value.key1}} и {{: value.key2}}).
+
И примером этого является использование тега вывода для печати содержимого (например, { {: value.key1}} и { {: value.key2}}).
  
 
В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст.
 
В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст.
Строка 280: Строка 281:
  
 
Пример темплейта:
 
Пример темплейта:
−
<pre class="blockofcode">
+
<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: Строка 297:
  
 
Пример темплейта:
 
Пример темплейта:
−
<pre class="blockofcode"><nowiki>
+
<nowiki>
−
{{for data.emptyArray}}
+
    { {for data.emptyArray}}
−
  {{:value.key}}
+
        { {:value.key}}
−
{{empty}}
+
    { {empty}}
−
  Этот список пуст.
+
        This list is empty.
−
{{/for}</nowiki></pre>
+
    { {/for}  
 +
</nowiki>  
 
Когда интерфейс прогрузится, тэги будут заменены на:
 
Когда интерфейс прогрузится, тэги будут заменены на:
−
<pre class="blockofcode">
+
<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:
−
<pre class="blockofcode"><nowiki>{{:helper.link(text, icon, parameters, status, elementClass, elementId)}}</nowiki></pre>
+
    <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 - строка - Иконка в начале кнопки. Примеры: 'refresh', 'shuffle', 'radiation', 'power'.
+
* 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/строка - Опциональный статус ссылки. Может быть null для активной, 'disabled' для неактивной или 'selected' для выбранных.
+
* 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 - null/строка - Если предоставленно, то кнопке будет присвоен класс (используется для стилизации CSS или JavaScript селекторов).
+
* 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 - null/строка - Если предоставленно, то кнопке будет присвоен идентификатор (используется для стилизации CSS или JavaScript селекторов).
 
  
 
'''Example 1: Basic usage'''
 
'''Example 1: Basic usage'''
  
−
<pre class="blockofcode"><nowiki>{{:helper.link('Toggle Power', 'power', { 'option' : 'togglePower' })}}</nowiki></pre>
+
    <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):
  
−
Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:
+
    list("src" = "\ref[src]", "option" = "togglePower")
−
<pre class="blockofcode">list("src" = "\ref[src]", "option" = "togglePower")</pre>
 
  
 
'''Example 2: Multiple parameters'''
 
'''Example 2: Multiple parameters'''
  
−
<pre class="blockofcode"><nowiki>{{:helper.link('Cut Red Wire', 'scissors', { 'wireColor' : 'red', 'action' : 'cut' })}}</nowiki></pre>
+
    <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):
  
−
Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:
+
    list("src" = "\ref[src]", "wireColor" = "red", "action" = "cut")
−
<pre class="blockofcode">list("src" = "\ref[src]", "wireColor" = "red", "action" = "cut")</pre>
 
  
 
==== Bar Helper ====
 
==== Bar Helper ====
 
'''Format:'''
 
'''Format:'''
−
<pre class="blockofcode"><nowiki>{{:helper.displayBar(value, rangeMin, rangeMax, styleClass, styleClass, showText)}}</nowiki></pre>
+
    <nowiki>{{:helper.displayBar(value, rangeMin, rangeMax, styleClass, styleClass, showText)}}</nowiki>
  
 
This helper creates a bar.
 
This helper creates a bar.
Строка 356: Строка 361:
 
'''Example 1: Health'''
 
'''Example 1: Health'''
  
−
<pre class="blockofcode"><nowiki>
+
    <nowiki>{{if data.occupant.health >= 0}}
−
{{if data.occupant.health >= 0}}
+
        {{:helper.displayBar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}}
−
{{:helper.displayBar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}}
+
    {{else}}
−
{{else}}
+
        {{:helper.displayBar(data.occupant.health, 0, data.occupant.minHealth, 'average alignRight')}}
−
{{:helper.displayBar(data.occupant.health, 0, data.occupant.minHealth, 'average alignRight')}}
+
    {{/if}}</nowiki>
−
{{/if}}</nowiki></pre>
+
[[Category:Codebase Guides]]
−
{{Navbox guide}}[[Категория:Руководства]]
+
[[Category:Guides]]

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

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

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

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