Делаем красиво в AdobeAIR с ExtJS
Раздел:
Programming /
Ajax
@
16.06.2008 |
Ключевые слова: Ext.Window ExtJS adobeair
Автор: silentroach
Источник: habrahabr
Понятия не имею, почему до сих пор я не смотрел в сторону ExtJS. Обалдеть можно от того, как просто с этим фреймворком можно построить красивое приложение.
Сегодня, мы создадим в AdobeAIR приложение с простым окном (Ext.Window):
Смысл того, что мы сделаем очень прост — мы создаем максимизированное нативное окошко с systemChrome, выставленным в none и включаем у окна transparency. Получится абсолютно прозрачное окно, в котором мы и создадим Ext.Window.
О том, как создать Hello World! в AdobeAIR нам уже рассказывали, так что, думаю, проблем создать новое приложение для вас уже не составит труда. Поэтому пишу кратко.
application.xml:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>com.adobe.example.testJS</id>
<filename>testJS</filename>
<name>testJS</name>
<version>1.0</version>
<description/>
<copyright/>
<title>Тестируем ExtJs</title>
<initialWindow>
<content>html/main.html</content>
<title/>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>false</visible>
<minimizable>true</minimizable>
<maximizable>false</maximizable>
<resizable>false</resizable>
</initialWindow>
<icon>
<image16x16>icons/AIRApp_16.png</image16x16>
<image32x32>icons/AIRApp_32.png</image32x32>
<image48x48>icons/AIRApp_48.png</image48x48>
<image128x128>icons/AIRApp_128.png</image128x128>
</icon>
<fileTypes>
</fileTypes>
</application>
main.html:
<html>
<head>
<title>Тестируем ExtJS</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<link href="/css/main.css" rel="stylesheet" type="text/css"/>
<link href="/lib/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/lib/air/AIRIntrospector.js"></script>
<script type="text/javascript" src="/lib/air/AIRAliases.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/ext/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="/lib/ext/ext-all.js"></script>
<script type="text/javascript" src="/javascript/application.js"></script>
<script type="text/javascript">
$(document).ready( app.init );
</script>
</head>
<body>
</body>
</html>
Тут я использую не голый ExtJS, а с адаптером для jQuery, привык я к нему, извините :)
Документ, собственно, пустой, все дело будет происходить в javascript, а именно в application.js:
var app = {
// --------------
_mainWindow: null,
// --------------
/*
* инициализация
*/
init: function() {
window.nativeWindow.maximize();
app.setupListeners();
app.doCreateMainWindow();
window.nativeWindow.visible = true;
},
/*
* настраиваем обработчики событий
*/
setupListeners: function() {
// тут мы отловим изменение состояния нативного окна
window.nativeWindow.addEventListener(`displayStateChanging`, app.doDisplayStateChanging);
},
/*
* создание главного окна
*/
doCreateMainWindow: function() {
this._mainWindow = new Ext.Window({
width: 800,
height: 600,
minWidth: 300,
minHeight: 200,
x: 100,
y: 100,
minimizable: true,
maximizable: true,
title: "Наше главное окошко",
});
this._mainWindow.on(`minimize`, app.doMinimize);
this._mainWindow.on(`close`, app.doClose);
this._mainWindow.show();
},
/*
* изменение состояния главного нативного окна
* @param {Event} событие displayStateChange
*/
doDisplayStateChanging: function( e ) {
if ( e.afterDisplayState == `normal` ) {
e.preventDefault();
window.nativeWindow.visible = false;
window.nativeWindow.maximize();
window.nativeWindow.visible = true;
}
else
if ( e.afterDisplayState == `minimized` ) {
e.preventDefault();
window.nativeWindow.visible = false;
window.nativeWindow.minimize();
window.nativeWindow.visible = true;
}
},
/*
* отработка события на закрытие главного окна
* @param {Ext.window} закрываемое окно
*/
doClose: function( win ) {
air.NativeApplication.nativeApplication.exit();
},
/*
* отработка события на сворачивание главного окна
* @param {Ext.window} сворачиваемое окно
*/
doMinimize: function( win ) {
window.nativeWindow.visible = false;
window.nativeWindow.minimize();
window.nativeWindow.visible = true;
}
}
Если вкратце, то тут мы создаем новое окошко (Ext.Window), которое умеет сворачиваться в таскбар и разворачиваться из него. Ну и разворачиваться во весь экран, восстанавливаться из этого состояния и закрыться.
В setupListeners мы добавляем обработчика (doDisplayStateChanging) на событие изменения состояния окна. Там мы отлавливаем попытки свернуть и восстановить окно из таскбара. Тут, наверное, возник вопрос, почему я отключаю и включаю visible у окна. Ответ — иначе при сворачивании мы увидим артефакты в виде анимированного заголовка нативного окна. Откуда этот заголовок взялся — не очень понятно, но впечатление он портит.
Самому же окну мы назначаем обработчики на сворачивание (doMinimize) и закрытие (doClose) с соответсвующим сворачиванием главного нативного окна и выходом из приложения.
Это интересно:
Распечатать статью
Вернуться в раздел:
Programming /
Ajax
Реклама:
