自定义一widget皮肤，和效果步骤如下:
Flex viewer 框架2.5以上版本，经典的widget窗口样式都要依靠标签，那我们就要改变widgettemplate的整体样式，要从什么地方下手呢，每个框架的src目录下都有一个css文件，有这样一段代码：
viewer|WidgetTemplate
{
skinClass: ClassReference("com.esri.viewer.skins.MyWidgetTemplateSkin");
}
其中灰色的部分是我们要找到的skin皮肤样式，根据路径找到widgettemplateskin文件，打开查看这里着重介绍重要的代码块：
[HostComponent("com.esri.viewer.WidgetTemplate")]
这段代码做元数据的绑定，HostComponent是指需要改变外观的组件，一般用metadata标签来声明。
这段表示widget的状态类型，便于控制。
transitions>
fromState="open" toState="minimized">
effectEnd="minimizingEnded(event)">
duration="100" target="{widgetLabel}"/>
duration="100" target="{headerToolGroup}"/>
duration="100" target="{contentGroup}"/>
duration="100" target="{widgetFrame}"/>
heightTo="30"
target="{hostComponent}"
widthTo="150"/>
duration="100" target="{header}"/>
easer="{bounce}" target="{icon}"/>
fromState="minimized" toState="open">
effectEnd="openEnded(event)">
duration="100" target="{widgetFrame}"/>
target="{icon}"/>
heightTo="{hostComponent.widgetHeight}"
target="{hostComponent}"
widthTo="{hostComponent.widgetWidth}"/>
duration="100" target="{widgetLabel}"/>
duration="100" target="{contentGroup}"/>
duration="100" target="{headerToolGroup}"/>
fromState="closed" toState="open">
duration="100" target="{widgetFrame}"/>
target="{icon}"/>
duration="100" target="{widgetLabel}"/>
duration="100" target="{contentGroup}"/>
duration="100" target="{headerToolGroup}"/>
fromState="open" toState="closed">
duration="100" target="{widgetLabel}"/>
duration="100" target="{headerToolGroup}"/>
duration="100" target="{contentGroup}"/>
duration="100" target="{widgetFrame}"/>
fromState="minimized" toState="closed">
effectEnd="effectEndHandler(event)">
duration="100" target="{widgetLabel}"/>
duration="100">
alphaTo="0" target="{contentBackground}"/>
alphaTo="0" target="{border}"/>
alphaTo="0" target="{headerBackground}"/>
target="{widgetFrame}"/>
transitions>
以上这段标签是flex 4.6中的效果过渡标签Transition，其中的属性fromState、toState是由当前那种状态改变为那种状态判断，当那种状态切换到那种状态后执行的动画效果，Sequence 效果以子效果的添加顺序依次播放多个子效果。如果想要改变widget的打开、关闭、缩小等效果的话，就在上边的这段代码中修改即可。
id="widgetFrame"
left="0" right="0" top="0" bottom="0"
alpha.closed="0">
width="100%" height="100%"
radiusX="5"
radiusY="5">
id="contentBackground"
alpha="{getStyle('contentBackgroundAlpha')}"
alpha.minimized="0.5"
color="{getStyle('contentBackgroundColor')}"/>
id="border"
alpha.minimized="0.5"
color="{getStyle('borderColor')}"/>
width="100%" height="{header.height}"
left="1" right="1" top="1"
topLeftRadiusX="5"
topRightRadiusX="5">
id="headerBackground"
alpha="{getStyle('contentBackgroundAlpha')}"
alpha.minimized="0"
color="{getStyle('contentBackgroundColor')}"/>
alpha="0.5"
blurX="10"
blurY="10"/>
上边的代码为widget的整个轮廓样式，关于Rect请查看flex API
id="header"
height="30"
left="25" left.minimized="55" right="{headerToolGroup.width + 60}" right.minimized="10" top="0">
id="widgetLabel"
width="100%"
alpha.closed="0"
alpha.minimized="1"
alpha.open="1"
maxDisplayedLines="1"
showTruncationTip="true"
styleName="WidgetTitle"
text="{hostComponent.widgetTitle}"
verticalCenter="0"/>
上边代码为widget的titile部分样式，label即为widget的标题。
id="headerToolGroup"
height="30"
right="70" top="0"
alpha.closed="0"
hasFocusableChildren="true"
includeInLayout.minimized="false"
visible.minimized="false"
visible.open="true">
paddingLeft="10"/>
上边代码为标题部分的多个界面的切换图标布局容器（几乎不用改动）。
id="minclose"
height="30"
right="3" top="0"
includeInLayout.minimized="false"
visible.closed="false"
visible.minimized="false">
gap="2"
paddingLeft="2"
verticalAlign="middle"/>
id="minimizeButton"
buttonMode="true"
focusEnabled="true"
includeInLayout="{hostComponent.enableMinimizeButton}"
source="assets/images/w_min.png"
toolTip="{LocalizationUtil.getDefaultString('minimize')}"
useHandCursor="true"
visible="{hostComponent.enableMinimizeButton}"/>
id="closeButton"
buttonMode="true"
focusEnabled="true"
includeInLayout="{hostComponent.enableCloseButton}"
source="assets/images/w_close.png"
toolTip="{LocalizationUtil.getDefaultString('close')}"
useHandCursor="true"
visible="{hostComponent.enableCloseButton}"/>
以上代码为，缩小、关闭按钮的布局、和位置（如果需要改图标的话在此处直接替换路径即可）。
id="icon"
x.minimized="10" x.open="-20" y="12" y.minimized="-2" width="40" height="40"
buttonMode="false"
buttonMode.minimized="true"
source="{hostComponent.widgetIcon}"
tabFocusEnabled="false"
useHandCursor="false"
useHandCursor.minimized="true"
visible="{hostComponent.enableIcon}"
visible.closed="false">
blurX="10" blurY="10"/>
以上代码为widget图标代码，可根据需要改动。
id="contentGroup"
left="20" right="20" top="35" bottom="20"
alpha.closed="0"
alpha.minimized="0"
clipAndEnableScrolling="true"
visible.minimized="false"
visible.normal="true"
visible.open="true">
这部分代码为widget的内容部分的布局代码（不用改动）
id="resizeButton"
right="0" bottom="0"
preinitialize="resizeButton_preinitializeHandler(event)"
source="assets/images/w_resize.png"
visible.closed="false"
visible.minimized="false"
visible.open="{hostComponent.resizable}"/>
这部分代码为widget的放大缩小图标（如果不想使用可以注掉）。
以下是我自定义后的文件描述：首先列出需要改动的模块，缩小图标（切换）、标题颜色渐变渲染、图标缩小去除点击事件、缩小时效果改为内容部分由下向上消失、缩小后图标改变、widget轮廓的圆角。
我们将widgettemplateskin文件复制一份，改个MyWidgetTemplateskin的名称在default.css文件中配置如下：
viewer|WidgetTemplate
{
skinClass: ClassReference("com.esri.viewer.skins.MyWidgetTemplateSkin");
}
图标改变路径源修改：
buttonMode="true"
focusEnabled="true"
includeInLayout="{hostComponent.enableMinimizeButton}"
source="assets/img/minimizeButton.png"
toolTip="{LocalizationUtil.getDefaultString('minimize')}"
useHandCursor="true"
visible="{hostComponent.enableMinimizeButton}"/>
buttonMode="true"
focusEnabled="true"
includeInLayout="{hostComponent.enableCloseButton}"
source="assets/img/closeButton.png"
toolTip="{LocalizationUtil.getDefaultString('close')}"
useHandCursor="true"
visible="{hostComponent.enableCloseButton}"/>
缩小图标需要切换，所以在这里修改还不够，还需要当状态改变为缩小时，更改路径：
private function minimizingEnded(event:EffectEvent):void
{
minimizeButton.source="assets/img/closeButton.png";
icon.tabFocusEnabled = true;
if (focusManager.showFocusIndicator)
{
icon.setFocus();
}
}
我们需要找到当缩小效果结束后执行的函数：minimizingEnded(event)修改如下：
protected function minimize_clickHandler(event:MouseEvent):void
{
if (_baseWidget)
{
//缩小改变状态
var str:String = event.target.imageDisplay.source;
var bl:Boolean=(str=="assets/img/closeButton.png")?true:false;
if(bl)
{
_baseWidget.setState(WIDGET_OPENED);
}
else
{
_baseWidget.setState(WIDGET_MINIMIZED);
}
}
this.widgetFrame.toolTip = this.widgetTitle;
this.icon.toolTip = this.widgetTitle;
}
还没结束，我们要知道让他怎么变回来，什么时候需要变回来，所以要找到它由缩小状态变为打开状态的执行函数：
openEnded(event)然后在它的里面变回来，如下：
private function openEnded(event:EffectEvent):void
{
minimizeButton.source="assets/img/minimizeButton.png";
icon.tabFocusEnabled = false;
if (focusManager.showFocusIndicator)
{
focusManager.getNextFocusManagerComponent().setFocus();
}
}
当我运行时发现它不好使原因是它绑定的元数据中没有改变状态：在元数据
![[转载]flex <wbr>viewer <wbr>自定义皮肤样式]( "[转载]flex <wbr>viewer <wbr>自定义皮肤样式")
中我们要改一个地方如下：
target="{hostComponent}"
/>
需要做一个判断，如果缩小图片路径改为打开图片路径就改变widget的状态为open。
Widget标题渲染的改（在skin文件中找到id为headerBackground的标签）动如下：
left="1" right="1" top="1"
topLeftRadiusX="1"
topRightRadiusX="1">
具体不做赘述，如有不懂，请参照flex API。
图片缩小去除点击事件：首先在skin中找到id为icon的标签代码块：改动如下：
id="icon"
x.open="2" y="2" width="20" height="20"
buttonMode="false"
buttonMode.minimized="true"
source="{hostComponent.widgetIcon}"
tabFocusEnabled="false"
useHandCursor="false"
useHandCursor.minimized="true"
visible="{hostComponent.enableIcon}"
visible.closed="false">
blurX="10" blurY="10"/>
事件去除还要跑到widgettemplete中去完成，查找icon，会找到icon绑定的click事件，去除即可。
缩小效果改动，首先我们知道widget的各种效果都是有状态的改变通过过渡transitions得来的，我们找到由打开状态改变为缩小状态的效果：
将效果流程改变为：
target="{hostComponent}"
/>
改变轮廓的圆角状态，这个很简单了，了解flex 都知道Rect标签中的radiusX，radiusY是干什么用的吧，所以改变如下的值就可以了：
left="0" right="0" top="0" bottom="0"
alpha.closed="0">
radiusX="5"
radiusY="5">
到此改动完成设置default.css应用mywidgettemplate文件效果如下：
原文地址：flex viewer 自定义皮肤样式
4978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
