Главная › Блоги › expl's blog

Ещё одна gui-либа

10 March, 2012 - 19:10 — expl

Долгое время пытался найти простую GUI-либу для haXe, но:

  • "многословность" aswing отпугивает
  • баганутость haXe-версии minimalcomps и невозможность скинования исключает эту либу из списка(UPDATE: с "баганутая" сильно преувеличил)
  • haxeGUI - это вообще кощунство - писать динамически типизированный интерфейс на языке, имеющем богатые средства статической проверки типов. Глючит даже в демках, а как использовать по-человечи (а не только рисовать кнопочки с окошками) - не понятно
  • fcomponents - проект не развивается уже давно, хотя вроде бы может частично заменить minimalcomps, но API не понравился, не помню почему
  • arctic - это что-то с чем-то. Авторы считали своим долгом нарушить принцип "открытия/закрытия" где можно и нельзя. В итоге абсолютно не расширяемая либа с отмороженным API (ну она, собственно так и называется - arctic)

Вывод: надо сделать менее отмороженную, умеренную либу, с блекджеком и барышнями, и назвать ее temperate :)

Достоинства:

  • Если не требуется особое скинование - сел и поехал (никаких инициализаций, как в AsWing)
  • Если скинование требуется (или еще какие настроки) - рисуй скины в фотошопе, пиши скины для окон - пожалуйста, никто тебя не ограничивает, настраивай компоненты изменением свойств или перегрузкой методов если совсем что-то специфическое нужно
  • Работа с компонентами не сильно отличается от работы с обычными Sprite'ами. Никто не заставляет помещать их в спец контейнеры, чтобы они правильно работали, так же никто не заставляет использовать наследников от CSprite, где можно использовать обычный DisplayObject в самой либе
  • Удобная работа с всплывающими подсказками (с возможностью настраивать задержки, писать свои отображения и свои анимации отображения/скрытия)
  • Подсказка не требует от элемента, над которым надо показать подсказку, никаких реализаций интерфейса - надо над Sprite показать - будет над спрайтом показываться, над TextField - будет над TextField
  • Менеджер курсоров на стеке с приоритетом - позволяет не думать о том, что делают с курсором другие классы, когда занимаешься установкой курсора в конкретной подсистеме приложения.
    В то же время если ты привык менять одно глобальное поле cursor - пожалуйста, никто не мешает - в менеджере оно есть
  • CHBox и СVBox с растягиванием детей по процентам, с отступами на заданный интервал, с выравниванием и т.п.
  • Бонусом идет полностью затипизированный CSignal и проверка типов листенеров нативного EventDispatcher'а через макросы в виде EventDispatcherUtil

Недостатки:

  • нет никаких компонентов для работы со визуальными списками (ComboBox, Menu, скроллирующиеся List-ты, TileBox'ы и т.д.)
    Времени не было, поэтому не реализовано
  • оконная система всё-таки получилась отмороженной, но тем не менее вполне юзабельной и вроде как расширяемой

Установка:
haxelib install temperate

Исходники:
https://github.com/cser/temperate

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

package ;

import flash.Lib;
import flash.display.Sprite;
import flash.events.MouseEvent;
import temperate.minimal.MButton;
import temperate.minimal.MTooltipFactory;
import temperate.minimal.windows.MAlert;

class Main extends Sprite
{
        public static function main():Void
        {
                Lib.current.addChild(new Main());
        }
       
        public function new()
        {
                super();
               
                var button = new MButton().setText("Show alert");
                button.x = 10;
                button.y = 10;
                button.addEventListener(MouseEvent.CLICK, onShowAlertClick);
                addChild(button);
               
                // Назначаем всплывающую подсказку кнопке
                MTooltipFactory.newText(button, "If you press it, alert will be shown");
        }
       
        private function onShowAlertClick(event:MouseEvent):Void
        {
                MAlert.show(true, "Alert!");
        }
}

Другие, более детальные примеры можно посмотреть здесь:
https://github.com/cser/temperate/tree/develop/examples
И здесь:
https://github.com/cser/temperate/tree/develop/manual-tests-src
Если ни там, ни там ничего нет или непонятно - пример должен быть в виде теста здесь:
https://github.com/cser/temperate/tree/develop/test/src/

Недавно завершил забег по граблям "заставить работать либу на nme".
Заставить, таки, заставил, по-крайней мере под windows работает.
Но желание пользоваться nme отпало напрочь (очень, очень много в нём косяков, а если не в нём, то в hxcpp)
Интересно, хоть кто-нибудь из форумчан смог хоть один боевой проект на нём сделать(не либу)?

Вобщем, буду признателен, если кто-нибудь попробует сие поделие и напишет про ощущения :)

UPDATE:
Картинки вставить не получается, поэтому скрины будут ссылками:
https://github.com/cser/temperate/blob/develop/examples/images/temperate...
https://github.com/cser/temperate/blob/develop/examples/images/temperate...
SWF примеры вперемешку с ручными тестами:
https://github.com/cser/temperate/tree/develop/examples/swf-examples

Вообще вся документация к проекту - это пара readme-файлов. Но любой класс из папки src (собственно либы) обязательно имеет если не ручной
(https://github.com/cser/temperate/tree/develop/manual-tests-src) то автоматический (https://github.com/cser/temperate/tree/develop/test/src/) тест, где можно посмотреть как оно должно работать.

Пару слов о скиновании

Маленький пример скинования кнопки лежит в https://github.com/cser/temperate/tree/develop/examples/button-skinning-...

А вообще - весь пакет temperate.minimal - это один большой пример по скинованию и настройке temperate
(только не надо как там - рисовать BitmapData-скины кодом - это сделано чисто чтобы пользователи никаких swf-ок в параметры компиляции не подписывали - подключил либу - начал работать)

Основные подходы к скинованию:

  • Если используется дефолтный temperate.minimal и не устраивают только цвета - обращаемся на старте приложения к классам в temperate.minimal.graphics и меняем их публичные статические поля, подбирая цвет.
    А в классу MFormatFactory обращаемся, чтобы поменять параметры шрифтов.
  • Если нужно большее, рисуем скины в растре

    Весь пакет temperate.minimal построен на скиновании компонентов растром.

    Классов скинов как таковых в фреймворке нет, за исключением окон - есть настройки компонентов и наследование (это сделано сознательно).

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

    Чтобы не настраивать её каждый раз, делается статичная фабрика, выдающая уже настроенные компоненты. Или делается наследник, который сам себя настраивает. Например, MButton и MFlatButton наследуется от CButton и различаются только настройками своего предка. Вместо 2-х классов можно было бы просто создать статическую фабрику с 2-мя методами: createButton():CButton и createFlatButton():CButton.

  • Если нужно еще больше - берём напильник в руки и вперёд! - Наследуемся от абстрактного компонента, пишем на базе него свой, или вообще пишем с нуля.