Flex 4 舞台尺寸随浏览器窗口大小改变

最新推荐文章于 2024-03-11 14:07:30 发布
最新推荐文章于 2024-03-11 14:07:30 发布
阅读量339 收藏
点赞数
分类专栏： flex 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slmouse1123/article/details/84184423
版权
首先创建项目修改启动html文件 （html-template 文件夹里的 index.template.html 文件） 

<!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" οnlοad="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保留
slmouse1123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex:捕捉浏览器窗口大小改变的事件
07-31
NULL 博文链接：https://hcty31.iteye.com/blog/1122729
Flex中處理窗口大小變化
choueric的专栏
04-22 827
為一個Button顯示一個errorTip，為窗口添加了處理resize事件的函數，當拖動改變窗口大小時，errorTip的位置會正常的跟著Button走。但是當雙擊窗口使窗口最大化，或者點擊最大化、最小化按鈕時，errorTip顯示的位置不正常。 解決辦法： 為nativeWidnow註冊NativeWindowBoundsEvent.RESIZE處理函數windowResize，在該函數中
flex 组件大小窗口自适应
a362005740的专栏
09-09 2380
<br /><?xml version="1.0" encoding="utf-8"?> <br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="initApp()"> <br /> <mx:DataGrid  id="dg" x="100" y="100"><br /> 
Flex自适应浏览器大小
dayong9117的博客
04-28 216
当浏览器大小变化（拖到改变大小或者F11时），应用能够自动实用浏览器大小的改变。部分代码如下： <fx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.events.ResizeEvent; ...
Flex4网页Application界面大小自适应屏幕
10-18 1239
首先是按照常规思维在app中设置 <s:Application ....... width="100%" height="100%" minWidth="1280" minHeight="720"> 这样确实可以全屏，但是当屏幕缩放到小于1280*720时，浏览器并不会自动添加滚动条，所以网页超出屏幕大小的内容就看不到了。 为了解决不出现滚动条，在网上找到了答案，并成功解决 http:/
flex4舞台尺寸随浏览器窗口大小改变.rar
03-29
flex4舞台尺寸随浏览器窗口大小改变.rar
组件随窗口大小改变
07-21
在软件开发中，尤其是涉及到图形用户界面（GUI）的应用程序，"组件随窗口大小改变"是一个重要的设计原则，它涉及到窗口可调整大小和组件自适应布局的概念。这通常需要开发者考虑用户界面的响应式设计，确保应用在...
flex 窗口拖动与尺寸改变
06-17
在本主题“flex 窗口拖动与尺寸改变”中，我们将深入探讨如何实现Flex应用中的窗口操作功能。 首先，让我们理解窗口在Flex中的概念。在Flex中，我们通常使用`WindowedApplication`或`MX:Window`组件来创建一个独立...
flash网站浏览器窗口自适应<as3> 缓动的自适应窗口学习
ansiblexxxxxxxxxxx
04-19 163
烦恼了很久的有自适应无缓动不知如何解决，终于从茫茫网海中找出来了，赶紧分享，学习。 ----------------------------------------------------------------------------------------------------------------------------------------- AS3.0代码如下： im...
CSS流动布局-页面自适应
最新发布
qq_20382175的博客
03-11 446
的元素布局是从左往右依次排列，块级元素从上往下排列，我们所说的脱离文档流也就是该元素从流中漂浮起来，与之前的元素不在同一个层级而形成的不占位效果。流的应用除了更改文档的水平流以外，还可以用来做对称布局，例如微信聊天页，更改。有了流这个概念后，我们可以通过更改流的水平流向来更改元素的排列方向。如果是行内元素，只需要更改水平流向即可实现元素的左右对齐。的水平流向，即可实现微信的自身和对方的聊天气泡定位。的概念，这种布局自然自动，像水流一样。属性影响的，如果文档的水平流向为右向左，那么。表示开始位置（左），
overflow：auto的用法
热门推荐
boysky0015的博客
05-31 4万+
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下：<!DOCTYPE html> <html> <head>
使用Flex布局造成的浏览器缩放时，内部页面改变大小缓慢问题
blueshenmi的博客
02-20 4907
问题原因 （1）在项目中，使用iview作为ui组件开发，使用vue作为前端框架； （2）在人员管理界面，左边是部门树，右边是人员列表； （3）当点击浏览器右上角的缩小按钮时，改页面出现人员列表右边部门缩放缓慢，并且超过了5秒钟，严重影响用户体验。 （4）调查原因中发现：使用flex布局进行自适应时，计算缓慢；再加上iview的表格组件在进行缩放时的宽度计算也要耗费一些时间，因此造成了上述问题的出...
利用flex布局和rem适配，实现页面随窗口变动而变动。
liu5282828的博客
09-22 1228
刚完成一个项目，因为页面的缩放问题，被老师说了一顿。 特此学习了flex布局和rem适配方法，算是完成了效果。 自己还在学习另外的通用方法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <script src="js/flexible.js"></script>
Flash：快速导出png（jsfl）
hufang360的专栏
08-04 7044
不知道现在还有多少人在用Flash制作内容，如果你也想快速提取Flash中的矢量图形成png，不妨试试这个脚本。 创建脚本 1.创建一个txt文本文档 1.将下面的代码复制粘贴到txt中，并保存 3.将".txt"扩展名改为".jsfl" //导出所选到png v1.3 //将flash所选内容保存为png // 素材将保存到脚本目录下的 JSFL 文件夹里 // 支持设置导出的...
Flex4入门指南：从Hello Flex4开始
"《Hello Flex4》是一本由Peter Armstrong编著的关于Flex4开发的入门教程，旨在引导读者逐步掌握Flex4技术。本书受到了行业内专业人士的好评，被认为是一本优秀的初学者指南，同时也包含了深入的技术话题，适合各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值