Inx - русский ответ ExtJS
Что это такое?
Inx - это написанная на JavaScript библиотека для создания RIA (Rich Intrnet Applications).
Базовый набор компонентов
Inx содержит практически все, что может понадобиться прогрессивному человеку:
деревья, списки, селекты, формы, панели, кнопочки, пейджеры.
Приведенный ниже пример кликабелен, это не картинка:)
// @include inx.tabs
inx.ns("inx.mod.inxdev.example").overview = inx.tabs.extend({
constructor:function(p) {
this.a = inx({
title:"Дерево",
type:"inx.tree",
showRoot:false,
loader:{cmd:"inxdev:example:treeLoader"}
});
this.b = inx({
title:"Список",
type:"inx.list",
loader:{cmd:"inxdev:example:listLoader"}
});
this.c = inx({
title:"Редактор php",
type:"inx.code",
lang:"php",
value:"<?\n// Этот код можно редактировать\necho 'hi';\n?>"
});
this.d = inx({
title:"Галлерея",
type:"inx.gallery",
data:[
{img:"/inxdev/img/gallery1.jpg"},
{img:"/inxdev/img/gallery2.jpg",text:"hi"},
{img:"/inxdev/img/gallery3.jpg",text:"hallo"}
]
});
this.call({cmd:"inxdev:example:galleryLoader"},[this.id(),"setGalleryData"])
this.e = inx({
title:"Панель",
type:"inx.panel",
tbar:[
{text:"button",icon:"refresh"},
{type:"inx.pager",total:100},
"|",
{type:"inx.select",width:200,loader:{cmd:"inxdev:example:listLoader"}},
{type:"inx.date"}
],
side:[
{region:"left",width:50,resizable:true,html:"<div style='padding:10px;'>left</div>"},
{region:"left",width:200,resizable:true,html:"<div style='padding:10px;'>left</div>"},
{region:"bottom",height:50,resizable:true,html:"<div style='padding:10px;'>bottom</div>"}
]
})
p.items = [this.a,this.b,this.c,this.d,this.e];
this.base(p);
}
});<script>
inx.conf.url='/inx/version/1199998280/';
inx({"type":"inx.mod.inxdev.example.overview","height":240}).here()
</script>
Стиль
Inx использует ООП-парадигму программирования.
Синтаксис отчасти напоминает программирование для JQuery, отчасти -
Ext JS.
//Пример
var c = inx("myid") // вернет компонент с id="myid"
var c = inx(object) // вернет компонент object
var c = inx({type:"inx.panel",width:300}) // построит и вернет новый компонент с заданными параметрами
// В любом случае, дальше можно будет написать:
c.cmd("html","Мой код");
// Или так:
alert(c.info("html"));
Все взаимодействие между компонентами построено на двух ф-циях: cmd и info.
Первая отправляет компоненту команду, вторая - возвращает свойство компонента.
Если компонент еще не загрузился, команда становится в очередь и будет выполена после его загрузки.
Если компонент не существует, не произойдет никакой ошибки, просто команда не выполнится.
Это как в JQuery: если вы напишите $("#noid").html(666) то ошибки не произойдет.
В inx - аналогично inx("none").cmd("mycmd"); просто не выполнит никаких действий.
Динамическая загрузка компонентов.
Не обязательно подключать все использующиеся скипты:
inx сделает это автоматически. Достаточно указать только класс компонента. Все подключаемые
родительские компоненты будут загружены автоматически. Загрузка осуществляется при создании нового
компонента в любое время, в том числе и после загрузки страницы.
Взаимодействие с сервером, AJAX
В отличие от других фреймфорков, inx выполяет все запросы через один единственный гейт,
передавая ему набор параметров. В нашей реализации серверной части, обсуждение которой
выходит за рамки данного обзора, работа сервера осуществляется следующим образом:
this.call({cmd:"myclass:mymethod",p1:"wtf",some:"thing"})
Запрос поступает на сервер, сервер вызывает myclass::mymethod(array(
p1=>$wtf,
some=>thing
));
Т.о. мы, фактически, вызываем методы серверного языка из JS.
Если на сервере произошла ошибка, inx уведомит об этом пользователя и покажет ошибку. Ничего
дополнительно писать не потребуется.
Кроссбраузерная совместимость
inx отлично работает со всеми современными браузерами (ie>=7 :) Некоторые компоненты могут работать
не совсем корректно, но это касается в основном редактора кода. Над этим мы работаем.
Отправка файлов на сервер
Для этого используется тот же самый гейт, что и для ajax-команд, все делается при помощи скрытой формы.
На сервере вы не заметите никакой разницы.
<script>
inx({"type":"inx.file","text":"\u0417\u0430\u043a\u0430\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b","icon":"home","loader":{"cmd":"inxdev:example:uploadTest"}}).here()
</script>
Навигация через якоря #
Для этого существует специальный компонент inx.direct
// @include inx.list,inx.direct
inx.ns("inx.mod.inxdev.example").direct = inx.panel.extend({
constructor:function(p) {
this.list1 = inx({
type:"inx.list",
data:[
{id:1,text:"link 1"},
{id:2,text:"link 2"},
{id:3,text:"link 3"}
],
onclick:[this.id(),"handleChange"],
autoHeight:true
});
this.list2 = inx({
type:"inx.list",
data:[
{id:1,text:"link 4"},
{id:2,text:"link 5"},
{id:3,text:"link 6"}
],
onclick:[this.id(),"handleChange"],
autoHeight:true
});
p.items = [this.list1,this.list2];
p.autoHeight = true;
p.width = 200;
this.base(p);
inx.direct.bind(this,"handleDirect");
},
cmd_handleChange:function() {
inx.direct.set(this.list1.info("selection")[0],this.list2.info("selection")[0]);
},
cmd_handleDirect:function(p1,p2) {
this.list1.cmd("select",p1);
this.list2.cmd("select",p2);
}
});<script>
inx({"type":"inx.mod.inxdev.example.direct","width":300,"height":200}).here()
</script>
Клавиатура, мышь
inx имеет встроеные компоненты для работы с клавишами, колесиком мыши, горячими клавишами.
inx.hotkey("ctrl+s",[this.id(),"save"]);
// @include inx.panel
inx.ns("inx.mod.inxdev.example").hotkey = inx.panel.extend({
constructor:function(p) {
p.html = "Нажмите ctrl+s";
this.base(p);
inx.hotkey("ctrl+s",this.id(),"key");
},
cmd_key:function() {
inx.msg("ctrl+s pressed");
return false;
}
});<script>
inx({"type":"inx.mod.inxdev.example.hotkey","width":300,"height":50}).here()
</script>
Хранилище данных на стороне клиента
Используется для автоматического сохранения состояний пенелей, деревьев и т.д.
Может быть использовано произвольно.
// @include inx.list
inx.ns("inx.mod.inxdev.example").storage = inx.list.extend({
constructor:function(p) {
p.tbar = [
{id:"key",type:"inx.textfield",width:100,value:"key"},
{id:"val",type:"inx.textfield",width:100,value:"value"},
{text:"send",onclick:[this.id(),"test"]}
]
p.autoHeight = true;
p.maxHeight = 200;
this.base(p);
inx.storage.onready(this,"onstorage");
},
cmd_test:function() {
var key = inx("key").info("value");
var val = inx("val").info("value");
inx.storage.set(key,val);
this.task("update");
},
cmd_onstorage:function() {
this.task("update");
},
cmd_update:function() {
var keys = inx.storage.keys();
var data = [];
for(var i in keys)
data.push({text:"<b>"+keys[i]+"</b>: "+inx.storage.get(keys[i])});
this.cmd("setData",data);
}
})<script>
inx({"type":"inx.mod.inxdev.example.storage","width":300,"height":150}).here()
</script>
Что дальше?
Вы можете скачать библиотеку inx и использовать ее в ваших проектах.
Любые комментарии приветствуются.