今天的一个项目中需要在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><mx:Panel></code> tag inherits all of the tag
* attributes of its superclass and adds the following tag attributes:</p>
*
* <pre>
* <eshangrao:AdvancedTitleBarPanel>
* <eshangrao:advancedTitleBar>
* <i>child which wants added to titleBar tags</i>
* </eshangrao:advancedTitleBar>
* ...
* <i>child tags</i>
* ...
* </eshangrao:AdvancedTilteBarPanel>
* </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>
* <eshangrao:advancedTitleBar>
* <i>child which wants added to titleBar tags</i>
* </eshangrao:advancedTitleBar>
* </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>
分享到:
相关推荐
第二十六讲: EXTJS4.0的高级组件Panel和Layout上 第二十七讲: EXTJS4.0的高级组件Panel和Layout下 第二十八讲: EXTJS4.0的高级组件Chart上 第二十九讲: EXTJS4.0的高级组件Chart下 第三十讲: EXTJS4.0的Desktop使用...
看到其它地方 分太高,问大家省点分.... 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级组件chart上 第二十九讲:extjs4.0的高级组件chart下 第三十讲:extjs4.0的desktop使用讲解
EasyUI入门教程--第03课_parser组件panel组件及如何使用组件自带的属性、事件、方法.avi,这是由孙宇老师录制的视频,现在很难找了,讲得很详细,授人以鱼,不如授人以渔。 第01课(大概介绍一下easyui,和组织...
第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级组件chart上 第二十九讲:extjs4.0的高级组件chart下 第三十讲:extjs4.0的desktop使用...
第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级组件chart上 第二十九讲:extjs4.0的高级组件chart下 第三十讲:extjs4.0的desktop使用...
不用标题栏就可实现Delphi窗口拖动..rar
用 React 编写的 Panel 组件。 或查看 index.html 以了解用法。 发展 npm install -g live-server 安装 破解 如何使用 var Panel = require ( "react-panel" ) ; var panel1 = Panel . render ( { contentStr ...
基于 vue2.0 ,可自由拖拽、自由调整大小、收缩展开的 panel 组件
要创建一个新的 PanelContainer,只需在您的 qml 文件中添加一个类似于此的块: PanelContainer { id: mainContainer anchors.fill: parent layout: "row" movable: true panelsMetaData: [ { id: "panel1...
该组件可执行包括网络监测在内的几项任务。
资源为Winform用户自定义组件库,是自己平时做项目...改库包含了常用的,按钮,圆角按钮,复选框,单选框,滚动条,带标题的Panel,Label,圆角窗口等等,基本项目用到的组件覆盖完了,能够实现一个软件的扁平化设计。
在 .net C#,在panel上动态增加控件示例子,简单,一看就会.
C# WinForm 在Panel中添加Form 教程+源码 可以像MDI窗体那个进行操作,用于解决界面美化过程中的MDI窗体, 新式弹窗.学习一下,绝对有用 C# winform必学
动态panel组件
实现功能: 动态添加自定义控件至Panel,每行添加个数可控,达到指定个数后自动进行换行; 其中包含只能输入字母或者数字以及退格键(Backspace)的自定义控件
Video Display Panel:视频显示面板; Video Border:视频边框; Closed Captioning Display Panel;字幕显示面板; Track Bar;搜索栏; Control Bar with Audio and Position Controls:带有声音和位置控制的...
实际上,Panel很类似于GroupBox,其区别是:只有GroupBox控件可以显示标题,而只有Panel控件可以有滚动条。 Panel控件在工具箱中的图标如图所示:。 一、Panel控件的常用属性 1、Anchor和Dock:这两个属性是所有...
使用Vue3构建的易于使用,可定制的可折叠面板/手风琴库。 安装 使用yarn或npm将软件包安装为项目依赖项: $ yarn add @dafcoe/vue-collapsible-panel --- or --- $ npm install --save @dafcoe/vue-collapsible-...
标题栏以Panel模拟,实现标题栏拖动、双击最大化、边框拖拉等效果
该测试程序是用来测试Flex中Panel组件设置了borderSkin后,内容体和标题栏重叠的问题,并给出了解决方式。