- 获取顶层的应用程序:
Application.application
自从4.0以后使用:
FlexGlobals.topLevelApplication
持续更新中...
2.设置绑定图片样式:
CSS样式
? selectedUpSkin:Embed('/image/fullScreen.png');
? upSkin:Embed('/image/fullScreen.png');
? selectedOverSkin:Embed('/image/fullScreen.png');
? selectedDownSkin:Embed('/image/fullScreen.png');
? downSkin:Embed('/image/fullScreen.png');
? overSkin:Embed('/image/fullScreenOn.png');
? disabledSkin:Embed('/image/fullScreen.png');
其实有的按钮可以直接是一张图片,那样更简单
3.无边框的button可以使用:LinkButton,不可用的时候得样式为:disabledIcon
举例:
<mx:LinkButton width="30" height="25" click="doMeasureLine()"
?? ??? ??? ??? ??? ??? ??? icon="{Constants.i_measure}" toolTip="测量距离"/>???
4.如何设置ToggleButtonBar工具栏的button的样式?
涉及到的样式有:
buttonStyleName="toolButton"? firstButtonStyleName="toolButton" lastButtonStyleName="toolButton"
具体的样式设置为:spark控件设置其皮肤样式,可以是系统自带的,也可以是自定义的
.toolButton
{
?? ?skin:ClassReference("com.gis.skins.ToggleLinkButtonSkin");
}
自定义的皮肤,当选中某个按钮时,样式是有底色的样式,用来标记选中状态
package com.gis.skins
{
import mx.skins.halo.LinkButtonSkin;
public class ToggleLinkButtonSkin extends LinkButtonSkin {
public function ToggleLinkButtonSkin() {
super();
}
override protected function updateDisplayList(w:Number,h:Number):void {
super.updateDisplayList(w,h);
var cornerRadius:Number = getStyle("cornerRadius");
var rollOverColor:uint = getStyle("rollOverColor");
var selectionColor:uint = getStyle("selectionColor");
graphics.clear();
switch (name) {
case "upSkin":
// Draw invisible shape so we have a hit area.
drawRoundRect(
0,w,h,cornerRadius,0);
break;
case "selectedUpSkin":
case "selectedOverSkin":
case "overSkin":
drawRoundRect(
0,rollOverColor,1);
break;
case "selectedDownSkin":
case "downSkin":
drawRoundRect(
0,selectionColor,1);
break;
case "selectedDisabledSkin":
case "disabledSkin":
// Draw invisible shape so we have a hit area.
drawRoundRect(
0,0);
break;
}
}
}
}
当然,如果仅仅需要无边框的按钮样式,则只需要:
skin:ClassReference("mx.skins.ProgrammaticSkin");
这样的样式,选中状态和原来是一样的,所以紫荆衣扩展了一下
/* CSS file */
/* Global
{
color: #FFFFFF;
themeColor: #000000;
} */
Application
{
color: #FFFFFF;
backgroundColor: #000000;
backgroundImage: Embed(source="images/theme3.jpg");
backgroundSize: auto;
paddingTop: 0;
}
Accordion
{
downSkin: Embed(source="blendSkin.swf",symbol="DropDownMS_ClosedDOWN");
overSkin: Embed(source="blendSkin.swf",symbol="DropDownMS_ClosedOVER");
upSkin: Embed(source="blendSkin.swf",symbol="DropDownMS_ClosedUP");
color: #00CCCC;
textRollOverColor: #ffffff;
textSelectedColor: #ffffff;
fontFamily: Arial;
fontSize: 11;
fontWeight: normal;
borderSkin: Embed(skinClass='TextArea_borderSkin');
headerStyleName: accordionHeader;
}
Alert
{
paddingTop: 10;
paddingBottom: 10;
borderAlpha: 0.0;
backgroundAlpha: 0.0;
backgroundColor: #FFFFFF;
titleStyleName: Embed(source="blendSkin.swf",symbol="alertTitle");
fill-colors: #8F0F0F,#470808,#000000;
border-skin: ClassReference("tabNavborderBG");
headerHeight: 10;
controlBarStyleName: alertControlBar;
}
Button
{
color: #ffffff;
textRollOverColor: #000000;
skin: Embed(skinClass='PopUpButton_skin');
paddingLeft: 10;
}
ButtonBar
{
firstButtonStyleName: buttonBarFirstButton;
buttonStyleName: buttonBarButton;
lastButtonStyleName: buttonBarLastButton;
color: #E0E0E0;
}
CheckBox
{
skin: Embed(skinClass='CheckBox_icon');
icon: Embed(skinClass='CheckBox_icon');
}
ComboBox
{
skin: Embed(skinClass='Button_skin');
color: #FFFFFF;
useRollOver: true;
dropdownStyleName: comboBoxDropdown;
themeColor: #FFFFFF;
textRollOverColor: #DCDCDC;
textSelectedColor: #9A9A9A;
}
CursorManager
{
busyCursorSkin: Embed(source="blendSkin.swf",symbol="CursorManager_busyCursor");
}
ColorPicker
{
skin: Embed(skinClass='ColorPicker_skin');
focusAlpha: 0;
}
ControlBar
{
paddingLeft: 25;
paddingRight: 25;
fill-colors: #8F0F0F,#000000;
border-skin: ClassReference("titleWindowborderBG");
}
DataGrid
{
color: #000000;
borderSkin: Embed(skinClass='DropDownMS_BG');
selectionColor: #606060;
alternatingItemColors:#cccccc,#B10101;
rollOverColor: #590000;
textSelectedColor: #DCDCDC;
fontWeight: normal;
textRollOverColor: #CECECE;
headerStyleName: dataGridHeader;
headerBackgroundSkin: Embed(skinClass='boxBtn');
textAlign: center;
}
DateChooser
{
nextMonthSkin: Embed(skinClass='DateChooser_nextMonthSkin');
prevMonthSkin: Embed(skinClass='DateChooser_prevMonthSkin');
color: #981010;
todayStyleName: dateChooserToday;
disabledColor: #414141;
selectionColor: #7C7C7C;
rollOverColor: #E7E7E7;
todayColor: #BB9090;
headerStyleName: dateChooserHeader;
fontFamily: Arial;
weekDayStyleName: dateChooserWeekDay;
backgroundColor: #ADADAD;
cornerRadius: 11;
borderColor: #BD0000;
}
HRule
{
shadowColor: #222222;
}
VRule
{
shadowColor: #222222;
}
HScrollBar
{
upArrowSkin: Embed(skinClass='HScrollBar_upArrowSkin');
downArrowSkin: Embed(skinClass='HScrollBar_downArrowSkin');
thumbSkin: Embed(skinClass='VScrollBar_thumbSkin');
trackSkin: Embed(skinClass='VScrollBar_trackSkin');
}
VScrollBar
{
upArrowSkin: Embed(skinClass='VScrollBar_upArrowSkin');
downArrowSkin: Embed(skinClass='VScrollBar_downArrowSkin');
thumbSkin: Embed(skinClass='VScrollBar_thumbSkin');
trackSkin: Embed(skinClass='VScrollBar_trackSkin');
}
Label
{
color: #FFFFFF;
}
LinkButton
{
upSkin: Embed(skinClass='hyperBtn_Up');
overSkin: Embed(skinClass='hyperBtn_Over');
downSkin: Embed(skinClass='hyperBtn_Down');
textRollOverColor: #CBCBCB;
textSelectedColor: #B4B4B4;
}
List
{
color: #000000;
backgroundColor: #cccccc;
}
TileList
{
backgroundColor: #cccccc;
}
MenuBar
{
itemUpSkin: Embed(skinClass='boxBtn');
itemOverSkin: Embed(skinClass='boxBtn');
itemDownSkin: Embed(skinClass='boxBtn');
color: #F1F1F1;
}
HorizontalList
{
backgroundColor: #cccccc;
}
Panel
{
cornerRadius: 18;
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
controlBarStyleName: panelControlBar;
titleBackgroundSkin: Embed(skinClass='title_BGskin');
roundedBottomCorners: true;
backgroundAlpha: 0.0;
borderAlpha: 0.0;
}
ProgressBar
{
trackSkin: Embed(skinClass='ProgressBar_trackSkin');
barSkin: Embed(skinClass='ProgressBar_barSkin');
indeterminateSkin: Embed(skinClass='ProgressBar_indeterminateSkin');
}
RadioButton
{
skin: Embed(skinClass='RadioButton_icon');
icon: Embed(skinClass='RadioButton_icon');
}
NumericStepper
{
downArrowSkin: Embed(skinClass='NumericStepper_downArrowSkin');
upArrowSkin: Embed(skinClass='NumericStepper_upArrowSkin');
}
PopUpButton
{
upSkin: Embed(skinClass='tabs_unselected');
overSkin: Embed(skinClass='tabs_selected');
downSkin: Embed(skinClass='tabs_unselected');
textRollOverColor: #FFFFFF;
textSelectedColor: #DFDFDF;
icon: Embed(skinClass='PopUpButton_popUpIcon');
horizontalGap: 7;
popUpOverSkin: Embed(skinClass='popupBtn');
popUpDownSkin: Embed(skinClass='popupBtn2');
}
HSlider
{
thumbSkin: Embed(source="blendSkin.swf",symbol="Slider_thumbSkin");
}
VSlider
{
thumbSkin: Embed(source="blendSkin.swf",symbol="Slider_thumbSkin");
}
TabNavigator
{
borderStyle: none;
backgroundAlpha: 0;
backgroundColor: #283346;
fill-colors: #8F0F0F,#000000;
tabStyleName: "myTabs";
selectedTabTextStyleName: "myTabs";
border-skin: ClassReference("tabNavborderBG");
} ?
TabBar
{
firstTabStyleName: tabBarFirstTab;
tabStyleName: tabBarTab;
lastTabStyleName: tabBarLastTab;
}
TextInput
{
borderSkin: Embed(skinClass='searchBG');
paddingLeft: 7;
paddingTop: 2;
color: #991010;
}
TextArea
{
borderSkin: Embed(skinClass='TextArea_borderSkin');
paddingLeft: 7;
paddingRight: 7;
paddingTop: 2;
color: #991010;
}
TitleWindow
{
cornerRadius: 18;
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
fill-colors: #000000,#350606;
controlBarStyleName: panelControlBar;
titleBackgroundSkin: Embed(skinClass='title_BGskin');
border-skin: ClassReference("titleWindowborderBG");
roundedBottomCorners: true;
backgroundAlpha: 0.0;
borderAlpha: 0.0;
}
Tree
{
borderSkin: Embed(skinClass='TextArea_borderSkin');
rollOverColor: #878787;
selectionColor: #DF0000;
defaultLeafIcon: Embed(skinClass='Tree_folderOpenIcon');
folderClosedIcon: Embed(skinClass='Tree_folderClosedIcon');
folderOpenIcon: Embed(skinClass='Tree_defaultLeafIcon');
paddingLeft: 5;
paddingTop: 5;
paddingBottom: 2;
}
.myTabs {
color: #ffffff;
borderColor: #666666;
textRollOverColor: #CCCCCC;
upSkin: Embed(source="blendSkin.swf",symbol="tabs_selected");
overSkin: Embed(source="blendSkin.swf",symbol="tabs_selected");
downSkin: Embed(source="blendSkin.swf",symbol="tabs_selected");
disabledSkin: Embed(source="blendSkin.swf",symbol="tabs_selected");
selectedUpSkin: Embed(source="blendSkin.swf",symbol="tabs_unselected");
selectedOverSkin: Embed(source="blendSkin.swf",symbol="tabs_unselected");
selectedDownSkin: Embed(source="blendSkin.swf",symbol="tabs_unselected");
selectedDisabledSkin: Embed(source="blendSkin.swf",symbol="tabs_unselected");
}
.alertControlBar
{
backgroundImage: Embed(skinClass='alertTitle');
backgroundAlpha: 0.0;
borderSkin: Embed(skinClass='alertTitle');
color: #FFFFFF;
paddingTop: 25;
fontWeight: bold;
}
.dateChooserToday
{
fontFamily: Arial;
fontWeight: bold;
}
@font-face
{
fontFamily: "Arial Black";
fontWeight: normal;
fontStyle: normal;
src: local("Arial Black");
}
.dateChooserHeader
{
fontFamily: Arial;
fontWeight: bold;
}
/* @font-face
{
fontFamily: Cambria;
fontWeight: normal;
fontStyle: normal;
src: local("Cambria");
}
@font-face
{
fontFamily: "Angsana New";
fontWeight: normal;
fontStyle: normal;
src: local("Angsana New");
} */
.dateChooserWeekDay
{
fontFamily: Arial;
}
.comboBoxDropdown
{
cornerRadius: 5;
backgroundColor: #616161;
borderStyle: solid;
borderColor: #B7BABC;
rollOverColor: #363636;
selectionColor: #980000;
}
.accordionHeader
{
skin: Embed(skinClass='AccordionHeader_skin');
}
.buttonBarFirstButton
{
upSkin: Embed(skinClass='hyperBtn_Up');
overSkin: Embed(skinClass='hyperBtn_Over');
downSkin: Embed(skinClass='hyperBtn_Down');
selectedUpSkin: Embed(skinClass='hyperBtn_Over');
selectedOverSkin: Embed(skinClass='hyperBtn_Up');
selectedDownSkin: Embed(skinClass='hyperBtn_Down');
textRollOverColor: #C4C4C4;
textSelectedColor: #868686;
}
.buttonBarButton
{
upSkin: Embed(skinClass='hyperBtn_Up');
overSkin: Embed(skinClass='hyperBtn_Over');
downSkin: Embed(skinClass='hyperBtn_Down');
selectedUpSkin: Embed(skinClass='hyperBtn_Over');
selectedOverSkin: Embed(skinClass='hyperBtn_Up');
selectedDownSkin: Embed(skinClass='hyperBtn_Down');
textRollOverColor: #CCCCCC;
textSelectedColor: #9A9A9A;
}
.buttonBarLastButton
{
upSkin: Embed(skinClass='hyperBtn_Up');
overSkin: Embed(skinClass='hyperBtn_Over');
downSkin: Embed(skinClass='hyperBtn_Down');
selectedUpSkin: Embed(skinClass='hyperBtn_Over');
selectedOverSkin: Embed(skinClass='hyperBtn_Up');
selectedDownSkin: Embed(skinClass='hyperBtn_Down');
textRollOverColor: #CFCFCF;
textSelectedColor: #8E8E8E;
}
.tabBarFirstTab
{
upSkin: Embed(skinClass='popupBtn');
overSkin: Embed(skinClass='popupBtn2');
downSkin: Embed(skinClass='popupBtn');
selectedUpSkin: Embed(skinClass='popupBtn2');
selectedOverSkin: Embed(skinClass='popupBtn');
selectedDownSkin: Embed(skinClass='popupBtn2');
textRollOverColor: #E9E9E9;
textSelectedColor: #BCBCBC;
}
.tabBarTab
{
upSkin: Embed(skinClass='popupBtn');
overSkin: Embed(skinClass='popupBtn2');
downSkin: Embed(skinClass='popupBtn');
selectedUpSkin: Embed(skinClass='popupBtn2');
selectedOverSkin: Embed(skinClass='popupBtn');
selectedDownSkin: Embed(skinClass='popupBtn2');
textRollOverColor: #E1E1E1;
textSelectedColor: #B3B2B2;
}
.tabBarLastTab
{
upSkin: Embed(skinClass='popupBtn');
overSkin: Embed(skinClass='popupBtn2');
downSkin: Embed(skinClass='popupBtn');
selectedUpSkin: Embed(skinClass='popupBtn2');
selectedOverSkin: Embed(skinClass='popupBtn');
selectedDownSkin: Embed(skinClass='popupBtn2');
textRollOverColor: #DDDDDD;
textSelectedColor: #A9A9A9;
}
.dataGridHeader
{
color: #FFFFFF;
fontWeight: bold;
textAlign: center;
}
5.flex换肤
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="16" >
<mx:LinkButton width="16" height="16" color="#ff0000" icon="@Embed('assets/png/springbt.png')"
click="onChangeStyle(event)" x="0" id="spring" toolTip="春季主题"/>
<mx:LinkButton width="16" height="16" color="#ff0000" icon="@Embed('assets/png/summerbt.png')"
click="onChangeStyle(event)" x="17" id="summer" toolTip="夏季主题"/>
<mx:LinkButton width="16" height="16" color="#00ff00" icon="@Embed('assets/png/autumnbt.png')"
click="onChangeStyle(event)" x="34" id="autumn" toolTip="秋季主题"/>
<mx:LinkButton width="16" height="16" color="#ff0000" icon="@Embed('assets/png/winterbt.png')"
click="onChangeStyle(event)" x="51" id="winter" toolTip="冬季主题"/>
<mx:LinkButton width="16" height="16" color="#ff0000" icon="@Embed('assets/png/default.PNG')"
click="onChangeStyle(event)" x="68" id="defult" toolTip="默认主题"/>
<mx:Script>
<![CDATA[
import com.yyhy.webgis.model.ModelLocator;
private var __model:ModelLocator = ModelLocator.getInstance();
private function onChangeStyle(event:MouseEvent):void
{
if(event.currentTarget == spring)
{
__model.selectskin = "Spring";
StyleManager.loadStyleDeclarations("assets/skins/color/Spring.swf");
}
else if(event.currentTarget == summer)
{
__model.selectskin = "Summer";
StyleManager.loadStyleDeclarations("assets/skins/color/summer.swf");
}
else if(event.currentTarget == autumn)
{
__model.selectskin = "Autumn";
StyleManager.loadStyleDeclarations("assets/skins/color/autumn.swf");
}
else if(event.currentTarget == winter)
{
__model.selectskin = "Winter";
StyleManager.loadStyleDeclarations("assets/skins/color/winter.swf");
}
else if(event.currentTarget == defult)
{
__model.selectskin = "Start";
StyleManager.loadStyleDeclarations("assets/skins/color/start.swf");
}
else
{
__model.selectskin = null;
return;
}
}
]]>
</mx:Script>
</mx:Canvas>
?
?
发现一个问题:
使用HttpService,提供get方法返回xml数据的时候,Flex总是显示旧的数据。解决方法是在你请求的Servlet地址添加一个参数(参数名随便起,我用random),而且请求的参数必须每一次都不一样(可以通过当前时间或者UUID实现),例如:http://192.168.2.111:8080/UserController.do?servlet=getAll&random=sdfsdfs