Опережающий выбор из списка во время набора

Это очень полезный инструмент, пример его использования в программе InDesign — панель Quick Apply. Вы видите список, или часть его, и по мере набора текста в поле ввода список фильтруется — остаются только слова, начинающиеся с введенных пользователем букв.

picked = type_ahead (["bat", "bear", "beaver", "bee", "cat", "cats_and_dogs",

"dog", "maggot", "moose", "moth", "mouse"]);

function type_ahead (array)

{

var w = new Window ("dialog", "Quick select");

var entry = w.add ("edittext", [0, 0, 150, 22]);

entry.active = true;

var list = w.add ("listbox", [0, 0, 150, 220], array, {scrolling: true });

list.selection = 0;

entry.onChanging = function ()

{

var temp = this. text;

list.removeAll ();

for (var i = 0; i < array.length; i++)

if (array[i].toLowerCase().indexOf (temp) == 0)

list.add ("item", array[i]);

if (list.items.length > 0)

list.selection = 0;

}

entry.onChange = function () {w.close (1)}

if (w.show ()!= 2)

return list.selection.text;

Else

w.close ();

}

 

Здесь используется отклик на событие onChanging, контролирующий поле ввода текста. При появлении там нового символа функция отклика помещает содержимое строки в переменную temp (var temp = this. text) и удаляет содержимое списка. После этого список формируется заново, помещая в него слова из массива array, первые буквы которых совпали с содержимым переменной temp. Если в результате в списке что-то есть, выделяется первый элемент этого списка.

Обратите внимание, что в этом меню нет кнопки ОК, которая, казалось бы, должна быть для подтверждения правильности выбора. Вместо этого используется функция отклика onChange, реагирующая на нажатие клавиш Enter/Return или Tab. Эта функция отклика возвращает 1 функции w.show(), что закрывает окно и возвращает выбранную из списка строку.

 

 

Элемент управления dropdownlist (выпадающий список)

Выпадающие списки по многим аспектам схожи со списками (listbox), основное различие в том, что вы видите только одну строку списка, если он свернут, и в развернутом списке можно выбрать только одну строку. Если бы можно было выбирать несколько строк, то это было бы то же самое, что описанный ранее список с возможностью выбора нескольких объектов.

Вот пример выпадающего списка:

var w = new Window ("dialog");

var myDropDown = w.add ("dropdownlist", undefined, ["one", "two", "three"]);

myDropDown.selection = 1;

w.show ();

 

Чтобы узнать, какая стока выбрана, воспользуйтесь свойством text:

myChoice = myDropDown.selection.text;

Можно также узнать индекс выбранной строки:

myChoice = myDropDown.selection.index;

Так же как со списками, в выпадающий список можно помещать изображения:

myDropDown.items[0].image = myImage

 

 

Элемент управления treeview (древовидная структура)

Список типа treeview создают древовидную структуру, похожую на дерево папок, которое мы видим в менеджере файлов. Вот пример:

var w = new Window ("dialog");

var myTree = w.add ("treeview", [0, 0, 100, 150]);

var myDigits = myTree.add ("node", "Digits");

myDigits.add ("item", "one");

myDigits.add ("item", "two");

myDigits.add ("item", "three");

var myNames = myTree.add ("node", "Names");

myNames.add ("item", "Winnie");

myNames.add ("item", "Piglet");

myNames.add ("item", "Tigger");

myDigits.expanded = true;

myNames.expanded = true;

w.show ();

По умолчанию все вложенные списки свернуты (в таких списках их часто называют узлами). Чтобы развернуть любой из них, дважды щелкните по названию, или один раз по плюсику, предваряющему название списка.

Чтобы развернуть содержимое узла при открытии окна, надо свойству expanded разворачиваемого узла назначить значение true, в нашем примере есть узлы myDigits и myNames, строки myDigits.expanded = true и myNames.expanded = true инициируют развертывание этих узлов при открытии окна w.

Невозможно при развертывании такого окна указать, какая из строк выбрана.

Можно вкладывать узел в узел, создавая таким образом многоуровневые древовидные структуры. Вот пример:

var w = new Window ("dialog");

var myTree = w.add ("treeview", [0, 0, 120, 170]);

var myDigits = myTree.add ("node", "Digits");

myDigits.add ("item", "one");

myTwo = myDigits.add ("node", "two");

myTwo.add ("item", "twee");

myTwo.add ("item", "deux");

myTwo.add ("item", "dwa");

myDigits.add ("item", "three");

var myNames = myTree.add ("node", "Names");

myNames.add ("item", "Winnie");

myNames.add ("item", "Piglet");

myNames.add ("item", "Tigger");

myDigits.expanded = true;

w.show ();

Пример использования инструмента управления treeview можно найти в скрипте Габе Харба (Gabe Harbs), демонстрирующего иерархию создания стилей абзаца и скрипте Питера Карела для работы GREP-операторами http://www.kahrel.plus.com/indesign/grep_editor.html

 

 

Оператор tabbedpanel (вкладка)

Это третий вариант контейнера данных в пользовательском интерфейсе (работает в скриптах, начиная с версии CS4). Вкладка определяется как группа или панель посредством идентификатора tabbedpanel. Вы знакомы с этим средством, т.к. InDesign использует его во многих диалогах. И следующий скрипт частично воспроизводит один из таких диалогов с использованием вкладок, а именно экспорт XML-данных. Пользователь не может управлять оформлением этих вкладок.

 

var w = new Window ("dialog", "Export XML", undefined, {closeButton: false });

w.alignChildren = "right";

var tpanel = w.add ("tabbedpanel");

tpanel.alignChildren = ["fill", "fill"];

tpanel.preferredSize = [350,300];

var general = tpanel.add ("tab", undefined, "General");

general.alignChildren = "fill";

var g_options = general.add ("panel", undefined, "Options");

g_options.alignChildren = "left";

g_options.dtd_decl = g_options.add ("checkbox", undefined, "Include DTD Declaration");

g_options.view_XML = g_options.add ("checkbox", undefined, "View XML Using: ");

g_options.export_sel = g_options.add ("checkbox", undefined, "Export From Selected Element");

g_options.export_untagged = g_options.add ("checkbox", undefined, "Export Untagged Tables as CALS XML");

g_options.remap = g_options.add ("checkbox", undefined, "Remap Break, Whitespace, and Special Characters");

g_options.xslt = g_options.add ("checkbox", undefined, "Apply XSLT: ");

g_options.add ("statictext", undefined, "Encoding: ");

var images = tpanel.add ("tab", undefined, "Images");

images.alignChildren = "fill";

var img_options = images.add ("panel", undefined, "Image Options");

var buttons = w.add ("group");

buttons.add ("button", undefined, "Export", {name: "ok"});

buttons.add ("button", undefined, "Cancel");

w.show ();

Элемент управления progressbar (индикатор выполнения задания, прогрессбар)

Этот инструмент управления используется для вывода на экран одной или нескольких линий, отображающих ход исполнения задания. В основе простая идея — длительность линии и время исполнения скрипта связаны между собой.

Инструмент имеет четыре параметра:

w.add ("progressbar", space, start, stop);

space — пространство отображения индикатора, например, [12, 12, 900, 24] или {x:20, y:12, width:300, height:12}

start и stop — начальное и конечное значения параметра, определяющего время отображения инструмента на экране.

Обычно значение параметра start равно нулю, но она может быть и равно индексу последнего индекса массива, если с помощью этого инструмента отображается обработка массива. Вот пример:

#target indesign;
#targetengine "session";
var list = ["one", "two", "three", "four", "five", "six"];
var progress = progress_bar (list.length);

for (var i = 0; i < list.length; i++)
{
progress.value = i+1;
// user functions
$.sleep (400);
}
progress.parent.close();

function progress_bar (stop)
{ // Won't work with var w
w = new Window ("palette");
var pbar = w.add ("progressbar", undefined, 1, stop);
pbar.preferredSize = [300,20];
w.show ();
return pbar;
}

 

Обратите внимание, что JavaScript требует, чтобы функция, определяющая окно, в котором отображается прогрессбар, была объявлена как глобальная переменная.

{/ Попробуйте в функции function progress_bar (stop) вместо w = new Window ("palette"); указать var w = new Window ("palette"); и вы на строке progress.value = i+1 получите ошибку ‘Object is invalid’. /}

Назначение этого скрипта — показать в общем виде работу инструмента, более изощренный пример использования этого инструмента читатели найдут в скрипте Марка Аутрета (Marc Autret) http://forums.adobe.com/message/3152162#3152162

Вот код этого скрипта:

#targetengine "session"

 

var ProgressBar = function(/*str*/title)

{

var w = new Window('palette', ' '+title, {x:0, y:0, width:340, height:60}),

     pb = w.add('progressbar', {x:20, y:12, width:300, height:12}, 0, 100),

     st = w.add('statictext', {x:10, y:36, width:320, height:20}, '');

st.justify = 'center';

w.center();

this.reset = function(msg,maxValue)

     {

     st.text = msg;

     pb.value = 0;

     pb.maxvalue = maxValue||0;

     pb.visible =!!maxValue;

     w.show();

     };

this.hit = function() {++pb.value;};

this.hide = function() {w.hide();};

this.close = function() {w.close();};

};

 

 

//------------------------------------------------

// SAMPLE CODE

//------------------------------------------------

 

function main()

{

var pBar = new ProgressBar("Script Title");

var i;

    

// Routine #1

pBar.reset("Processing Routine #1...", 100);

for(i=0; i < 100; ++i, pBar.hit())

     {

     $.sleep(10);

     }

    

// Routine #2

var i;

pBar.reset("Processing Routine #2...", 10);

for(i=0; i < 10; ++i, pBar.hit())

     {

     $.sleep(300);

     }

    

pBar.close();

}

main();

//////////////////////////////

На макинтоше можно делать вертикальные прогрессбары, просто указав высоту больше ширины. На РС такой возможности нет.