NanoUi: различия между версиями

Материал из Infinity Project
Перейти к навигации Перейти к поиску
(Замена категории|Добавлена таблица навигации по руководствам.)
 
(не показано 28 промежуточных версий 1 участника)
Строка 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
+
<div class="blockofcode">
      name = "womdinger"
+
/obj/item/device/wombdinger
      desc = "It's some kind of crude alien device."
+
name = "womdinger"
      icon = 'icons/obj/wombdinger.dmi'
+
desc = "It's some kind of crude alien device."
      icon_state = "0"</pre>
+
icon = 'icons/obj/wombdinger.dmi'
 +
icon_state = "0"
 +
</div>
  
 
Создадим для него прок <i>attack_self</i> куда мы будем передавать, как mob, того кто использовал предмет.
 
Создадим для него прок <i>attack_self</i> куда мы будем передавать, как mob, того кто использовал предмет.
  
 
Файл теперь выглядит так:
 
Файл теперь выглядит так:
<pre>/obj/item/device/wombdinger
+
<div class="blockofcode">
      name = "womdinger"
+
/obj/item/device/wombdinger
      desc = "It's some kind of crude alien device."
+
name = "womdinger"
      icon = 'icons/obj/wombdinger.dmi'
+
desc = "It's some kind of crude alien device."
      icon_state = "0"
+
icon = 'icons/obj/wombdinger.dmi'
/obj/item/device/wombdinger/attack_self(mob/user as mob)</pre>
+
icon_state = "0"
 +
/obj/item/device/wombdinger/attack_self(mob/user as mob)
 +
</div>
  
 
Теперь чтобы открыть NanoUi нужно поместить в attack_self прок вызова Ui, то есть ui_interact, которому нужно передать пользователя.
 
Теперь чтобы открыть NanoUi нужно поместить в attack_self прок вызова Ui, то есть ui_interact, которому нужно передать пользователя.
  
 
Файл теперь выглядит так:
 
Файл теперь выглядит так:
<pre>/obj/item/device/wombdinger
+
<div class = "blockofcode">
      name = "womdinger"
+
/obj/item/device/wombdinger
      desc = "It's some kind of crude alien device."
+
name = "womdinger"
      icon = 'icons/obj/wombdinger.dmi'
+
desc = "It's some kind of crude alien device."
      icon_state = "0"
+
icon = 'icons/obj/wombdinger.dmi'
/obj/item/device/wombdinger/attack_self(mob/user as mob)
+
icon_state = "0"
      ui_interact(user)</pre>
 
  
 +
/obj/item/device/wombdinger/attack_self(mob/user as mob)
 +
ui_interact(user)
 +
</div>
 
Теперь нужно создать сам прок 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>
+
<div class = "blockofcode">
 +
/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
 +
</div>
  
 
Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса.
 
Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса.
Строка 40: Строка 48:
 
Массив <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)
+
<div class = "blockofcode">
      var/list/data = list()
+
/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["myName"] = name
      data["someString"] = "I am a string."
+
data["myDesc"] = desc
      data["aNumber"] = 123
+
data["someString"] = "I am a string."
     
+
data["aNumber"] = 123
      data["assocList"] = list("key1" = "Value1", "key2" = "Value2")
+
     
+
data["assocList"] = list("key1" = "Value1", "key2" = "Value2")
      // Обратный слэш говорит компилятору игнорировать перенос строки, полезно для улучшения читабельности кода.
+
      data["arrayOfAssocLists"] = list(\  
+
// Обратный слэш говорит компилятору игнорировать перенос строки, полезно для улучшения читабельности кода.
          list("key1" = "ValueA1", "key2" = "ValueA2"),\
+
data["arrayOfAssocLists"] = list(\  
          list("key1" = "ValueB1", "key2" = "ValueB2"),\
+
list("key1" = "ValueA1", "key2" = "ValueA2"),\
          list("key1" = "ValueC1", "key2" = "ValueC2")
+
list("key1" = "ValueB1", "key2" = "ValueB2"),\
      )
+
list("key1" = "ValueC1", "key2" = "ValueC2")
     
+
)
      data["emptyArray"] = list()
+
     
+
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 с данными переданными данными если они переданы, возврашает null если ui не найдено, или ui не передаётся, или если force_open == 1 или true
      //Если ui не открыт то мы открываем его:
+
ui = nanomanager.try_update_ui(user, src, ui_key, ui, data, force_open)
      if (!ui)
+
//Если ui не открыт то мы открываем его:
          // Список параметров ui можно найти в \code\modules\nano\nanoui.dm
+
if (!ui)
          ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)
+
// Список параметров ui можно найти в \code\modules\nano\nanoui.dm
          // Если ui открыт первый раз то мы используем эти данные:
+
ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)
          ui.set_initial_data(data)
+
// Если ui открыт первый раз то мы используем эти данные:
          // Открываем новое окно ui
+
ui.set_initial_data(data)
          ui.open()</pre>
+
// Открываем новое окно ui
 +
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)")
Строка 94: Строка 104:
  
 
Теперь создадим темплейт кода для womdinger.tmpl:
 
Теперь создадим темплейт кода для womdinger.tmpl:
<pre>
+
<div class = "blockofcode"><nowiki>
  <div class="item">
+
<div class="item">
        <div class="itemLabel">
+
<div class="itemLabel">
            <b>Object Name</b>:
+
<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>
        <div class="itemContent">
+
<div class="item">
            {{:data.myName}}
+
<div class="itemLabel">
        </div>
+
<b>Associated list values</b>:
    </div>
+
                </div>
    <div class="item">
+
<div class="itemContent">
        <div class="itemLabel">
+
{{:data.assocList.key1}} and {{:data.assocList.key2}}
            <b>Object Description</b>:
+
</div>
        </div>
+
</div>
        <div class="itemContent">
+
</nowiki></div>
            {{: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} } и т. Д.).
  
Строка 149: Строка 159:
  
 
====Формат:====
 
====Формат:====
<pre><nowiki>   {{:data.variable}}</nowiki></pre>
+
<pre class="blockofcode"><nowiki>{{:data.variable}}</nowiki></pre>
  
 
Тэг вывода выводит на окно значение переменной как сроку
 
Тэг вывода выводит на окно значение переменной как сроку
Строка 157: Строка 167:
 
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:
 
В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:
  
<pre>
+
<pre class="blockofcode">
    data["someString"] = "I am a string"  
+
data["someString"] = "I am a string"  
 
</pre>
 
</pre>
 
И в womdinger.tmpl мы запрашиваем доступ к data с ключём:
 
И в womdinger.tmpl мы запрашиваем доступ к data с ключём:
<pre><nowiki>
+
<pre class="blockofcode"><nowiki>
    {{:data.someString}}  
+
{{:data.someString}} </nowiki>
</pre></nowiki>
+
</pre>
 
Когда интерфейс прогрузится, тэг будет прогружен как:
 
Когда интерфейс прогрузится, тэг будет прогружен как:
<pre>
+
<pre class="blockofcode">
    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 class="blockofcode">
 
data["assocList"] = list("key1" = "Value1", "key2" = "Value2")  
 
data["assocList"] = list("key1" = "Value1", "key2" = "Value2")  
 
</pre>
 
</pre>
  
 
Вы можете получать доступ к элементам списка используя точку (.):
 
Вы можете получать доступ к элементам списка используя точку (.):
<pre><nowiki>
+
<pre class="blockofcode"><nowiki>
{{:data.assocList.key1}} and {{:data.assocList.key2}}  
+
{{:data.assocList.key1}} and {{:data.assocList.key2}}</nowiki>
</pre></nowiki>
+
</pre>
 
Когда интерфейс прогрузится, тэг будет заменён на:
 
Когда интерфейс прогрузится, тэг будет заменён на:
<pre>
+
<pre class="blockofcode">
 
Value1 and Value2
 
Value1 and Value2
 
</pre>
 
</pre>
 +
 
===Тэг If===
 
===Тэг If===
  
 
====Формат:====
 
====Формат:====
<pre><nowiki>
+
<pre class="blockofcode"><nowiki>
{{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}}
</pre></nowiki>
+
<То что будет отображаться при истинности expression>
Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите { {if data.is_prog}}, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется).
+
{{/if}}
 +
 
 +
 
 +
{{if expression}}
 +
<То что будет отображаться при истинности expression>
 +
{{else}}
 +
<То что будет отображаться при ложность expression>
 +
{{/if}}
 +
 
 +
 
 +
{{if expression1}}
 +
<То что будет отображаться при истинности expression>
 +
{{else expression2}}
 +
<То что будет отображаться при истинности expression2>
 +
{{/if}}</nowiki>
 +
</pre>
 +
Тэг 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>
+
 
{{if data.aNumber}} data.aNumber is set (not null) and is positive {{/if}  
+
<pre class="blockofcode">
</pre></nowiki>
+
<nowiki>
Когда интерфейс прогрузится тэг будет заменён на:
+
{{if data.aNumber}}data.aNumber существует (не null) и положительный{{/if}}</nowiki>
<pre>
+
</pre>
data.aNumber is set (not null) and is positive
+
 
 +
Когда интерфейс прогрузится, при истинности выражения, тег будет заменён на:
 +
<pre class="blockofcode">
 +
data.aNumber существует (не null) и положительный
 
</pre>
 
</pre>
Потому что data.aNumber обозначен (не null) и положителен (it's value is 123).
 
  
 
====Пример 2:====
 
====Пример 2:====
Строка 212: Строка 242:
 
Пример темплейта:
 
Пример темплейта:
  
<pre>{{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">{{if data.someString == "Who goes there?"}} Some string is "Who goes there?" {{else}} Some string is not "Who goes there?" {{/if}</pre>
  
 
Когда интерфейс прогрузится тэг будет заменён на:
 
Когда интерфейс прогрузится тэг будет заменён на:
<pre>
+
<pre class="blockofcode">
 
Some string is not "Who goes there?"  
 
Some string is not "Who goes there?"  
 
</pre>
 
</pre>
Строка 223: Строка 253:
  
 
Пример темплейта:
 
Пример темплейта:
<pre><nowiki>
+
<pre class="blockofcode"><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}  
+
{{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></nowiki>
+
</pre>
 
Когда интерфейс прогрузится тэг будет заменён на:
 
Когда интерфейс прогрузится тэг будет заменён на:
<pre>
+
<pre class="blockofcode">
 
data.aNumber is less than 150  
 
data.aNumber is less than 150  
 
</pre>
 
</pre>
Строка 234: Строка 264:
 
===Тэг for===
 
===Тэг for===
 
====Формат:====
 
====Формат:====
<pre><nowiki>
+
 
 +
<pre class="blockofcode"><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}}
</pre></nowiki>
+
</nowiki></pre>
 
Цикл по элементам массива (массив - список с нумерацией элементов начинающейся с 0 (it does not use strings as keys).
 
Цикл по элементам массива (массив - список с нумерацией элементов начинающейся с 0 (it does not use strings as keys).
  
 
Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)).
 
Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)).
  
И примером этого является использование тега вывода для печати содержимого (например, { {: value.key1}} и { {: value.key2}}).
+
И примером этого является использование тега вывода для печати содержимого (например, {{: value.key1}} и {{: value.key2}}).
  
 
В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст.
 
В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст.
Строка 249: Строка 280:
  
 
Пример темплейта:
 
Пример темплейта:
 +
<pre class="blockofcode">
 
<nowiki>
 
<nowiki>
 
     {{for data.arrayOfAssocLists}}
 
     {{for data.arrayOfAssocLists}}
         { {:index}} -> { {:value.key1}} and { {:value.key2}}<br>
+
         {{:index}} -> {{:value.key1}} and {{:value.key2}}
 
     {{/for}     
 
     {{/for}     
 
</nowiki>
 
</nowiki>
 +
</pre>
 
Когда интерфейс прогрузится, тэги будут заменены на:
 
Когда интерфейс прогрузится, тэги будут заменены на:
  
Строка 259: Строка 292:
 
   1 -> ValueB1 and ValueB2
 
   1 -> ValueB1 and ValueB2
 
   2 -> ValueC1 and ValueC2
 
   2 -> ValueC1 and ValueC2
 +
 
====Пример 2====
 
====Пример 2====
  
 
Пример темплейта:
 
Пример темплейта:
<nowiki>
+
<pre class="blockofcode"><nowiki>
    { {for data.emptyArray}}
+
{{for data.emptyArray}}
        { {:value.key}}
+
  {{:value.key}}
    { {empty}}
+
{{empty}}
        This list is empty.
+
  Этот список пуст.
    { {/for}  
+
{{/for}</nowiki></pre>
</nowiki>  
 
 
Когда интерфейс прогрузится, тэги будут заменены на:
 
Когда интерфейс прогрузится, тэги будут заменены на:
<pre>
+
<pre class="blockofcode">
This list is empty.
+
  Этот список пуст.
 
</pre>
 
</pre>
  
 
=== Template Helpers ===
 
=== Template 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 - функции написанные на JavaScript, которые можно вызывать вместе с темплейтами.
 
 
Helpers are accessed via the "helper" object.
 
  
 
==== Link Helper ====
 
==== Link Helper ====
  
'''Format:
+
Формат:
    <nowiki>{{:helper.link(text, icon, parameters, status, elementClass, elementId)}}</nowiki>'''
+
<pre class="blockofcode"><nowiki>{{:helper.link(text, icon, parameters, status, elementClass, elementId)}}</nowiki></pre>
  
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 - string - The text which appears on the link.
+
* text - строка - Текст на кнопке.
* 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.
+
* icon - строка - Иконка в начале кнопки. Примеры: 'refresh', 'shuffle', 'radiation', 'power'.
* 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.
+
* parameters - JSON - Параметры отсылаемые серверу по нажатию.
* 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).
+
* status - null/строка - Опциональный статус ссылки. Может быть null для активной, 'disabled' для неактивной или 'selected' для выбранных.
* 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).
+
* elementClass - null/строка - Если предоставленно, то кнопке будет присвоен класс (используется для стилизации CSS или JavaScript селекторов).
 +
* elementId - null/строка - Если предоставленно, то кнопке будет присвоен идентификатор (используется для стилизации CSS или JavaScript селекторов).
  
 
'''Example 1: Basic usage'''
 
'''Example 1: Basic usage'''
  
    <nowiki>{{:helper.link('Toggle Power', 'power', { 'option' : 'togglePower' })}}</nowiki>'''
+
<pre class="blockofcode"><nowiki>{{:helper.link('Toggle Power', 'power', { 'option' : 'togglePower' })}}</nowiki></pre>
 
 
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")
+
Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:
 +
<pre class="blockofcode">list("src" = "\ref[src]", "option" = "togglePower")</pre>
  
 
'''Example 2: Multiple parameters'''
 
'''Example 2: Multiple parameters'''
  
    <nowiki>{{:helper.link('Cut Red Wire', 'scissors', { 'wireColor' : 'red', 'action' : 'cut' })}}</nowiki>'''
+
<pre class="blockofcode"><nowiki>{{:helper.link('Cut Red Wire', 'scissors', { 'wireColor' : 'red', 'action' : 'cut' })}}</nowiki></pre>
 
 
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")
+
Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:
 +
<pre class="blockofcode">list("src" = "\ref[src]", "wireColor" = "red", "action" = "cut")</pre>
  
 
==== Bar Helper ====
 
==== Bar Helper ====
 
'''Format:'''
 
'''Format:'''
    <nowiki>{{:helper.displayBar(value, rangeMin, rangeMax, styleClass, styleClass, showText)}}</nowiki>
+
<pre class="blockofcode"><nowiki>{{:helper.displayBar(value, rangeMin, rangeMax, styleClass, styleClass, showText)}}</nowiki></pre>
  
 
This helper creates a bar.
 
This helper creates a bar.
Строка 326: Строка 356:
 
'''Example 1: Health'''
 
'''Example 1: Health'''
  
    <nowiki>{{if data.occupant.health >= 0}}
+
<pre class="blockofcode"><nowiki>
        {{:helper.displayBar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}}
+
{{if data.occupant.health >= 0}}
    {{else}}
+
{{:helper.displayBar(data.occupant.health, 0, data.occupant.maxHealth, 'good')}}
        {{:helper.displayBar(data.occupant.health, 0, data.occupant.minHealth, 'average alignRight')}}
+
{{else}}
    {{/if}}</nowiki>
+
{{:helper.displayBar(data.occupant.health, 0, data.occupant.minHealth, 'average alignRight')}}
 
+
{{/if}}</nowiki></pre>
[[Category:Codebase Guides]]
+
{{Navbox guide}}[[Категория:Руководства]]
[[Category:Guides]]
 

Текущая версия на 14:03, 22 апреля 2021

Тихо! Идёт работа!
Статья или раздел находится в процессе написания и использовать её на сервере необходимо с осторожностью, информация может быть неточной. Вы можете помочь с её заполнением.

Код Dream Maker

Мы начнём с создания простейшего NanoUi. Чтобы понять как писать индусский код оно работает.
Для начала создадим простейший интерфейс для объекта "womdinger".

Вот файл нашего объекта:

/obj/item/device/wombdinger name = "womdinger" desc = "It's some kind of crude alien device." icon = 'icons/obj/wombdinger.dmi' icon_state = "0"

Создадим для него прок attack_self куда мы будем передавать, как mob, того кто использовал предмет.

Файл теперь выглядит так:

/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)

Теперь чтобы открыть NanoUi нужно поместить в attack_self прок вызова Ui, то есть ui_interact, которому нужно передать пользователя.

Файл теперь выглядит так:

/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)

Теперь нужно создать сам прок ui_interact, создадим его в этом же файле:

/obj/item/device/wombdinger/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)

Создав его нам нужно поместить в него что-то, если точнее это данные и логику создания/обновления интерфейса.

Массив data передаёт значения в нужный темплейт. О темплейтах позже.

/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()

Две важные вещи в коде выше это data, а точнее список ассоциаций и создание NanoUi: ("ui = new(user, src, ui_key, "womdinger.tmpl", "Womdinger UI", 520, 410)")

Первые три параметра nanoui никогда не меняются user(пользователь), src(цель пользователя), ui_key(ui ключ(уточнить)).

Остальные четыре параметра это темплейт который будет использоваться, заголовок окна, ширина и высота:

Темплейт должен именоваться именем файла в \nano\templates\

Ширина - это ширина как ни странно окна ui в пикселях.

Высота - высота окна ui в пикселях

Это всё что нам нужно в DM файле, прейдём к темплейтам.

Создаём темплейт и учим HTML[править]

NanoUI разделяет разметку отображения и код логики (файлы DM) и помещает его в файлы шаблонов (.tmpl). Файлы шаблонов - это в основном HTML-документы с разметкой, добавленной для динамических элементов, такие как кнопки.

В предыдущем разделе мы настроили наш файл womdinger.dm. В этом файле, в рамках процедуры ui_interact, имеется ссылка на файл «womdinger.tmpl». Нам нужно создать этот файл в папке \nano\templates\

Примечание: начиная с последнего обновления библиотеки NanoUI больше нет необходимости добавлять файлы шаблонов в клиентский процесс send_resources, поскольку это обрабатывается автоматически.

Теперь создадим темплейт кода для womdinger.tmpl:

<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>

Шаблон представляет собой стандартный HTML4 с дополнительными тегами разметки (заключенными в фигурные скобки { {...} }(Без пробелов в скобках, из-за вики тут они превращаются в шаблоны так что должно выглядеть как {{}}, а между ними содержимое)) для динамического содержимого (печать, условные операторы { {if} }, циклы { {for} } { {while} } и т. Д.).

Стиль по умолчанию для шаблона предоставляется файлом shared.css в папке /nano/css

Вот и все, самый простой пользовательский интерфейс, который вы можете создать в NanoUI. В следующем разделе мы рассмотрим использование дополнительных тегов разметки для динамического содержимого.

Спец тэги разметки темплейтов[править]

Специальный тэги разметки используются для добавления в темплейт динамических элементов зависящих от .dm части кода.

Тэг вывода[править]

Формат:[править]

{{:data.variable}}

Тэг вывода выводит на окно значение переменной как сроку

Пример 1:[править]

В womdinger.dm, в ui_interact, мв ставим значение для "someString" ключа массива Data:

data["someString"] = "I am a string" 

И в womdinger.tmpl мы запрашиваем доступ к data с ключём:

{{:data.someString}} 

Когда интерфейс прогрузится, тэг будет прогружен как:

I am a string.

I am a string.

Пример 2:[править]

В womdinger.dm, в ui_interact, мы делаем список асоциаций:

data["assocList"] = list("key1" = "Value1", "key2" = "Value2") 

Вы можете получать доступ к элементам списка используя точку (.):

{{:data.assocList.key1}} and {{:data.assocList.key2}}

Когда интерфейс прогрузится, тэг будет заменён на:

Value1 and Value2

Тэг If[править]

Формат:[править]

{{if expression}}
	<То что будет отображаться при истинности expression>
{{/if}}


{{if expression}}
	<То что будет отображаться при истинности expression>
{{else}}
	<То что будет отображаться при ложность expression>
{{/if}}


{{if expression1}}
	<То что будет отображаться при истинности expression>
{{else expression2}}
	<То что будет отображаться при истинности expression2>
{{/if}}

Тэг If отображает информацию в зависимости от правдивости данного выражения. Если вы видите Шаблон:If data.is prog, то это проверка на присутствие переменной is_prog (если is_prog равен null или 0 или не обозначен, то действие не выполняется).

Комбинируя if и тэг else можно отображать другую информацию если выражение равно True. "{{else expression2}}"), выдача выражения тэгу else даёт тэгу else функционал elseif

Пример 1:[править]

Пример темплейта:


{{if data.aNumber}}data.aNumber существует (не null) и положительный{{/if}}

Когда интерфейс прогрузится, при истинности выражения, тег будет заменён на:

data.aNumber существует (не null) и положительный

Пример 2:[править]

Пример темплейта:

{{if data.someString == "Who goes there?"}} Some string is "Who goes there?" {{else}} Some string is not "Who goes there?" {{/if}

Когда интерфейс прогрузится тэг будет заменён на:

Some string is not "Who goes there?" 

Потому что выражение (someString == "Who goes there?") не истинно.

Пример 3:[править]

Пример темплейта:

{{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}

Когда интерфейс прогрузится тэг будет заменён на:

data.aNumber is less than 150 

Потому что выражение подходит под второй else тэг (data.aNumber < 150).

Тэг for[править]

Формат:[править]

   {{for array}} <list entry content> {{/for}} 
   {{for array}} <list entry content> {{empty}} <empty list content> {{/for}}

Цикл по элементам массива (массив - список с нумерацией элементов начинающейся с 0 (it does not use strings as keys).

Каждый раз, когда тег for выполняет проходит по массиву, он устанавливает переменную ("value" по умолчанию) для данных текущей записи (другая переменная, значение по умолчанию «index», содержит индекс (номер элемента в массиве)).

И примером этого является использование тега вывода для печати содержимого (например, Value.key1 и Value.key2).

В сочетании с empty тегом тег for может отображать содержимое, когда массив пуст.

Пример 1[править]

Пример темплейта:


    {{for data.arrayOfAssocLists}}
        {{:index}} -> {{:value.key1}} and {{:value.key2}}
    {{/for}    

Когда интерфейс прогрузится, тэги будут заменены на:

  0 -> ValueA1 and ValueA2
  1 -> ValueB1 and ValueB2
  2 -> ValueC1 and ValueC2

Пример 2[править]

Пример темплейта:

{{for data.emptyArray}}
  {{:value.key}}
{{empty}}
  Этот список пуст.
{{/for}

Когда интерфейс прогрузится, тэги будут заменены на:

  Этот список пуст.

Template Helpers[править]

Helpers - функции написанные на JavaScript, которые можно вызывать вместе с темплейтами.

Link Helper[править]

Формат:

{{:helper.link(text, icon, parameters, status, elementClass, elementId)}}

Генерирует ссылку (которая стандартно стилизована как кнопка). При нажатии на кнопку будут отправлены настроенные параметры на сервер.

Аргументы:

  • 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

{{:helper.link('Toggle Power', 'power', { 'option' : 'togglePower' })}}

Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:

list("src" = "\ref[src]", "option" = "togglePower")

Example 2: Multiple parameters

{{:helper.link('Cut Red Wire', 'scissors', { 'wireColor' : 'red', 'action' : 'cut' })}}

Если нажать на эту кнопку, в получающем объекте в переменной прока Topic href_list появятся следующие записи:

list("src" = "\ref[src]", "wireColor" = "red", "action" = "cut")

Bar Helper[править]

Format:

{{:helper.displayBar(value, rangeMin, rangeMax, styleClass, styleClass, showText)}}

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

{{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}}