`
qiangjishen
  • 浏览: 6743 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

转载] AdvancedTitleBarPanel:标题栏可添加组件的Panel

XML 
阅读更多
今天的一个项目中需要在Panel的标题栏中上增加按钮,所以就有这个AdvancedTitleBarPanel了。实现的原理很简单就是扩展mx.containers.Panel,然后在titleBar添加一个UIComponent,源码如下:

package com.eshangrao.containers
{
import mx.containers.Panel;
import mx.core.UIComponent;
import mx.core.EdgeMetrics;
/**
*  A Advanced Panel container consists of a Advanced title bar which you can
*  add every childer to the Panel't titlte Bar

*  @mxml

*  <p>The <code>&lt;mx:Panel&gt;</code> tag inherits all of the tag
*  attributes of its superclass and adds the following tag attributes:</p>

*  <pre>
*  &lt;eshangrao:AdvancedTitleBarPanel&gt
*   &lt;eshangrao:advancedTitleBar&gt
*      <i>child which wants added to titleBar tags</i>
* &lt;/eshangrao:advancedTitleBar&gt
*      ...
*      <i>child tags</i>
*      ...
*  &lt;/eshangrao:AdvancedTilteBarPanel&gt;
*  </pre>

*  @see mx.containers.Panel
*/
public class AdvancedTitleBarPanel extends Panel
{
/**
*  @public
     *  the advancedTitleBar,insert into the <code>titleBar</code> after the title
     *  <code>titleTextField</code>.
     *
     *  <pre>
     *  &lt;eshangrao:advancedTitleBar&gt
*    <i>child which wants added to titleBar tags</i>
* &lt;/eshangrao:advancedTitleBar&gt
*  </pre>
     */
public var advancedTitleBar:UIComponent;

override protected function createChildren():void{
super.createChildren();

//if(!advancedTitleBar)
// advancedTitleBar=new UIComponent();
//titleBar.addChild(advancedTitleBar);
//rawChildren.addChild(titleBar);
if(!advancedTitleBar){
advancedTitleBar=new UIComponent();
}
titleBar.addChild(advancedTitleBar);
advancedTitleBar.owner = this;

}
override protected function layoutChrome(unscaledWidth:Number,unscaledHeight:Number):void{
         super.layoutChrome(unscaledWidth, unscaledHeight);
        
         var bm:EdgeMetrics = borderMetrics;
         var minX:Number = titleTextField.x + titleTextField.textWidth + 8;           
         var rightOffset:Number = 10;
         //如果宽度为百分比,则设置宽度为标题所有剩余空间的百分比,否则为组件自身大小
         if(isNaN(advancedTitleBar.percentWidth)){
                advancedTitleBar.setActualSize(
               advancedTitleBar.getExplicitOrMeasuredWidth(),
                advancedTitleBar.getExplicitOrMeasuredHeight());           
         }else{
                advancedTitleBar.setActualSize(
                (unscaledWidth - (bm.left + bm.right+minX+rightOffset))*advancedTitleBar.percentWidth/100,
                advancedTitleBar.getExplicitOrMeasuredHeight());
         }
         var headerHeight:Number=getHeaderHeight();

         advancedTitleBar.move(minX,
                      (headerHeight - advancedTitleBar.getExplicitOrMeasuredHeight()) / 2);
         }
         /**
      *  @private
      */
     private static const HEADER_PADDING:Number = 10;
         override protected function getHeaderHeight():Number{
         var headerHeight:Number=super.getHeaderHeight();
         return Math.max(headerHeight,advancedTitleBar.height+HEADER_PADDING);
         }
}
}
用法如下:

首先从这里下载二进制SWC包,将其添加到您的Mxmlc编译组件路径中,然后加入如下命名空间声明:

xmlns:eshangrao="http://www.eshangrao.com"
接着就可以使用AdvancedTitleBarPanel了:

<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 1" width="100%" height="100">
<eshangrao:advancedTitleBar>
<mx:Button label="Button at TitleBar"/>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
如果要在Panel的TitleBar上添加多个组件的话,则需要用容器包括:

<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
<eshangrao:advancedTitleBar>
<mx:VBox>
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:VBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
如果您要将所有组件靠Panle右对奇,可以如下使用:

<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
<eshangrao:advancedTitleBar>
<mx:VBox width="100%" horizontalAlign="right">
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:VBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
注意,缺省情况下,添加到TitlePanel上的组件的大小就组件的原始大小,但是如果您将其width设置为100%的话,那么该组件将占满TilteBar所有的剩余空间。

完整的范例演示代码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:eshangrao="http://www.eshangrao.com" layout="vertical">
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 1" width="100%" height="100">
<eshangrao:advancedTitleBar>
<mx:Button label="Button at TitleBar"/>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 2" width="100%" height="100">
<eshangrao:advancedTitleBar>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:HBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
<eshangrao:advancedTitleBar>
<mx:VBox width="100%">
<mx:Button label="Button at TitleBar"/>
<mx:Text text="this is a text in titleBar"/>
</mx:VBox>
</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>
</mx:Application>
分享到:
评论

相关推荐

    Extjs教程源码

    第二十六讲: EXTJS4.0的高级组件Panel和Layout上 第二十七讲: EXTJS4.0的高级组件Panel和Layout下 第二十八讲: EXTJS4.0的高级组件Chart上 第二十九讲: EXTJS4.0的高级组件Chart下 第三十讲: EXTJS4.0的Desktop使用...

    EXTJS4.0视频教程配套代码

    看到其它地方 分太高,问大家省点分.... 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级组件chart上 第二十九讲:extjs4.0的高级组件chart下 第三十讲:extjs4.0的desktop使用讲解

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi

    EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。 第01课(大概介绍一下easyui,和组织...

    免费 Extjs4.0教程视频

    第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级组件chart上 第二十九讲:extjs4.0的高级组件chart下 第三十讲:extjs4.0的desktop使用...

    Extjs4.0视频教程和源代码,另附文档翻译

    第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级组件chart上 第二十九讲:extjs4.0的高级组件chart下 第三十讲:extjs4.0的desktop使用...

    不用标题栏就可实现Delphi窗口拖动..rar

    不用标题栏就可实现Delphi窗口拖动..rar

    react-panel:用 React 编写的面板组件

    用 React 编写的 Panel 组件。 或查看 index.html 以了解用法。 发展 npm install -g live-server 安装 破解 如何使用 var Panel = require ( "react-panel" ) ; var panel1 = Panel . render ( { contentStr ...

    基于vue20可自由拖拽自由调整大小收缩展开的panel组件

    基于 vue2.0 ,可自由拖拽、自由调整大小、收缩展开的 panel 组件

    QMLSharedComponents:QtQML 的共享组件

    要创建一个新的 PanelContainer,只需在您的 qml 文件中添加一个类似于此的块: PanelContainer { id: mainContainer anchors.fill: parent layout: "row" movable: true panelsMetaData: [ { id: "panel1...

    Panel网络控制组件

    该组件可执行包括网络监测在内的几项任务。

    Winform自定义组件库

    资源为Winform用户自定义组件库,是自己平时做项目...改库包含了常用的,按钮,圆角按钮,复选框,单选框,滚动条,带标题的Panel,Label,圆角窗口等等,基本项目用到的组件覆盖完了,能够实现一个软件的扁平化设计。

    C#在panel动态添加控件

    在 .net C#,在panel上动态增加控件示例子,简单,一看就会.

    C# WinForm 在Panel中添加Form 教程+源码

    C# WinForm 在Panel中添加Form 教程+源码 可以像MDI窗体那个进行操作,用于解决界面美化过程中的MDI窗体, 新式弹窗.学习一下,绝对有用 C# winform必学

    动态panel组件

    动态panel组件

    动态添加自定义控件至Panel

    实现功能: 动态添加自定义控件至Panel,每行添加个数可控,达到指定个数后自动进行换行; 其中包含只能输入字母或者数字以及退格键(Backspace)的自定义控件

    网页中插入视频播放代码全集

    Video Display Panel:视频显示面板; Video Border:视频边框; Closed Captioning Display Panel;字幕显示面板; Track Bar;搜索栏; Control Bar with Audio and Position Controls:带有声音和位置控制的...

    winform中的panel使用.docx

    实际上,Panel很类似于GroupBox,其区别是:只有GroupBox控件可以显示标题,而只有Panel控件可以有滚动条。 Panel控件在工具箱中的图标如图所示:。 一、Panel控件的常用属性 1、Anchor和Dock:这两个属性是所有...

    vue-collapsible-panel:使用Vue3的可折叠面板手风琴组件

    使用Vue3构建的易于使用,可定制的可折叠面板/手风琴库。 安装 使用yarn或npm将软件包安装为项目依赖项: $ yarn add @dafcoe/vue-collapsible-panel --- or --- $ npm install --save @dafcoe/vue-collapsible-...

    Delphi 用无边框窗体自定义标题栏的实现

    标题栏以Panel模拟,实现标题栏拖动、双击最大化、边框拖拉等效果

    Flex中Panel组件的borderSkin测试程序

    该测试程序是用来测试Flex中Panel组件设置了borderSkin后,内容体和标题栏重叠的问题,并给出了解决方式。

Global site tag (gtag.js) - Google Analytics