对于Flex4来讲,可以自定义skin,然后就可以做出来很漂亮的网格背景。
APP:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" width="100%" height="100%" skinClass="com.view.skin.CrossGroupSkin" click="application1_clickHandler(event)"> <fx:Script> <![CDATA[ protected function application1_clickHandler(event:MouseEvent):void { (skin as Object).grapWidth -= 1; } ]]> </fx:Script> </s:Application>
SkinClass:
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.SkinnableContainer")] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ private var _grapWidth: Number = 50; public function set grapWidth(value:Number):void { this._grapWidth = value; this.invalidateDisplayList(); } public function get grapWidth():Number { return _grapWidth; } public function drawGrid():void { this.graphics.clear(); this.graphics.beginFill(0xFFFFFF); this.graphics.drawRect(0, 0, this.width, this.height); this.graphics.endFill(); this.graphics.lineStyle(1, 0xBBBBBB); //画横线 var i : int = 0; var totalLength: Number = 0; while(totalLength < this.height){ if(grapWidth * i < this.height) { this.graphics.moveTo(0, grapWidth * i); this.graphics.lineTo(this.width, grapWidth * i); } else { this.graphics.moveTo(0, this.height); this.graphics.lineTo(this.width, this.height); } totalLength = grapWidth * i; i ++; } //变量清零 totalLength = 0; i = 0; //画竖线 while(totalLength < this.width){ if(grapWidth * i < this.width) { this.graphics.moveTo(grapWidth * i, 0); this.graphics.lineTo(grapWidth * i, this.height ); } else { this.graphics.moveTo(this.width, 0); this.graphics.lineTo(this.width, this.height ); } totalLength = grapWidth * i; i ++; } } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void { if (isNaN(getStyle("backgroundColor"))) { background.visible = false; } else { background.visible = true; bgFill.color = getStyle("backgroundColor"); bgFill.alpha = getStyle("backgroundAlpha"); } super.updateDisplayList(unscaledWidth, unscaledHeight); drawGrid(); } ]]> </fx:Script> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <s:Rect id="background" left="0" right="0" top="0" bottom="0"> <s:fill> <s:SolidColor id="bgFill" color="#FFFFFF"/> </s:fill> </s:Rect> <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"> <s:layout> <s:BasicLayout/> </s:layout> </s:Group> </s:Skin>
相关推荐
使用`embed`关键字将SWF文件嵌入到CSS中,然后将其作为组件的背景图像或图形资源。 5. **调整样式属性**:通过CSS,可以设置组件的尺寸、位置、颜色和其他视觉属性。还可以定义状态(如鼠标悬停、按下等),以便在...
在Flex开发中,我们经常需要对数据展示进行定制化,比如根据每行数据的不同来设置不同的背景色。这种需求在数据网格(DataGrid)中尤为常见,可以增强数据的可读性和视觉效果。本篇文章将深入讲解如何在Flex中实现这...
例如,如果你试图改变列表中第五行的第四列背景色,你需要注意,一旦用户滚动列表,这个渲染器可能会被用来显示其他数据,因为它会被复用。因此,正确的做法是让渲染器根据所显示的数据动态地改变其自身状态。 内联...
- 自动填充网格:在不固定列数的网格系统中,Flexbox能自动填充空白区域。 - 对齐和间距控制:如居中对齐一个元素,或在一行中平均分配多个元素。 6. **压缩包文件解析** - `index.html`:这是网页的入口文件,...
在Flex开发中,数据网格(DataGrid)是用于展示大量结构化数据的组件,它允许用户进行交互式浏览和操作。ActionScript是Flex的核心编程语言,用于实现动态功能和交互。在标题和描述中提到的知识点主要涉及Flex ...
在Flex开发中,表格(DataGrid)是一种常用的数据展示组件,它允许我们以网格的形式显示大量数据。在某些场景下,比如需要展示汇总信息或创建复杂的报表时,我们可能需要合并表格的单元格来增强视觉效果和信息组织。...
例如,Grid布局可以用于创建规则的网格,而HorizontalLayout或VerticalLayout则适用于一维的滚动效果。 3. **数据绑定**:Flex4支持强大的数据绑定机制,可以将数据源与UI组件关联,方便地更新显示内容。电视墙中的...
在Flex开发中,AdvancedDataGrid组件是用于展示大量复杂数据的高级网格控件。它提供了比基本DataGrid更丰富的功能,如多级表头、排序、分组、过滤和自定义渲染等。本文将深入探讨Flex应用中的AdvancedDataGrid表头...
Flex Grid是一种在Adobe Flex开发环境中用于创建数据网格的组件,它允许开发者构建具有复杂布局和功能的表格。在本文中,我们将深入探讨如何利用Flex Grid来制作复杂的表格,并结合提供的文件进行解析。 首先,让...
通常,组件会显示一个网格布局,每个格子代表一天,可以标记特殊日期,如节假日或已预订的日子。用户可以通过点击特定日期来选中,同时,组件还可以配置为支持多选模式,允许用户选择连续或不连续的日期范围。 创建...
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
#### 一、Flex简介与背景 Flex是一种开源框架,用于构建具有表现力的Web应用程序,这些程序可以跨浏览器、桌面和操作系统流畅运行。Adobe Systems在2004年发布了Flex的第一个版本,并在之后的几年里不断更新和完善...
Flex框架包含了一系列预制的组件,例如按钮、数据网格、滑动条等,可以使得开发者快速搭建应用程序界面。此外,Flex还支持与服务器端技术的集成,如PHP、Java EE等,方便数据的交互和处理。 描述:“NULL 博文链接...
通过设置`display: flex`和相关的flex属性,可以轻松地调整元素的顺序、大小和对齐方式,使图片在网格中整齐排列。 2. **伪类选择器**:如`:hover`,当鼠标悬停在元素上时,可以应用特定的样式,比如改变图片的透明...
- **twaver.Grid**:网格组件用于显示网格背景,便于定位节点位置。 #### 八、TWaverFlex 使用技巧 除了上述内容之外,TWaverFlex 还提供了一些实用的功能和技巧,例如: - **自定义样式**:可以通过修改 CSS ...
例如,可以设置为`display: grid`或`display: flex`来实现灵活的网格系统。`grid-template-columns`和`grid-template-rows`属性则用于定义网格的列数和行数,比如`grid-template-columns: repeat(3, 1fr)`表示创建3...
1. 绘制网格:使用Flex的绘图API(如Graphics类)绘制二维网格,形成游戏背景。 2. 绘制蛇与食物:同样通过Graphics类,根据蛇和食物的坐标绘制矩形或形状,完成游戏元素的视觉呈现。 六、优化与扩展 1. 性能优化...
5. **关闭和管理弹出组件**:为了提供良好的用户体验,确保提供一个关闭按钮或者通过其他方式(如点击背景)关闭弹出组件。使用`PopUpManager.removePopUp()`方法关闭组件。 在项目中,`bin-release`目录包含了编译...
4. **图片网格**:图片网格是一种常见的网页布局方式,通过CSS的`display: grid`或`display: flex`属性可以轻松实现。每个网格项在被点击时触发缩放动画,这需要结合jQuery的事件监听和anime.js的动画函数来完成。 ...