AIR: Develop desktop applications with HTML + Javascript

AIR: Develop desktop applications with HTML + Javascript

background

I have developed some gadgets with Winform and WPF intermittently, but I have never been able to do it. I have come into contact with AIR while playing Flex. Recently, I found that you can use HTML + Javascript to develop AIR applications. This article will try it out (Hello, World).

What is AIR?

AIR is essentially a browser (Webkit) that can load static resource files from the local machine and can access local resources with limited access.

Environmental preparation

AIR SDK下载:Adobe AIR SDK

Note: Remember to set the Path environment variable after unzipping .

running result

development process

Directory Structure

application descriptor

Official tutorial: http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff1.html .

HelloWorld.app.xml

copy code
 1 <?xml version="1.0" encoding="UTF-8"?> 
 2 <application xmlns="http://ns.adobe.com/air/application/2.7"> 
 3     <id>happy.html.HelloWorld</id> 
 4     <versionNumber>0.1</versionNumber> 
 5     <filename>HelloWorld</filename> 
 6     <initialWindow> 
 7         <content>HelloWorld.html</content> 
 8         <visible>true</visible> 
 9         <width>400</width> 
10         <height>200</height> 
11     </initialWindow> 
12 </application>
copy code

Note: <content>HelloWorld.html</content> specifies the entry page.

HTML page

Official tutorial: http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html .

HelloWorld.html

copy code
 1 <html> 
 2 <head> 
 3     <title>Hello World</title> 
 4     <script src="jquery-ui-1.10.3/js/jquery-1.9.1.js" type="text/javascript"></script>
 5     <script src="jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
 6     <script src="Javascript/AIRAliases.js" type="text/javascript"></script>
 7     <link rel="stylesheet" href="jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css" type="text/css" />
 8 </head> 
 9 <body> 
10     <div id="Accordion">
11         <h3>中文</h3>
12           <div>你好,世界。</div>
13           <h3>英文</h3>
14           <div>Hello,World!</div>
15     </div>
16 </body> 
17 </html>
18 <script type="text/javascript"> 
19     $("#Accordion").accordion({ active: 2 });
20 </script>
copy code

这里引用了JQuery UI。

注意:本例中AIRAliases.js可以不用引入,此文件为AIR类库提供了别名机制,让代码更简洁

调试

Official tutorial: http://help.adobe.com/zh_CN/air/build/WS901d38e593cd1bac1e63e3d128cdca935b-8000.html .

1 cd /d E:\Coding\HappyStudy\AIRStudy\HelloWorld
2 adl HelloWorld.app.xml

Remark

WEB QQ has an AIR version, but I don't know if it's the platform you made yourself? Still using the Adobe platform. Friends who have used AIR can give me some pointers, I would be very grateful.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326524915&siteId=291194637