Списки как индикаторы процесса

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

var list = ["раз", "два", "три", "четыре", "пять", "вышел зайчик погулять"];

var hlights = highlight_list (list);

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

{

hlights.children[0].selection = i;

hlights.show ();

// user functions

$.sleep (400);

}

hlights.close();

function highlight_list (array)

{

var w = new Window ("palette", undefined, undefined, {borderless: true });

w.margins = [5,5,5,5];

w.add ("listbox", undefined, array);

return w;

}

Функция highlight_list инициализирует окно, но не отображает его. В цикле программа выбирает элементы списка при помощи hlights.children[n], где n — счетчик цикла. И в каждой итерации цикла отображается окно с текущей выбранной строкой при помощи оператора show().

{/ Интересен комментарий П. Карела к этому скрипту — I don't know why it's necessary to do it like this, but it was the only way to make it work; using layout() doesn't seem to work here — я не знаю, почему делать это так, но это единственный способ заставить скрипт работать, и использование функции layout(), похоже, тут не будет работать. /}

{/ Работая над переводом варианта 1.1 этого документа, я в этом примере попробовал разрешить выбирать несколько строк в этом списке:

w.add ("listbox", undefined, array,{multiselect: true});

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

Я сообщил Питеру Карелу о таком эффекте, и он поместил информацию о такой работе списка в версии 1.2 своего документа. /}

 

 

Картинка

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

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-имя шрифта, используйте следующий однострочный скрипт:

app.fonts.item ("Gill Sans").postscriptName;

Замечание. Интерфейс ScriptUI понимает только четыре варианта начертания: Regular, Italic, Bold и Bold-Italic. Вместо названий начертаний можно использовать числа: 0 для Regular, 4 для Italic, 1 для Bold и 3 для Bold-Italic. Нельзя использовать шрифт, использующий другие названия начертаний.

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

function set_font (control, font)

{

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

   {

       if ("GroupPanel".indexOf (control.children[i].constructor.name) > -1)

set_font (control.children[i], font);

       else

control.children[i].graphics.font = font;

   }

}

Используйте эту функцию для назначения шрифта всем элементам окна:

var w = new Window ("dialog");

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

var button1 = group1.add ("button", undefined, "B1");

var button2 = group1.add ("button", undefined, "B2");

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

var button1 = group2.add ("button", undefined, "B3");

var button2 = group2.add ("button", undefined, "B4");

set_font (w, "Tahoma:18");

w.show();

Можно просто назначить шрифт группе:

set_font (group1, "Tahoma:18");

 

Замечание: в Windows невозможно управлять размером шрифта в заголовке окна.

 

 

Цвета

Цвета, как и шрифты, — это часть управления графикой ScriptUI. Но если шрифтами управлять легко, то о цвете, кистях и других особенностях графики этого не скажешь. И не особо помогает почти полное отсутствие каких-либо толковых примеров как использовать эти графические элементы. InDesign/ESTK имеет два скрипта, где есть примеры, как устанавливать цвета переднего плана и фона, и это всё, что есть о цвете.

В приводимых ниже примерах показано, как управлять шрифтом, его размером и начертанием, а также цветами переднего и заднего планов. Цвет определен как матрица из трех чисел в диапазоне от 0 до 1 (т.е. это RGB-цвета)/

{/ В первой версии документа Карел объяснял, что есть и четвертый параметр описания цвета — прозрачность: «и дополнительно числом в диапазоне от 0 до 1 можно определять прозрачность (0 — полностью прозрачен, 1 — абсолютно непрозрачен, но эта опция в Windows не работает)» (опыты показали, что по крайней мере в версии CS4 на маке эта опция тоже не работает), но в версии 1.2 упоминание о прозрачности исключено как из документа, так и из примеров. В переводе оставлено первое, четырехкомпонентное описание цвета. Можете сами убедиться, что четвертое число не влияет на вид картинки. /}

Пример ниже скомпонован из тех двух скриптов из комплекта поставки, ColorSelector.jsx и ColorPicker.jsx. (также интересен ресурс rapid ScriptUI, см. http://www.scriptui.com/)

var w = new Window ("dialog");

var s = w.add ("statictext", undefined, "Static");

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

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

// Фон окна

w.graphics.backgroundColor = w.graphics.newBrush (w.graphics.BrushType.SOLID_COLOR, [0.5, 0.0, 0.0,.2], 1);

// Шрифт и цвет первой строки, statictext

s.graphics.font = ScriptUI.newFont ("Helvetica", "Bold", 30);

s.graphics.foregroundColor = s.graphics.newPen (w.graphics.PenType.SOLID_COLOR, [0.7, 0.7, 0.7, 1], 1);

// Шрифт и цвет второй строки, edittext

e.graphics.font = ScriptUI.newFont ("Letter Gothic Std", "Bold", 30);

e.graphics.foregroundColor = e.graphics.newPen (e.graphics.PenType.SOLID_COLOR, [1, 0, 0, 1], 1);

e.graphics.backgroundColor = e.graphics.newBrush (e.graphics.BrushType.SOLID_COLOR, [0.5, 0.5, 0.5, 1], 1);

// Шрифт и цвет третьей строки. Это кнопка, для неё установки цвета нет.

b.graphics.font = ScriptUI.newFont ("Minion Pro", "Italic", 30);

w.show ();

Метод определения цвета фона — newBrush() — имеет два параметра: 1) тип цвета, обычно это SOLID_COLOR, имеющийся в модели JavaScript тип THEME_COLOR в InDesign не работает, 2) матрица описания цвета в формате RGB. Метод описания цвета объекта — newPen() — дополнительно к упомянутым параметрам имеет еще указатель толщины линии, но т.к. в нашем примере объект — это буквы, этот параметр не используется.

Похоже, есть трудности в назначении цвета кнопкам, это обсуждалось на форуме Adobe

http://forums.adobe.com/message/2335096#2335096

где Дирк Бекер предложил вариант решения этой проблемы.

Линии

Есть два способа нарисовать линию. Можно использовать графический объект ScriptUI, это весьма замороченный инструмент, но с его помощью можно делать узкие панели, имитирующие вертикальные и горизонтальные линии. Можно проводить линии, начиная с определенной точки, как в этом примере:

var w = new Window ("dialog"); w.add ("panel", [0,0,200,3]); w.add ("panel", [0,20,200,23]); w.add ("panel", [100,0,103,50]); w.show();

Первая линия [0,0,200,3] длиной 200 пикселей и толщиной 3 пикселя. {/Вторая линия выглядит точно так же как первая, но только расположена ниже. Это обусловлено тем, что формат координат линии такой: [X1, Y1, X2, Y2]./} Третья линия вертикальная, длиной 50 пикселей и толщиной 3 пикселя. {/В описании линии заданы координаты точек начала и конца линии, но за счет того, что по умолчанию все объекты окна выравниваются по центру, эта линия размещена по центру окна. Если задать линию с координатами [10, 0, 13, 50], то на экране она будет размещена точно так же, как линия из кода программы с координатами [100, 0, 103, 50]./}

Узкие панели используются для создания линеек и пустых панелей, как вертикальных, так и горизонтальных.

Неудобство описания линий указанием абсолютных значений координат её начальной и конечной точек состоит в том, что при изменении окна всегда приходится работать с линиями, и это может быть очень кропотливым занятием. Чтобы избежать этого, вы можете использовать менеджер макетов программы ScriptUI, — это самый оптимальный метод — используйте атрибут выравнивания fill, тогда размеры линий будут выравниваться со смежными панелями. Сделав это однажды, вы получите гибкую систему. Вот схематический пример такого подхода:

var w = new Window ("dialog");

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

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

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

var p1 = g1.add ("panel");

p1.preferredSize = [100, 50]; // Чтобы понять разницу, используйте [100,100] для второго варианта окна

g1.separator = g1.add ("panel"); // Помещаем на экран вертикальную линию

// Это ширина линии:

g1.separator.minimumSize.width = g1.separator.maximumSize.width = 3;

var p2 = g1.add ("panel");

p2.preferredSize = [100, 50];

w.separator = w.add ("panel"); // Помещаем на экран горизонтальную линию

// Для программы этот параметр высота, но по сути это ширина линии!

w.separator.minimumSize.height = w.separator.maximumSize.height = 3;

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

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

var p3 = g2.add ("panel");

p3.preferredSize = [100, 50]; // Чтобы понять разницу, используйте [200,50] для второго варианта окна

g2.separator = g2.add ("panel"); // Помещаем на экран вертикальную линию

g2.separator.minimumSize.width = g2.separator.maximumSize.width = 3;

var p4 = g2.add ("panel");

p4.preferredSize = [100, 50];

w.show ();

 

 

Поскольку для окна и двух групп используется выравнивание fill, при изменении объектов в группе длина линий тоже изменяется. Чтобы увидеть это, измените строку p1.preferredSize = [100, 50] на p1.preferredSize = [100, 100], а строку p3.preferredSize = [100, 50] на p3.preferredSize = [200, 50], чтобы получить другой вариант оформления окна:

(Замечание. замороченный на первый взгляд оператор w.separator.minimumSize.height = w.separator.maximumSize.height необходим, т.к. объекты в ScriptUI не имеют отдельной ширины и высоты, которые могли бы быть заданы. Поэтому мы говорим, что линии должны быть не менее и не более 3 пикселей, т.е. точно 3 пикселя.)

 

 

Callbacks (отклики на события)

Отклики на события — это встроенные методы, отслеживающие события в диалогах: нажатие кнопки, выбор строки в списке, завершение редактирования, и т.д. В руководстве Tools Guide для версии CS5 перечень откликов приведен на страницах 83 и 147. Видимо, наиболее часто используется отклик onClick, демонстрирующийся в следующем скрипте:

var w = new Window ("dialog");

var b1 = w.add ("button", undefined, "Show this ");

var b2 = w.add ("button", undefined, "Show that");

b1.onClick = function () {$.writeln (this. text + " clicked.")}

b2.onClick = function () {$.writeln (this. text + " clicked.")}

w.show ();

 

Выше показаны окно и консоль после нажатия обеих кнопок. Нажатие на кнопку выводит на консоль её имя.

Код функции отклика на примере нажатия кнопки b1 — это просто {alert(this.text+ " clicked. "} может быть сколь угодно сложным. Принцип обработки других откликов точно такой же.

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

var w = new Window ("dialog");

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

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

e1.active = true;

e1.characters = e2.characters = 20;

e1.onChange = function () {e2.text = e1.text}

w.show ();

Скрипт отображает два пустых текстовых поля. После набора текста в первом окне и нажатия клавиши перевода строки или клавиши табуляции этот текст будет скопирован во второе поле.

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

Для отслеживания событий со время ввода текста надо использовать обработчик событий OnChanging:

var w = new Window ("dialog");

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

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

e1.active = true;

e1.characters = e2.characters = 20;

e1.onChanging = function () {e2.text = e1.text}

w.show ();

Теперь вторая строка будет повторять введенный в первое поле текст.

 

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

var w = new Window ("dialog");

var list = w.add ("listbox", undefined, ["ОДИН", "ДВА", "ТРИ"]);

list.selection = 0;

list.onChange = function () {$.writeln (this. selection.text + " ВЫБРАНО.")}

w.show ();

Вот вывод на консоль после щелчка на строке ТРИ.

Event handlers (обработчики событий)

Обработчики событий сходны с откликами на события в том, что они отслеживают события в диалогах. Но они более гибки, хотя эта гибкость оборачивается некоторой сложностью. Обработчики событий обсуждаются на странице 149 руководства Tools Guide для версии CS5. Два примера иллюстрируют обработчики: первый отслеживает работу с мышью, второй — с клавиатурой.

 

Отслеживание операций с мышью

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

var w = new Window ("dialog");

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

b.addEventListener ("mousedown", function (k) {whatsup (k)});

 

function whatsup (p)

{

if (p.button == 0) {$.writeln ("Нажата левая кнопка.")}

if (p.button == 2) {$.writeln ("Нажата правая кнопка.")}

if (p.altKey) {$.writeln ("При щелчке мышкой нажата клавиша Alt.")}

$.writeln ("X: " + p.clientX);

$.writeln ("Y: " + p.clientY);

}

w.show ();

Здесь mousedown означает «по щелчку» и может трактоваться как отклик onClick с дополнительными возможностями (похожие типы событий — это mouseup /отклик на отпускание кнопки мыши/ и mouseover /отклик на случай, когда курсор проходит над объектом/).

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

В нашем примере значения clientX и clientY отображают координаты курсора в пространстве экранной кнопки (в этом скрипте она называется Qwerty), это можно использовать для определения — в правой или левой половине кнопки был щелчок.

 

 

Мониторинг клавиатуры

Для отслеживания работы с клавиатурой определим перехватчик события (event listener) при помощи события keydown. Вот скрипт, демонстрирующий некоторые свойства этого события работы с клавиатурой (скрипт работать не будет, если не будет явного указания, что он исполняется не в ESTK, а в программе InDesign — для объявления этого в тексте скрипта должна строка #target indesign):

#target indesign

var w = new Window ("dialog");

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

edit.active = true;

edit.characters = 30;

w.addEventListener ("keydown", function (kd) {pressed (kd)});

function pressed (k)

{

$.writeln (k.keyName);

$.writeln (k.keyIdentifier);

$.writeln (k.shiftKey? "Shift pressed": "Shift not pressed");

$.writeln (k.altKey? "Alt pressed": "Alt not pressed");

$.writeln (k.ctrlKey? "Ctrl pressed": "Ctrl not pressed");

}

w.show ();

У каждой клавиши есть имя (А, D, Space, Shift, …) и код (шестнадцатеричное значение в формате U+0000 или имя, если это одна из управляющих клавиш), если клавиша нажата одновременно с управляющей клавишей, то выводится информация об этом.

Следующий скрипт отображает список, в котором можно перемещаться с помощью клавиш _ стрелка_вверх/стрелка вниз или PgUp/PgDn. При нажатии на клавишу PgUp выбирается первая строка списка, при нажатии PgDn — последняя.

var w = new Window ("dialog");

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

list.selection = 0;

w.addEventListener ("keydown", function (k) {move_highlight (k.keyName)});

function move_highlight (key)

{

function go_down ()

{

if (list.selection.index < list.items.length-1)

list.selection = list.selection.index+1;

Else

list.selection = 0;

} // go_down

function go_up ()

{

if (list.selection.index == 0)

list.selection = list.items.length-1;

Else

list.selection = list.selection.index-1;

} // go_up

switch (key)

{

case "Up": go_up (); break;

case "PageUp": list.selection = 0; break;

case "PageDown": list.selection = list.items.length-1; break;

case "Down": go_down (); break;

}

}

w.show ();