Добавление инструментов управления

В первом скрипте была управляющая строка statictext. Этот тип управления позволяет добавить в окно какой-нибудь текст. Для помещения текста использовалась вторая строка

myMessage.text = "Здравствуй, мир!";

но можно обойтись и одной строкой:

var myMessage = myWindow.add ("statictext", undefined, "Здравствуй, мир!")

т.е. написать текст как параметр метода add().

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

 

Первый рабочий пример

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

Ввод текст выполняется при помощи оператора управления edittext. Чтобы указать, что это поле для ввода данных, надо при помощи оператора statictext добавить отдельно приглашение.

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

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

var myText = myWindow.add ("edittext");

myWindow.show ();

 

Обратите внимание, что окно теперь с заголовком «Форма». Заметьте также, что поле ввода стоит ниже приглашения («Имя:»), что не есть хорошо. Предположительно, что ориентация окна по умолчанию имеет тип column. Чтобы изменить этот тип, нужен соответствующий оператор в скрипте (вторая строка):

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

myWindow.orientation = "row";

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

var myText = myWindow.add ("edittext");

myWindow.show ();

Результат несколько лучше, но поле ввода очень маленькое. Кроме того, надо сделать так, чтобы по умолчанию были введены какие-то данные.

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

myWindow.orientation = "row";

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

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

myText.characters = 30;

myWindow.show ();

 

Теперь можно для управляющего оператора edittext определить длину строки вводимых данных, это делается указанием значения свойства characters этого оператора.

Далее будут показаны другие способы управления длиной строки.

В этом диалоге, чтобы изменить имя, пользователь должен поместить курсор в текстовое поле. Если скрипт поместит курсор в это поле и выделит текст, то такое решение будет намного полезнее предыдущего. Это выполняется строкой myText.active = true

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

myWindow.orientation = "row";

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

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

myText.characters = 30;

myText.active = true;

myWindow.show ();

 

Теперь добавим кнопки, в нашем случае OK и Cancel. Это делается при помощи управляющего оператора button:

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

myWindow.orientation = "row";

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

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

myText.characters = 30;

myText.active = true;

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

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

myWindow.show ();

 

Поскольку тип ориентации окна выбран row, то у нас и приглашение, и текстовая строка, и кнопки вытянуты в одну линию. Но это не лучший вариант.

Можно вернуться к стандартному значению column, но сгруппировать поля приглашения и поле ввода текста в одну группу (myInputGroup), а кнопки в другую кнопку(myButtonGroup):

 

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

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

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

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

myText.characters = 30;

myText.active = true;

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

myButtonGroup.alignment = "right";

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

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

myWindow.show ();

Были созданы две группы myInputGroup и myButtonGroup, в тексте выше они выделены зеленым цветом.

Для объединения полей или кнопок кроме оператора group используется оператор panel. Их отличие в том, что во втором случае вокруг группы появляется рамка. Кроме того, стандартная ориентация объектов group — это row, тогда как для panel это column. Поэтому удалена строка myWindow.orientation = "row";, ведь стандартная ориентация для panel это column.

Обратите внимание, что объекты в группе командой align (myButtonGroup.alignment = "right") выровнены вправо. Позже будут еще примеры применения этой команды.

Ниже группа кнопок будет заключена в рамку:

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

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

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

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

myText.characters = 26;

myText.active = true;

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

myButtonGroup.orientation ("row");

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

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

myWindow.show ();

 

{/ Понятие о контейнерах

Новое окно, созданное командой new Window(), по своей сути является контейнером, в который помещаются элементы управления – кнопки, текст, поля ввода, списки, радиокнопки, чекбоксы и т.д. Но существуют и другие типы контейнеров в ScriptUI и один из таких типов мы сейчас рассмотрели – это группа элементов. Следующий тип контейнеров – panel, также служит для организации элементов в окне. И третий тип контейнеров — панель с вкладками, называемая TabbedPanel. Вы можете как угодно вкладывать один контейнер в любой другой, например в главное окно добавить три панели, затем в первую панель добавить элемент Static Text еще панель, во вторую панель можете добавить группу и панель с вкладками, и на каждой вкладке снова разместить панели с элементами, а в третьей – разместить прогрессбар и т.д. Все элементы и контейнеры добавляются при помощи метода add().

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

 

Добавим в окно контейнер типа panel, чтобы заключить в общую рамку все поля:

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

var myPnl = myWindow.add ("panel");

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

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

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

myText.characters = 20;

myText.active = true;

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

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

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

myWindow.show ();

 

Обратите внимание, что в группах теперь не определен явно тип ориентации. В данном случае он не нужен: ведь в окне всего два объекта, и стандартная ориентация для панели — колонка, а для группы — строка.

 

{/Но явным указанием ориентации в панели и группе можно получить такие результаты:

/}

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

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

myWindow.orientation = "row";

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.orientation = "column";

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

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

myWindow.show ();

Для выравнивания групп по вертикали надо добавить строку myWindow.alignChildren = "top" (выделена зеленым). {/Свойство alignChildren используется для выравнивания дочерних элементов./}

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

myWindow.alignChildren = "top";

myWindow.orientation = "row";

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.orientation = "column";

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

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

myWindow.show ();

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

Скрипт работает так: если нажата кнопка ОК, строка myWindow.show () возвращает 1, в другом случае будет возвращена 2.

Эту проверка в скрипте реализуется так:

if (myWindow.show () == 1)

var myName = myText.text;

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

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

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

 

 

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