分页组件

于 2010-11-11 23:16:19 发布
阅读量151 收藏
点赞数
分类专栏： Flex Component 文章标签： Flash
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_8019/article/details/81961327
版权
一个分页用的组件,参看了网上一些关于checkbox的代码，分为Skin、Renderer、支持类、工具类，不过暂时只能支持remote调用，需要用到一些方法，和RemoteConn(已贴出)、ParamUtil.setParam(已贴出)
组件代码： 

package pizazz.flex4.utility{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import mx.controls.Alert;
	import mx.controls.Image;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.core.ClassFactory;
	import mx.core.IUIComponent;
	import mx.events.CloseEvent;
	import spark.components.Button;

    public class UIUtil{
		public static function showInfo(info:Object):void{
			Alert.show(info + "", "提示信息");
		}

		public static function showError(info:Object):void{
			Alert.show(info + "", "错误信息");
		}

		public static function showChoice(info:Object, 
				yes:Function, no:Function = null):void{
			Alert.show(info + "", "提示信息", Alert.YES | Alert.NO, null,
				function(event:CloseEvent):void{
					if(event.detail == Alert.YES){
						yes();
					}else if(no != null){
						no();
					}
				}
			);
		}

		public static function buttonFactory(label:String,
				onClick:Function = null, width:Number = NaN, 
			icon:Class = null, target:Button = null):Button{
			if(!target){
				target = new Button();
			}
			if(onClick != null){
				target.addEventListener(MouseEvent.CLICK, onClick);
			}
			if(icon != null){
				target.setStyle("icon", icon);
			}
			target.setStyle("cornerRadius", 0);
			ParamUtil.setParam(target, {
				"width": width,
				"label": label
			});
			return target;
		}

		public static function imageFactory(source:Object, 
				onClick:Function = null, tip:String = "", 
				width:Number = NaN, height:Number = NaN, 
				isBtnMode:Boolean = true, target:Image = null):Image{
			if(!target){
				target = new Image();
			}
			ParamUtil.setParam(target, {
				"source": source,
				"useHandCursor": isBtnMode,
				"buttonMode": isBtnMode,
				"width": width,
				"height": height,
				"toolTip": tip
			});
			if(onClick != null){
				target.addEventListener(MouseEvent.CLICK, onClick);
			}
			return target;
		}

		public static function columnFactory(headerText:String, 
				dataField:String, draggable:Boolean = true, 
				sortable:Boolean = true, width:Number = NaN):DataGridColumn{
			const _column:DataGridColumn = new DataGridColumn();
			ParamUtil.setParam(_column, {
				"headerText": headerText,
				"dataField": dataField,
				"draggable": draggable,
				"sortable": sortable,
				"width": width,
				"wordWrap": true
			});
			_column.headerRenderer = new ClassFactory(mx.controls.Label);
			_column.itemRenderer = new ClassFactory(mx.controls.Label);
			return _column;
		}
    }
}


package pizazz.flex4.event{
    import flash.events.Event;

    public class CheckBoxesEvent extends Event{
        public static const CHECK_SELECTED:String = "CheckBoxSelected";
        public static const CHECK_CHANGE:String = "CheckBoxChange";
        private var _selected:Boolean = false;
        private var _param:Object = {};

		public function get selected():Boolean{
			return _selected;
		}

		public function get param():Object{
			return _param;
		}

        public function CheckBoxesEvent(method:String, 
				bubbles:Boolean = false, cancelable:Boolean = false, 
				param:Object = null, selected:Boolean = false){
			_param = param ? param : {};
			_selected = selected;
            super(method, bubbles, cancelable);
        }
    }
}

PageViewSkin 

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
    	xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Metadata>
	    <![CDATA[ 
	        [HostComponent("pizazz.flex4.container.PageView")]
	    ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor  alpha="{getStyle('backgroundAlpha')}" 
				color="{getStyle('backgroundColor')}"/>
        </s:fill>
		<s:stroke>
			<s:SolidColorStroke alpha="0.8" 
				color="{getStyle('borderColor')}" />
		</s:stroke>
    </s:Rect>
	<s:VGroup left="0" top="0" right="0" bottom="0" gap="0">
		<s:HGroup id="toolBar" width="100%" verticalAlign="middle" 
			horizontalAlign="left" gap="0" paddingLeft="20" />
		<s:Group id="contentGroup" width="100%" height="100%">
			<s:layout>
				<s:BasicLayout />
			</s:layout>
		</s:Group>
		<s:HGroup id="controlBar" width="100%" verticalAlign="middle" 
			horizontalAlign="right" gap="2" paddingRight="10" />
	</s:VGroup>
</s:Skin>


package pizazz.flex4.container.renderer.pageview{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import mx.controls.CheckBox;
    import mx.controls.DataGrid;
    import pizazz.flex4.container.component.pageview.PageHeaderColumn;
    import pizazz.flex4.event.CheckBoxesEvent;

    public class PageItemRenderer extends CheckBox{
		private var _data:Object;

        public function PageItemRenderer(){
            super();
            super.addEventListener(Event.CHANGE, changeDispatch);
            addEventListener(Event.CHANGE, changeHandler);
        }

        private function columnHeaderClickHandler(event:MouseEvent):void{
            selected = event.currentTarget.selected;
        }

        private function changeDispatch(event:Event):void{
			owner.dispatchEvent(new CheckBoxesEvent(
				CheckBoxesEvent.CHECK_SELECTED, false, false, 
				data, selected));
        }

		private function changeHandler(event:Event):void{  
			_data['selected'] = selected;
			owner.dispatchEvent(event);
		}

		private function checkChangeHandler(event:CheckBoxesEvent):void{
			selected = event.selected;
		}

		override public function get data():Object {  
			return _data;  
		}

		override protected function createChildren():void{
			super.createChildren();
			owner.addEventListener(CheckBoxesEvent.CHECK_CHANGE, 
				checkChangeHandler);
		}

		override public function validateProperties():void{
			super.validateProperties();
			if (listData){
				var _column:PageHeaderColumn = 
					DataGrid(listData.owner).columns[listData.columnIndex];
				_column.addEventListener(MouseEvent.CLICK, 
					columnHeaderClickHandler);
			}
		}

		override public function set data(value:Object):void {
			_data = value;
			if(_data){
				if(_data.hasOwnProperty("selected")){
					selected = _data["selected"].toString() == 
						"true" ? true : false;
				}else{
					selected = false;
				}
			}
		}
    }
}


package pizazz.flex4.container.renderer.pageview{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import mx.controls.CheckBox;
    import mx.controls.DataGrid;
    import mx.events.DataGridEvent;
    import pizazz.flex4.container.component.pageview.PageHeaderColumn;
    import pizazz.flex4.event.CheckBoxesEvent;

    public class PageHeaderRenderer extends CheckBox{
    	private var _data:PageHeaderColumn;

        public function PageHeaderRenderer(){
            super();
        }

        private function changeHandler(event:Event):void{
        	var _isAll:Boolean = true;
        	for each(var _param:Object in 
					DataGrid(listData.owner).dataProvider){
            	if(!_param.hasOwnProperty("selected") || 
						_param["selected"].toString() == "false"){
            		_isAll = false;
            		break;
            	}
            }
        	selected = _isAll;
        }

		private function checkChangeHandler(event:CheckBoxesEvent):void{
			selected = event.selected;
		}

		override public function get data():Object{
			return _data;
		}

		override protected function createChildren():void{
			super.createChildren();
			owner.addEventListener(Event.CHANGE, changeHandler);
			owner.addEventListener(CheckBoxesEvent.CHECK_CHANGE, 
				checkChangeHandler);
		}

        override public function set data(param:Object):void{
            _data = param as PageHeaderColumn;
            listData.owner.addEventListener(DataGridEvent.HEADER_RELEASE, 
				sortHandler);
			changeHandler(new Event(Event.CHANGE));
        }

        private function sortHandler(event:DataGridEvent):void{
            if (event.itemRenderer == this){
				event.preventDefault();
			}  
        }

        override protected function clickHandler(event:MouseEvent):void{
            super.clickHandler(event);
            _data.selected = selected;
            for each(var _param:Object in 
					DataGrid(listData.owner).dataProvider){
				owner.dispatchEvent(new CheckBoxesEvent(
					CheckBoxesEvent.CHECK_SELECTED, _param, 
					(_param["selected"] = selected)));
            }
            _data.dispatchEvent(event);
        }
    }
}


package pizazz.flex4.container.component.pageview{
	import flash.events.MouseEvent;
	import pizazz.flex4.container.PageView;

	public class PageMethod{
		protected var _page:PageView;

		public function set page(value:PageView):void{
			_page = value;
		}

		public function insertMethod(event:MouseEvent):void{};
		public function updateMethod(event:MouseEvent):void{};
		public function detailMethod(event:MouseEvent):void{};
	}
}


package pizazz.flex4.container.component.pageview{
    import mx.controls.dataGridClasses.DataGridColumn;
    import pizazz.flex4.utility.ParamUtil;

    [Event(name="click", type="flash.events.MouseEvent")]

    public class PageHeaderColumn extends DataGridColumn{
        public var selected:Boolean = false;

        public function PageHeaderColumn(columnName:String = null){
            super(columnName);
        }

		public static function createColumn():PageHeaderColumn{
			const _column:PageHeaderColumn = new PageHeaderColumn();
			ParamUtil.setParam(_column, {
				"width": 16,
				"sortable": false,
				"draggable": false,
				"resizable": false
			});
			return _column;
		}
    }
}


package pizazz.flex4.container{
	import flash.events.Event;
	import flash.events.MouseEvent;
	import mx.collections.ArrayCollection;
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.core.ClassFactory;
	import mx.events.FlexEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.RemoteObject;
	import pizazz.flex4.container.component.pageview.PageHeaderColumn;
	import pizazz.flex4.container.component.pageview.PageMethod;
	import pizazz.flex4.container.renderer.pageview.PageHeaderRenderer;
	import pizazz.flex4.container.renderer.pageview.PageItemRenderer;
	import pizazz.flex4.container.skin.pageview.PageViewSkin;
	import pizazz.flex4.event.CheckBoxesEvent;
	import pizazz.flex4.remote.RemoteConn;
	import pizazz.flex4.utility.ParamUtil;
	import pizazz.flex4.utility.UIUtil;
	import spark.components.Button;
	import spark.components.HGroup;
	import spark.components.Label;
	import spark.components.NumericStepper;
	import spark.components.SkinnableContainer;

	public class PageView extends SkinnableContainer{
		public static const INSERT:uint = 0x0001;
		public static const UPDATE:uint = 0x0002;
		public static const DELETE:uint = 0x0004;
		public static const DETAIL:uint = 0x0008;

		[SkinPart(required="true")]public var toolBar:HGroup;
		[SkinPart(required="true")]public var controlBar:HGroup;
		//查询条件
		public var selCondition:Object = {};
		//删除条件
		public var delCondition:Object = {};
		//数据唯一键(用于删除方法)
		public var idField:String = "id";
		//连接通道描述
		public var destination:String = "";
		//此方法在数据删除完成后被调用
		public var delFunction:Function;
		//此方法在数据查询后被调用(参数为调用结果集)
		public var selFunction:Function;
		protected const _selected:ArrayCollection = new ArrayCollection();
		protected var _resultSet:ArrayCollection = new ArrayCollection();
		private var _toolComp:Boolean = true;
		private var _infoComp:Boolean = true;
		private var _selMethod:String = "select";
		private var _delMethod:String = "remove";

		protected const _page:DataGrid = new DataGrid();
		protected var _total:Number = 0;
		protected var _now:Number = 1;
		protected var _size:Number = 10;
		protected var _all:Number = 0;
		protected var _remote:RemoteObject;
		private var _num:NumericStepper;
		private var _btnInsert:Button;
		private var _btnUpdate:Button;
		private var _btnDelete:Button;
		private var _btnDetail:Button;
		private var _info:Label;
		/**
		 * 设置每页显示数目
		 */ 
		public function set size(value:uint):void{
			_size = value;
		}

		public function set resultSet(value:ArrayCollection):void{
			_resultSet = value;
		}
		/**
		 * 获取查询结果集合
		 */ 
		public function get resultSet():ArrayCollection{
			return _resultSet;
		}
		/**
		 * 获取选择结果集合
		 */ 
		public function get selected():ArrayCollection{
			return _selected;
		}
		/**
		 * 获取选择主键结果集合
		 */ 
		public function get selectedIds():Array{
			const _arr:Array = new Array();
			for each(var _param:Object in _selected){
				_arr.push(_param[idField]);
			}
			return _arr;
		}
		/**
		 * 设置查询方法
		 */ 
		public function set selMethod(value:String):void{
			_selMethod = value;
		}
		/**
		 * 设置删除方法
		 */ 
		public function set delMethod(value:String):void{
			_delMethod = value;
		}
		/**
		 * 设置是否显示按钮栏
		 */ 
		public function set toolComp(value:Boolean):void{
			_toolComp = value;
		}
		/**
		 * 设置是否显示分页栏
		 */ 
		public function set infoComp(value:Boolean):void{
			_infoComp = value;
		}

		public function PageView(){
			setStyle("skinClass", PageViewSkin);
			_page.percentWidth = 100;
			_page.percentHeight = 100;
		}
		/**
		 * 属性设置(在execute前调用)
		 * @param column 项(格式：[显示名称, 字段名称])
		 * @param support 按钮方法类(继承方法后，调用按钮点击)
		 * @param isCheckBoxColumn 是否显示CheckBox
		 */ 
		public function attributeSet(column:Array, support:PageMethod = null, 
				isCheckBoxColumn:Boolean = true):void{
			const _columns:Array = new Array();
			if(isCheckBoxColumn){
				_columns.push(PageHeaderColumn.createColumn());
			}
			for each(var _column:Object in column){
				if(_column is Array){
					var _arr:Array = _column as Array;
					_columns.push(
						UIUtil.columnFactory(_arr.shift(), _arr.shift()));
				}else if(_column is DataGridColumn){
					_columns.push(_column);
				}else{
					continue;
				}
			}
			_page.columns = _columns;
			if(support){
				support.page = this;
				_btnInsert.addEventListener(
					MouseEvent.CLICK, support.insertMethod);
				_btnUpdate.addEventListener(
					MouseEvent.CLICK, support.updateMethod);
				_btnDetail.addEventListener(
					MouseEvent.CLICK, support.detailMethod);
			}
		}
		/**
		 * 组件执行
		 * @param flags 显示的按钮
		 * @param isLoadBusy 加载是否变为鼠标忙状态
		 * @param isSelect 是否在初始化时查询
		 */ 
		public function execute(flags:uint = 0, 
				isLoadBusy:Boolean = true, isSelect:Boolean = true):void{
			const _layout:Object = {"visible": false, 
				"includeInLayout": false};
			if(flags != 0){
				if(!(INSERT & flags)){
					ParamUtil.setParam(_btnInsert, _layout, false);
				}
				if(!(UPDATE & flags)){
					ParamUtil.setParam(_btnUpdate, _layout, false);
				}
				if(!(DELETE & flags)){
					ParamUtil.setParam(_btnDetail, _layout, false);
				}
				if(!(DETAIL & flags)){
					ParamUtil.setParam(_btnDetail, _layout, false);
				}
			}else{
				ParamUtil.setParam(toolBar, _layout, false);
			}
			initPage(isLoadBusy);
			if(isSelect){
				doSelect();
			}
		}

		private function checkBoxRenderer():void{
			var arr:Array = _page.columns;
			if (arr && arr[0] is PageHeaderColumn){
				var _column:PageHeaderColumn = arr[0] as PageHeaderColumn;
				_column.headerRenderer = new ClassFactory(PageHeaderRenderer);
				_column.itemRenderer = new ClassFactory(PageItemRenderer);
			}
		}
		/**
		 * 执行查询
		 * @param value 查询开始页
		 */ 
		public function doSelect(value:Number = 1):void{
			if(destination != ""){
				_remote.getOperation(_selMethod).send(
					value, _size, selCondition);
			}
		}

		private function clearData():void{
			clearSelect();
			_resultSet.removeAll();
		}
		/**
		 * 清除选择
		 */ 
		public function clearSelect():void{
			_page.dispatchEvent(new CheckBoxesEvent(
				CheckBoxesEvent.CHECK_CHANGE));
			_selected.removeAll();
		}
		/**
		 * 刷新分页列表
		 */ 
		public function refresh():void{
			_page.invalidateDisplayList();
		}

		private function initPage(isShowEvent:Boolean = false, 
				isLoadBusy:Boolean = true):void{
			if(isShowEvent){
				addEventListener(FlexEvent.SHOW, 
					function(event:FlexEvent):void{
						doSelect(_now);
					}
				);
			}
			_page.addEventListener(
				CheckBoxesEvent.CHECK_SELECTED, changeHandler);
			checkBoxRenderer();
			_page.dataProvider = _resultSet;
			if(destination != ""){
				_remote = RemoteConn.getRemote(destination,
					function(event:ResultEvent):void{
						var _result:Object = event.result;
						if(_result){
							clearData();
							if(_result is String){
								UIUtil.showInfo(_result);
								doSelect(_now);
								if(delFunction != null){
									delFunction();
								}
							}else{
								_resultSet.addAll(_result["resultSet"] 
									as ArrayCollection);
								_total = Number(_result["total"]);
								_now = Number(_result["now"]);
								_size = Number(_result["size"]);
								_all = Number(_result["all"]);
								if(selFunction != null){
									selFunction(_result);
								}
							}
							refreshInfo();
						}
					}
				, {"showBusyCursor": isLoadBusy});
			}
			refreshInfo();
		}

		private function changeHandler(event:CheckBoxesEvent):void{
			if (event.param.hasOwnProperty(idField)){
				if (event.selected){
					var _param:Object = event.param;
					if(!_selected.contains(_param)){
						_selected.addItem(_param);
					}
				}else{
					var i:int = _selected.getItemIndex(event.param);
					if(i != -1){
						_selected.removeItemAt(i);
					}
				}
			}
		}

		private function refreshInfo():void{
			_info.text = "第" + _now + "/" + _all + "页 共" + _total + "条";
			_num.maximum = _all;
			_num.value = _now;
		}

		override protected function partAdded(partName:String, 
				instance:Object):void{
			if(instance == toolBar){
				if(_toolComp){
					toolBar.addElement(_btnInsert);
					toolBar.addElement(_btnUpdate);
					toolBar.addElement(_btnDelete);
					toolBar.addElement(_btnDetail);
				}
			}else if(instance == controlBar){
				if(_infoComp){
					controlBar.addElement(_info);
					controlBar.addElement(UIUtil.imageFactory(
							"pizazz/flex4/assets/image/page-first.gif",
						function(event:MouseEvent):void{
							doSelect(1);
						}
					, "首页", 16, 16));
					controlBar.addElement(UIUtil.imageFactory(
							"pizazz/flex4/assets/image/page-prev.gif",
						function(event:MouseEvent):void{
							doSelect(_now - 1);
						}
					, "上页", 16, 16));
					controlBar.addElement(UIUtil.imageFactory(
							"pizazz/flex4/assets/image/page-next.gif",
						function(event:MouseEvent):void{
							doSelect(_now + 1);
						}
					, "下页", 16, 16, true));
					controlBar.addElement(UIUtil.imageFactory(
							"pizazz/flex4/assets/image/page-last.gif",
						function(event:MouseEvent):void{
							doSelect(_all);
						}
					, "尾页", 16, 16));
					controlBar.addElement(_num);
					controlBar.addElement(UIUtil.imageFactory(
							"pizazz/flex4/assets/image/page-skip.gif",
						function(event:MouseEvent):void{
							doSelect(_num.value);
						}
					, "跳转", 12, 12));
				}
			}
			super.partAdded(partName, instance);
		}

		override protected function createChildren():void{
			if(_toolComp){
				_btnInsert = UIUtil.buttonFactory("新增");
				_btnUpdate = UIUtil.buttonFactory("编辑");
				_btnDelete = UIUtil.buttonFactory("删除",
					function(event:MouseEvent):void{
						var _selectedIds:Array = selectedIds;
						_selectedIds.length == 0 ? 
								UIUtil.showInfo("请选择一项") : 
								UIUtil.showChoice("是否要删除所选项?",
							function():void{
								if("" != destination){
									_remote.getOperation(
										_delMethod).send(
										_selectedIds, delCondition);
								}
							}
						);
					}
				);
				_btnDetail = UIUtil.buttonFactory("详情");
			}
			if(_infoComp){
				_num  = new NumericStepper();
				_num.setStyle("cornerRadius", 0);
				_num.stepSize = 1;
				_num.minimum = 1;
				_info = new Label();
				_info.setStyle("color", 0xFFFFFF);
			}
			addElement(_page);
			super.createChildren();
		}
	}
}

组件执行： 

<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" 
			   xmlns:container="pizazz.flex4.container.*"
			   minWidth="955" minHeight="600" creationComplete="init()">
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	<fx:Script>
		<![CDATA[
			private function init():void{
				page.attributeSet([
					["姓名", "name"], ["年龄", "old"], ["城市", "city"]]);
				page.execute(
					PageView.UPDATE | PageView.DETAIL | PageView.DELETE);
			}
		]]>
	</fx:Script>
	<container:PageView 
		destination="service" id="page" width="480" height="320" />
</s:Application>

视图：
[img]http://dl.iteye.com/upload/attachment/346880/d76a2635-bd39-36cc-84da-9e7529fe1a47.png[/img]
[img]http://dl.iteye.com/upload/attachment/346883/ecf67fea-1c36-340f-b034-81441aa2fb08.png[/img]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值