Написание скриптов. Пользовательский интерфейс

Написание скриптов. Пользовательский интерфейс

Перевод статьи http://www.kahrel.plus.com/indesign/scriptui.html (v.1.2)

В тексте комментарии заключены в фигурные и наклонные скобки {/…/} и окрашены синим цветом.

 

Введение

ScriptUI — это модуль семейства программ Adobe CS, начиная с версии CS3, с помощью которого можно добавлять в скрипты диалоги. Модуль входит в состав ExtendedScript Toolkit (ESTK), и сделанные в нём диалоги можно использовать в скриптах для всех приложений Creative Suite, далее CS.

Хотя, этот документ посвящен организации диалогов в скриптах, выполняемых в программе InDesign, теоретически всё сказанное здесь, применимо и к скриптам для других программ CS.

Руководство посвящено только ScriptUI, предполагается, что читатель имеет достаточно знаний о JavaScript.

Руководство полностью описывает среду создания диалогов, и его надо рассматривать как дополнение к основному документу по скриптописанию — JavaScript Tools Guide.

 

«Здравствуй, мир!»

Самый простейший скрипт выводит сообщение на экран. Вот создание окна на экране и помещение в него текста:

var myWindow = new Window ("dialog")

var myMessage = myWindow.add ("statictext");

myMessage.text = "Здравствуй, мир! Hello, world! [ ОКНО dialog ]";

myWindow.show ();

 

Вот что будет при его запуске:

 

Первая строка определяет новое окно типа dialog; вторая определяет управление этим окном, в данном случае это statictext; третья определяет содержимое окна; последняя выводит окно на экран. Чтобы закрыть окно, надо щелкнуть мышкой на красной кнопке с крестиком.

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

 

Особенности типов окна dialog и palette

Есть два типа окна: dialog и palette. Вы уже знаете, в чем межу ними разница, т.к. название диалог и палитра отражает, как работают в InDesign подобные окна. Окно dialog остается активным, пока вы с ним работаете, и пока оно открыто, вы ничего другого делать не можете. Пример — диалоги TextFrame Options или Paragraph Rules. Вы сможете продолжить работу в программе только после закрытия этих окон. {/Диалоговые окна такого типа принято называть модальными. Окно типа palette отображается на экране, но не препятствует работе в программе InDesign. Пример такого окна — палитры Paragraphs или Characters. Такие диалоговые окна называются немодальными. Для работы такого окна в скрипте должна быть инструкция #targetengine "session"/}

Визуально окна этих типов можно различить по признаку, что диалоги имеют кнопку ОК и Cancel, а палитры не имеют. Хотя можно сделать и палитру с такими кнопками, и диалог без них (хотя вряд ли он будет где-то полезен).

{/Для полноты картины надо сказать, что в объектной модели есть и третий тип окна — window, но он ведет себя точно также как palette./}

 

Окно типа dialog

Приведенный выше скрипт создает окно типа dialog.

 

Окно типа palette

Чтобы сделать окно типа palette, надо определить этот тип при объявлении окна, и определить используемый движок (engine) — строка #targetengine "session" в следующем скрипте.

#targetengine "session";

var myWindow = new Window ("palette")

var myMessage = myWindow.add ("statictext");

myMessage.text = "Здравствуй, мир! Hello, world! [ ОКНО palette ]";

myWindow.show ();

 

 

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

Налицо и некоторые несущественные различия в оформлении окон в части скругления углов и разного размера кнопок.

Интересно, хотя не имеет никакой практической важности факт, что в программе InDesign диалоговые окна имеют скругленные углы, но кнопка закрытия окна отсутствует (установки Textframe, Paragraph Style и т.п.), а вот окна палитр всегда с прямыми углами и имеют кнопку закрытия (окно Find/Change, преобразование URL в гиперссылки и пр.).

 

Else

exit ();

т.е. веденный текст берется из myText.text.

И полностью скрипт может выглядеть так:

var myName = myInput ();

// rest of the script

function myInput ()

{

var myWindow = new Window ("dialog", "Форма");

var myInputGroup = myWindow.add ("group");

myInputGroup.add ("statictext", undefined, "Имя:");

var myText = myInputGroup.add ("edittext", undefined, "Петр");

myText.characters = 20;

myText.active = true;

var myButtonGroup = myWindow.add ("group");

myButtonGroup.add ("button", undefined, "OK");

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

if (myWindow.show () == 1)

return myText.text;

Else

exit ();

}

Форматирование фрейма окна

Существуют некоторые особенности, определяющие вид палитр и диалогов.

Можно решить убрать кнопку закрытия окна:

myWindow = new Window ("dialog", "Example", undefined, {closeButton: false })

myWindow.add ("statictext", undefined, "closebutton: false");

myWindow.show ();

 

Можно сделать фрейм без бордюра:

myWindow = new Window ("dialog", "Example", undefined, {borderless: true })

myWindow.add ("statictext", undefined, "borderless: t rue");

myWindow.show ();

Такие безбордюрные фреймы минималистичны, по сути это просто серые панели. Их вид можно улучшить, нарисовав вокруг них контур (добавив панель):

myWindow = new Window ("dialog", undefined, undefined, {borderless: true });

myWindow.margins = [0,0,0,0];

myPanel = myWindow.add ("panel");

myPanel.add ("statictext", undefined, "borderless but framed. Окно без бордюра, но оконтурено");

myWindow.show ();

Заметьте, что фрейм — это бордюр не окна, а панели.

На этом основы построения окон завершены, вернемся к деталям организации содержимого окон.

 

 

Элементы управления

 

Элемент управления edittext

Был рассмотрен ранее. Он используется для получения данных от пользователя. По умолчанию вводится одна строка, и есть полезное свойство multiline, позволяющее вводить несколько строк.

var myWindow = new Window ("dialog", "Multiline");

var myText = myWindow.add ("edittext", [0, 0, 150, 70], "", {multiline: true });

myText.active = true;

myWindow.show ();

Второй параметр элемента управления edittext — размер окна [Xлв Yлв Ширина Высота] (обратите внимание, что формат описания окна отличен от того, что принят в программе InDesign.)

При вводе чисел (перевод строки Crtl+Enter) при переполнении окна становится активной полоса прокрутки.

{/У этого элемента есть еще одно интересное свойство: noecho, по умолчанию установленное в False. Если его установить в true:

var paswrd = myInput ();

function myInput ()

{

var myWindow = new Window ("dialog", " Введите пароль:",undefined,{closeButton: false});

var myText = myWindow.add ("edittext", [0, 0, 170, 20], "", {noecho: true});

var myButtonGroup = myWindow.add ("group");

myButtonGroup.add ("button", undefined, "OK");

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

if (myWindow.show () == 1)

return myText.text;

else

exit ();

}

 

 

то вводимый текст в поле ввода не будет отображаться. Это можно использовать для создания скрипта, запрашивающего пароль./}

Хотя этот инструмент для ввода данных называется так многообещающе — редактируемый текст (edittext) — возможности инструмента в скриптах для InDesign ограничены. Не предусмотрено средств для ввода чисел, единиц измерения и пр. Если надо указывать единицы измерения, это надо делать самим. Пример работы ввода размеров можно найти в скрипте помещения сносок на внешнем поле страницы http://www.kahrel.plus.com/indesign/sidenotes.html

http://adobeindesign.ru/2009/06/06/dinamicheskie-sidenotes-cs4/

В Windows есть проблема отображения текста в окне, заключающаяся в том, что если предусмотрен выбор текста (.active = true), этот текст иногда отображается некорректно:

var w = new Window ("dialog");

var e = w.add ("edittext", undefined, "abcdefghijklmnopqrstuvwxyz");

e.active = true;

w.show();

Видно, что размер поля для текста скрипт создал верно, но текст в этом поле размещен неправильно.

Для исправления ситуации надо в скрипт добавить строку (выделена зеленым):

w = new Window ("dialog");

e = w.add ("edittext", undefined, "abcdefghijklmnopqrstuvwxyz");

w.layout.layout();

e.active = true;

w.show();

Позже функция layout() будет рассмотрена более детально.

 

 

Пример: живая прокрутка

Можно захотеть иметь скрипт для отображения текста, но стандартная функция display() имеет ограничения и не приспособлена работы с большими текстами. Однако нетрудно написать свой метод создания окна с прокруткой.

Дополнительно преимущество состоит в том, что можно копировать текст из окна и вставлять в окно.

// создадим пример массива

array = [];

for (i = 0; i < 150; i++)

array.push ("Строка " + String (i));

alert_scroll ("Пример", array);

function alert_scroll (title, input) // string, string/array

{

// если входной параметр -- массив, преобразуем его в строку

if (input instanceof Array)

input = input.join ("\r");

var w = new Window ("dialog", title);

var list = w.add ("edittext", undefined, input, {multiline: true, scrolling: true });

// Список не должен быть больше максимально возможной высоты окна

list.maximumSize.height = w.maximumSize.height - 750; // << эта строка определяет высоту прокручиваемого окна

list.minimumSize.width = 150;

w.add ("button", undefined, "Закрыть", {name: "ok"});

w.show ();

}

Эта функция имеет один недостаток — при работе с большими массивами заметно время их обработки.

 

 

Элемент управления button

Нажимаемые кнопки

Можно использовать различные типы кнопок. Ранее были рассмотрены стандартные нажимаемые кнопки ОК и Cancel, часто используемые в окнах

var w = new Window ("dialog");

w.add ("button", undefined, "OK");

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

w.show ();

По умолчанию щелчок на клавише ОК эквивалентен нажатию на клавишу Enter, а щелчок на Cancel — на клавишу ESC. И такая работа скрипта будет, если названия этих кнопок будут именно так названы.

После щелчка на кнопке ‘Переключить в верхний регистр’ буквы станут прописными. Это простой пример, но функции, вызываемые событием onClick могут быть любой сложности. (есть несколько других откликов на события /в оригинале callback /, с которыми мы познакомимся позднее.)

 

Обработка списков

Списки — это массивы объектов типа ListItem. Они обрабатываются несколько иначе, нежели обычные массивы. Следующий скрипт обрабатывает список просто печатью атрибута текста каждого элемента:

var w = new Window ("dialog");

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

var b = w.add ("button", undefined, "Print");

b.onClick = function ()

{

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

$.writeln (myList.items[i].text);

}

w.show ();

 

 

Поиск объекта в списке

Для этого используется метод find:

var myItem = myList.find ("two");

Метод возвращает объект типа ListItem, если объект найден, и null, если объекта в списке нет.

 

 

Вставка объектов в список

Ранее мы видели, что объекты могут быть добавлены в существующий список методом.add (“list”). Это всегда добавляет объекты в конец списка. Для помещения объекта в определенное место, включите индекс назначения. Например, чтобы добавить объект в начало списка, воспользуйтесь такой строкой:

myList.add ("item", "zero", 0);

Чтобы избежать дублирования записей в массиве, можно использовать метод find, чтобы проверить, есть ли уже такой объект в массиве:

(myList.find (myNewItem)!= null)

myList.add ("item", myNewItem);

При добавлении объекта в массив окно обновляется автоматически, как показано ниже:

var w = new Window ("dialog");

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

var b = w.add ("button", undefined, "Add");

b.onClick = function () {myList.add ("item", "zero", 0)}

w.show ();

 

 

Упорядочение списков

Вот пример обработки списка — вставка объекта в список и сортировка обновленного списка по алфавиту. Программа активирует приглашение программы, поэтому можно ввести букву незамедлительно. Заметьте, что функция управления окном необязательно должна быть определена в том блоке, что определяет окно (т.е. между операторами new Window и w.show()).  

var w = new Window ("dialog");

var myList = w.add ("listbox", [0, 0, 50, 150], ["A", "K", "X"]);

var input = w.add ("edittext");

input.active = true;

var b = w.add ("button", undefined, "Insert", {name: "ok"});

b.onClick = function () {insert_item (myList, input.text); input.text = ""}

w.show ();

 

function insert_item (list_obj, new_item)

{

if (list_obj.find (new_item) == null)

{

var stop = list_obj.items.length;

var i = 0;

while (i < stop && new_item > list_obj.items[i].text) i++;

list_obj.add ("item", new_item, i);

}

}

 

Интерфейс скрипта несколько неуклюжий, и кнопка ОК названа Insert — нажатие на клавишу Enter запускает функцию отклика на событие onClick. Далее мы покажем, как обрабатывать такие ситуации более элегантно, определив обработчик событий (event handler), а не использовать кнопку для этой цели.

 

 

Перемещение объектов списка

Для перемещения объектов в пространстве списка нужно иметь две кнопки: одна для перемещения выбранного объекта вверх, и другая — для перемещения вниз. Также нужна функция перестановки рядом стоящих объектов:

var w = new Window ("dialog", "Rearrange");

var list = w.add ("listbox", undefined, ["one", "two", "three", "four", "five"]);

list.selection = 1;

var up = w.add ("button", undefined, "Up");

var down = w.add ("button", undefined, "Down");

up.onClick = function ()

{

var n = list.selection.index;

if (n > 0)

{

swap (list.items [n-1], list.items [n]);

list.selection = n-1;

}

}

down.onClick = function ()

{

var n = list.selection.index;

if (n < list.items.length-1)

{

swap (list.items [n], list.items [n+1]);

list.selection = n+1;

}

}

function swap (x, y)

{

var temp = x.text;

x.text = y.text;

y.text = temp;

}

w.show ();

 

На самом деле объекты списка остаются на месте, меняются местами их свойства text, это делается функцией swap().

 

 

Удаление объектов из списка

Используйте метод.remove(), чтобы удалить объект из списка. Например, чтобы удалить третий объект из списка:

myList.remove (myList.items[2]);

Для удаления объекта, указав его имя, используйте этот метод так:

myList.remove (myList.find ("two"));

 

 

Варианты выбора строк в списке: с показом выбранных позиций или без него

Если перечень больше, чем бокс, то если в нем ничего не выбрано, список отображается с первой позиции; для выбора не поместившихся в окне строк надо прокрутить список. Если надо в открывающемся окне со списком иметь одну из сток уже выбранной, то надо использовать команду revealItem(), как показано в следующем скрипте:

var w = new Window ("dialog");

var list = w.add ("listbox");

for (var i = 0; i < 100; i++)

list.add ("item", "Строка_" + String (i))

list.preferredSize = [100,200];

//~ list.selection = 50; // screenshot (b)

//~ list.revealItem ("Строка_77"); // screenshot (c)

w.show ();

 

Когда две строки закомментированы, то результат работы скрипта показан на рис. а (в окне ничего не выбрано, список отображается с его первой позиции), раскомментировав первую строку — это рис. b, будет выбрана строка, являющаяся параметром команды list.selection. В большинстве случаев эта строка отображается как последняя строка окна. Но если пользователь хочет, чтобы в окне отображались другие строки, независимо от того, сделан в списке выбор или нет, то для решения этой задачи есть инструкция revealItem(). Раскомментируйте последнюю строку, и получите картинку c. Строка, что была параметром revealItem(), отображается как последняя строка окна Прокрутите список вверх, чтобы убедиться, что строка 50 была выбрана.

 

a	b	c	d

Трудно придумать, где это может быть полезным, но если в скрипте определить, что выбранная строка стоит после той, что указана в инструкции revealItem(),

list.selection = 90;

list.revealItem ("Строка_77");

то указанная в этой инструкции строка будет первой в окне (окно d) 

 

 

Списки в несколько колонок

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

var w = new Window ("dialog");

var myList = w.add ("listbox", undefined, "",

{numberOfColumns: 3, showHeaders: true,

columnTitles: ["English", "French", "Dutch"]});

with (myList.add ("item", "One"))

{

subItems[0].text = "Un";

subItems[1].text = "Een";

}

with (myList.add ("item", "Two"))

{

subItems[0].text = "Deux";

subItems[1].text = "Twee";

}

with (myList.add ("item", "Three"))

{

subItems[0].text = "Trois";

subItems[1].text = "Drie";

}

w.show ();

 

Ширины колонок определяются автоматически, но можно задать ширину вручную, определив значение свойства columnWidths.

Обратите внимание, при добавлении списка для задания названий колонок использовались свойства showHeaders и columnTitles.

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

var w = new Window ("dialog");

var myList = w.add ("listbox", undefined, "",

{numberOfColumns: 3, showHeaders: true,

columnTitles: ["English", "French", "Dutch"],

columnWidths: [30,30,100]});

 

Иллюстрации могут добавляться в любую из строк любой из колонок:

with (myList.add ("item", "One"))

{

subItems[0].text = "Un";

subItems[0].image = myFile_1;

subItems[1].text = "Een";

subItems[1].image = myFile_2;

}

 

 

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

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

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

 

 

Картинка

Управление изображением использует свойства файла с изображением как параметры. Вот пример:

var w = new Window ("dialog", "Розы, розы...");

var flowers = w.add ("image", undefined, File ("/c/picts/bouquet.jpg"));

w.show ();

Изображения невозможно точно поместить, используя оператор.location = [x,y], но они могут позиционированы за счет инструкций выравнивания влево, вправо и пр. Также невозможно масштабировать картинку, она всегда отображается в её оригинальном размере. И уменьшение размера просто обрезает картинку.

var w = new Window ("dialog", "Розы, розы...");

var flowers = w.add ("image", undefined, File ("/c/picts/bouquet.jpg"));

flowers.size = [50,50];

w.show ();

 

 

 

Слайдер

Слайдер — это ползунок, который можно перемещать с помощью мышки:

var w = new Window ("dialog");

var e = w.add ("edittext", undefined, 50);

var slider = w.add ("slider", undefined, 50, 0, 100);

slider.onChanging = function () {e.text = slider.value}

w.show ();

Три числа являются параметрами слайдера: первое число — положение ползунка на шкале, второе — начало шкалы, третье — конец шкалы.

{/ Очевидно, что коль скоро окно над шкалой отображает текущее значение слайдера, значения в поле ‘edittext’ и первый параметр слайдера должны совпадать. Поэтому целесообразно определить эти значения один раз, в модификации этого скрипта для этого используется переменная slider_value.

var w = new Window ("dialog");

var slider_value = 50;

var e = w.add ("edittext", undefined, slider_value);

var slider = w.add ("slider", undefined, slider_value, 0, 100);

slider.onChanging = function () {e.text = slider.value}

w.show ();                                        

/}

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

 

Флэшплейер

Средства управления флэшплейером схожи с теми, что имеются при работе с изображениями. Но в отличие от работы с изображениями, если изменить размер фрейма, она не будет обрезана, а будет пропорционально втиснута.

Вот скрипт, выводящий на экран картинку с монстром. Этот флэш-ролик со снежным человеком есть в учебных файлах программы Illustrator CS4:

var w = new Window ("dialog", "СНЕЖНЫЙ ЧЕЛОВЕК");

var flash = w.add ("flashplayer", undefined, File ("/C/Program Files/Adobe/Adobe Illustrator CS4/Cool Extras/en_US/Sample Files/Sample Art/Flash Integration/monster.swf"));

//flash.size = [100,100];

w.show ();

Строка flash.size = [100,100]; раскомментирована:

 

В CS3 были инструменты управления началом и остановкой ролика, но их удалили в версии CS4. Для получения полного доступа к управлению отображением видеоклипов надо пользоваться инструментами ActionScript и Flash/Flex.

 

 

Размер и положение

Координаты окна могут быть установлены, можно определить размер и положение любого элемента окна. Но не требуется часто точно определять эти значения, т.к. встроенный инструмент создания окна работает очень хорошо, и измерение размеров требуется очень редко.

Как позиционировать окно и элементы окна, хорошо объяснено в документе Tools Guide (см. раздел Window Layout, имеющееся во всех редакциях этого документа), поэтому тут не будем останавливаться на этом. Скажем только об одной или двух непредвиденных проблемах, которых следует остерегаться.

Свойство maximumWidth дает неверные результаты при работе в системе с двумя экранами. Допустим, у вас есть два 24-дюймовых монитора с разрешением 1920х1200, имеющих общий экран. Свойство окна maximumSize.height вернет корректное значение 1150 (1200 минус 50 точек на бордюр, например), но свойство maximumSize.width вернет 3790, будто бы у меня экран такой ширины, тогда как ожидалось, что будет возвращено число порядка 1900. Таким образом, свойство width рассматривает пространство обеих экранов как один. Это создаст трудности в верном позиционировании окон на экранах. Чтобы обойти эту особенность, надо использовать оператор $.screens. Он возвращает массив объектов, отображающих координаты. Обратите внимание, что этот оператор — часть ESTK, а не ScriptUI.

Следующий скрипт отображает координаты всех экранов:

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

{

$.writeln ("Screen " + i);

$.writeln ("top: " + $.screens[i].top);

$.writeln ("left: " + $.screens[i].left);

$.writeln ("bottom: " + $.screens[i].bottom);

$.writeln ("right: " + $.screens[i].right);

}

 

Screen 0

top: 0

left: 0

bottom: 1200

right: 1920

Screen 1

top: 0

left: 1920

bottom: 1200

right: 3840 

 

Обратите внимание, что значения, возвращаемые строкой $.screens, не совпадают со значениями свойства maximumSize.

Подводя итог, можно сказать, что в двухэкранных системах нельзя пользоваться оператором maximumSize.width.

 

 

Изменение размера окна

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

Следующий скрипт позволяет изменять размер окна. Это окно содержит поле ввода текста и группу из трех кнопок. Для измен5еия окра надо мышкой взять угол или сторону окна и потащить. Размер группы останется прежним, а размер поля ввода будет изменяться.

Действия, которые надо сделать, чтобы сделать окно с изменяемым размером, во-первых, добавить в свойства окна строку {resizeable: true }; во-вторых, скрипт использует отклик на событие onResizing, отслеживающий, изменялся размер окнка или нет. При обнаружении изменения размера окно перерисовывается.

w = new Window ("dialog", "Resize", undefined, {resizeable: true });

w.orientation = "row";

e = w.add ("edittext");

e.alignment = ["fill", "fill"];

e.minimumSize.width = 300;

e.minimumSize.height = 200;

g = w.add ("group");

g.alignment = ["right", "top"];

g.orientation = "column";

g.alignChildren = "fill";

g.add ("button", undefined, "This");

g.add ("button", undefined, "That");

g.add ("button", undefined, "And the other");

w.onResizing = function () { this. layout.resize ()}

w.onShow = function ()

{

w.layout.layout();

w.minimumSize = w.preferredSize;

}

w.show ();

И наконец, в функции onShow есть две таинственных команды. Этот отклик на событие вызывается один раз, а именно, при первом рисовании окна. В этой функции команда w.layout.layout() выводит окно на экран, поэтому (наряду с другими действиями) вычисляются все размеры. Следующая строка w.minimumSize = w.preferredSize устанавливает минимальный размер окна для первого отображения окна. 

 

 

Шрифты

Стандартный размер шрифта обычно очень мал, и хочется сделать его чуть крупнее. Используемый шрифт обычно Tahoma или что-то похожее на неё. Самый простой способ управления размером — определить его при указании гарнитуры:

var w = new Window ("dialog");

button1 = w.add ("button", undefined, "Default");

button2 = w.add ("button", undefined, "Bigger");

button2.graphics.font = "dialog:18";

//button2.graphics.font = "Tahoma:18";

w.show ();

Скрипт устанавливает размер шрифта второй кнопки 18 пт, для отображения используется стандартный шрифт диалогов окна ("dialog:18").

В строке var w = new Window ("dialog"); вместо "dialog" можно использовать инструкции "palette" и "window". Изменить используемый шрифт можно так:

button2.graphics.font = "Tahoma:18";

Эти записи, однако, не позволяют изменить начертание шрифта. Для этого предусмотрено другое решение:

button2.graphics.font = ScriptUI.newFont ("dialog", "Bold", 18);

Можно определить одновременно гарнитуру, начертание и кегль:

button2.graphics.font = ScriptUI.newFont ("Tahoma", "Bold", 18);

Для изменения только гарнитуры годится любая из следующих конструкций:

button2.graphics.font = "Verdana";

button2.graphics.font = ScriptUI.newFont ("Verdana");

Замечание. Для имени гарнитуры надо использовать PostScript-имя шрифта, которое необязательно совпадает с именем в пользовательском интерфейсе программы. Если при указании имени возникает ошибка, велика вероятность того, что истинное имя шрифта расходится с тем, что выводится в меню шрифтов. Например, для шрифта Gill Sans PostScript-имя будет GillSans. Чтобы узнать PostScript-имя шрифта, используйте следующи<