Примеры применения асинхронных инструментов библиотеки com/teacode/jet.

package url
 
use libretto/text
 
use com/teacode/jet
use com/teacode/map
 
use view
 
def examples = {
  fix html = 
 
  <div class="block">
       
    <!-- Сохраняем выражение для вычисления значения скролла страницы -->
    #{jet/store("d.scroll", "$('body').scrollTop()")}
 
    <div><img src="/images/libretto.png"/></div>
       
    <h3>Text</h3>
 
    <!-- Элемент id="words" содержит предыдущие значения текстового поля,
      вставленные с помощью метода insertWord -->      
    <div id="words"></div>
       
    <!-- Комментарий -->
    <div class="small">
      Поле с id='newword' name='newword' class='param'<br/>
      Событие 
        onkeyup = #jet/pct;jet/ajax('display, map/s {'type to 'text}, "#newword")
    </div>
       
    <!-- строка текстового ввода с реакцией на событие поднятия клавиши. 
        В ответ на это событие вызывается Libretto метод display -->
    <div>  
      <input
          type="text"
          name="newword"
          id="newword"
          class="param"  
          onkeyup=#jet/ajax(
                      'display, 
                      map/s {'type to 'text}, 
                      "#newword")/> 
         
      <!-- кнопка, инициирующая вставку в элемент id="words" текущего текста из 
          строки ввода с помощью метода insertWord -->
      <button onclick=#jet/ajax('insertWord, (), "#newword")>
        Добавить слово
      </button>
         
      <!-- элемент, в котором с помощью метода display демонстрируется
          текущее значение строки текстового ввода -->
      <div><span class="gr">value:</span> <span id="textdisplay"></span></div>
    </div>
       
    <div>
       
    <h3>Radio</h3>
       
    <!-- Комментарий -->
    <div class="small">
      Радио с name='radio' class='param'<br/>
      Событие 
        onchange = #jet/pct;jet/ajax('display, map/s {'type to 'radio}, "$radio")
    </div>
       
    <!-- комплект радио-кнопок с реакцией на событие изменения значения. 
        В ответ на это событие вызывается метод display -->
    <input
        type="radio"
        name="radio"
        class="param" 
        value="radio-один"
        onchange=#jet/ajax(
                      'display, 
                      map/s {'type to 'radio}, 
                      "$radio")/> 
      One
 
    <input
        type="radio"
        name="radio"
        class="param"
        value="radio-два"
        onchange=#jet/ajax(
                      'display, 
                      map/s {'type to 'radio}, 
                      "$radio")/> 
      Two
 
    <!-- элемент, в который метод display вставляет текущее значение 
        блока радио-кнопок -->
    <div><span class="gr">value:</span> <span id="radiodisplay"></span></div>
       
       
    <h3>Checkbox</h3>
       
       
    <!-- Комментарий -->
    <div class="small">
      Чекбокс с name='newword' class='param'<br/>
      Событие 
        onchange=#jet/pct;jet/ajax('display, map/s {'type to 'checkbox}, ".box")
    </div>
       
    <!-- комплект чекбоксов с реакцией на событие изменения значения. 
        В ответ на это событие вызывается метод display -->
    <input
        type="checkbox"
        name="newword"
        class="param box"
        value="checkbox1"
        onchange=#jet/ajax(
                      'display, 
                      map/s {'type to 'checkbox}, 
                      ".box")/> 
      Один 
       
    <input
        type="checkbox"
        name="newword"
        class="param box" 
        value="checkbox2"
        onchange=#jet/ajax(
                      'display, 
                      map/s {'type to 'checkbox}, 
                      ".box")/> 
      Два
 
    <!-- сюда метод display вставляет текущие значения чекбоксов -->
    <div><span class="gr">value:</span> <span id="checkboxdisplay"></span></div>
     
    <h3>Select</h3>
     
    <!-- Комментарий -->
    <div class="small">
      Селект с name='select' class='param'<br/>
      Событие 
        onchange=#jet/pct;jet/ajax('display, map/s {'type to 'select}, "$select")
    </div>
       
    <!-- выпадающее меню с реакцией на событие изменения значения. 
        В ответ на это событие вызывается метод display -->
    <select
          name="select"
          class="param"
          onchange=#jet/ajax(
                        'display, 
                        map/s {'type to 'select}, 
                        "$select")> 
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
 
    <!-- сюда метод display вставляет текущее значение выпадающего меню -->
    <div><span class="gr">value:</span> <span id="selectdisplay"></span></div>
 
       
    <h3>Кнопки</h3>
       
    <div>
      <span class="ms">Выборка {'select to 115}, "#newword"</span>
      <button
          onclick=#jet/ajax(
                    'showVals, 
                    map/s {'select to 115}, 
                    "#newword")>
        Показать значения</button>
    </div>
 
    <br/>
    <div>
      <span class="ms">Выборка {'select to 120}, "$newword"</span>
      <button
          onclick=#jet/ajax(
                    'showVals, 
                    map/s {'select to 120}, 
                    "$newword")>
        Показать значения</button>
    </div>
       
    <br/>
    <div>
      <span class="ms">Выборка {'select to 125}, (".param", "!d.scroll")</span>
      <button
        onclick=#jet/ajax(
                  'showVals, 
                  map/s {'select to 125}, 
                  (".param", "!d.scroll"))>
        Показать значения
      </button>
    </div>
     
    </div>
     
    <h3>Динамическая ссылка</h3>
 
     
    <div class="small">
      href=#jet/pct;jet/call('syncVals, map/s {'select to 777}, ".param")
    </div>
   
    <a href=#jet/call('syncVals, map/s {'select to 7}, (".param", "!d.scroll"))>
      Передать значения {'select to 7}, (".param", "!d.scroll") на новую страницу
    </a>
 
    <hr/>
     
    <!-- сюда метод showVals вставляет текущие значения, 
         полученные с помощью кнопок -->
    <div id="showvalues" ></div>
  </div>
     
  jet/out: view/page(html, "Libretto")
}
 
// Метод вставляет текущее содержимое строки текстового ввода на страницу, 
// и очищает саму строку
def insertWord = {
  fix word = this.jet/s('newword)
   
  // инструкции корректировки текущей страницы клиента
  jet/append("#words", <div>#{word}</div>). // инструкция добавления текста
    jet/val("#newword", "")  // инструкция очищения строки ввода
}
 
// Метод, публикующий текущие значения элементов, 
// выбранных при нажатии кнопок
def showVals = {
  fix newword = this.jet/s('newword)
  fix radio = this.jet/s('radio)
  fix select = this.jet/s('select)
  fix scroll = this.jet/s("d.scroll")
   
  jet/subst("#showvalues", <div>   // инструкция замены текста в элементе
    #{
      (<div>newword – #{newword.*text/join(", ")}</div>, 
        <div>radio – #{radio.*text/join(", ")}</div>, 
        <div>select – #{select.*text/join(", ")}</div>,
        scroll.<div>d.scroll – #{$}</div>)
    }
  </div>)
}
 
// Метод обрабатывает нажатие гиперссылки с передачей динамических параметров
def syncVals = {
  fix newword = this.jet/s('newword)
  fix radio = this.jet/s('radio)
  fix select = this.jet/s('select)
  fix scroll = this.jet/s("d.scroll")
 
  // загрузка новой страницы на клиента
  jet/out:  
    <div>
      #{
        (<div>newword – #{newword.*text/join(", ")}</div>, 
          <div>radio – #{radio.*text/join(", ")}</div>, 
          <div>select – #{select.*text/join(", ")}</div>,
          scroll.<div>d.scroll – #{$}</div>)
      }
    </div>
}
 
// метод публикации динамических значений элементов.
def display = {
  fix type = this.jet/s('type)
  fix scroll = this.jet/s("d.scroll")
 
  type. {
    case 'radio => jet/subst("#radiodisplay", this.jet/s('radio))
    case 'select => jet/subst("#selectdisplay", this.jet/s('select))
    case 'text => jet/subst("#textdisplay", this.jet/s('newword))
    case 'checkbox => 
      jet/subst("#checkboxdisplay", this.jet/s('newword).*text/join(", "))
    case _ => jet/alert("???")
  }
   
  
}