Doing beautifully in AdobeAIR with ExtJS
I have no idea why so far I have not looked in the direction of ExtJS . You can be stunned by how easy it is to build a beautiful application with this framework.
Today, we will create an application with a simple window (Ext.Window) in AdobeAIR:
The meaning of what we do is very simple - we create a maximized native window with the systemChrome set to none and turn on the transparency window. It will turn out to be an absolutely transparent window, in which we will create Ext.Window .
')
How to create Hello World! AdobeAIR has already told us, so I think it’s no problem to create a new application for you. Therefore, I am writing briefly.
application.xml :
main.html :
Here I use not bare ExtJS, but with an adapter for jQuery , I got used to it, sorry :)
The document is, in fact, empty, the whole thing will happen in javascript, namely in application.js :
In short, here we create a new window (Ext.Window) that can collapse into the taskbar and unfold from it. Well, turn around in full screen, recover from this state and close.
In setupListeners, we add a handler ( doDisplayStateChanging ) to the window state change event. There we catch attempts to minimize and restore the window from the taskbar. Here, perhaps, the question arose why I turn off and turn on visible at the window. The answer is - otherwise, when minimized, we will see artifacts in the form of an animated header of the native window. Where this title comes from is not very clear, but it spoils the impression.
To the window itself, we assign handlers to minimize ( doMinimize ) and close ( doClose ) with the corresponding folding of the main native window and exit from the application.
If it is interesting, then I will continue my research :)
Thanks to all. Comments are welcome.
You can download the received package from here (440 kb, filter extJS is lazy, sorry)
Crosspost from a personal blog.
Today, we will create an application with a simple window (Ext.Window) in AdobeAIR:
The meaning of what we do is very simple - we create a maximized native window with the systemChrome set to none and turn on the transparency window. It will turn out to be an absolutely transparent window, in which we will create Ext.Window .
')
How to create Hello World! AdobeAIR has already told us, so I think it’s no problem to create a new application for you. Therefore, I am writing briefly.
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> Test 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> Testing 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> Here I use not bare ExtJS, but with an adapter for jQuery , I got used to it, sorry :)
The document is, in fact, empty, the whole thing will happen in javascript, namely in application.js :
var app = {
// --------------
_mainWindow: null,
// --------------
/ *
* initialization
* /
init: function () {
window.nativeWindow.maximize ();
app.setupListeners ();
app.doCreateMainWindow ();
window.nativeWindow.visible = true;
},
/ *
* set up event handlers
* /
setupListeners: function () {
// here we catch the change in the state of the native window
window.nativeWindow.addEventListener ('displayStateChanging', app.doDisplayStateChanging);
},
/ *
* creating the main window
* /
doCreateMainWindow: function () {
this._mainWindow = new Ext.Window ({
width: 800,
height: 600,
minWidth: 300,
minHeight: 200,
x: 100,
y: 100,
minimizable: true
maximizable: true
title: "Our main window",
});
this._mainWindow.on ('minimize', app.doMinimize);
this._mainWindow.on ('close', app.doClose);
this._mainWindow.show ();
},
/ *
* change the state of the main native window
* @param {Event} 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;
}
},
/ *
* processing the event to close the main window
* @param {Ext.window} closeable window
* /
doClose: function (win) {
air.NativeApplication.nativeApplication.exit ();
},
/ *
* processing the event to minimize the main window
* @param {Ext.window} minimized window
* /
doMinimize: function (win) {
window.nativeWindow.visible = false;
window.nativeWindow.minimize ();
window.nativeWindow.visible = true;
}
} In short, here we create a new window (Ext.Window) that can collapse into the taskbar and unfold from it. Well, turn around in full screen, recover from this state and close.
In setupListeners, we add a handler ( doDisplayStateChanging ) to the window state change event. There we catch attempts to minimize and restore the window from the taskbar. Here, perhaps, the question arose why I turn off and turn on visible at the window. The answer is - otherwise, when minimized, we will see artifacts in the form of an animated header of the native window. Where this title comes from is not very clear, but it spoils the impression.
To the window itself, we assign handlers to minimize ( doMinimize ) and close ( doClose ) with the corresponding folding of the main native window and exit from the application.
If it is interesting, then I will continue my research :)
Thanks to all. Comments are welcome.
You can download the received package from here (440 kb, filter extJS is lazy, sorry)
Crosspost from a personal blog.
Source: https://habr.com/ru/post/27403/
All Articles