Хранилище для опций

В случае связанных моделей хорошей привычкой станет указание proxy. Если не указать proxy в модели OptionModel в примере ниже, то скрипт начнёт глючить будет вести себя неожиданным образом.


Ещё о полезных привычках...

Voice Magic: Touch & Say

Writing Semantic JSON is very tedious. Generally every pronoun means that you must create a reference to a previous sentence. It's the core idea of this input format, so you can't just drop making references. Videos of Bret Victor inspired me to create a more practical approach.

You just touch the screen and say a word. A figure appears under your finger tip. It is bound to the recorded sound. Now you can reuse the figure dragging it from recent to new statements. I'm going to provide a picture to illustrate this.

When you touch a circle of a previous statement inside time line area, you hear your own recorded voice saying the respective word. When you touch a circle inside context area, you hear a short story about this object.

If someone feeds his speech into your device you can reference circles from the feed as well.

There are few real world objects that we describe in speech when we experience a circumstance. If one would take the labor to type letters near the figures one has used a lot, two multy-layered graphs of say me and another person could snap together producing talk.

You may ask: why not just talk to each other. Why do we need computers?

Imagine someone who lives a thousand years after this moment. How can you communicate with this person? Will you write a book? The imaginary person of the future won't find you book inside the mountain of books that will have accumulated since the present time.

Text lines are no more sufficient. We need graphs.

semanticweb.com

Схлопывание боковой панели

Оказалось, что версия ExtJs 4.0.7 позволяет создавать скрываемые боковые панели без помощи layout: 'border'. На что следует обратить внимание:

1. Нужно определить обработчики для событий expand и collapse боковой панели, которые заново отрисуют панель. Если этого не сделать, панель будет пропадать. При ресайзе окна браузера она будет появляться снова.

2. Установить ширину панели в пикселях, иначе проблемы, описанные в п.1, не исчезнут.

3. Запретить анимацию при схлопывании панели. Потому что она неудачная.

{
    xtype: 'panel',
    title: 'Фильтр',
    collapsible: true,
    collapseDirection: 'left',
    animCollapse: false,
    headerPosition: 'top',
    width: 400,
    listeners: {
        collapse: function(panel) {
            panel.doComponentLayout();
        },
        expand: function(panel) {
            panel.doComponentLayout();
        }
    }
}

Будущее программирования

Для слушателей в зале идёт 2013-ый год. На сцене - 1973-ий. Обратите внимание на проектор. Это настоящий проектор.

Сейчас (1973)	Через 40 лет
создание программного кода	непосредственное манипулирование данными
процедуры	цели о ограничения
текст	пространственное представление
последовательное выполнение	параллельное выполнение

Bret Victor - The Future of Programming from Bret Victor on Vimeo.

Ещё...

WebRTC: подключение

Прежде чем передавать данные или видео из одного браузера в другой, следует установить между ними связь. Следующая короткая постановка должна объяснить, какие процессы при происходят.

Действующие лица:

• браузер Маши
• браузер Савелия
• сторонний сервера
• сигнальный сервер

Действие первое

Маша ждёт сообщение сообщение от Савелия. Она включает компьютер, открывает браузер. Заходит на страницу нашего сервиса.

Браузер Маши загружает при этом с сигнального сервера статические файлы: index.html, файлы со стилями, файл нашего приложения на ExtJs и картинки.

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

Действие второе

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

Сторонний сервер посмотрел на браузер Маши из интернета и рассказал, какой у того на самом деле IP. Заметив беспокойство на лице собеседника, он поспешил упокоить его, заверяя, что прочие браузеры всё равно смогут связаться с ним, несмотря на изоляцию, в которую он попал по вине разного рода маршрутизаторов и роутеров.

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

Действие третье

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

Действие четвёртое

На сцену выходит Савелий. Он отправляет письмо Маше. Вместо адреса - название канала связи.

Браузер Савелия уже загрузил наше приложение, написанное на ExtJs. Успел он побывать и у стороннего сервера. Сигнальному серверу он также направил своё описание и название канала связи.

Сигнальный сервер вёл себя необычно. Он понял, что браузеры Маши и Савелия могут общаться между собой и не докучать ему в течение этого времени своими запросами. Браузеру Савелия он вручил описание браузера Маши. Браузеру Маши, когда тот объявился в очередной раз, он вручил описание браузера Савелия.

Действие пятое (заключительное)

Радости браузеров нет предела. Наконец-то они избавились от общества этого высокомерного сигнального сервера. Имея описания друг друга, они всегда могут встретиться в сети и обсудить интересующие их темы.

Маша получила письмо Савелия.

От автора
Совпадение с реальными людьми случайны. Протоколы ICE, STUN и TURN оставлены за сценой умышленно. С ними ещё предстоит разобраться.

Рабочее пространство

Когда у вас в проекте не одно, а несколько одностраничных приложений на ExtJs (4.2), то в папку каждого приложения вы вынуждены повторно класть одни и те же файлы. Досадный пример - иконки. Более серьёзно заставляет задуматься над проблемой дублирование файлов SDK (библиотеки ExtJs). Они многочисленны, занимают много места на диске и тормозят IDE.

Выход есть - создавать приложения в рамках единой рабочей зоны. Трюк выполняется в два этапа:

1. Создание рабочей зоны командой sencha generate workspace
2. Создание приложения командой sencha generate app

Чтобы добавить второе, третье и прочие приложения, просто повторите пункт 2, изменив название приложения и имя папки внутри рабочего пространства.

Слово "трюк" было упомянуто выше, кстати, умышленно. Есть подводные камни. Чтобы обоити их и не оказаться на больничной койке на форуме поддержки, следует особое внимание  уделить тому, откуда вы будете вызывать команду sencha generate workspace. Её нужно вызывать из директории, в которой хранится SDK.

novikov@novikov-UX31A ~/NetBeansProjects/eurasclimat/www/httpdocs/sdk/ext-4.2.1.883 $ bash ~/bin/Sencha/Cmd/3.1.2.342/sencha generate workspace /home/novikov/NetBeansProjects/eurasclimat/www/httpdocs/workspace

Разберём команду по частям.

novikov@novikov-UX31A - имя пользователя и компьютера


 ~/NetBeansProjects/eurasclimat/www/httpdocs/sdk/ext-4.2.1.883 $ - директория, в которой хранится SDK


 bash ~/bin/Sencha/Cmd/3.1.2.342/sencha generate workspace - запуск команды через оболочку bash. Обратите внимание, что описан полный путь до исполняемого файла sencha. Это потому что я не стал настраивать переменную окружения PATH.

 /home/novikov/NetBeansProjects/eurasclimat/www/httpdocs/workspace - путь к создаваемому рабочему пространству.

После выполнения команды sencha generate workspace, в папке рабочего пространства, которую я совершенно произвольно назвал workspace, появится поддитектория - ext. Это то чего мы добивались. Чтобы на несколько одностраничных приложений была одна папка с библиотекой ExtJs.

Но это ещё не всё. Откроем папку рабочего пространства в терминале. Создавать новое приложение будем отсюда:

 novikov@novikov-UX31A ~/NetBeansProjects/eurasclimat/www/httpdocs/workspace/ext $ bash ~/bin/Sencha/Cmd/3.1.2.342/sencha generate app Project ../project

И наконец, для любителей кинематографа - видео:

Разговор браузеров - WebRTC

Хочу поделиться восторгом от новой технологии - WebRTC. Она развивается в рамках HTML5. Позволяет создать свой Skype на коленке. Заманчивой представляется, возможность прямой передачи данных из браузера в браузер. Одностраничные приложения приобретают новое качество.

Вот простенький пример. Подключается малюсенький скрипт adapter.js, который позволяет применять один и тот же код для Chrome и Firefox. После загрузки скрипта находим на странице элемент video и передаем в него поток с камеры:

Нужно разрешить доступ к устройствам. В данном случае - веб-камере.

 И ...

(Надо будет побриться)