динамическое создание идентификаторов макрокомпонентов с использованием аргументов - PullRequest
Новая
       10

динамическое создание идентификаторов макрокомпонентов с использованием аргументов

0 голосов
/ 25 октября 2011

Я пытаюсь создать две сетки, которые выполняют одну и ту же функцию, не дублируя код кода для сетки дважды. Итак, я решил использовать макрокомпонент. Но я не уверен, как динамически создавать идентификаторы компонентов в макрокомпоненте. Код делает следующее:

Первая сетка (западный регион) состоит из двух строк с двумя текстовыми полями. Если я добавлю «привет» в первое текстовое поле в этой сетке, то значение второго текстового поля также будет установлено в «привет».

Вторая сетка (центральная область) имеет две строки с двумя текстовыми полями. Если я добавлю «мир» в первое текстовое поле в этой сетке, то значение второго текстового поля также будет установлено на «мир»

  • Значения обоих текстовых полей в первой сетке теперь совпадают, т. Е. "Привет"
  • Значения обоих текстовых полей во второй сетке теперь одинаковы, то есть "мир"

Я создал файл zul, в котором я использую макрос-компонент примерно так: 

<?component name="mygrid1" macro-uri="grid1.zul" inline="true"?>
<zk>
<vbox hflex="1">
  <borderlayout height="500px" width="500px">
    <west size="50%">
      <mygrid1 id="grid1" index="1" />
    </west>
    <center>
      <mygrid1 id="grid2" index="2" />
    </center>
  </borderlayout>
</vbox>
</zk>
<zscript>
  fillInDuplicateBox(String value, Textbox duplicateBox) {
    if (!"".contentEquals(duplicateBox.value))
            return;
    duplicateBox.value = value;
  }
</zscript>
</window>

Макрокомпонент показан ниже: 

<zk>
<vbox hflex="1">
  <grid width="300px">
    <rows>
      <row> Box 1: <textbox id="${concat("newBox", arg.index)}" onChange="fillInDuplicateBox(${concat("newBox, arg.index)}.value, ${concat("duplicateBox", arg.index)})" hflex="1" /></row>
      <row> Box 2: <textbox id="${concat("duplicateBox", arg.index)}" hflex="1" /></row>
    </rows>
  </grid>                   
</vbox>
</zk>

Я также попробовал следующий код для создания макрокомпонента 

<zk>
  <vbox hflex="1">
    <grid width="300px">
      <rows>
         <row> Box 1: <textbox id="newBox${arg.index}" onChange="fillInDuplicateBox(newBox${arg.index}.value, duplicateBox${arg.index})" hflex="1" /></row>
         <row> Box 2: <textbox id="duplicateBox${arg.index}" hflex="1" /></row>
      </rows>
    </grid> 
  </vbox>
</zk>

Ничего из этого не работает. Я не уверен, как динамически создавать идентификаторы компонентов в макрокомпоненте. Идентификаторы текстового поля первой сетки должны быть «newBox1», «duplicateBox1», а идентификаторы текстового поля второй сетки должны быть «newBox2», «duplicateBox2»

Укажите, есть ли лучший способ решения этой задачи.

Спасибо, Sony

1 Ответ

1 голос
/ 11 января 2012

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

Я упростил и расширил ваш пример, приведя два примера. Первый использует onChanging для немедленного копирования при вводе текста. Вторая пара ящиков использует привязку данных. 

<?component name="mygrid1" macro-uri="/grid1.zul" ?>
<zk>
   <window>
      <vbox hflex="1">
         <mygrid1 id="grid1" myGridTitle="First" />
         <mygrid1 id="grid2" myGridTitle="Another" />
      </vbox>
   </window>
</zk>

Вот макрокомпонент в grid1.zul: 

<zk>
   <zscript><![CDATA[
   String myBoundString = "initial value";
]]></zscript>
   <vbox hflex="1">
      <grid>
         <rows>
            <row>
               <hbox><label value="${arg.myGridTitle}" /> Source</hbox>
               <textbox id="originalText" hflex="1" onChanging="duplicateText.value = event.value" />
            </row>
            <row>
               <hbox><label value="${arg.myGridTitle}" /> Source copies here:</hbox>
               <textbox id="duplicateText" hflex="1" />
            </row>
            <row>
               Bound to myBoundString:
               <textbox id="boundText1" value="@{myBoundString}" hflex="1" />
            </row>
            <row>
               Bound to boundText1:
               <textbox id="boundText2" value="@{boundText1.value, load-when=boundText1.onChange}" hflex="1" />
            </row>
         </rows>
      </grid>
   </vbox>
</zk>

В примере привязки данных вы должны изменить «начальное значение» и затем убрать вкладку, прежде чем связыватель обновит boundText2. Также обратите внимание, что у TextBox есть идентификаторы (boundText1 и boundText2), но это не влияет на достижение ожидаемой функциональности в нескольких экземплярах макрокомпонента.

...