Qooxdoo. Разрабатываем TODO List

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

Фреймворк называется qooxdoo. Произносится «куксду» (кому удобнее английская транстрипция: ['kuksdu:]).

На Хабре было несколько попыток написать про этот фреймворк, но все они свелись к новостям о выходе новой версии или к парам абзацев в статьях типа «смотрите каких фреймворков понаписали». Я несколько лет работаю с qooxdoo и мне хотелось бы восполнить этот пробел.

Вкратце о том, что это за зверь и с чем его едят. Больше всего фреймворк «похож» на ExtJS. Слово «похож» не совсем корректное, в данном случае, но я затрудняюсь подобрать более подходящее. Разработка проекта началась в недрах компании 1&1 Internet AG. Первая публичная версия 0.1 вышла в 2005 году. Текущая актуальная версия 4.1, про нее и будем вести речь. Некоторые моменты позволяют мне сказать, что разработчики вдохновлялись Qt при создании своего детища. Основная изначальная задумка разработчиков дать возможность разрабатывать веб приложения людям без знания HTML, CSS и DOM модели. С помощью qooxdoo это возможно. Новичок, которому требуется написать, например, админку в виде single page application (далее SPA) и который не знает ни одного HTML тега, а про CSS вообще никогда не слышал, действительно, сможет это сделать. Это не означает, что знания HTML, CSS и DOM модели вдруг резко стали не нужны. Просто, поначалу, можно обойтись без них. Что будет особенно интересно, например, разработчикам десктопных приложений, которым потребовалось что-то сделать в вебе.

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

Просто так рассказывать о фреймворке скушно и неинтересно. К тому же, разработчики это уже и так сделали. Поэтому я решил сделать какой-нибудь простенький пример для демонстрации возможностей фреймворка. Многие знают о проекте http://todomvc.com/. Вот и мы с вами сделаем что-то максимально похожее с использованием qooxdoo. Справедливости ради, разработчики уже сделали демо todo листа, но это не совсем то, что нам нужно.

Итак, приступим.

Следует оговориться, что рассматриваться будет именно SPA (Desktop в терминологии qooxdoo). Для начала необходимо загрузить qooxdoo sdk. Сделать это можно по этой ссылке. SDK содержит ряд утилит, которые позволяют сгенерировать шаблон приложения и собрать отладочную и релизную версию, собрать автоматическую докуентацию, туты и т.д. Ознакомиться с документацией по тулчейну можно тут.

Для создания шаблона приложения мы запустим:

create-application.py --name=todos

После этой операции мы получим следующий каркас приложения:



Приложение сгенерируется не пустым. Оно будет иметь кнопку, по нажатию на которую будет выводиться alert.
Основной файл Application.js будет содержать следующий код:

/**
 * This is the main application class of your custom application "todos"
 *
 * @asset(todos/*)
 */
qx.Class.define("todos.Application", {
  extend : qx.application.Standalone,
  members : {
    /**
     * This method contains the initial application code and gets called 
     * during startup of the application
     * 
     * @lint ignoreDeprecated(alert)
     */
    main : function() {
      // Call super class
      this.base(arguments);

      // Enable logging in debug variant
      if (qx.core.Environment.get("qx.debug")) {
        // support native logging capabilities, e.g. Firebug for Firefox
        qx.log.appender.Native;
        // support additional cross-browser console. Press F7 to toggle visibility
        qx.log.appender.Console;
      }

      /*
      -------------------------------------------------------------------------
        Below is your actual application code...
      -------------------------------------------------------------------------
      */

      // Create a button
      var button1 = new qx.ui.form.Button("First Button", "todos/test.png");

      // Document is the application root
      var doc = this.getRoot();

      // Add button to document at fixed coordinates
      doc.add(button1, {left: 100, top: 50});

      // Add an event listener
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }
  }
});

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

./generate.py source

второй можно получить после запуска:

./generate.py build

После этого грузим в браузере соответствующий index.html файл и видим вот такую картинку:



На кнопку можно нажимать, а можно не нажимать. Можно грабить корованы. На этом возможности приложения заканчиваются. Чуда не случилось, дальше придется писать код, чем мы, собственно, и займемся.

Для нетерпеливых сразу даю ссылку на github с готовым вариантом, с которым можно играться. Для того, чтобы получилось, кроме исходников с гитхаба необходимо скачать SDK и прописать в файле config.json корректный путь «QOOXDOO_PATH». После чего необходимо собрать требуемую версию, как описано выше.

Ну а мы рассмотрим процесс создания приложения последовательно, в его естественном виде.
Для начала мы создадим заготовку для виджета окна для нашего todo листа и безжалостно удалим из Application.js все что там нам нагенерировал генератор. Получится у нас следущее.

Window.js

qx.Class.define("todos.Window", {
  extend : qx.ui.window.Window,

  construct: function(){
    this.base(arguments);

    this.set({
      caption: "todos",
      width: 480,
      height: 640,
      allowMinimize: false,
      allowMaximize: false,
      allowClose: false
    });

    this.addListenerOnce("appear", function(){
      this.center();
    }, this);
  }
});

Application.js

/**
 * @asset(todos/*)
 */
qx.Class.define("todos.Application", {
  extend : qx.application.Standalone,
  members : {
    main : function() {
      // Call super class
      this.base(arguments);

      var wnd = new todos.Window;
      wnd.show();
    }
  }
});

После сборки мы увидим вот такую красоту:



Пора наполнить ее смыслом. Нам будут необходимы следующие элементы: тулбар, запись todo листа и элемент добавления записи в лист. Запись todo листа является повторяющимся элементом, оформим его в виде отдельного виджета. Тулбар и элемент добавления записи в лист можно сделать как отдельными виджетами, что позволит их использовать повторно, так и частью Window. Тулбар сделаем отдельным виджетом, а элемент добавления записи оставим частью Window, чтобы показать, что можно и так и так. Сделаем все вышеописанное и наполним виджеты жизнью.

ToDo.js

qx.Class.define("todos.ToDo", {
  extend: qx.ui.core.Widget,

  events : {
    remove : "qx.event.type.Event"
  },

  properties: {
    completed: {
      init: false,
      check: "Boolean",
      event: "completedChanged"
    },

    appearance: {
      refine: true,
      init: "todo"
    }
  },

  construct: function(text){
    this.base(arguments);

    var grid = new qx.ui.layout.Grid;
    grid.setColumnWidth(0, 20);
    grid.setColumnFlex(1, 1);
    grid.setColumnWidth(2, 20);
    grid.setColumnAlign(0, "center", "middle");
    grid.setColumnAlign(1, "left", "middle");
    grid.setColumnAlign(2, "center", "middle");

    this._setLayout(grid);
    this._add(this.getChildControl("checkbox"), {row: 0, column: 0});
    this._add(this.getChildControl("text-container"), {row: 0, column: 1});
    this._add(this.getChildControl("icon"), {row: 0, column: 2});

    this.getChildControl("label").setValue(text);

    this.addListener("mouseover", function(){this.getChildControl("icon").show();}, this);
    this.addListener("mouseout", function(){this.getChildControl("icon").hide();}, this);
    this.getChildControl("icon").hide();

    this.getChildControl("text-container").addListener("dblclick", this.__editToDo, this);
  },

  members : {

    // overridden
    _createChildControlImpl: function(id) {
      var control;

      switch(id) {
        case "checkbox":
          control = new qx.ui.form.CheckBox;
          this.bind("completed", control, "value");
          control.bind("value", this, "completed");
          break;
        case "text-container":
          control = new qx.ui.container.Composite(new qx.ui.layout.HBox);
          control.add(this.getChildControl("label"), {flex: 1});
          break;
        case "label":
          control = new qx.ui.basic.Label;
          control.bind("value", control, "toolTipText");
          break;
        case "textfield":
          control = new qx.ui.form.TextField;
          control.addListener("keypress", function(event){
            var key = event.getKeyIdentifier();
            switch(key) {
              case "Enter":
                this.__editComplete();
                break;
              case "Escape":
                this.__editCancel();
                break;
            }
          }, this);
          control.addListener("blur", this.__editComplete, this);
          break;
        case "icon":
          control = new qx.ui.basic.Image("todos/icon-remove-circle.png");
          control.addListener("click", function(){
            this.fireEvent("remove");
          }, this);
          break;
      }
      return control || this.base(arguments, id);
    },

    __editToDo : function() {
      var tc = this.getChildControl("text-container");
      var tf = this.getChildControl("textfield");
      tc.removeAll();
      tc.add(tf, {flex: 1});
      tf.setValue(this.getChildControl("label").getValue());
      tf.focus();
      tf.activate();
    },

    __editComplete : function() {
      this.getChildControl("label").setValue(this.getChildControl("textfield").getValue());
      this.__editCancel();
    },

    __editCancel : function() {
      var tc = this.getChildControl("text-container");
      tc.removeAll();
      tc.add(this.getChildControl("label"), {flex: 1});
    }
  }
});

StatusBar.js

qx.Class.define("todos.StatusBar", {
  extend: qx.ui.core.Widget,

  events: {
    removeCompleted: "qx.event.type.Event"
  },

  properties: {
    todos: {
      init: [],
      check: "Array"
    },

    filter: {
      init: "all",
      check: ["all", "active", "completed"],
      event: "filterChanged"
    }
  },

  construct: function() {
    this.base(arguments);

    var grid = new qx.ui.layout.Grid;
    grid.setColumnWidth(0, 100);
    grid.setColumnFlex(1, 1);
    grid.setColumnWidth(2, 130);
    grid.setColumnAlign(0, "left", "middle");
    grid.setColumnAlign(1, "center", "middle");
    grid.setColumnAlign(2, "right", "middle");
    grid.setRowHeight(0, 26);

    this._setLayout(grid);
    this._add(this.getChildControl("info"), {row: 0, column: 0});
    this._add(this.getChildControl("filter"), {row: 0, column: 1});
    this._add(this.getChildControl("remove-completed-button"), {row: 0, column: 2});
    this.update();
  },

  destruct: function() {
    this.__rgFilter.dispose();
  },

  members : {
    __rgFilter: null,

    update: function() {
      var todosCount = this.getTodos().length;
      var itemsLeft = this.getTodos().filter(function(item){return !item.getCompleted();}).length;
      this.getChildControl("info").setValue("<b>"+itemsLeft+"</b> items left");
      if (itemsLeft === todosCount) {
        this.getChildControl("remove-completed-button").exclude();
      } else {
        this.getChildControl("remove-completed-button").setLabel("Clear completed ("+(todosCount-itemsLeft)+")");
        this.getChildControl("remove-completed-button").show();
      }
    },

    // overridden
    _createChildControlImpl: function(id) {
      var control;

      switch(id) {
        case "info":
          control = new qx.ui.basic.Label;
          control.setRich(true);
          break;
        case "filter":
          control = new qx.ui.container.Composite(new qx.ui.layout.HBox);
          control.add(this.getChildControl("rb-filter-all"));
          control.add(this.getChildControl("rb-filter-active"));
          control.add(this.getChildControl("rb-filter-completed"));
          this.__rgFilter = new qx.ui.form.RadioGroup(
            this.getChildControl("rb-filter-all"),
            this.getChildControl("rb-filter-active"),
            this.getChildControl("rb-filter-completed")
          );
          this.__rgFilter.addListener("changeSelection", this.__onFilterChanged, this);
          break;
        case "rb-filter-all":
          control = new qx.ui.form.RadioButton("All");
          control.setUserData("value", "all");
          break;
        case "rb-filter-active":
          control = new qx.ui.form.RadioButton("Active");
          control.setUserData("value", "active");
          break;
        case "rb-filter-completed":
          control = new qx.ui.form.RadioButton("Completed");
          control.setUserData("value", "completed");
          break;
        case "remove-completed-button":
          control = new qx.ui.form.Button;
          control.addListener("execute", function(){
            this.fireEvent("removeCompleted");
          }, this);
          break;
      }
      return control || this.base(arguments, id);
    },

    __onFilterChanged : function(event) {
      this.setFilter(event.getData()[0].getUserData("value"));
    }
  }
});

Window.js

qx.Class.define("todos.Window", {
  extend: qx.ui.window.Window,

  properties: {
    appearance: {
      refine: true,
      init: "todo-window"
    },

    todos: {
      init: [],
      check: "Array",
      event: "todosChanged"
    },

    filter: {
      init: "all",
      check: ["all", "active", "completed"],
      apply: "__applyFilter"
    }
  },

  construct: function(){
    this.base(arguments);

    this.set({
      caption: "todos",
      width: 480,
      height: 640,
      allowMinimize: false,
      allowMaximize: false,
      allowClose: false
    });

    this.setLayout(new qx.ui.layout.VBox(2));
    this.add(this.getChildControl("todo-writer"));
    this.add(this.getChildControl("todos-scroll"), {flex: 1});
    this.add(this.getChildControl("statusbar"));

    this.addListenerOnce("appear", function(){
      this.center();
    }, this);
  },

  destruct : function() {
    var todoItems = this.getTodos();
    for (var i= 0, l=todoItems.length; i<l; i++) {
      todoItems[i].dispose();
    }
  },

  members : {
    // overridden
    _createChildControlImpl: function(id) {
      var control;

      switch(id) {
        case "todo-writer":
          var grid = new qx.ui.layout.Grid;
          grid.setColumnWidth(0, 20);
          grid.setColumnFlex(1, 1);
          grid.setColumnAlign(0, "center", "middle");
          grid.setColumnAlign(1, "left", "middle");
          control = new qx.ui.container.Composite(grid);
          control.add(this.getChildControl("checkbox"), {row: 0, column: 0});
          control.add(this.getChildControl("textfield"), {row: 0, column: 1});
          break;
        case "checkbox":
          control = new qx.ui.form.CheckBox;
          control.addListener("changeValue", this.__onCheckAllChanged, this);
          break;
        case "textfield":
          control = new qx.ui.form.TextField;
          control.setPlaceholder("What needs to be done?");
          control.addListener("keydown", this.__onWriterTextFieldKeydown, this);
          break;
        case "todos-scroll":
          control = new qx.ui.container.Scroll;
          control.add(this.getChildControl("todos-container"));
          break;
        case "todos-container":
          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(1));
          break;
        case "statusbar":
          control = new todos.StatusBar;
          control.bind("filter", this, "filter");
          this.bind("todos", control, "todos");
          control.addListener("removeCompleted", this.__onRemoveCompleted, this);
          break;
      }
      return control || this.base(arguments, id);
    },

    __onWriterTextFieldKeydown : function(event) {
      var key = event.getKeyIdentifier();
      switch(key) {
        case "Enter":
          var value = event.getTarget().getValue();
          if (value) {
            event.getTarget().setValue("");
            var todo = new todos.ToDo(value);
            this.getTodos().push(todo);
            todo.addListenerOnce("remove", this.__onTodoRemove, this);
            todo.addListener("completedChanged", this.__onTodoCompletedChanged, this);

            this.__updateTodoList();
            this.getChildControl("statusbar").update();

            var cbAll = this.getChildControl("checkbox");
            cbAll.removeListener("changeValue", this.__onCheckAllChanged, this);
            cbAll.setValue(false);
            cbAll.addListener("changeValue", this.__onCheckAllChanged, this);
          }
          break;
        case "Escape":
          event.getTarget().setValue("");
          break;
      }
    },

    __updateTodoList : function() {
      var toList;
      switch(this.getFilter()) {
        case "all":
          toList = this.getTodos();
          break;
        case "active":
          toList = this.getTodos().filter(function(item){return !item.getCompleted();});
          break;
        case "completed":
          toList = this.getTodos().filter(function(item){return item.getCompleted();});
          break;
      }
      var container = this.getChildControl("todos-container");
      container.removeAll();
      toList.forEach(function(item){
        container.add(item);
      });
    },

    __applyFilter : function() {
      this.__updateTodoList();
    },

    __onTodoRemove : function(event) {
      var todo = event.getTarget();
      this.setTodos(this.getTodos().filter(function(item){return item !== todo;}));
      this.getChildControl("todos-container").remove(todo);
      todo.dispose();
      this.getChildControl("statusbar").update();
    },

    __onTodoCompletedChanged : function() {
      var cbAll = this.getChildControl("checkbox");
      cbAll.removeListener("changeValue", this.__onCheckAllChanged, this);
      cbAll.setValue(this.getTodos().length === this.getTodos().filter(function(item){return item.getCompleted();}).length);
      cbAll.addListener("changeValue", this.__onCheckAllChanged, this);
      this.__updateTodoList();
      this.getChildControl("statusbar").update();
    },

    __onCheckAllChanged : function(event) {
      var value = event.getData();
      this.getTodos().forEach(function(todo){
        todo.removeListener("completedChanged", this.__onTodoCompletedChanged, this);
        todo.setCompleted(value);
        todo.addListener("completedChanged", this.__onTodoCompletedChanged, this);
      }, this);
      this.__updateTodoList();
      this.getChildControl("statusbar").update();
    },

    __onRemoveCompleted : function() {
      var completed = this.getTodos().filter(function(item){return item.getCompleted();});
      this.setTodos(this.getTodos().filter(function(item){return !item.getCompleted();}));
      completed.forEach(function(todo){
        this.getChildControl("todos-container").remove(todo);
        todo.dispose();
      }, this);
      this.getChildControl("statusbar").update();
      this.getChildControl("checkbox").setValue(false);
    }
  }
});

На этом этапе мы получили вполне себе функционально законченное приложение. Есть только один нюанс, оно страшно, как атомная война:



Попробуем привести его к пристойному виду. Оговорюсь сразу, дизайнер из меня, как из козла балерина, поэтому задача максимум для меня добиться, чтобы наш todo лист выглядел просто аккуратно, без изысков.

За внешний вид приложения в qooxdoo отвечают темы. Фреймворк поставляется с 4 темами. Темы можно расширять, переписывать и т.д. Тема в qooxdoo имеет 5 составляющих и определяется таким образом:

qx.Theme.define("todos.theme.Theme", {
  meta : {
    color : todos.theme.Color,
    decoration : todos.theme.Decoration,
    font : todos.theme.Font,
    icon : qx.theme.icon.Tango,
    appearance : todos.theme.Appearance
  }
});

Подробнее про темы можно почитать тут.
Итак, сделаем следующие изменения:

Appearance.js

/**
 * * @asset(qx/icon/Tango/*
 */
qx.Theme.define("todos.theme.Appearance", {
  extend : qx.theme.simple.Appearance,
  appearances : {
    "todo-window" : {
      include : "window",
      alias : "window",
      style : function(){
        return {
          contentPadding: 0
        };
      }
    },
    "checkbox": {
      alias : "atom",
      style : function(states) {
        var icon;
        if (states.checked) {
          icon = "todos/checked.png";
        } else if (states.undetermined) {
          icon = qx.theme.simple.Image.URLS["todos/undetermined.png"];
        } else {
          icon = qx.theme.simple.Image.URLS["blank"];
        }

        return {
          icon: icon,
          gap: 8,
          cursor: "pointer"
        }
      }
    },
    "radiobutton": {
      style : function(states) {
        return {
          icon : null,
          font : states.checked ? "bold" : "default",
          textColor : states.checked ? "green" : "black",
          cursor: "pointer"
        }
      }
    },
    "checkbox/icon" : {
      style : function(states) {
        return {
          decorator : "checkbox",
          width : 16,
          height : 16,
          backgroundColor : "white"
        }
      }
    },
    "todo-window/checkbox" : "checkbox",
    "todo-window/textfield" : "textfield",
    "todo-window/todos-scroll" : "scrollarea",
    "todo-window/todo-writer" : {
      style : function() {
        return {
          padding   : [2, 2, 0, 0]
        };
      }
    },
    "todo-window/statusbar" : {
      style : function() {
        return {
          padding   : [ 2, 6],
          decorator : "statusbar",
          minHeight : 32,
          height : 32
        };
      }
    },
    "todo-window/statusbar/info" : "label",
    "todo-window/statusbar/rb-filter-all" : "radiobutton",
    "todo-window/statusbar/rb-filter-active" : "radiobutton",
    "todo-window/statusbar/rb-filter-completed" : "radiobutton",
    "todo-window/statusbar/remove-completed-button" : {
      include : "button",
      alias : "button",
      style : function() {
        return {
          width : 150,
          allowGrowX : false
        };
      }
    },
    "todo/label" : {
      include : "label",
      alias : "label",
      style : function(states) {
        return {
          font : (states.completed ? "line-through" : "default"),
          textColor : (states.completed ? "light-gray" : "black"),
          cursor : "text"
        };
      }
    },
    "todo/icon" : {
      style : function() {
        return {
          cursor : "pointer"
        };
      }
    },
    "todo/text-container" : {
      style : function() {
        return {
          allowGrowY : false
        };
      }
    },
    "todo/checkbox" : "checkbox"
  }
});

Color.js

qx.Theme.define("todos.theme.Color",
{
  extend : qx.theme.simple.Color,

  colors :
  {
    "light-gray" : "#BBBBBB",
    "border-checkbox": "#B6B6B6"
  }
});

Decoration.js

qx.Theme.define("todos.theme.Decoration", {
  extend : qx.theme.simple.Decoration,

  decorations : {
    "statusbar" : {
      style : {
        backgroundColor : "background",
        width: [2, 0, 0, 0],
        color : "window-border-inner"
      }
    },

    "checkbox" : {
      decorator : [
        qx.ui.decoration.MBorderRadius,
        qx.ui.decoration.MSingleBorder
      ],

      style : {
        radius : 3,
        width : 1,
        color : "border-checkbox"
      }
    }
  }
});

Font.js

qx.Theme.define("todos.theme.Font",
{
  extend : qx.theme.simple.Font,

  fonts :
  {
    "line-through" :
    {
      size : 13,
      family : ["arial", "sans-serif"],
      decoration : "line-through"
    }
  }
});

После этого наш TODO лист будет выглядеть так:



На этом пока можно закончить. Я не затронул огромное количество вопросов, но это просто невозмозможно в рамках одной статьи. Хотелось познакомить с фреймворком на примере небольшой задачи, как можно меньше углубляясь в детали. Подробнее можно почитать по приведенным ссылкам. Обо всех ошибках и опечатках прошу писать в личку. Спасибо за внимание.

Полезные ссылки:
Домашняя страница qooxdoo: http://qooxdoo.org/
Страница загрузки SDK: http://qooxdoo.org/downloads
Разнообразные демо: http://qooxdoo.org/demos
Примеры использования: http://qooxdoo.org/community/real_life_examples
SPA туториал: http://manual.qooxdoo.org/current/pages/desktop/tutorials/tutorial-part-1.html
Код примера на гитхабе: https://github.com/VasisualyLokhankin/todolist_qooxdoo