笔记六 ：EgretH5通用MVC框架的入门操作：ItemList滚动列表的使用,以及内部Item配置与监听的方法（UI部分）
前言：ItemList滚动列表是几乎所有界面UI包括网页，手机APP，游戏UI都常用到的一个组件，用于显示一些重复性的列表，比如淘宝的商品列表，微信的消息列表等等，这次笔记记录如何用Egret通用MVC框架组建ItemList滚动列表，基于笔记一中搭建的scene，演示效果如下：
1.创建\src\example\module\demo\list\ItemListDemoController.ts （ ItemList界面控制器）
/**
* Created by egret on 15-1-7.
*/
class ItemListDemoController extends BaseController {
private itemListDemoView:ItemListDemoView;
public constructor() {
super();
this.itemListDemoView = new ItemListDemoView(this, LayerManager.UI_Popup);
App.ViewManager.register(ViewConst.ItemListDemo, this.itemListDemoView);
}
}2.添加ViewConst：\src\example\consts\ViewConst.ts （ 用于ViewManager的管理）
添加上：ItemListDemo关键字
/**
* Created by Administrator on 2014/11/23.
*/
enum ViewConst{
Loading = 10000,
Login,
Home,
Friend,
Shop,
Warehouse,
Factory,
Task,
Daily,
Mail,
Demo,
TarBarDemo,
ItemListDemo,
Game = 20000,
GameUI,
RpgGame,
}
3.创建\src\example\module\demo\list\ItemListDemoView.ts （ ItemList界面的View）
/**
* Created by egret on 15-1-7.
*/
class ItemListDemoView extends BaseEuiView {
public constructor($controller: BaseController, $parent: eui.Group) {
super($controller, $parent);
this.once(egret.Event.REMOVED_FROM_STAGE,this.dispose,this);
this.skinName = "resource/skins/demo/ItemListDemoSkin.exml";
}
closeBtn: eui.Button;
arrCollection: eui.ArrayCollection;
list:eui.List;
public initUI(): void {
//this.removeEventListener(eui.UIEvent.COMPLETE, this.initUI, this)
this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
this.initItemList();
}
/**初始化itemList组件 */
private initItemList():void{
let self = this;
/*
let data = {
[0]:{
name:"角色",
flag:false,
info:0
},
[1]:{
name:"合击",
flag:false,
info:1
},
[2]:{
name:"转生",
flag:false,
info:2
},
[3]:{
name:"羽翼",
flag:false,
info:3
},
}
self.arrCollection = new eui.ArrayCollection();
self.arrCollection.addItem(data[0])
self.arrCollection.addItem(data[1])
self.arrCollection.addItem(data[2])
self.arrCollection.addItem(data[3])
*/
let data = [{
name:"角色",
flag:false,
info:0
},{
name:"合击",
flag:false,
info:1
},{
name:"转生",
flag:false,
info:2
},{
name:"转生",
flag:false,
info:3
},{
name:"转生",
flag:false,
info:4
},{
name:"羽翼",
flag:false,
info:5
}]
self.arrCollection = new eui.ArrayCollection(data);
self.list.itemRenderer = ItemDemoItemView;
self.list.dataProvider = self.arrCollection;
}
private onCloseBtn(): void {
App.ViewManager.playcloseView(1,this);
}
public dispose():void{
this.closeBtn.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
}
}4.创建\resource\skins\demo\ItemListDemoSkin.exml （ ItemList界面的View的skin文件）
<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ItemListDemoSkin" width="500" height="400" xmlns:e="http://ns.egret.com/eui"
xmlns:w="http://ns.egret.com/wing">
<e:Group width="400" height="300" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" verticalCenter="0">
<e:Group width="400" height="300" verticalCenter="0" horizontalCenter="0">
<e:Rect fillColor="0x097993" width="380" x="11" bottom="16" top="16" />
<e:Image source="table_box_down" x="0" bottom="0" anchorOffsetX="0" width="398" />
<e:Image source="table_box_up" x="0" top="0" anchorOffsetX="0" width="395" />
<e:Image source="table_box_middle" x="0" top="46" bottom="93" anchorOffsetX="0" width="398" />
</e:Group>
<e:Rect width="398" height="300" x="2" y="0" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xffffff" scaleX="1"
scaleY="1" visible="false" />
<e:Scroller width="366" height="260" anchorOffsetX="0" anchorOffsetY="0" y="20" scaleX="1" scaleY="1"
horizontalCenter="0">
<e:Group top="0" horizontalCenter="0">
<e:List id="list" y="6" itemRendererSkinName="ItemDemoItemView" x="20" horizontalCenter="0" anchorOffsetX="0" width="315">
<!--<e:ArrayCollection>
<e:Array>
<e:Object/>
<e:Object/>
<e:Object/>
<e:Object/>
<e:Object/>
<e:Object/>
</e:Array>
</e:ArrayCollection>-->
<e:layout>
<e:TileLayout id="giftOpenShowListLayout" horizontalAlign="left" requestedColumnCount="1" columnWidth="100"
rowHeight="96" paddingTop="30"/>
</e:layout>
</e:List>
</e:Group>
</e:Scroller>
<e:Button id="closeBtn" label="" x="328" y="1" anchorOffsetX="0" width="72" scaleX="1" scaleY="1">
<e:skinName>
<e:Skin states="up,down,disabled">
<e:Image width="100%" height="100%" source="btn_wrong" source.down="btn_wrong" source.disabled="btn_wrong" />
<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
</e:Skin>
</e:skinName>
</e:Button>
</e:Group>
</e:Skin>5.创建文件：\src\example\module\demo\list\ItemDemoItemView.ts （ ItemList界面中的Item的View文件）
class ItemDemoItemView extends eui.ItemRenderer {
constructor() {
super();
this.addEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
this.once(egret.Event.REMOVED_FROM_STAGE, this.dispose, this);
this.skinName = "resource/skins/demo/ItemDemoSkin.exml";
}
private titleDisplay: eui.Label;
private itembutton: eui.Button;
private uiCompHandler(): void {
this.removeEventListener(eui.UIEvent.COMPLETE, this.uiCompHandler, this);
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonHandler, this);
this.initData();
}
private onButtonHandler(e: egret.TouchEvent): void {
if (this.data.info != null) { //注意0是false
console.log("点击了这个按钮", this.data.info);
}
}
public initData() {
this.titleDisplay.text = "初始化";
}
public dataChanged(): void {
this.titleDisplay.text = this.data.name;
}
public dispose(): void {
this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonHandler, this);
}
}
6.创建\resource\skins\demo\ItemDemoSkin.exml (item的皮肤文件)
<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ItemDemoSkin" width="325" height="96" xmlns:e="http://ns.egret.com/eui">
<e:Image source="card_bg" anchorOffsetY="0" height="93" anchorOffsetX="0" width="319" scale9Grid="30,30,100,100"/>
<e:Group height="34" width="197.79" x="21.5" y="32.5" anchorOffsetX="0">
<e:Label id="titleDisplay" text="普通化肥" textColor="16777215" size="21" bold="true" horizontalCenter="-20.5" verticalCenter="3.5"/>
<e:Image source="icon_diamond" scaleX="0.5" scaleY="0.5" width="60" y="2" x="167.79"/>
<e:Image source="icon_02" x="-3" y="-5.5"/>
</e:Group>
<e:Button id="itembutton" label="B" x="228.89" y="32.5" anchorOffsetX="0" width="60" anchorOffsetY="0" height="34"/>
</e:Skin>7.打开\src\example\module\demo\DemoView.ts （为itemlist绑定好触发打开的按钮事件）
添加上按钮组件：
button2: eui.ToggleButton;initUI():void 中添加上按钮的监听：
this.button2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.button2ClickHandler, this);监听的事件函数：
private button2ClickHandler(e: egret.TouchEvent): void {
App.ViewManager.playopen(1, ViewConst.ItemListDemo);
}8.打开\src\example\test\DemoTest.ts （在demoTest中注册ItemListDemoController）
在 private initModule():void函数中加入：
App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController()); DemoTest.ts 参考代码：
/**
* Created by yangsong on 15-3-27.
* GUI测试
*/
class DemoTest{
public constructor(){
var groupName:string = "preload_DemoTest";
var subGroups:Array<string> = ["preload_core", "preload_ui"];
App.ResourceUtils.loadGroups(groupName, subGroups, this.onResourceLoadComplete, this.onResourceLoadProgress, this);
}
/**
* 资源组加载完成
*/
private onResourceLoadComplete():void {
this.initModule();
App.Init();
//音乐音效处理
App.SoundManager.setBgOn(true);
App.SoundManager.setEffectOn(!App.DeviceUtils.IsHtml5 || !App.DeviceUtils.IsMobile);
//App.SceneManager.runScene(SceneConsts.UI);
App.SceneManager.runScene(SceneConsts.Demo);
}
/**
* 资源组加载进度
*/
private onResourceLoadProgress(itemsLoaded:number, itemsTotal:number):void {
App.ControllerManager.applyFunc(ControllerConst.Loading, LoadingConst.SetProgress, itemsLoaded, itemsTotal);
}
/**
* 初始化所有模块
*/
private initModule():void{
App.ControllerManager.register(ControllerConst.Friend, new FriendController());
App.ControllerManager.register(ControllerConst.Demo, new DemoController());
App.ControllerManager.register(ControllerConst.TarbarDemo, new TarBarDemoController());
App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController());
}
}9.运行测试（源代码接下来几个笔记后会贴出来供参考）