Быстрая разработка GUI приложений на Ruby

Вступление

На хабре, по-моему, уже почти все возможные графические API для руби рассматривались. Но почему-то все воспринимают и подают эти самые API исключительно как чистый код. Никаких тебе графических дизайнеров, никакой скоростной разработки GUI — сиди, вычисляй координаты ручками, подгоняй как надо. А зачем иначе, ведь на руби серьезных GUI приложений не написать.
А вот и нет! Если уж на то пошло, то на руби можно написать даже Wolfenstein. Но начинать лучше все-таки с чего-то менее глобального :)

Подготовка

Итак, попробуем написать что-нибудь не очень простое, достаточно GUI'евое и желательно не заморачиваясь на вычисление координат.
Для начала нам понадобится:

• Ruby — собственно сам руби, если у вас его еще нет
• Рубигемы WxRuby и WxSugar (ставятся командами «gem install wxruby» и «gem install wx_sugar» соответственно) — гем WxWidgets'ов и руби-утилитка wxSugar
• wxFormBuilder — удобный GUI редактор

Дизайн

Все скачали, поставили. Можно написать… ну, пусть будет простая RSS читалка :)
Начнем с того самого пресловутого дизайна — запускаем FormBuilder и создаем новый проект, обзываем его как-нибудь. Далее добавляем в проект из закладки Forms самый обычный Frame.

Должно появиться обычное такое окошко. Прописываем ему красивый заголовок в свойствах, делаем рамочку какую хотим. И вот тут небольшой нюанс — чтобы мы могли создавать на его основе свое приложение, оно должно иметь свой subclass, поэтому идем все в те же свойства и задаем там что-нибудь вроде RubyRSSFrame.
Окно создали. Теперь надо добавить элементы управления. Что нам нужно для RSS читалки? Да, в общем-то, немного: ввод URL, кнопку «Добавить», список добавленных фидов, список тем в фиде и окошко для новостей.
Начинаем добавлять, но не торопимся — чтобы элементы располагались так, как нам надо, они должны быть в sizer'ах. Подробнее о том, что такое sizer'ы и как ими правильно пользоваться можно почитать, например вот тут. Находятся они в закладке Layout.

Поэтому сначала добавим общий sizer, а в него еще несколько мелких. И уже в них добавляем наши элементы: TextCtrl, Button, пару ListBox'ов и HtmlWindow. Для удобства можно задать всем этим элементам какие-нибудь понятные имена.
После всех проделанных действий должно получиться что-то вроде этого:


Теперь нам надо сгенерировать XRC файл. Идем в свойства проекта и выбираем там вместо генерации c++ кода, геренацию xrc. И нажимаем File — Generate Code (или просто F8). Получаем на выходе наш файл mainframe.xrc. XRC — это такой универсальный формат рисования WxWidgets окон, основанный на XML. Просто так он с Ruby работать не будет.
И вот тут нам на помощь приходит тот самый WxSugar. Открываем консоль, переходим в папку с нашей xrc'шкой и вводим команду «xrcise -o mainframe.rb mainframe.xrc». После ее выполнения, мы получим руби файл, описывающий наше окошко. Внимание! Без XRC файла он работать не будет!
Дизайн нарисовали, осталось его оживить :)

Программируем

Создаем новый руби файл, например "rubyrss.rb" и открываем его в редакторе. Для начала подключим все нужные гемы и нашу гуйню:

require 'wx' # гем wxruby
require 'rss/2.0' # гем для работы с rss2.0
require 'open-uri' # гем для работы с сетью
require 'mainframe' # наш дизайн

* This source code was highlighted with Source Code Highlighter.

Теперь нам надо создать форму и инициализировать приложение:

# Создаем наш класс, который наследует класс нарисованной формы
class RubyRSSMainFrame < RubyRSSFrame
 # Инициализация класса
 def initialize
  # Вызов инициализации родителя
  super
 end
end

# Запуск приложения на основе нашего класса
Wx::App.run do
 RubyRSSMainFrame.new.show
end

* This source code was highlighted with Source Code Highlighter.

При исполнении этого кода должно появляться нарисованное окошко. Естественно, оно будет статично — никаких действий.
Теперь создадим внутри класса несколько массивов для записи информации из RSS:

# Классовые массивы для данных RSS
# Массив с адресами
$rss_addr_arr = Array.new()
# Массив с топиками
$rss_topics_arr = Array.new()
# Массив с текстами
$rss_text_arr = Array.new()

* This source code was highlighted with Source Code Highlighter.

И добавим действие для кнопки. В процедуру инициализации вписываем строчку, добавляющую event listener на нажатие:

# add_btn - id кнопки
# addrss - имя нашей функции
evt_button(add_btn){ addrss }

* This source code was highlighted with Source Code Highlighter.

Теперь к самой функции, срабатывающей при нажатии:

 # Функция обработки добавления адреса RSS
 def addrss
  # Добавляем в массив адресов новый адрес, введенный в TextCtrl
  $rss_addr_arr << http_adress_input.value
  # Записываем позицию адреса в массиве
  position = $rss_addr_arr.length - 1

  # Добавляем новые массивы топиков
  $rss_topics_arr << Array.new()
  # и текстов
  $rss_text_arr << Array.new()

  # Открываем ссылку RSS'а
  feed_url = http_adress_input.value
  open(feed_url) do |http|
   # Считываем ответ
   response = http.read
   # Парсим ответ с помощью RSS парсера
   result = RSS::Parser.parse(response, false)
   # Добавляем в список загруженных фидов название
   rss_list.insert_items([result.channel.title],position)
   # Обрабатываем результаты
   result.items.each_with_index do |item, i|
    # Добавляем в массивы тему
    $rss_topics_arr[position] << item.title
    # и текст
    $rss_text_arr[position] << item.description
   end
  end

* This source code was highlighted with Source Code Highlighter.

Теперь наша программа загружает фид и выводит его название. Осталось совсем немного — сделать, чтобы показывались списки тем новостей и текст новостей.
Добавляем еще два event listener'а на выбор элементов в ListBox'ах:

evt_listbox(rss_list) { | event | readnews }
evt_listbox(topics_list) { | event | shownews }

* This source code was highlighted with Source Code Highlighter.

И прописываем соответствующие простенькие функции:

 # Вывод списка новостей по фиду
 def readnews
  # Очищаем старый список
  topics_list.clear
  # Берем ID выделенного фида
  rssid = rss_list.get_selections[0]
  # Каждый элемент массива топиков
  $rss_topics_arr[rssid].each do |item|
   # добавляем в список топиков
   topics_list.insert_items([item],0)
  end
 end

 # Показываем текст новости
 def shownews
  # Берем ID выдевеленного фира
  rssid = rss_list.get_selections[0]
  # Берем ID выделенной новости
  topicid = topics_list.get_selections[0]
  # Показываем текст
  news_text_html.set_page($rss_text_arr[rssid][topicid])
 end

* This source code was highlighted with Source Code Highlighter.

Вот и все. Итоговый результат должен выглядеть примерно так:

Итоги

Вся разработка заняла не больше 10 минут. И это при моем довольно среднем знании Ruby.
Да, это приложение нельзя назвать завершенным — в нем наверняка много ботлнеков и всяческих глюков. Но цель была не создать полноценное приложение, а показать, что и на Ruby вполне можно разрабатывать GUI приложения, причем достаточно быстро.

upd. Перенес в блог Ruby. Спасибо за отзывы :)