xchangei
- 浏览: 2780 次
-
最新评论
首先创建项目修改启动html文件 （html-template 文件夹里的 index.template.html 文件）
增加的 代码是 （用来获取浏览器的尺寸 和 发送数据到 flex）
修改 样式 增加宽度100%设定 html, body { height:100%; width:100%; }
修改body 标签 监听加载完成事件 <body scroll="no" onload="pageInit();">
之后的宽度高度 都改成 100% 就好了
在看 flex 代码 如下
flex 的就不说了 那几个和js通讯的函数 和 application1_creationCompleteHandler 方法里 对通讯的启动
好了 可以启动浏览起 拖拽浏览器改变窗口大小 看看 按钮会不会自适应尺寸了
做个tag保留
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!--
Smart developers always View Source.
This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.
Learn more about Flex at http://flex.org
// -->
<head>
<title>${title}</title>
<meta name="google" value="notranslate">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
the percentage of the height of its parent container, which has to be set explicitly. Fix for
Firefox 3.6 focus border issues. Initially, don't display flashContent div so it won't show
if JavaScript disabled.
-->
<style type="text/css" media="screen">
html, body { height:100%; width:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center;
background-color: ${bgcolor}; }
object:focus { outline:none; }
#flashContent { display:none; }
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
<!-- BEGIN Browser History required section ${useBrowserHistory}>
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!${useBrowserHistory} END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!-- scwidth or scheight -->
var winWidth = 0;
var winHeight = 0;
function findDimensions() {
//获取窗口宽度
if (window.innerWidth) {
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth; //获取窗口高度
}
if (window.innerHeight)
{
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
if(isReady()){
var str = winWidth+","+winHeight;
sendToActionScript(str);
}
}
window.onresize=findDimensions;
var jsReady = false;
function isReady() {
return jsReady;
}
function pageInit() {
jsReady = true;
//调用函数，获取数值
findDimensions();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function sendToActionScript(value) {
thisMovie("${application}").sendToActionScript(value);
}
function sendToJavaScript(value) {
findDimensions();
}
<!---------------------------------------------- -->
<!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
<!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "${application}";
attributes.name = "${application}";
attributes.align = "middle";
swfobject.embedSWF(
"${swf}.swf", "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body scroll="no" onload="pageInit();">
<!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
when JavaScript is disabled.
-->
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
${version_major}.${version_minor}.${version_revision} or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
</div>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="${application}">
<param name="movie" value="${swf}.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="${swf}.swf" width="100%" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
${version_major}.${version_minor}.${version_revision} or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>
增加的 代码是 （用来获取浏览器的尺寸 和 发送数据到 flex）
<!-- scwidth or scheight -->
var winWidth = 0;
var winHeight = 0;
function findDimensions() {
//获取窗口宽度
if (window.innerWidth) {
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth; //获取窗口高度
}
if (window.innerHeight)
{
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
if(isReady()){
var str = winWidth+","+winHeight;
sendToActionScript(str);
}
}
window.onresize=findDimensions;
var jsReady = false;
function isReady() {
return jsReady;
}
function pageInit() {
jsReady = true;
//调用函数，获取数值
findDimensions();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function sendToActionScript(value) {
thisMovie("${application}").sendToActionScript(value);
}
function sendToJavaScript(value) {
findDimensions();
}
修改 样式 增加宽度100%设定 html, body { height:100%; width:100%; }
修改body 标签 监听加载完成事件 <body scroll="no" onload="pageInit();">
之后的宽度高度 都改成 100% 就好了
在看 flex 代码 如下
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
preloader="Preloader"
xmlns:sRGroup="sRGroup.*"
creationComplete="application1_creationCompleteHandler(event)"
addedToStage="application1_addedToStageHandler(event)">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
import org.puremvc.as3.patterns.facade.Facade;
import spark.components.mediaClasses.VolumeBar;
public static var main:ShowerRoom;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
if (ExternalInterface.available) {
try {
ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);
if (checkJavaScriptReady()) {
ExternalInterface.call("sendToJavaScript","getWH");
} else {
var readyTimer:Timer = new Timer(100, 0);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
readyTimer.start();
}
} catch (error:SecurityError) {
Alert.show("A SecurityError occurred: " + error.message);
} catch (error:Error) {
Alert.show("An Error occurred: " + error.message);
}
}
//注册
Facade.getInstance().registerCommand(ShowerRoomNotify.CMD_SHOWERROOM,ShowerRoomCommand);
Facade.getInstance().sendNotification(ShowerRoomNotify.CMD_SHOWERROOM);
main = this;
}
/**网页js 发来的数据接收函数*/
private function receivedFromJavaScript(value:String):void {
var array:Array = value.split(",");
this.width = array[0];
this.height = array[1];
// Alert.show("舞台尺寸改变"+this.width+"------"+this.height);
}
/**检测网页是否加载完毕*/
private function checkJavaScriptReady():Boolean {
var isReady:Boolean = ExternalInterface.call("isReady");
return isReady;
}
/**循环检测网页是否加载完毕*/
private function timerHandler(event:TimerEvent):void {
var isReady:Boolean = checkJavaScriptReady();
if (isReady) {
//停止timer
var str:String = ExternalInterface.call("sendToJavaScript","getWH");
Alert.show(str);
Timer(event.target).stop();
}
}
protected function application1_addedToStageHandler(event:Event):void
{
//添加舞台尺寸改变数据
this.addEventListener(ResizeEvent.RESIZE,onResize);
}
private function onResize(evt:Event):void
{
//Alert.show("舞台尺寸改变"+stage.width+"------"+stage.height);
}
]]>
</fx:Script>
<sRGroup:MenuListGroup x="38" y="70">
</sRGroup:MenuListGroup>
<s:Button x="0" y="0" label="按钮"/>
<s:Button right="0" bottom="0" label="按钮" id="btn2"/>
</s:Application>
flex 的就不说了 那几个和js通讯的函数 和 application1_creationCompleteHandler 方法里 对通讯的启动
好了 可以启动浏览起 拖拽浏览器改变窗口大小 看看 按钮会不会自适应尺寸了
做个tag保留
分享到：
发表评论
相关推荐
flex4舞台尺寸随浏览器窗口大小改变.rar
NULL 博文链接：https://hcty31.iteye.com/blog/1122729
通过鼠标拖动可以改变窗口的位置，鼠标在窗口边框上是并按下并拖动就可以改变窗口的大小。。。
flex4浏览器关闭。一个简单的flex4中如果关闭浏览器的小demo！
flex实现简单浏览器,flex AIR中HTML控件实现了简单的网页浏览效果
一个完成的Flex4 Air 自定义窗口，可以缩小到托盘中，后台运行
flex解析浏览器地址，。与浏览器的通信能够让 你建立一个可以超越Flex 应用本身的应用程序。你可以连接到已有的地址，通过JavaScript 和其他应用程序通信，并且可以和浏览器的历史记录交互，作为开始。...
可以通过可视化界面的调整生成css,方便、高效。
一个flex实现的浏览器效果，都是代码编写，和特效应用。请关注下载呀
Flex4 权威指南随书代码
flex4权威指南随书资源，电子书如果有需要的可以留言我在传。
FLEX4的皮肤skin.教你如何使用皮肤
FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看
1. Flex4权威指南电子书与此书的源代码 2. Flexbuild使用工具适用于4.6之前版本 电子书内容概括： 1. 理解RIA 2. 开始 3. 布局界面 4. 使用简单的控件 5. 处理事件 6. 使用远程XML数据 7. 创建类 8. 使用数据绑定和...
Flex 4 高级编程Flex 4 高级编程Flex 4 高级编程Flex 4 高级编程
Flex3D效果图片浏览器，3D效果，旋转，很美
flex4自定义弹出窗口 支持最大化 最小化
基于flex4技术从零开发flex博客系统 : 1 开发环境配置与hello world（1） - 豆豆网 flex+blazeDs与Ext+dwr比较_蓝色幻想_百度空间 基于blazeDS的flex4与spring的程序实例步骤 - dreamming_now的专栏 - CSDN博客 在...
flex4出来一段时间了,去年看了一段时间flex3,后来由于暂时没有项目需求.所以flex遗忘了很多.这次使用flex4+myeclipse8.5录制了一个视频.以免时间长了遗忘. 软件环境:windows7+flex4+myeclipse8.5+blazeds 功能描述...
基于国外的 MacPopup 苹果风格，自己很喜欢，但是国外提供的 该控件 是基于flex 3的 ，所以在目前flex4为主流的 sdk 情况下，会出现错误。本控件 已经做了修正。可以直接运行。请指导。