Розроблення додатка – гра «Перший мільйон»

//В конструкторе // Первый виджет может  иметь размер от 50 до 100 пикселов, // предпочитаемый размер  — 60% от размера контейнера myLayout.setItemLayout(0,50,100,-0.6); // Второй виджет может  иметь размер от 20% до 60% от размера // контейнера, предпочитаемый  размер — 50 пикселов myLayout.setItemLayout(1,-0.2,-0.6,50); // В методе resized() // Создаем массив указателей  на виджеты, которые хотим разместить Component* comps[] = { myComp1, myComp2 }; // Размещаем два компонента  по вертикали в текущем компоненте myLayout.layOutComponents (comps, 2, 0, 0, getWidth(), ↵ getHeight(),true);

 

Якщо в Qt або GTK віджет просто додається в кайзер в конструкторі, а розміри є властивостями самого віджета, то в Juce все складніше. Потрібно точно знати кількість віджетів в сайзере і їх бажані розміри, а в методі resized () доводиться створювати тимчасовий масив покажчиків. Клас StretchableLayoutManager недоступний у візуальному редакторі, що робить його застосування ще більш трудомістким. Тим не менш, навіть такий складний у застосуванні сайзер краще, ніж нічого.

The Jucer дозволяє дуже просто  і елегантно працювати з будь-якими  бінарними ресурсами. Припустимо, ми хочемо використовувати 
в програмі графічний файл juce.png. Переходимо на вкладку Resources і додаємо цей файл у список. при збереженні бінарні дані з цього файлу переводяться у форму звичайного масиву С і безпосередньо вставляються в код. Відповідний рядок має вигляд:

static const unsigned char ↵          resource _ MyMainComponent _ juce _ png[] = { 137,80,78,71,...

 

У класі автоматично створюється  змінна cachedImage_juce_png типу Image *, яка ініціалізується  даними цього масиву в конструкторі. Її можна використовувати в коді для доступу до ресурсу. Весь службовий  код для роботи з такими ресурсами (а його чимало) створюється автоматично.

Маючи набір графічних  файлів, завантажених у вигляді ресурсів, можна переходити до однієї з найбільш вражаючих особливостей The Jucer - редактору  фонової графіки (див. рис.2.3). Перейдемо на вкладку Graphics. Тут можна редагувати фон нашого компонента, що відображається під віджетами. З контекстного меню можна додати різні геометричні примітиви, криві, малюнки і текст. Для кожного компонента можна вибрати заливку кольором або у вигляді лінійного або радіального градієнта, товщину і колір ліній і т.п. Контрольні точки градієнтів і кривих можна перетягувати мишею. Також можна задавати прозорість для всіх елементів, заповнювати фігури зображеннями і навіть перетворювати текст в криві. Редактор гранично зрозумілий і дуже приємний в роботі. Його, звичайно, не можна порівнювати з повновагими векторними редакторами зразок Inkscape, але зі своєю функцією створення гарного фону для віджетів він справляється на відмінно.

Рис.2.3. Редагування фонової  графіки в The Jucer

Код малювання поміщається  в метод paint () нашого класу і, при  необхідності, в метод resized (). Вивчивши його, легко зрозуміти логіку роботи операцій малювання в Juce. Зокрема, чітко  видно, як The Jucer бере на себе всю чорну  роботу по масштабуванню і розміщенню примітивів при зміні розмірів вікна.

 

Розділ ІІІ. Створення  додатку

Розробка інтерфейсу

Запускаємо The Jucer і вибираємо у меню File> New Component. З'явиться віджет з вкладками, що відображає інформацію про створюваний компонент. На вкладці Class в списку General class settings задаємо ім'я класу компоненту (class name), назву компонента (component name), якщо воно відрізнятиметься від назви класу, батьківський клас / класи (parent classes), параметри конструктора (constructor params), початкові розміри віджета (initial width і initial height), а також вибрати у випадаючому списку fixed size, чи будуть розміри віджета підлаштовуватися під розміри компонента-контейнера або головного вікна (Resize component to fit workspace) або ж створюваний компонент буде з незмінними розмірами (рис.3.1).

Рис.3.1. Програма The Jucer. Редагування властивостей 
класу компонента

На вкладці Subcomponents спроектовуємо зовнішній вигляд нашого компонента, розміщуючи на його поверхні різні віджети і редагуючи їх властивості у списку праворуч (рис.3.2). Біле поле з координатною сіткою – це і є заготовка нашого майбутнього компонента, на який можна додавати стандартні або призначені для користувача віджети за допомогою контекстного меню. У ньому доступні наступні стандартні компоненти: Text Button (кнопка з текстом), Toggle Button (радіокнопка), Slider (повзунок), Label (ярлик), Text Editor (поле введення), Combo Box (випадаючий список), Group Box (груповий блок ), Hyperlink Button ("кнопка" - гіперпосилання), Viewport (полі перегляду), Tabbed Component (компонент з вкладками), Tree View (деревоподібний список), Image Button (кнопка з зображенням). Крім того, контекстне меню дозволяє редагувати колір фону віджета (у меню пункт "Edit background graphics").

Рис.3.2. Редагування зовнішнього вигляду компоненту в програмі The Jucer

Отже, створюємо головну форму яка складається з 4-х TextButton та 1-го Label (це для 1го запитання). Дублюємо елементи ще для 4-х запитань. При цьому вони накладаються один на одного. На про дубльовані елементи встановлюємо setVisible(false); - таким чином вони з’являються лише тоді коли буде потрібно.

Наприклад, при правильній відповіді на перше запитання елементи які йому відповідають автоматично стають setVisible(false), а елементи які відповідають за друге запитання setVisible(true).

Створюємо «інформативну» форму, яка складається з TextButton (двох дубльованих, вони накладені одна на одну) та TextEditor-а.

Продубльовані клавіші мають 2 функції:

• Перша викликається коли відповідь вірна. Вона лише закриває «інформативну» форму.
• Друга коли відповідь невірна: вона закриває головне вікно та всю програму.

Зміст TextEditor-а залежить від правильності відповідей. Якщо відповідати вірно він показує скільки коштів зараховано в «Банк» гравця. Якщо відповідь невірна з’являється повідомлення “You loseL” ,що свідчить про те, що гравець програв і гра завершена. 

Приклад реалізації роботи додатку

1. Запускаємо файл «gg.exe», який знаходиться у головному каталозі проекту - gg\Builds\VisualStudio2010\Debug\ gg.exe. одразу ж відкривається перше питання гри:

2. Якщо відповісти не правильно з’явиться вікно яке сповістить про те, що гравець програв (тиснемо кнопку «Ок»):

3. Тепер продемонструємо всі питання з правильними відповідями. На перше питання відповідь була – «С++». При правильній відповіді гравець виграє 1тисячу гривень:

4. Правильна відповідь на друге питання – «3» (це інкапсуляція, успадкування та поліморфізм). Гравець виграє 5 тисяч гривень:

5. Відповідь на третє питання – «Список» (точніше лінійний список по принципу LIFO: last in — first out). Виграш становить 20 тисяч гривень:

 

6. Четверте питання трошки складніше – «HTML». Виграш – 50 тисяч гривень:

7. Та останнє питання, відповідь на яке приносить виграш у 100 тисяч гривень, правильна відповідь – «85»балів (адже цей додаток працює не зовсім так як справжня гра «Перший мільйон»):

 

8.  Гра завершена. Головний приз – 100 тисяч гривень виграє тільки той, хто знає відповіді на всі питання! 
   

Висновок

Juce являє собою багатоплатформовий  інструмент для розробки графічного  інтерфейсу користувача, а також  універсальну бібліотеку класів  для вирішення різних завдань.  Компоненти, що входять до складу Juce, забезпечують попиксельну ідентичність  інтерфейсу створюваних програм  під різними операційними системами.  Основне призначення Juce - створення  програм з оригінальним зовнішнім  виглядом, не залежних від зовнішніх  бібліотек, а також додатків  для обробки звуку. До складу Juce входять допоміжні програми: Introjucer для створення проектів та the jucer, що відповідає за візуальне  проектування компонентів.

The Jucer дозволяє редагувати  властивості компонентів й генерувати  на основі заданих налаштувань  код на мові C++. Згенеровані вихідні  тексти можуть бути як відредаговані  вручну, так і відкриті в the jucer з можливістю огляду і повторного  візуального редагування компонентів. 

В даній курсовій роботі за допомогою кросплатформної бібліотеки Juce на мові С++ було створено платформнонезалежний додаток – гра «Перший мільйон». Для коректної роботи був використаний метод setVisible (bool shouldBeVisible), що дозволяє відображати або ховати вікно для доступу користувача, та стандартні віджети такі як Text Editor (поле введення), Text Button (кнопка з текстом) та Label (ярлик).

 

Список використаних джерел

1. «Open Source» — электронное приложение к журналу «Системный администратор» [http://osa.samag.ru/]
2. Степанов Е.О., к.ф.-м.н. Ярцев Б.М. - Учебно-методическое пособие по дисциплине «Архитектуры и технологии разработки распределенного программного обеспечения»
3. Пол Эбрахамс, Майкл Болл и др. - Язык программирования C++. Вводный курс
4. Інтернет університет інформаційних технологій [http://www.intuit.ru/]
5. Універсальна інтернет-енциклопедія [ru.wikipedia.org]

 

Додаток 1. Текст  програми

TApplication.cpp

#include "TApplication.h"

#include "TMainForm.h"

#include "TThirdForm.h"

//---------------------------------------------------------------------

TApplication::TApplication() : pMainWindow(0), pThirdWindow(0)//pSecondWindow(0),

{

}

//---------------------------------------------------------------------

TApplication::~TApplication()

{

}

//---------------------------------------------------------------------

void TApplication::initialise(const String& sCommandLine)

{

    pMainWindow = new TMainForm(); // Создаём главное окно программы

}

//---------------------------------------------------------------------

void TApplication::shutdown()

{

    if(pMainWindow != 0) delete pMainWindow;

//if(pSecondWindow != 0) delete pSecondWindow;

if(pThirdWindow != 0) delete pThirdWindow;

}

//---------------------------------------------------------------------

void TApplication::systemRequestedQuit()

{

    quit(); // Завершаем работу приложения

}

//---------------------------------------------------------------------

const String TApplication::getApplicationName()

{

    // Задаём имя приложения

    // (будет отображаться в заголовке главного окна)

    return "Nika";

}

//---------------------------------------------------------------------

const String TApplication::getApplicationVersion()

{

    // Получаем версию приложения из опций проекта

    return ProjectInfo::versionString;

}

//---------------------------------------------------------------------

bool TApplication::moreThanOneInstanceAllowed()

{

    // Запрещаем запуск более одного экземпляра приложения

    return false;

}

//---------------------------------------------------------------------

 

TCentralComponent.cpp

#include "TMainForm.h"

#include "TCentralComponent.h"

#include "TThirdComponent.h"

#include "TThirdForm.h"

#define tr(s) String::fromUTF8(s)

 

 

//[MiscUserDefs] You can add your own user definitions and misc code here...

//[/MiscUserDefs]

 

//==============================================================================

TCentralComponent::TCentralComponent ()

    : label (0),

  label2 (0),

  label3 (0),

  label4 (0),

  label5 (0),

      textButton (0),

      textButton2 (0),

      textButton3 (0),

      textButton4 (0),

  textButton5 (0),

  textButton6 (0),

  textButton7 (0),

  textButton8 (0),

  textButton9 (0),

  textButton10 (0),

  textButton11 (0),

  textButton12 (0),

  textButton13 (0),

  textButton14 (0),

  textButton15 (0),

  textButton16 (0),

  textButton17 (0),

  textButton18 (0),

  textButton19 (0),

  textButton20 (0),

      cachedImage__1_png3 (0)

{

//pSecondWindow = new TSecondForm();

//pSecondWindow->setVisible(false);

pThirdWindow = new TThirdForm();

pThirdWindow->setVisible(false);

 

    addAndMakeVisible (label = new Label (L" new label",

                                          L"Как называется язык программирования?"));

    label->setFont (Font (L"Times New Roman", 19.6000f, Font::bold));

    label->setJustificationType (Justification::centred);

    label->setEditable (false, false, false);

    label->setColour (Label::textColourId, Colour (0xfffffefe));

    label->setColour (Label::outlineColourId, Colour (0x0));

    label->setColour (TextEditor::textColourId, Colours::black);

    label->setColour (TextEditor::backgroundColourId, Colour (0x0));

 

addAndMakeVisible (label2 = new Label (L" new label2",

                                          L"Сколько свойств имеет ООП?"));

    label2->setFont (Font (L"Times New Roman", 19.6000f, Font::bold));

    label2->setJustificationType (Justification::centred);

    label2->setEditable (false, false, false);

    label2->setColour (Label::textColourId, Colour (0xfffffefe));

    label2->setColour (Label::outlineColourId, Colour (0x0));

    label2->setColour (TextEditor::textColourId, Colours::black);

    label2->setColour (TextEditor::backgroundColourId, Colour (0x0));

label2->setVisible(false);

 

addAndMakeVisible (label3 = new Label (L" new label2",

                                          L"Что такое стек?"));