QtRuby: позиціювання віджетів

У цій статті, ми познайомимося з основами розміщенням віджетів у вікні додатку QtRuby.

Коли ми розробляємо графічний інтерфейс додатку, ми вирішуємо, які компоненти ми будемо використовувати і як ми будемо організовувати ці компоненти. Щоб організувати компоненти, ми використовуємо спеціальні невидимі ​​об'єкти, так звані менеджери компонування(layout managers).
Qt надає кілька варіантів. Ми можемо використовувати абсолютне позиціювання, вбудовані менеджери компонування або створити власний менеджер компонування. Також ми також можемо візуально будувати макети допомогою Qt Designer.

Введення в QtRuby

Ця стаття є введенням в програмування графічного інтерфейсу користувача(GUI) з використанням бібліотеки Qt, мови Ruby, і qt4-qtruby.

Якщо ви раніше ніколи не користувалися Qt, рекомендую почитати документ Як вивчати Qt. Не забувайте, що, як і більшість статей про Qt, ця сильно орієнтована на C++.

Найкращий спосіб почати програмувати з QtRuby це ознайомитися з прикладами коду, які знаходяться в директорії qtruby/examples.

Для початку розімнемо пальці. А саме напишемо Hello World. Куди ж ми без нього? Він містить тільки необхідний мінімум, що отримати робочий Qt додаток.

# -*- encoding: utf-8 -*-

require 'Qt'

app = Qt::Application.new(ARGV)
hello = Qt::PushButton.new("Hello World!")
hello.resize(100, 30)
hello.show
app.exec

Ruby/Tk в RVM

Так як wxRuby не розвивається більше 2-ох років, а Qt4 надмірний для моїх задач. Вибір впав на бібліотеку Tk, яка поставляється разом з Ruby.

Tk (від англ. Toolkit — "набір інструментів", "інструментарій") - кросплатформна бібліотека базових елементів графічного інтерфейсу, яка розповсюджується відкритими вихідними текстами.

Для того щоб почати використовувати Tk достатньо імпортувати бібліотеку для роботи з нею:

require 'tk'

Якщо ви отримаєте помилку

LoadError: cannot load such file -- tk

значить Tk не скомпільована з вашим Ruby.
Якщо у вас RVM, ласкаво прошу під кат.

Встановлення QtRuby з Ruby 1.9.2 на Ubuntu

Я використовую(і вам рекомендую) RVM (інструкція по встановленню на Ubuntu) і останню стабільну версію Ruby 1.9.2p180.

Спочатку встановлюємо необхідні пакети з репозиторію:

$ sudo apt-get install cmake libqt4-dev

Тоді переходимо до встановлення самого QtRuby:

$ sudo gem install qtbindings

Проект qtbindings - це набір "прив’язок" графічного фреймворку Qt4 для мови програмування Ruby, виконаний у вигляді пакету gem. У цілому він є перепакуванням підмножини Qt4 прив’язок до Ruby у формат, який добре піддається пакуванню в gem, що дозволяє легко встановити Qt "прив’язки" для Ruby на всіх платформах використовуючи RubyGems, і для забезпечення кращої сумісності між платформами.

Щоб побачити версію QtRuby, виконайте наступну команда:

$ rbqtapi -v
QtRuby 2.0.5 using Qt-4.7.0

Приклади додатків на QtRuby: /usr/local/rvm/rubies/ruby-1.9.2-p180/lib/ruby/gems/1.9/gems/qtbindings-4.6.3.2/examples

wxRuby → Сайзери (3 частина)

У попередній частині ми розглянули Wx::BoxSizer. Продовжимо знайомитися з сайзерами wxRuby.

wxRuby → Сайзери (2 частина)

У попередній статті ми познайомилися з позиціонуванням віджетів. А тепер перейдемо до найцікавішого, до огляду сайзерів, які є у бібліотеці wxRuby. І на прикладах побачимо, як впливають на розміщення елементів прапорці з методу Wx::Sizer#add().
У якості прикладу розглянемо код, на основі якого ми будемо експериментувати з сайзерами надалі.

# -*- encoding: utf-8 -*-

require 'wx'

class MainWindow < Wx::Frame
  def initialize
    super(nil, :id => -1, :title => 'Розмір має значення')
    self.size = [300, 200]
    self.do_sizer
    show
  end

  def do_sizer
    sizer  = Wx::BoxSizer.new(Wx::VERTICAL)
    set_sizer(sizer)
  end
end

class SimpleApp < Wx::App
  def on_init
    MainWindow.new
  end
end

app = SimpleApp.new
app.main_loop()

У цьому прикладі оголошується клас вікна MainWindow, у конструкторі якого викликається метод do_sizer(). Всередині цього методу у майбутніх прикладах відбуватиметься все найцікавіше, в тому сенсі, що у ньому ми і будемо розміщувати елементи керування. Інший код змінюватись не буде, тому в усіх наступних прикладах буде наводитись тільки цей метод.

wxRuby → Сайзери (1 частина)

Під час створення графічного інтерфейсу, вам потрібно займатися розміщенням елементів на формі. Наприклад, вам може знадобитись текстове поле і кнопка справа під ним. Ви можете розмістити ці елементи керування(Wx::TextCrt і Wx::Button), чітко вказавши позицію і розміри у пікселях. Ймовірно це не найкраща ідея, але ви можете зробити це у будь-якому випадку:

# -*- encoding: utf-8 -*-

require 'wx'

class HelloFrame < Wx::Frame
  def initialize
    super(nil, :id => -1, :title => 'Hello World!', :size => [200, 200])
    text = Wx::TextCtrl.new(self, :id => -1,
                                  :text => 'Type in here',
                                  :pos => [0, 0],
                                  :size => [200, 175],
                                  :style => Wx::TE_MULTILINE)
    button = Wx::Button.new(self, :id => -1,
                                  :label => 'Press me',
                                  :pos => [100, 175],
                                  :size => [100, 25])

    show
  end

end

class HelloApp < Wx::App
  def on_init
    HelloFrame.new
  end
end

app = HelloApp.new
app.main_loop()

Результат виконання скрипта:



Чому це погана ідея? Спробуйте збільшити і зменшити розміри вікна. Елементи залишаються на своїх місцях.



wxWidgets використовує інший підхід до розміщення елементів на формі. Елементи розміщуються не лише по відношенню до верхнього лівого кута. Їхній розмір також задається по відношенню до висоти і ширини.
Тобто, повертаючись до прикладу із статті Welcome to wxRuby!, ми помістили у вікно лише одну кнопку, по замовчуванню вона має висоту і ширину рівну, відповідно, висоті і ширині вікна.

Замість організації віджетів, використовуючи точні розміри і позиції, можна використовувати так звані сайзери, тобто класи похідні від Wx::Sizer. Саме сайзери визначають поведінку дочірніх елементів при зміні розмірів головного вікна. На мою думку, сайзери є найбільш складною для освоєння частиною бібліотеки wxRuby. І саме сайзерам буде присвячена ця стаття.

wxRuby → Вікно

У статті Welcome to wxRuby! ми познайомилися з бібліотекою віджетів wxWidgets та обгорткою для роботи з Ruby. Також ми створили простий додаток на wxRuby, який показує вікно з однією кнопкою.

Розглянемо докладніше цей код.
У класі HelloApp є метод on_init(), який викликається під час запуску додатку.
Займемося головним вікном. За створення вікна відповідає конструктор класу Wx::Frame. Фрейм - це вікно, розмір і позиція якого можуть бути змінені користувачем. Зазвичай воно має рамку і заголовок, а також опціонально може містити рядок меню, панель інструментів і рядок стану(про які ми поговоримо в одній із майбутніх статей).

Конструктор класу Wx::Frame приймає 7 параметрів:
:parent => (Wx::Window) - це посилання на батьківський об'єкт(обов'язковий параметр)
:id => (Fixnum) - ідентифікатор вікна. -1 - значення по замовчуванню
:title => (String) - заголовок вікна
:pos => (Wxruby2::Point) - позиція вікна на екрані
:size => (Wxruby2::Size) - розмір вікна
:style => (Fixnum) - стиль вікна
:name => (String) - назва вікна

Змінимо код додатку з першої частини так, щоб наше вікно з'явилося у верхньому лівому куті і мало розмір 320х240 пікселів. Зміни вносимо у метод initialize() класу HelloFrame:

super(nil, :id => -1, :title => 'Hello World!', :pos => [0, 0], :size => [320, 240], :style => Wx::DEFAULT_FRAME_STYLE, :name => 'frame')

Щоб вікно з'явилося у центрі екрану можна скористатися методом centre():

self.centre

Для зміни позиції вікна після ініціалізації можна скористатись методам move(Wx::Point point):

self.move([100, 100])

Для зміни розміру вікна є метод set_size(Wx::Size size):

self.set_size([640, 480])

Для вікна можна задати один із стилів:
Wx::DEFAULT_FRAME_SLYLE - стиль по замовчуванню. Включає в себе Wx::MINIMIZE_BOX|Wx::MAXIMIZE_BOX|Wx::RESIZE_BORDER|Wx::SYSTEM_MENU|Wx::CAPTION|Wx::CLOSE_BOX|Wx::CLIP_CHILDREN
Wx::ICONIZE - показувати мінімізоване вікно. Тільки Windows
Wx::CAPTION - показувати заголовок вікна
Wx::MINIMIZE - аналогічно Wx::ICONIZE
Wx::MINIMIZE_BOX - показувати кнопку згортання вікна
Wx::MAXIMIZE - показувати максимізоване вікно. Тільки Windows
Wx::MAXIMIZE_BOX - показувати кнопку розгортання вікна на весь екран
Wx::CLOSE_BOX - показувати кнопку закриття вікна
Wx::STAY_ON_TOP - показувати поверх всіх вікон
Wx::SYSTEM_MENU - вікно буде мати системне меню
Wx::RESIZE_BORDER - показувати рамку для зміни розміру вікна.
Wx::FRAME_TOOL_WINDOW - вікно з рамкою невеликого розміру, і також вікно не буде показуватися на панелі задач. Тільки Windows і GTK+
Wx::FRAME_NO_TASKBAR - нормальне вікно, але воно не буде показуватися на панелі задач. Тільки Windows і GTK+
Wx::FRAME_FLOAT_ON_PARENT - вікно буде показуватися тільки поверх батьківського вікна (на відміну від Wx::STAY_ON_TOP)

Для того щоб створити вікно, розмір якого не може змінювати користувач, можна використати таку комбінацію стилів:
Wx::DEFAULT_FRAME_STYLE & ~ (Wx::RESIZE_BORDER|Wx::RESIZE_BOX|Wx::MAXIMIZE_BOX)

Тепер ви можете поекспериментувати із розміром, позицією і стилями вікна.
Стаття вийшла доволі коротка, і ми тут не розглянули всі нюанси роботи з вікнами. Виправлю цей недолік у майбутніх статтях.
На домашнє завдання така задачка: у випадку натиснення на кнопку пересунути вікно у позицію [10, 10].

На все добре і успіхів.

wxRuby → Welcome to wxRuby!

Цим записом я розпочну серію статей присвячену основам створення графічних додатків за допомогою бібліотеки wxWidgets на мові Ruby.

wxWidgets(раніше відома як wxWindows) — це крос-платформена бібліотека інструментів з відкритим вихідним кодом для побудови графічного інтерфейсу користувача(GUI).
wxWidgets розповсюджується під ліцензією LGPL. Проект був запущений в 1992 Юіаном Смартом (Julian Smart), який до сих пір залишається головним розробником. У 2004 році проект wxWidgets на прохання Microsoft Corporation змінив оригінальну назву "wxWindows" на "wxWidgets", за що отримав фінансову допомогу.
wxWidgets дозволяє створювати додатки для багатьох комп'ютерних платформ із мінімальними змінами у вихідному коді, або взагалі без них. Вона підтримує системи Microsoft Windows, Apple Macintosh, UNIX-подібні(для X11, Motif і GTK+), OpenVMS і OS/2. WxWidgets не імітує вигляд компонентів, використовуючи графічні примітиви різних підтримуваних платформ. Натомість wxWidgets надає тонку абстракцію до існуючих компонентів системи.
Бібліотека розроблена на C++, але може бути підключеною до багатьох інших розповсюджених мов, таких як Ruby, Python, Perl, Java, C#/.NET та інших.


wxRuby - це обгортка бібліотеки wxWidgets для роботи з Ruby. Вона однаково добре працює на Windows, Linux, Mac OS X, і з Ruby версіями 1.8 та 1.9.

Інсталяція wxRuby2
Є два методи інсталяції wxRuby2:

• Використовуючи Rubygems для встановлення бінарного gem-у(без залежностей)


• Із вихідних кодів

Для більшості людей на більшості операційних систем перший метод є зручнішим і швидшим. Для цього достатньо у командному рядку виконати:

gem install wxruby

Слід зазначити, що при написанні власних додатків використовуючи wxRuby, встановлену із gem-ів, ви повинні попередньо завантажити(не обов'язково для ruby >= 1.9 ) бібліотеку rubygems. Це можна зробити кількома способами:

• Запустити ruby з аргументом -rubygems. Наприклад: ruby -rubygems my_wxruby_script.rb


• Встановити RUBYOPT змінну оточення як -rubygems


• Додати на початку програми рядок require 'rubygems'

Розпочнемо з просто прикладу. Покажемо вікно з кнопкою "Press me", при натисканні на яку відобразиться діалогове повідомлення.

# -*- encoding: utf-8 -*-

# Підключаємо бібліотеку wxruby2 
require 'wx'

# Створюємо свій клас спадкоємець Wx::Frame з усіма потрібними нам елементами, а потім використовуємо його.
class HelloFrame < Wx::Frame
  def initialize
    super(nil, :title => 'Hello World!')
    button = Wx::Button.new(self, :label => 'Press me') # Створюємо кнопку. За допомогою посилання self вона сама себе додасть у фрейм
    
    evt_button(button.get_id, :bt_evt) # У випадку натиснення викликаємо bt_evt()
    show # показуємо вікно
  end

  def bt_evt
    Wx::MessageDialog.new(self, "Hello world!", "Test", Wx::OK).show_modal # створюємо діалог з однією кнопкою OK і відображаємо його за допомогою show_modal()
  end
end

class HelloApp < Wx::App
  def on_init
    HelloFrame.new # створюємо екземпляр нашого класу
  end
end

app = HelloApp.new
app.main_loop() # Запускаємо головний цикл Wx. З цього моменту програма очікує на різні події.

У результаті будемо мати таке віконечко:


В даний час API представляє собою прямий порт wxWidgets C++ інтерфейсу. Місцями цей інтерфейс є трохи аляповий, завдяки своїй довгій історії. В майбутньому розробники планують додати Ruby-специфічний шар поверх базового Wx API, аналогічно тому як це зроблено у FXRuby для Fox. Це розширене API буде простіше у використанні і орієнтуватиметься на Ruby-стиль. Крім того розробники створили підпроект wxSugar(який може використовуватись поверх wxRuby) у якості випробувального полігону для покращень синтаксису.

У гем пакеті wxRuby є досить багато прикладів роботи з різноманітними віджетами, тому цього цілком вистачить, для демонстрації можливостей Ruby + wxWidgets.
У мене це /opt/lib/ruby/gems/1.9.1/gems/wxruby-ruby19-2.0.0-x86-linux/samples


Посилання:
http://wxruby.rubyforge.org
http://www.wxwidgets.org/
http://ru.wikipedia.org/wiki/WxWidgets