Webix. Первое знакомство с JavaScript фреймворком

[uSide]

Это как ExtJS для бедных?

[stannislav]

Это как ExtJs, без необходимости получать докторскую степень, чтобы разобраться в коде.

А если серьезно, то похоже.
Только в три раза меньше по размеру, существенно быстрее и без необходимости создавать тонны кода на каждый чих.

[stannislav]

Загрузка данных в Webix

webix.ui({
   view:"datatable", url:"'/projectLink/gridData.php"
})

Загрузка данных в extJs

var store = new Ext.data.Store({ 
    fields:['mainid','Country'],
    proxy: {
        type: 'ajax',
        url : '/projectLink/gridData.php',
        reader: {
            type: 'json',
            root: 'rates',
            totalProperty : "count"
        }
    },
    autoLoad : true
});;

var grid = Ext.create('Ext.grid.Panel',{
      store:store
});

Чтобы загрузить данные надо задать Store, в нем Proxy в нем Reader или просто указать откуда брать данные. И это я еще не создавал Модель как описано в оф. документации ExtJs.

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

[stannislav]

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

В гриде может потребоваться редактирование данных (REST

webix.ui({
   view:"datatable",
   url:"'rest->/projectLink/gridData.php",
   save:true
})

или сервер у вас возвращает не json, а, скажем XML

webix.ui({
   view:"datatable",
   url:"'/projectLink/gridData.php",
   datatype:"xml"
})

То есть для выполнения часто используемых операций нет необходимости вводить дополнительные абстракции. Для сложных случаев в Webix тоже можно создавать Proxy объекты и Reader-ы ( тут они называются DataDriver ). Это таже разница в подходах о которой я говорил выше. Простые вещи делаются просто, а когда нужно что то нестандартное, тогда можно копнуть глубже.

[ParaPilot]

Пример не работает

[stannislav]

Музыку не играет, это да.
А сам интерфейс вроде как рисуется, данные выбираются и меняются.

[ingumsky]

Наверное, предыдущий комментатор имел в виду, что по нажатию на кнопки Previous и Next нет перехода на следующий элемент в таблице.

[stannislav]

Да, и это тоже не работает.
Демка содержит только те же шаги что описаны в статье.

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

[Zeliret]

У меня белая страница вообще в последнем Хроме. :(

[stannislav]

Странно, у меня вроде бы все работает ( и в стабильном хроме и в бетте ), возможно где то я все же накосячил

[zaynetro]

Страница загружается с https, а скрипты с незащищенного http, поэтому хром и блокирует их.

[stannislav]

Спасибо.
Поправил демку, теперь должна работать и по https

[yroman]

Потыкался по сайту — так и не нашёл список поддерживаемых браузеров.

[stannislav]

Можно найти в глубинах документации
docs.webix.com/desktop__compatibility.html

Работает везде начиная с IE8

[lifecom]

… создавать десктопные и мобильные веб-приложения с отзывчивым дизайном

почему же демо получилось не отзывчивым?

[stannislav]

По умолчанию интерфейсы не являются польность отзывчивыми ( responsive ). Размеры подстраиваются под экран, но сам интерфейс не перестраивается. Насколько я представляю, можно задать правила какие элементы куда должны перемещаться на мелком экране, но с этим я толком сам не разобрался.

docs.webix.com/desktop__responsive_layout.html

[yurash]

простые примеры — это хорошо, но на них и официальной документации хватает. Хотелось бы увидеть что-нибудь сложнее, в частности разбор «Demo of Webix MVC app» github.com/webix-hub/webix-adminapp-demo

[haxecoder]

Неделю уже экспериментирую с этим фреймворком. Сделал вывод, что он идеально подходит для веб-морд админок (CRUD).
Радует ещё и то, что практически вся работа с webix сведена к js коду, без html и css.
Определённо буду использовать этот отличный инструмент.

[lastuniverse]

webix отлично вписался в качестве основы для интерфейса приложения построенного на nodewebkit
на выходе — приложение запускающееся под linux windows и osx:)

[lastuniverse]

Выкладываю в общий доступ демо, собранное для 32-х и 64-х версий linux, windows и osx. Данное демо по сути не является готовым программным продуктом. Это всего лишь плоды изучения фреймворка webix, и не все пункты меню работоспособны.

Демо сделано на основе node webkit и собрано с помощью nw builder

Единственный минус, это большой размер сборки. Объясняется это тем, что фактически сборка содержит в себе упакованную версию Node.js и браузера Chromium.

архив с версией для osx32
архив с версией для osx64
архив с версией для linux32
архив с версией для linux64
архив с версией для win32
архив с версией для win64