Делаем красиво в AdobeAIR с ExtJS / Хабр

Понятия не имею, почему до сих пор я не смотрел в сторону 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) с соответсвующим сворачиванием главного нативного окна и выходом из приложения.

Если будет интересно, то продолжу свои изыскания :)
Всем спасибо. Комментарии приветствуются.

Скачать полученный пакет можно отсюда (440 кб, фильтровать extJS лениво, извините)

Кросспост из личного блога.

Делаем красиво в AdobeAIR с ExtJS

Публикации

Ближайшие события