air.Typograf

We have already learned how to make simple applications with Adobe AIR , make beautiful windows too , and now we will set ourselves a real task and try to implement it.

Today we will write a very simple wrapper for a typographical web service .









As always, I will not particularly rant on this topic, but simply give the code with a large number of comments.

From the code we learn how to send requests through air.URLRequest , work with the clipboard and open links in an external browser.

')

We will assume that this article is a continuation of the previous. We do beautifully in AdobeAIR with ExtJS , everything remains the same, only the content of application.js changes:

  var app = {
	
	 _mainWindow: null,
	 _textarea: null,
	 _statusbar: null,

	 / *
	  * initialization
	  * /
	 init: function () {
		 window.nativeWindow.maximize ();
		
		 app.doCreateMainWindow ();
		 app.setupListeners ();
		
		 window.nativeWindow.visible = true;
	 },
	
	 / *
	  * event handlers
	  * /
	 setupListeners: function () {
		 // native window events
		 window.nativeWindow.addEventListener ('displayStateChanging', app.doDisplayStateChanging); 
		
		 // main window events
		 this._mainWindow.on ('minimize', app.doMinimize);
		 this._mainWindow.on ('close', app.doClose);
		
		 // events in textarea
		 this._textarea.on ('specialkey', app.doSpecialKey);
	 },
	
	 / *
	  * creating the main window
	  * /
	 doCreateMainWindow: function () {
		 this._statusbar = new Ext.StatusBar ({
			 // default text
        	 text: 'http://www.typograf.ru',
        	 items: [ 
				 // separator
				 '-',
				 {// "open in browser" button on statusbar
					 text: 'open in browser',
					 handler: function () {
						 // function will work by clicking on the button
						 // its meaning is to open the link in the default browser
						 var request = new air.URLRequest ('http://www.typograf.ru');
						 air.navigateToURL (request);
					 }
				 }
			 ]
		 });
		
		 this._textarea = new Ext.form.TextArea ({
			 // default text
			 emptyText: 'Enter the text you want to stamp and press Ctrl + Enter',
			 region: 'center'
		 });
				
		 this._mainWindow = new Ext.Window ({
			 width: 800,
			 height: 600,
			 minWidth: 300,
			 minHeight: 200,
			 layout: 'border',
			 x: 100,
			 y: 100,		  
			 minimizable: true
			 maximizable: true
			 title: "Typographer",
			 iconCls: 'icon',
			
			 // toolbar
			 tbar: [
				 {
					 text: "paste from buffer",
					 handler: function () {
						 // does the clipboard really have text?
						 if (air.Clipboard.generalClipboard.hasFormat (air.ClipboardFormats.TEXT_FORMAT)) {
							 // paste the text
							 app._textarea.setValue (
								 // from buffer =)
								 air.Clipboard.generalClipboard.getData (air.ClipboardFormats.TEXT_FORMAT)
							 );
						 }
					 }
				 },
				 {
					 text: "copy to clipboard",
					 handler: function () {
						 // get the entered text
						 var text = app._textarea.getValue ();
						
						 // if empty, do nothing
						 if (text == '')
							 return;
						
						 // clear the clipboard
						 air.Clipboard.generalClipboard.clear ();
						 // and copy the data there in text (TEXT_FORMAT) format
						 air.Clipboard.generalClipboard.setData (air.ClipboardFormats.TEXT_FORMAT, text);
					 }
				 },
				 {
					 text: "clear",
					 handler: function () {
						 // clear input field
						 app._textarea.reset ();
					 }
				 }
			 ],
			 // statusbar
			 bbar: this._statusbar,
			
			 // text field
			 items: this._textarea
		 });
		
		 this._mainWindow.show ();
	 },
	
	 / *
	  * event handling on window state change
	  * @param {Event} event displayStateChanging
	  * /
	 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;
		 }
	 },
	
	 / *
	  * handling service key press event in _textarea
	  * @param {Ext.form.TextField} element
	  * @param {Event} keypress event
	  * /
	 doSpecialKey: function (field, e) {
		 var keyCode = e.getKey ();
		
		 if (keyCode == 13) {
			 // no need to move the carriage in this case
			 e.preventDefault ();
			
			 // process the text if it is
			 if (app._textarea.getValue ()! = '')
				 app.doProcess ();
		 }
	 },

	 / *
	  * handling the event of closing the main window
	  * @param {Ext.window} window
	  * /
	 doClose: function (win) {
		 air.NativeApplication.nativeApplication.exit ();
	 },
	
	 / *
	  * event handling for minimizing the main window
	  * @param {Ext.window} window
	  * /
	 doMinimize: function (win) {
		 window.nativeWindow.visible = false;
		 window.nativeWindow.minimize ();
		 window.nativeWindow.visible = true;
	 },
	
	 // typography text processing
	 doProcess: function () {
		 this._textarea.disable ();
		 this._statusbar.setStatus ('Processing ...');
		
		 // loader
		 var loader = new air.URLLoader ();
		 // we will perceive the received information in text form
		 loader.dataFormat = air.URLLoaderDataFormat.TEXT;
		 // specify the handler to receive data
		 loader.addEventListener (air.Event.COMPLETE, app.doGetProcessed); 
		
		 // request
		 var request = new air.URLRequest ('http://www.typograf.ru/webservice/');
		 // specify the data transfer method to the service - post
		 request.method = air.URLRequestMethod.POST;
		 // and specify, in fact, what we pass to the service

		 request.data = 'chr = utf-8 & text =' + this._textarea.getValue ();
		
		 // go ;)
		 loader.load (request);
	 },
	
	 / *
	  * receiving data from the server
	  * @param {Event} event air.Event.COMPLETE
	  * /
	 doGetProcessed: function (e) {
		 // get loader
		 var loader = e.target;
		
		 app._textarea.setValue (loader.data);
		
		 app._textarea.enable ();
		 app._statusbar.setStatus ('http://www.typograf.ru');
	 }

 } 

I am writing in a hurry, maybe I forgot something. Do not hesitate and ask if that.



For those who do not want to mess around, but see the hunt, you can download the installation package (about 400 kb)



Thank you all for your attention.



PS updated the article and the air package. Thanks to the author for fixing utf-8 mode.



Crosspost from a personal blog.