pizazz_ex
- 浏览: 20207 次
- 性别:
- 来自: 成都
-
最近访客 更多访客>>
最新评论
-
danbaizhi：
这个代码有个小问题，ResourceManager.getIn ...
Flex打包swc的国际化应用 -
zhong_pro：
LZ，请问滚动不起来。开始后没反应。
模仿HTML跑马灯(Marquee) -
pizazz_ex：
包名可以在程序中找到
public class Wind ...
可以最小化停靠的弹出窗口 -
exingzhe：
你好pizazz-ex： 我尝试运行你的代码可是发现缺少W ...
可以最小化停靠的弹出窗口
一个分页用的组件,参看了网上一些关于checkbox的代码，分为Skin、Renderer、支持类、工具类，不过暂时只能支持remote调用，需要用到一些方法，和RemoteConn(已贴出)、ParamUtil.setParam(已贴出)
组件代码：
PageViewSkin
组件执行：
视图：
组件代码：
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>
视图：
分享到：
发表评论
-
模仿HTML跑马灯(Marquee)
2010-12-08 22:38 3029模仿HTML的Marquee组件，组件容器为Group，和fl ... -
通用的表单验证组件
2010-11-08 23:11 802一个通用的表单验证组件，可以根据验证类型自行扩展，可以被动验证 ... -
可以辅助选择的文本框
2010-11-07 23:30 861组件是辅助选择的文本框，可以使用上下键选择，可以采用自定义数据 ... -
可以最小化停靠的弹出窗口
2010-11-03 23:35 1565参看了一些网上的最小化窗口，发现大多都是添加在容器中的面板，所 ... -
配置文件加载组件
2010-11-02 22:41 652在开发过程中，按照一定的规则去写配置文件，就可以方便的进行引用 ... -
关于Flex内remote、http、url的再次封装
2010-11-01 22:50 1589对于3种连接的封装 组件代码： package pizaz ... -
可以简易管理的弹出组件
2010-10-30 23:18 943实现了一个简易的弹出管理器，可以设置是否弹出唯一面板，可以配合 ... -
可以动态设置不同图标的树形组件
2010-10-29 00:41 1098参考了IconUtility组件和网上的一些代码实现，综合了一 ...
相关推荐
基于vue+elementUI开发的分页组件，后端项目配置使用PageHelper，前端配合使用此组件。
ibatis_likehbm高效分页组件ibatis_likehbm高效分页组件ibatis_likehbm高效分页组件ibatis_likehbm高效分页组件ibatis_likehbm高效分页组件ibatis_likehbm高效分页组件 ibatis_likehbm高效分页组件 ibatis_likehbm...
JSF分页组件2,JSF分页组件2
基于Bootstrap样式的分页组件
Vue2.0分页组件
很好用的 分页组件 分页 java 代码
A vue pagination component 一个vue分页组件
Qt5的分页组件，可以直接用，无外部依赖和资源依赖。 具体介绍和使用请看这里：https://blog.csdn.net/lixiaoxing2/article/details/109289103
（原创）这是一个功能比较完善的vue分页组件，包含基本的数据统计，页面跳转，修改每页显示条数，当前页居中显示等，有兴趣的可以直接拿来用。
java进行分页所用的分页组件工具类 使用方法： 第一步：将util文件夹复制到项目 的SRC文件下面 第二步：将mypage.tld文件复制到web-inf文件夹下面 第三步：打开需要分页的页面，在page指令下方添加导入标签库的代码...
rPage 是一个易于使用的插件，它能使 BootStrap3 的分页更加灵敏。rPage 自动收缩分页组件，并且当空间不够时删除一些组件。 标签：rPage
复用性很强的分页组件，欢迎大家下载使用！
本资源主要实现分页组件，可对某些参数进行针对性的设置，解决了大部分需求，并将其中函数进行封装扩展到jquery中
很通用的Flex 分页组件，经过本人测试，可以应用到项目中，很方便
一个vue的简单分页组件
基于vue2.0开发的分页组件
一个用vue实现的分页组件
通用的jsp分页组件，实例化后只需设置好各种属性，然后调用API即可得到已封装好“首页” “上一页”，“下一页”等分页操作的html表格String，直接在jsp页面中即可， 支持跳转到jsp和跳转到Action（struts架构）...
文件page.vue为一个pc端的分页组件,基础的分页功能都有，基本的思路是，页面是用数据来展示的，那就直接操作相关数据来改变视图
jquery分页组件，快速实现分页效果，使用该组件需导入jQuery，且jQuery须在该组件之前导入