`

Flex 动态换肤

阅读更多

    可能很多人在写Flex程序的时候为了界面的美化,都会用到css,这里有一个动态换肤的实现。

 

    原理就是将各种不同的css文件先编译成swf,然后用StyleManager类的loadStyleDeclarations方法加载换肤的swf。代码如下:

 

 

<?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>

 

分享到:
评论
2 楼 cwfmaker 2010-09-08  
嗯,是的,这个类应该是继承cairngorm框架的
1 楼 王慧迪 2010-09-08  
ModelLocator是自己定义的么?

相关推荐

    flex 写的一个家具动态换肤

    在本案例中,"flex 写的一个家具动态换肤"是一个使用Flex3开发的项目,它允许用户在应用程序中动态更换家具的外观,提供了一种便捷的方式来展示不同样式和颜色的家具,而无需重新加载或更新整个应用。 在Flex3中,...

    flex4 为垂直滚动条VScrollBar换肤

    在Flex4中,开发者可以利用其强大的皮肤定制能力来改变应用程序的外观和感觉,从而提供更个性化的用户体验。本文将详细讲解如何为垂直滚动条VScrollBar进行换肤,以提升应用界面的美观度。 首先,我们需要理解Flex4...

    flex 转成aswing 代码

    主要是解决aswing 换肤问题,用flex 生成的xml 转成对应的aswing代码

    Flex MP3 超酷在线MP3媒体播放器

    Flex在线MP3媒体播放器功能如下: 1.播放音乐时显示波形谱 2.歌词同步显示 3.播放模式调节(顺序播放、单曲循环、随机播放) 4.播放歌曲时显示进度条 5.快进 6.快退 7.声量调节 8.歌曲列表 9.播放控制(上一首、下一首...

    JS+css实现换肤和布局代码

    这可以通过预设多个CSS样式表并动态切换来实现。在JS的帮助下,我们可以创建一个函数,该函数响应用户的点击事件,加载不同的CSS文件,从而改变页面的主题。 1. **创建CSS主题**:首先,你需要为每个主题创建一个...

    Styling and Skinning.pdf

    根据提供的文件信息,“Styling and Skinning.pdf”主要讲解了Adobe Flex框架下的界面定制与换肤技术。下面将从以下几个方面进行深入解析: ### 一、Styling vs. Skinning #### Styling(样式定制) - **定义**:...

    300道HTML、CSS习题及面试题(含答案).pdf

    页面换肤功能通常是通过在CSS中预设多种皮肤样式,并通过JavaScript动态更改CSS类来实现。这种功能允许用户点击按钮或通过其他操作来切换页面的风格和颜色主题。 具体到代码实现中,例如,通过为`.wrap-2`类设置...

    DIV+CSS网页设计规范总结.pdf

    例如,使用display:flex或grid可以创建更灵活的响应式布局,position属性则可用于精确控制元素的位置。 总的来说,DIV+CSS布局虽然在学习和调试上可能有一定难度,但它带来的效率提升和设计自由度是无法忽视的。...

    FlashNuke-开源

    这个框架使得FlashNuke能够提供高度交互性和动态用户体验,同时保持了内容管理系统的实用性和灵活性。Flex是Adobe开发的一个强大的开发工具,用于构建富互联网应用程序(RIA),它使用ActionScript编程语言,提供了...

    emWin5用户手册(中文)

    emWin 图形库 图形用户界面 版本 5.12 手册修订版 0 emWin V5.12 用户参考手册 © 1997 - 2011 SEGGER Microcontroller GmbH & Co....9 1 emWin 简介...................................................................

    javaweb css样式表

    此外,CSS还支持“换肤”功能,即用户可以根据自己的喜好选择不同的页面主题风格,进一步提升了用户体验。 #### 二、CSS样式表的基础语法 CSS的基本语法结构相对简单,主要包括选择器和样式规则两部分: ```html ...

Global site tag (gtag.js) - Google Analytics