Air实战(一)在Air中显示HTML

  当下开发一款跨平台的PC应用可选技术非常之多,比较常用的有:React Native、Nw.js、Electron、QT、Adobe air等技术。React Native、Nw.js、Electron等技术已经相当火热了。QT也有很多成功案例。它们之间各有优缺点,这里就不做详细对比。然而,我最近加入的公司选择了Adobe air来开发跨PC的应用。个人来讲对于Adobe的技术不是很感冒。也积极研究React等技术,等待时机成熟替换之。然而工作需要还是要对Adobe Air进行深入研究一下的。并且网上真正实战的资料太少(也许是我没找到)。有点说远了,那么我们就正式开始吧。

  那么我们如何在Air中加载并渲染HTML代码呢?只需告诉flash.html.HTMLLoader对象HTML在哪就可以啦。下面开始具体操作

  • 使用Flash Builder创建Flex项目

  • 项目名称为HtmlDemo,并选择桌面应用

  • 创建好后,项目路径如下图所示在

  • 在air中显示Server端html
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
 3                        xmlns:s="library://ns.adobe.com/flex/spark"
 4                        xmlns:mx="library://ns.adobe.com/flex/mx">
 8     <mx:HTML width="100%" height="100%"
 9              location="http://www.baidu.com"/>
10 </s:WindowedApplication>
  • 或在air中直接编辑html源码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
 3                        xmlns:s="library://ns.adobe.com/flex/spark"
 4                        xmlns:mx="library://ns.adobe.com/flex/mx"
 5                        creationComplete="creationCompleteHandler();">
 6     <fx:Script>
 7         <![CDATA[
 8             private function creationCompleteHandler():void {
 9                 html.htmlLoader.loadString("<html><body><h1>I‘m a HTML page.</h1></body></html>");
10             }
11         ]]>
12     </fx:Script>
13     <mx:HTML id="html" width="100%" height="100%" />
14 </s:WindowedApplication>
  • 如下图所示,air中显示Server端html,或html源码

  

  Adobe开发确实简单通过以上步骤我们就可以将现有Web项目转化为一款PC端应用。这款桌面应用看上去还不错。但我们是否能够使用air缓存页面内容或点击Web项目中的一个页面按钮弹出Air窗口呢?这些都会在接下来的内容中一一解答。

时间: 06-12

Air实战(一)在Air中显示HTML的相关文章

《Cocos2d-x游戏开发实战精解》学习笔记2--在Cocos2d-x中显示一行文字

在Cocos2d-x中要显示文字就需要用到Label控件.在3.x版本的Cocos2d中,舍弃了之前版本所使用的LabelTTF.LabelAtlas.LabelBMFont 3个用于显示文字的类,而使用一个新类Label取代.可想而知,Label实际上就是对之前3个类进行重新封装并统一渲染. 提示:实际上老版本的内容在3.x版本中依然是可以使用的. 下面是在Cocos2d-x中显示文字的一个例子,具体完整项目可在源文件本章目录下找到项目ChapterThree01查看. [范例3-1 在Coc

实战:判断mysql中当前用户的连接数-分组筛选

#connets.sh #!/bin/sh #[email protected] #根据输入参数u或d来显示出对应的用户名或数据库名中用户的连接数. #也可以输入u 具体用户名或d 具体数据库名做进一步的分组筛选 #set mysql evn MYSQL_USER=system  #mysql的用户名 MYSQL_PASS='password'  #mysql的登录用户密码 MYSQL_HOST=192.168.2.188 export black='\033[0m' export boldbl

Mac 中显示资源库(Library)文件夹目录的几种方法

Mac 中显示资源库(Library)文件夹目录的几种方法 Mac中Library目录在10.6.7系统之后默认隐藏的,要想找到此文件夹有如下几种方法: 1. 用命令可以使其显示: 在终端中执行命令: chflags nohidden ~/Library 可显示资源库文件夹 如想隐藏,可以在终端中执行命令: chflags hidden ~/Library 隐藏 2. 在Finder菜单中的偏好设置中设置 在Finder菜单中的偏好设置中选择边栏,勾选上设备中的硬盘. 再打开Finder,Fin

Windows环境下Python v2.7.9,NotePad++编写程序中涉及中文,执行时CMD中显示乱码的解决办法

例如: 1.使用NotePad++,以默认的"以 UTF-8无 BOM 格式编码"编写: print "一加一等于二" 直接运行后CMD报错: 但是在IDLE中显示正常: 在文件第一行加入注释: # _*_coding:utf-8_*_ 运行后CMD显示乱码,IDLE依然正常: 在字符串前加u(Unicode编码): # _*_coding:utf-8_*_ print u"一加一等于二" 运行后正常,IDLE依然正常: 2. 使用NotePad

C#在listview控件中显示数据库数据

一.了解listview控件的属性 view:设置为details columns:设置列 items:设置行 1.将listview的view设置为details 2.设置列属性 点击添加,添加一列 设置一列的Text属性,这就是列名 添加三列 3.编辑items属性,添加一行数据 编辑Text属性,添加一行的第一个数据 编辑subitems属性,添加一行中的其他数据 添加两个数据 填写结果 二.在listview中显示数据库数据 //在listview中显示数据库数据 private voi

在InternetExplorer.Application中显示本地图片

忘记了,喜欢一个人的感觉 Demon's Blog  ?  程序设计  ?  在InternetExplorer.Application中显示本地图片 ? 对VBS效率的再思考--处理二进制数据 WordPress判断用户是否登录 ? 在InternetExplorer.Application中显示本地图片 标题: 在InternetExplorer.Application中显示本地图片作者: Demon链接: http://demon.tw/programming/internetexplor

097在进度条中显示进度百分比

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 #import "KMProgressViewWithLabel.h" 3 4 @interface ViewController : UIViewController 5 @property (strong, nonatomic) KMProgressViewWithLabel *progressViewCustom; 6 7 @end ViewController.m

double类型的数值在EditText中显示?

============问题描述============ double类型的数值在EditText中显示?et_count.setText(double型数值) 报错,请问应该怎么写? ============解决方案1============ 你要用String.valueof(double value) ============解决方案2============ et_count.setText(String.valueOf(double型数值)) ============解决方案3====

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块)

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.A