Избранное »

22.09.2014 – 07:27 | 2 комментария | 10 257 views

Здравствуйте все, кто работает в Индизайне!
Извещаем вас о том, что на youtube.com начал работу канал «InDesign Мастерская вёрстки». Там уже размещены более 60 видео с полным описанием как работать с программой DoTextOK. Другие интересные темы, касающиеся работы …

Читать полностью »
Работа в InDesign

Хитрости и секреты, приемы работы, уроки

Новая версия!

Особенности новой версии Индизайна

Плагины

Описание плагинов, информация о плагинах для работы с Adobe InDesign

Скрипты

Готовые к использованию скрипты для Adobe InDesign

Скриптинг

Описание языка, приёмов и методов программирования для Adobe InDesign

Home » Скриптинг

Пример использования свойства Stack при проектировании UI

Добавлено на 12.04.2018 – 10:08Без комментариев | 4 views

Использование свойства Stack при проектировании пользовательского интерфейса позволяет более оптимально использовать пространство диалогового окна, включая или отключая показ элементов управления в одной и той же зоне. В фирменной документации Adobe (JavaScript Tools Guides CC) по JavaScript на 94 странице приведен пример использования этого свойства, но только этот пример выполнен в альтернативном варианте  — при помощи спецификации ресурсов, что создает дополнительные трудности для понимания у начинающих программистов. Мы разработали свой пример использования свойства stack в традиционном программном исполнении JavaScript.

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

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

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

;
// Пример по динамическому взаимодействию элементов интерфейса
#targetengine "test";
main();
 
function main()
{
var myDialog = new Window('palette', "Test");
    myDialog.orientation = "column";
    myDialog.alignChildren = "center";
 
    // панель с радиокнопками будет управляющей панелью, создаем ее.
    myCtrlPnl = myDialog.add("panel", undefined, 'Панель управления');
    // добавляем в управляющую панель группу из трех радиокнопок: кнопки одна под другой (orientation = "column")
    myCtrlGroup =  myCtrlPnl.add("group");  
    myCtrlGroup.orientation = "column";
    myRadio0 = myCtrlGroup.add ('radiobutton', undefined, 'Показать группу 0');
    myRadio1 = myCtrlGroup.add ('radiobutton', undefined, 'Показать группу 1');
    myRadio2 = myCtrlGroup.add ('radiobutton', undefined, 'Показать группу 2');     
    myRadio0.value = true; 
 
    // добавляем панель, в которой меняюся элементы интерфейса
    myPnl0 = myDialog.add("panel", undefined, 'Это рабочая панель');
 
    // добавляем в панель главную группу, в которой будут еще три группы элементов, содержащих различные элементы интерфейса
    mainGroup = myPnl0.add("group");
    mainGroup.orientation = "stack"; // Stack - это главное сейчас!!!
 
    // первая группа, создаем и добавляем элементы
    myGroup0 = mainGroup.add("group");
    myGroup0.orientation = 'column';
    myGroup0.visible = true;
    // добавляем два статических текста
    myText0 = myGroup0.add ("statictext", undefined);
    myText0.text = "Статический текст";    
    myText1 = myGroup0.add ("statictext", undefined);
    myText1.text = "Это просто текст";
 
    // вторая группа
    myGroup1 = mainGroup.add("group");
    myGroup1.orientation = 'column';
    myGroup1.visible = false;
    // добавляем во вторую группу два поля ввода
    myEditTxt0 = myGroup1.add("edittext", undefined, "Test");
    myEditTxt0.characters = 8;
    myEditTxt1 = myGroup1.add("edittext", undefined, "Test1");
    myEditTxt1.characters = 8;
 
    // третья группа
    myGroup2 = mainGroup.add("group");
    myGroup2.orientation = 'column';
    myGroup2.visible = false;
    // добавляем статический текст и выпадающий список
    myText2 = myGroup2.add ("statictext", undefined);
    myText2.text = "Текст и выпадающий список"; 
 
    myDropdown= myGroup2.add ("dropdownlist", undefined, ["Один","Два","Три"]);
    myDropdown.title = "Выпадающий список: ";
    myDropdown.selection=0;
    myDropdown.minimumSize = [100, 20];
 
 
// обработка нажатий на радиокнопки    
    myRadio0.onClick = function() {
        myGroup0.visible = true;
        myGroup1.visible = false;
        myGroup2.visible = false; 
    };
 
    myRadio1.onClick= function() {
        myGroup0.visible = false;
        myGroup1.visible = true;
        myGroup2.visible = false;
    };
 
    myRadio2.onClick =function() {
        myGroup0.visible = false;
        myGroup1.visible = false;
        myGroup2.visible = true; 
    };    
 
    // кнопка выход
    myButton = myDialog.add("button", undefined, "Exit");
    myButton.onClick = function()  { 
 
        myDialog.close( 0 ); 
    } 
    // Показать окно!!!
    myDialog.show();      
 
} // main

Оставить комментарий!

Вы должны быть в системе чтобы оставить комментарий.