Делаем красиво в 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 лениво, извините)

    Кросспост из личного блога.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 49

      0
      добавьте пожалуйста в блог Adobe AIR.

      и ещё, на сколько я помню, у ExtJS есть своя реализация окна для работы с Adobe AIR, не помню точно как называется :(
        +2
        1. кармы не хватает =)
        2. Ext.air.NativeWindow вроде как. Но это просто нативное окно, не то, что нам нужно.
        +4
        Отличная статья! Кстати, может создать блог по ExtJS на хабре? пошёл создавать, а то для других есть..
        • UFO just landed and posted this here
            0
            а это не нарушит какой-нибудь лицензионной политики ExtJS ?
            если нет, то вечером после работы сделаю пакет и выложу.
              0
              в конце поста добавил ссылку на скачивание получившегося пакета.
              на свой страх и риск =)
              сорри за такой размер — искать только нужные компоненты ExtJS лениво, поэтому там вся библиотека.
              0
              Какие преимущества дает ExtJS перед самим AIR`ом?
                0
                Если честно, не понял вопроса. По-подробнее, пожалуйста.
                о том, что такое AdobeAIR можно почитать здесь, а о том, что такое ExtJS — здесь.
                AIR — платформа, ExtJS — javascript-фреймворк.
                  +1
                  Это я с утра туплю сорри.
                +2
                Не понимаю зачем делать окно в AIR при помощи ExtJS когда можно сделать это самим AIR?
                Это то же самое что писать HTML страницу с единственным скриптом, который через AJAX получает ВЕСЬ контент страницы и потом парсит его и пихает в DOM.
                  0
                  Под AIR я имею ввиду FLEX фреймворк и AS3
                    0
                    Flex — это Flash, а здесь мы немного другое рассматриваем, если Вы не заметили ;)
                      0
                      Flex - это AS3 фреймворк между прочим. а AS3 - более богатый по возможностям язык чем JS. Вы рассматриваете как на танке ездить на охоту. Господа, создать окно подобное этому на AIR дело 2-х минут. И при этом скомпиленое приложение будет потреблять намного меньше ресурсов чем вирт машина JS.
                        0
                        Я хочу сказать что полученное приложение с использованием Flex будет swf.
                        гляньте в Adobe AIR SDK файлик AIR_aliases.js (могу путать название, извините, у меня с собой SDK нет). и увидите что в JS доступен Ваш любимый AS3. И да, без него приложения на JS действительно делать было бы мало толку.
                        Создавайте на Flex все, что хотите. В этом топике описано использование Adobe AIR не со стороны Flex, и я ни разу не сказал в топике то, что приложение на JS будет быстрее.
                        Какой-то Вы агрессивный ;)
                          0
                          Приложения на AS3 + Flex компилируются в swf и air. И webkit доступен только на AIR.
                          "и я ни разу не сказал в топике то, что приложение на JS будет быстрее." - вы это сказали 3-мя постами ниже.
                          Я не агрессивный - просто хочу вам доказать что построение такого приложения не имеет смысла, хотя бы по соображениям производительности. Да на платформы можно интегрировать, но для таких целей это не имеет смысла.
                            0
                            я думаю, при компиляции в air, внутри пакета будет swf и страничка, с которой он будет отображаться.
                            построение приложения ради создания простого окна — действительно не имеет никакого смысла кроме образовательного. это уж извините.
                            гляньте ReadAIR, Snippely, к примеру. Это — приложения на JS в AIR.
                              0
                              Я очень рад что есть такие приложения. Пока они есть у меня всегда будет работа по созданию RIA :)
                                0
                                ну вот и мирно закончили дискуссию, оставшись при своих мнениях.
                                  0
                                  прошло 4 года, умерли обе технологии :)
                      –1
                      вот вот
                      идиотизм какойто
                        0
                        Если обзываете меня идиотом, то хотя бы обоснуйте, пожалуйста ;)
                        0
                        А Вы сравните нативное окно, сделанное средствами AIR с тем, что у нас получилось с использованием ExtJS.
                        Тут описывается только создание окна. ExtJS может очень многое и может это очень красиво. Просто если что-то делать средствами ExtJS в нативном окне — это будет не так красиво, как было бы в окне, котором мы в этом топике создали.
                          0
                          Ну скинование еще не кто не отменял + платформа поддерживает CSS уровнем выше чем webkit. А использовать всю мошь AS3 только чтобы запустbть webKit и в нем JS... не лучшая идея.
                            0
                            скинирование никто не отменял, естественно. яркий тому пример — этот топик.
                            а насчет идей — мне, если честно, вообще flash не очень нравится. из-за тормознутости, невозможности (иногда) что-то выделить, проблем со шрифтами и прочего.
                            а вот сделать нормальное приложение на JS вполне реально. Которое будет и быстрее и уступать по внешнему виду не будет.

                            Я этим топиком не внушаю всем то, что нужно писать под AdobeAIR приложения исключительно на html + js. Если Вам нравится Flash — пишите на нем, разве я запрещаю?
                              0
                              То есть вы хотите сказать что например таблица с 10000 записей будет сортироваться в ExtJs быстрее? :)
                                0
                                Нет, я хочу сказать что визуальная часть flash притормаживает часто.
                                Правда, может, это только у меня с моим уже древним Core2Duo.
                                  0
                                  да, показывать табличку в 10000 записей — это бред какой-то.
                                  отсортировать можно через SQL вроде как.
                          0
                          Всё это очень хорошо, но лицензия его для комерческого использования денег стоит. Я для своего хомяка YUI лучше попробую, денег итак за него не заработаю.
                            0
                            не, для хомяка ExtJS — это перебор, конечно. весит-то порядочно, да и денег стоит.
                            а вот в AdobeAIR — почему бы и нет. если на этом зарабатывать деньги, конечно.
                            да и просто поиграться с этим фреймворком действительно интересно.
                              0
                              да для меня веб-разработка хобби , професионально этим заниматься, не моё это. Google App Engine взялся попробовать только изза того что халявный хостинг на моём любимом языке (Python).
                                0
                                Он вроде бесплатный для некоммерческого использования? Или я что-то путаю?
                                  0
                                  да фиг разберет их лицензионную политику.
                                  я не очень в нее вдавался, если честно.
                              0
                              хмъ... спасибо автору статьи за потраченное время на ее написание...

                              Мне вот стало интересно, на выходе в конечном результате кто именно генерирует код? Adove или ExtJS?

                              Дело в том что ExtJS генерирует код в режиме QuirksMode, а осбственно ето не стандарты, которые хотелось бы видеть в сей день.

                              С дургой стороны, многие поинтересуються, как ExtJS, столь мощная основа для написания веб-приложений, может отходить от стандартов и писать на "чистом" без Доктайпа?

                              Дело в том что Без! доктайпа код рендериться браузером семейства Internet Explorer на порядок быстрее, нежели с ним. А из этого вытекает, что приложение уже частично затачиваеться не под стандарт, что не есть хорошо.
                                0
                                считайте что приложение открывается а браузере. будем считать что в Safari (хоть это и не так), так как используется WebKIT.
                                а DOCTYPE у Вас есть возможность задать в main.html, ведь все будет работать именно на этой странице. В данном случае, по крайней мере.
                              • UFO just landed and posted this here
                                  0
                                  ну, есть ext-base.js (35 кб), а есть ext-jquery-adapter.js (15 кб).
                                  ext-jquery-adapter — это ext-base, построенный с помощью jQuery.
                                  если мы и так используем jQuery, то почему бы не работать через адаптер.

                                  все это дело находится в папке adapter, в архиве с ExtJS (можно скачать с сайта).
                                  порядок подключаемых модулей с разными библиотеками можно посмотреть в корне архива, файл INCLUDE_ORDER.txt.
                                  • UFO just landed and posted this here
                                      0
                                      не на многое. все и сразу (ext-all.js) весит 523 кб, весь css (ext-all.css) весит 80 кб, изображения для 3х стандартных тем — 451 кб. но все сразу не нужно, можно подключать небольшими кусочками =)

                                      для обычных страниц ExtJS все же тяжеловат, а вот для adobeAIR — почему бы и нет?
                                      • UFO just landed and posted this here
                                  0
                                  Ребят, а что вы находите проще для разработки RIA *для новичка*: тот же AdobeAIR с ExtJS или WPF/Silverlight?
                                    0
                                    Silverlight я только видел. Ничего не могу сказать про то, насколько интересно и приятно под него писать.
                                    Хороший критерий выбора — полноценная кроссплатформенность. Вряд ли оба ей похвастаются, но почему-то в Adobe я верю, а вот в Microsoft после их .NET'а — не очень.
                                    0
                                    Хотелось бы исходник проекта в студию.
                                    А то я попытался повторить сей опыт, и вместо окошка ext'а вылетает стандартное пустое air-окно.
                                    • UFO just landed and posted this here
                                    • UFO just landed and posted this here
                                        0
                                        Тройка работает, но не слишком гладко, насколько я знаю.
                                        • UFO just landed and posted this here
                                            0
                                            Без понятия. Как видите, в топике я не использовал air-возможности 2ой версии, использовал только сам фреймворк чтобы рисовать красивые окошки.
                                            • UFO just landed and posted this here
                                                0
                                                В Ext довольно распространен eval, который в Air запрещен. Тут уж я ничем помочь не могу — ни с Air, ни с Ext уже давно не работал.

                                      Only users with full accounts can post comments. Log in, please.