Руководство программиста в Photon (Раздаточные материалы), страница 6

Подождите, когда генерация кода завершится, затем щёлкните на кнопке "Done" для закрытия диалога.

1. Щёлкните на кнопке "Make" для компиляции кода. Вы увидите диалог "Make Application", который отобразит компилируемые файлы.

2. После того, как приложение будет откомпилировано и слинковано, станет доступна кнопка "Done" диалога. Щёлкните на ней, чтобы закрыть диалог.

3. Щёлкните на кнопке "Run", чтобы запустить Ваше новое приложение на выполнение. Приложение появится в своём собственном окне, с текстом "Hello World" в центре и принятым по умолчанию заголовком "My Application" на бруске заголовка.

Великолепно! Вы только что создали своё первое приложение в Photon'е, используя PhAB.

1. Для завершения приложения, щёлкните на кнопке меню окна в левом верхнем углу, затем выберите пункт "Close".

2. Щёлкните на кнопке "Done", чтобы закрыть диалог "Build+Run".

Хотите больше информации?

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

Урок 2. Редактирование ресурсов

Этот урок введёт Вас в редактор ресурсов PhAB, который позволит Вам изменять вид и поведение виджетов. Вы узнаете, как редактировать фактически любую разновидность ресурса, который может иметь виджет, включая:

• количественные ресурсы (напр., ширину рамки)

• текстовые шрифты

• текстовые строки

• флаги

• цвета

• попиксельные карты (pixmaps)

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

Добавление виджета "Кнопка"

1. Из меню "File" выберите пункт "New" для создания первого приложения. Выберите в качестве стиля "Plain window". Сохраните Ваше приложение как tut2.

2. Щёлкните на PtButton на палитре виджета.

1. Щёлкните в центре окна приложения. Вы увидите виджет кнопки.

2. Перетащите любую метку-манипулятор изменения размера кнопки, так чтобы кнопка выглядела как на следующем рисунке:

Изменение ширины фаски

Давайте теперь изменим количественный ресурс – ширину фаски кнопки.

1. Щёлкните на ресурсе "Bevel Width" на панели управления. Вы увидите цифровой редактор:

Этот редактор позволяет Вам изменить значение любого числового ресурса виджета.

1. Изменените значения на 7. Чтобы сделать это, Вы можете:

• Набрать новое значение

или

• Щёлкать на кнопках увеличения/уменьшения

1. Для того, чтобы применить новое значение и закрыть редактор, нажмите <Enter> или щёлкните на кнопке "Done".

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

Изменение шрифта

Давайте изменим шрифт в тексте кнопки:

1. Щёлкните на ресурсе "Font". Вы увидите редактор шрифтов, который отображает текущий шрифт кнопки:

Этот редактор даёт Вам возможность изменить текстовый шрифт любого виджета, имеющего текст.

1. Щёлкните на блоке "Font" или "Size", выберите тип шрифта или его размер из списка, затем щёлкните на кнопке "Apply". Текст на кнопке отобразится новым шрифтом.

2. Щёлкните на кнопке "Default". Редактор отобразит шрифт виджета, принимаемый по умолчанию, но не применит шрифт к виджету.

3. Если Вы хотите оставить новый выбранный Вами шрифт, щёлкните на кнопке "Cancel", чтобы проигнорировать умолчание. Если Вы хотите применить умолчание, щёлкните на кнопке "Done". В любом случае редактор шрифтов закроется.

Изменение выравнивания текста

Теперь давайте изменим горизонтальное выравнивание текста кнопки.

1. Прокрутите панель управления ресурсами, чтобы найти ресурс "Horz Alignment", затем щёлкните на нём. Вы увидите редактор флагов/опций, который отображает текущее выравнивание текста виджета:

Этот редактор служит в PhAB'е двум целям:

• для модификации любого ресурса – такого как выравнивание текста – который может иметь одно из нескольких предопределённых значений;

• для выбора одного или более флагов в любом ресурсе флага

1. Щёлкните на Pt_LEFT или Pt_RIGHT, затем щёлкните на кнопке "Apply". Вы увидите, что текст кнопки переместится к левому или правому краю кнопки.

2. Щёлкните на "Done".

Вы можете также установить этот ресурс непосредственно в панели управления ресурсами.

Установка флагов

Давайте теперь используем редактор флагов/опций для установки одного из флагов виджета:

1. Прокрутите панель управления ресурсами, чтобы найти ресурс "Basic Flags", затем щёлкните на нём. Редактор флагов/опций переоткроется, но на этот раз он покажет текущие установки флага PtBasic:

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

1. Установите флаги Pt_TOP_INLINE, Pt_BOTTOM_INLINE, Pt_LEFT_INLINE и Pt_RIGHT_INLINE, затем щёлкните на кнопке "Done". PhAB нарисует кнопку с внутренней границей:

Изменение цвета заполнения

Давайте изменим ресурс цвета – цвет заполнения кнопки.

1. Щёлкните на ресурсе кнопки "Color:Fill". Вы увидите редактор цвета, который отображает текущий цвет заполнения:

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

1. Щёлкните на любом цвете из набора базовых цветов, затем щёлкните на "Apply". Кнопка окрасится в выбранный Вами цвет.

1. Выберите цвет из набора настраиваемых цветов. Ползунки будут показывать значение цветов красный/зелёный/синий (RGB). Измените эти значения для получения желаемого цвета, затем примените эти изменения.

Если Вы хотите попрактиковаться с цветовой моделью цвет/насыщенность/яркость (HSB), щёлкните на кнопку модели HSB.

1. Щёлкните на кнопку "Done", когда закончите экспериментировать с редактором. Ваша кнопка теперь будет окрашена в выбранный Вами цвет. Не удаляйте этот виджет; мы используем его в дальнейшем как шаблон, так что Вы сможете создавать другие такие же виджеты.

Редактирование пиксельной карты

Давайте теперь используем редактор попиксельной карты для редактирования виджета PtLabel. Этот редактор называется редактором попиксельной карты ("pixmap"), а не побитовой карты ("bitmap"), поскольку позволяет редактировать, кроме побитовых карт, много других типов ресурсов изображения.

Виджет PtLabel отображает текст и/или изображения.

1. Щёлкните на PtLabel на палитре виджетов:

1. Переместите указатель на основное окно и щёлкните под созданным Вами виджетом кнопки. Вы увидите виджет PtLabel.

2. Щёлкните на ресурсе "Label Type" в панели управления ресурсами и установите его в Pt_IMAGE.

3. Щёлкните на ресурсе "LabelImage" в панели управления ресурсами, чтобы вызвать попиксельный редактор.

4. Далее вызовите редактор цвета, чтобы выбрать цвет рисования. Просто щёлкните на следующую кнопку:

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

Если Вы щёлкните на "Edit Color", Вы увидите редактор цвета, описанный ранее. Кнопки редактора цвета "Apply", "Default" и "Cancel" будут тусклыми – они не требуются для пиксельного редактора.

1. Чтобы нарисовать простое изображение, Вы можете:

• щёлкнуть левой кнопкой мыши, чтобы заполнить ячейку цветом рисования

• щёлкнуть правой кнопкой мыши, чтобы заполнить ячейку цветом фона

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

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

1. Когда Вы сделаете, что хотели, щёлкните на кнопке "Done" пиксельного редактора, чтобы принять Ваши изменения и закрыть редактор.

Редактирование многострочного текста

Далее мы отредактируем ресурс многострочного текста – текст виджета PtMultiText.

1. Щёлкните на PtMultiText в палитре виджетов.

1. Переместите указатель под виджет метки (label widget), который Вы только что создали, и протяните его с нажатой кнопкой мыши, так чтобы появившийся виджет PtMultiText был достаточно большим, чтобы вместить несколько строк текста.

2. Щёлкните на ресурсе "Text String" в панели управления ресурсами, чтобы вызвать редактор многострочного текста.

1. Наберите несколько строк текста. Для создания новой строки нажмите клавишу <Enter>. Например:

Мэри имеет <Enter>

некоего <Enter>

маленького ягнёнка. <Enter>

1. Щёлкните на кнопке "Done". Ваш текст появится в точности так, как Вы его набрали. Если это не так, попытайтесь изменить размеры виджета – виджет может оказаться недостаточной ширины или высоты.

2. Чтобы получить другой эффект, перейдите к ресурсу "Horz Aligment", щёлкните по стрелке и измените выравнивание текста на Pt_CENTER. Как Вы можете видеть, теперь каждая строка отцентрирована отдельно.

3. Если Вы ещё не наигрались, измените размеры виджета перетаскиванием одной из его меток-манипуляторов изменения размеров. Вы увидите, что текст автоматически обновится, подравниваясь под новый размер. Например:

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

Редактирование списка текстовых параграфов

Давайте теперь создадим виджет PtList и добавим в виджет текст, пользуясь редактором списка. Этот редактор позволяет Вам добавлять и редактировать текст для любого виджета, который обеспечивает список текстовых параграфов.

1. Щёлкните на PtList в палитре виджетов:

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

2. Щёлкните на ресурсе "List of Items", чтобы вызвать редактор списка.

1. Щёлкните мышкой на текстовом блоке внизу редактора. Вы увидите курсор ввода текста.

2. Наберите какой-нибудь текст, затем щёлкните на кнопку "Add After", чтобы разместить первый параграф списка.

3. Теперь давайте создадим новый параграф. Щёлкните на текстовом блоке и наберите Ctrl-U, чтобы удалить текст в текстовом блоке, затем наберите какой-нибудь новый текст.

Щёлкните на "Add After", чтобы разместить этот новый параграф после предыдущего.

1. Повторяйте предыдущий шаг, пока Вам не надоест.

2. Щёлкните на "Apply". Виджет PtList будет теперь отображать созданный Вами список.

3. Теперь попытаемся отредактировать список:

• чтобы изменить существующий параграф, щёлкните на параграфе, отредактируйте его текст, затем щёлкните на "Edit";

• чтобы удалить параграф, щёлкните на нём, а затем щёлкните на "Remove".

1. Когда Вы закончите свои эксперименты, щёлкните на "Done", чтобы принять Ваши изменения и закрыть редактор.

Создание шаблона

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

PhAB упрощает это, позволяя Вам создавать шаблон из существующего виджета или виджетов. PhAB создаёт палитру, схожую с палитрой виджетов, для Ваших шаблонов.

Давайте создадим шаблон из кнопки, которую Вы создали ранее на этом уроке.

1. Начните с выбора кнопки.

2. Щёлкните на меню "Edit", и затем выберите "Save as template".

Появится следующий диалог: