ExtJSでAdobeAIRを美しくする

なぜ今までExtJSに目を向けていないのか、私にはわかりません。 このフレームワークを使用して美しいアプリケーションを作成するのがどれほど簡単であるかに驚かされます。



今日は、AdobeAIRで単純なウィンドウ(Ext.Window)を備えたアプリケーションを作成します。







行うことの意味は非常に単純です-systemChromenoneに設定して最大化されたネイティブウィンドウを作成し、ウィンドウの近くで透明化有効にします。 完全に透明なウィンドウが表示され、 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>
	 <バージョン> 1.0 </バージョン>
	 <説明/>
	 <著作権/>
	 <title> ExtJのテスト</ title>
	 <initialWindow>
		 <content> html / main.html </ content>
		 <タイトル/>
		 <systemChrome>なし</ systemChrome>
		 <transparent> true </ transparent>
		 <visible> false </ visible>
		 <minimizable> true </ minimizable>
		 <maximizable> false </ maximizable>
		 <resizable> false </ resizable>
	 </ initialWindow>
	 <アイコン>
		 <image16x16>アイコン/ AIRApp_16.png </ image16x16>
		 <image32x32>アイコン/ AIRApp_32.png </ image32x32>
		 <image48x48>アイコン/ AIRApp_48.png </ image48x48>
		 <image128x128>アイコン/ 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"> 
             $(ドキュメント).ready(app.init); 
         </ script> 
     </ head> 
 
     <本体>        
     </ 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:関数(){ 
         //ここでネイティブウィンドウの状態変化をキャッチします 
         window.nativeWindow.addEventListener( 'displayStateChanging'、app.doDisplayStateChanging);  
     }、 
     
     / * 
      *メインウィンドウを作成する 
      * / 
     doCreateMainWindow:function(){ 
         this._mainWindow = new Ext.Window({ 
            幅:800、 
            高さ:600、 
             minWidth:300、 
             minHeight:200、 
             x:100、 
             y:100、 
           
            最小化可能:true、 
            最大化可能: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; 
         } 
        他に 
         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 )を追加します。 そこで、タスクバーからウィンドウを最小化および復元する試みをキャッチします。 ここで、おそらく、ウィンドウに表示されている電源を切って入れ直す理由という疑問が生じました。 そうでなければ、最小化すると、ネイティブウィンドウのアニメーションキャプションの形でアーティファクトが表示されます。 この見出しがどこから来たのかはあまり明確ではありませんが、印象を台無しにします。



ウィンドウ自体には、対応するメインネイティブウィンドウの最小化で最小化( doMinimize )およびクローズ( doClose )するハンドラーを割り当て、アプリケーションを終了します。



興味深い場合は、研究を続けます:)

どうもありがとう。 コメントを歓迎します。



作成されたパッケージはここからダウンロードできます(440 kb、フィルター処理extJS、ごめんなさい)



個人的なブログからのクロスポスト



All Articles