Widget控件

var CustomTableViewCell = cc.TableViewCell.extend({
    draw: function (ctx) {
        this._super(ctx);
    }
});


var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        this._super();
        //获取到屏幕的大小
        var size = cc.winSize;//var size = cc.director.getWinSize();
        /***********************GUI获取控件对象****************************/
        var root = ccs.uiReader.widgetFromJsonFile("");
        var button = ccui.helper.seekWidgetByName(root,"123");






        /***********************Widget****************************/
        var widget  = new ccui.Widget();
        /*************与触摸相关的函数********/
        widget.setTouchEnabled(true);//设置是否启用触摸事件
        widget.isTouchEnabled();//判断是否启用触摸事件
        widget.addTouchEventListener(this.touchEvent,this);//触摸事件的回调函数
        widget.setSwallowTouches(true);
        /*************与启用相关的函数********/
        widget.setEnabled(false);//设置是否启用控件
        widget.isEnabled();//获取控件是否启用
        /*************与高亮相关的函数********/
        widget.setBright(false);//设置控件是否高亮，注意要和上面的setEnabled搭配使用才能使外观变灰状态
        widget.isBright();//获取控件是否高亮
        widget.setHighlighted(false);//设置控件状态为高亮状态
        widget.isHighlighted();//获取控件是否处于高亮状态
        widget.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);//设置高亮风格
        /*************与焦点相关的函数********/
        widget.isFocused();//查询是否拥有该焦点
        widget.setFocused(false);//切换控件是否拥有焦点
        widget.isFocusEnabled();//查询是否允许接受焦点
        widget.setFocusEnabled(false);//切换是否允许接受焦点
        widget.requestFocus();//请求获取焦点
        widget.onFocusChange(lostFocus,getFocus);//焦点更改事件发生时会调用此方法
        widget.getCurrentFocusedWidget();//获取当前拥有焦点的控件
        /*************与位置相关的函数********/
        widget.getLeftBoundary();//获取左边界在父节点坐标系中的位置
        widget.getBottomBoundary();//获取下边界在父节点坐标系中的位置
        widget.getRightBoundary();//获取右边界在父节点坐标系中的位置
        widget.getTopBoundary();//获取上边界在父节点坐标系中的位置
        widget.getWorldPosition();//获取控件在世界坐标系中的位置
        /*************百分比和启用布局控件相关的函数********/
        widget.getSizePercent();//获取控件的百分比尺寸
        widget.setSizePercent(30);//设置控件的百分比尺寸
        widget.isLayoutComponentEnabled();//获取是否启用布局组件的结果
        widget.setLayoutComponentEnabled(false);//设置是否启用布局组件
        this.addChild(widget);








        /***********************Buuton继承于Widget****************************/
        var button = new ccui.Button("ccs-res/cocosui/button.png", "ccs-res/cocosui/buttonHighlighted.png", "",1);//ccui.Widget.LOCAL_TEXTURE;ccui.Widget.PLIST_TEXTURE
        /*************3个状态纹理的相关函数**************/
        button.loadTextures("ccs-res/cocosui/button.png", "ccs-res/cocosui/buttonHighlighted.png", "",1);
        button.loadTextureNormal("ccs-res/cocosui/button.png",1);
        button.loadTexturePressed("ccs-res/cocosui/button.png",1);
        button.loadTextureDisabled("ccs-res/cocosui/button.png",1);
        /*************九宫格的相关函数**************/
        button.isScale9Enabled();//判断按钮是否为九宫格模式
        button.setScale9Enabled(true);//设置按钮为九宫格模式
        /*************文本内容相关的函数**************/
        button.getTitleText();//获取按钮文本内容
        button.setTitleText("string");//设置按钮文本内容
        button.getTitleColor();//获取按钮文本颜色
        button.setTitleColor(cc.color(0x21,0x22,0x23,0x144));//设置按钮文本颜色
        button.getTitleFontSize();//获取按钮文本字号大小
        button.setTitleFontSize(cc.size(10));//设置按钮文本字号大小
        button.getTitleFontName();//获取按钮文本名字
        button.setTitleFontName("123");//设置按钮文本名字
        /*************缩放效果相关的函数**************/
        button.getZoomScale();//获取一个缩放比例
        button.setZoomScale(0.6);//设置一个缩放比例
        button.setPressedActionEnabled(false);//设置启用按钮被按下时的缩放的动作




        button.setTouchEnabled(true);
        button.setContentSize(cc.size(150, 48));
        button.ignoreContentAdaptWithSize(false);////如果设置为true，忽略内容适应，使用系统默认的渲染大小，与实际的图片资源大小无关
        button.setPressedActionEnabled(true);//设置按钮是否启用点击缩放的效果
        button.setZoomScale(0.3);//点击缩放到原来的0.3
        button.setNormalizedPosition(0.5, 0.5)    //Node的位置像素会根据它的父节点的尺寸大小计算
        button.x = size / 2.0;
        button.y = size / 2.0;
        button.addTouchEventListener(this.touchEvent ,this);
        //button.addClickEventListener(function(sender,type){
        //switch (type){
        //    case ccui.Widget.TOUCH_BEGAN:
        //        console.log("TOUCH_BEGAN");
        //        break;
        //    case ccui.Widget.TOUCH_MOVED:
        //        console.log("TOUCH_MOVED");
        //        break;
        //    case ccui.Widget.TOUCH_ENDED:
        //        console.log("TOUCH_ENDED");
        //        break;
        //    case ccui.Widget.TOUCH_CANCELED:
        //        console.log("TOUCH_CANCELED");
        //        break;
        //    default:
        //        break;
        //}
        //});
        this.addChild(button);
        //说明：Widget对象中button.ignoreContentAdaptWithSize(false);和 button.setContentSize(cc.size(150, 48));同时使用起到自动缩放的功能。






        /***********************CheckBox继承于Widget****************************/
        var checkBox = new ccui.CheckBox("ccs-res/cocosui/check_box_normal.png", "ccs-res/cocosui/check_box_normal_press.png","ccs-res/cocosui/check_box_active.png","ccs-res/cocosui/check_box_normal_disable.png","ccs-res/cocosui/check_box_active_disable.png",cc.Widget.PLIST_TEXTURE);;
        checkBox.loadTextures("ccs-res/cocosui/check_box_normal.png",//未选中常态纹理
            "ccs-res/cocosui/check_box_normal_press.png",//背景选中状态纹理
            "ccs-res/cocosui/check_box_active.png",//勾选选中状态纹理
            "ccs-res/cocosui/check_box_normal_disable.png",//背景禁用状态纹理
            "ccs-res/cocosui/check_box_active_disable.png",//勾选禁用状态纹理
            ccui.Widget.PLIST_TEXTURE//纹理类型
        );//加载相关状态纹理以及纹理类型
        checkBox.loadTextureBackGround("ccs-res/cocosui/check_box_normal.png", ccui.Widget.PLIST_TEXTURE);//加载未选中常态纹理以及纹理类型
        checkBox.loadTextureBackGroundSelected("ccs-res/cocosui/check_box_normal.png", ccui.Widget.PLIST_TEXTURE);//加载背景选中状态纹理以及纹理类型
        checkBox.loadTextureFrontCross("ccs-res/cocosui/check_box_normal.png", ccui.Widget.PLIST_TEXTURE);//加载选中状态纹理以及纹理类型
        checkBox.loadTextureBackGroundDisabled("ccs-res/cocosui/check_box_normal.png", ccui.Widget.PLIST_TEXTURE);//加载背景禁用状态纹理以及纹理类型
        checkBox.loadTextureFrontCrossDisabled("ccs-res/cocosui/check_box_normal.png", ccui.Widget.PLIST_TEXTURE);//加载勾选禁用状态纹理以及纹理类型
        checkBox.isSelected();//获取是否选中的结果
        checkBox.setSelected(false);//设置是否选中
        checkBox.addEventListener(this.selectedStateEvent, this);//添加事件监听器






        checkBox.setEnabled(false);//不可点击
        checkBox.setBright(false);//变灰
        checkBox.ignoreContentAdaptWithSize(false);
        checkBox.setZoomScale(0.5);
        checkBox.setContentSize(cc.size(80,80));
        checkBox.setTouchEnabled(true);
        checkBox.x = size.width / 2.0;
        checkBox.y = size.height / 2.0;
        this.addChild(checkBox);








        /***********************ImageView继承于Widget****************************/
        var imageView = new ccui.ImageView("ccs-res/cocosui/buttonHighlighted.png");
        imageView.loadTexture("ccs-res/cocosui/buttonHighlighted.png",ccui.Widget.PLIST_TEXTURE);//加载纹理图片以及纹理图片类型
        imageView.setTextureRect(cc.rect(0,0,20,30));//设置纹理区域
        imageView.setScale9Enabled(true);//设置为九宫格
        imageView.isScale9Enabled();//获取是否为九宫格的结果




        imageView.setContentSize(cc.size(200, 80));
        imageView.setPosition(cc.p(size.width / 2, size.height / 2));
        imageView.setSizeType(ccui.Widget.SIZE_PERCENT);//设置大小类型
        imageView.setPositionType(ccui.Widget.POSITION_PERCENT);//设置位置类型
        imageView.setSizePercent(cc.p(0.5, 0.5));//设置大小比例
        imageView.setPositionPercent(cc.p(0.5, 0.5));//设置位置比例
        imageView.setFlippedX(true);
        imageView.setScale(0.5);
        imageView.ignoreContentAdaptWithSize(false);
        imageView.setTouchEnabled(true);
        imageView.addTouchEventListener(function(sender, type){
            if (type == ccui.Widget.TOUCH_ENDED) {
                console.log("TOUCH_ENDED");
            }
        });
        this.addChild(imageView);






        /***********************Text继承于Widget****************************/
        var text = new ccui.Text("TextArea Widget can line wrap","AmericanTypewriter",32);//文本内容、字体文件或者字体名称、字体大小
        text.setString("Label Effect");//设置内容
        text.getString();//获取内容
        text.getFontSize();//获取字号大小
        text.setFontSize(30);//设置字号大小
        text.getFontName();//获取字体文件或名称
        text.setFontName("Marker Felt");//设置字体文件或名称
        text.getTextColor();//获取文本颜色
        text.setTextColor(cc.color(100,10,150,255));//设置文本颜色
        text.getType();//获取类型  ccui.Text.Type.SYSTEM:表示系统字体  ccui.Text.Type.TTF:表示TTF文字字体
        text.getTextHorizontalAlignment();//获取文本水平对齐方式
        text.setTextHorizontalAlignment(cc.TEXT_ALIGNMENT_LEFT);//设置文本水平对齐方式 TEXT_ALIGNMENT_RIGHT、TEXT_ALIGNMENT_CENTER
        text.getTextVerticalAlignment();//获取文本垂直对齐方式
        text.setTextVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_TOP);//设置文本垂直对齐方式VERTICAL_TEXT_ALIGNMENT_CENTER、VERTICAL_TEXT_ALIGNMENT_BUTTOM
        text.enableShadow(cc.color.GRAY, cc.p(10, -10),false);//启用文本阴影效果，仅TTF字体对象有效
        text.enableOutline(cc.color.BLUE, 2);//启用文本描边效果，仅TTF字体对象有效
        text.enableGlow(cc.color.RED);//启用文本荧光效果，仅TTF字体对象有效




        //text.boundingWidth = 280;
        //text.boundingHeight = 150;
        text.attr({
            textAlign: cc.TEXT_ALIGNMENT_CENTER,
            string: "Label TTF",
            font: "32px mericanTypewriter",
            x: this._widget.width / 2,
            y: this._widget.height / 2 - text.height / 8
        });
        text.ignoreContentAdaptWithSize(false);//为TRUE时忽略自定义的大小，为FALSE时自定义大小是多少就是多少
        text.setTextAreaSize(cc.size(60,60));//设置文本区域
        text.setContentSize(cc.size(280, 150));//设置Text的大小
        text.setTouchScaleChangeEnabled(true);//激活触摸缩放
        text.setColor(cc.color(159, 168, 176));
        text.setTouchEnabled(true);
        text.addTouchEventListener(function(sender, type){
            if (type == ccui.Widget.TOUCH_ENDED){
                if (text.width == 280){
                    text.setContentSize(cc.size(380,100));
                }else {
                    text.setContentSize(cc.size(280, 150));
                }
            }
        });
        text.setPosition(size.width / 2, size.height / 2 - text.height / 8);
        this.addChild(text);






        /***********************LoadingBar继承于Widget****************************/
        var loadingBar = new ccui.LoadingBar();
        loadingBar.setName("LoadingBar");
        loadingBar.loadTexture("ccs-res/cocosui/sliderProgress.png");
        loadingBar.setDirection(ccui.LoadingBar.TYPE_RIGHT);//设置方向
        loadingBar.setPercent(0);//设置进度比例
        loadingBar.x = size.width / 2;
        loadingBar.y = size.height / 2 + loadingBar.height / 4;
        loadingBar.setScale9Enabled(true);
        loadingBar.setCapInsets(cc.rect(0, 0, 0, 0));//和图片缩放有关，特别是在九宫格里用的最多
        loadingBar.setContentSize(cc.size(300, 30));
        this.addChild(loadingBar);




        /***********************RichText继承于Widget****************************/
        var richText = new ccui.RichText();
        richText.ignoreContentAdaptWithSize(false);
        richText.x = size.width / 2;
        richText.y = size.height / 2;
        richText.width = 120;
        richText.height = 100;
        //整句话可以采取分段形式


        //放入一段文本
        var re1 = new ccui.RichElementText(1, cc.color.WHITE, 255, "This color is white. ", "Helvetica", 10);
        var re2 = new ccui.RichElementText(2, cc.color.YELLOW, 255, "And this is yellow. ", "Helvetica", 10);
        var re3 = new ccui.RichElementText(3, cc.color.BLUE, 255, "This one is blue. ", "Helvetica", 10);
        var re4 = new ccui.RichElementText(4, cc.color.GREEN, 255, "And green. ", "Helvetica", 10);
        var re5 = new ccui.RichElementText(5, cc.color.RED, 255, "Last one is red ", "Helvetica", 10);


        //放入一张图片
        var reimg = new ccui.RichElementImage(6, cc.color.WHITE, 255, "ccs-res/cocosui/sliderballnormal.png");
        //放入一个动画
        ccs.armatureDataManager.addArmatureFileInfo("ccs-res/cocosui/100/100.ExportJson");
        var pAr = new ccs.Armature("100");
        pAr.getAnimation().play("Animation1");
        var recustom = new ccui.RichElementCustomNode(1, cc.color.WHITE, 255, pAr);


        var re6 = new ccui.RichElementText(7, cc.color.ORANGE, 255, "Have fun!! ", "Helvetica", 10);
        richText.pushBackElement(re1);
        richText.insertElement(re2, 1);
        richText.pushBackElement(re3);
        richText.pushBackElement(re4);
        richText.pushBackElement(re5);
        richText.insertElement(reimg, 2);
        richText.pushBackElement(recustom);
        richText.pushBackElement(re6);
        this.addChild(richText);




        /***********************TextField继承于Widget****************************/
        var textField = new ccui.TextField("PlaceHolder", "Marker Felt", 30);
        textField.x = size.width / 2.0;
        textField.y = size.height / 2.0;
        textField.onTextFieldAttachWithIME(this.textFieldEvent);// 挂载输入法时的回调函数   并非这里面实现的内容，只是借用这函数，函数带一个参数
        textField.onTextFieldDetachWithIME(this.textFieldEvent);// 取消挂载输入法时的回调函数
        textField.onTextFieldInsertText(this.textFieldEvent,"123",3);//插入文本时的回调函数，其参数如下，sender：文本编辑框实例。text：将要插入的字符串  len:j将要插入的字符串长度
        textField.onTextFieldDeleteBackward(this.textFieldEvent,"123",3);//删除文本时的回调函数，其参数如下。sender：文本编辑框实例。text：将要删除的字符串  len:j将要插入的字符串长度
        textField.insertText("123",3);//插入文本
        textField.deleteBackward();//回退删除
        textField.openIME();//打开输入法编辑器
        textField.closeIME();//关闭输入法编辑器
        textField.setMaxLengthEnabled(false);//启用最大长度限制
        textField.isMaxLengthEnabled();//获取是否启用了最大长度限制的结果
        textField.setMaxLength(29);//设置最大长度
        textField.getMaxLength();//获取最大长度
        textField.getCharCount();//获取总共输入的字数
        textField.setPasswordEnabled(false);//启用密码输入模式
        textField.isPasswordEnabled();//获取是否启用密码输入模式的结果
        textField.setPasswordStyleText("234");//设置密码模式下的文本样式
        textField.setPasswordText("123");//设置密码
        textField.setAttachWithIME(false);//设置是否挂载输入法编辑器
        textField.getAttachWithIME();//获取是否挂载输入法编辑器的结果
        textField.setDetachWithIME(false);//设置是否取消挂载输入法编辑器
        textField.getDetachWithIME();//获取是否取消挂载输入法编辑器的结果
        textField.setInsertText("123");//设置是否允许文本输入
        textField.getInsertText();//获取是否允许文本输入的结果
        textField.setDeleteBackward(false);//设置是否允许回删
        textField.getDeleteBackward();//获取是否允许回删的结果






        textField.setTouchEnabled(true);
        textField.ignoreContentAdaptWithSize(false);
        textField.setContentSize(240, 120);//和上面一句设置换行
        textField.getVirtualRenderer().setLineBreakWithoutSpace(true);//这句开启换行功能
        textField.fontName = "Marker Felt";
        textField.fontSize = 30;
        textField.placeHolder = "input words here";
        textField.setString("input words here");
        textField.setTextHorizontalAlignment(cc.TEXT_ALIGNMENT_CENTER);
        textField.setTextVerticalAlignment(cc.TEXT_ALIGNMENT_CENTER);
        textField.addEventListener(this.textFieldEvent, this);


        this.addChild(textField);




        /***********************Slider继承于Widget****************************/
        var slider = new ccui.Slider();
        slider.setTouchEnabled(true);
        slider.loadBarTexture("ccs-res/cocosui/sliderTrack.png");
        slider.loadSlidBallTextures("ccs-res/cocosui/sliderThumb.png", "ccs-res/cocosui/sliderThumb.png", "");
        slider.loadProgressBarTexture("ccs-res/cocosui/sliderProgress.png");
        slider.x = size.width / 2.0;
        slider.y = size.height / 2.0;
        slider.addTouchEventListener(this.sliderEvent, this);
        this.addChild(slider);






        /***********************Layout继承于Widget****************************/
        var layout = new ccui.Layout();
        /**************与背景颜色相关的函数*******************/
        layout.getBackGroundColorType();//获取背景颜色类型
        layout.setBackGroundColorType(ccui.Layout.BG_COLOR_SOLID);//设置背景颜色类型 单色
        layout.getBackGroundColor();//获取背景颜色
        layout.setBackGroundColor(cc.color(128, 128, 128));//设置背景颜色
        layout.getBackGroundStartColor();//获取渐变背景颜色开始的值
        layout.getBackGroundEndColor();//获取渐变背景颜色结束的值
        layout.getBackGroundColorOpacity();//获取背景颜色不透明度
        layout.setBackGroundColorOpacity(123);//获取背景颜色向量
        layout.getBackGroundColorVector();//获取背景颜色向量
        layout.setBackGroundColorVector(cc.vector());//设置背景颜色向量
        /**************与背景颜色图片的函数*******************/
        layout.setBackGroundImage("123",ccui.Widget.PLIST_TEXTURE);//设置背景图片
        layout.removeBackGroundImage();//移除背景图片
        layout.getBackGroundImageColor();//获取背景图片颜色
        layout.setBackGroundImageColor(cc.color(125,125,125,125));//设置背景图片颜色
        layout.getBackGroundImageOpacity();//获取背景图片不透明度
        layout.setBackGroundImageOpacity(123);//设置背景图片不透明度
        layout.getBackGroundImageTextureSize();//获取背景图片纹理大小
        layout.isBackGroundImageScale9Enabled();//背景图片是否启用九宫格
        layout.setBackGroundImageScale9Enabled(false);//开启/关闭背景图片九宫格模式
        /**************其他相关的函数*******************/
        layout.setLayoutType(ccui.LayoutParameter.LINEAR_VERTICAL);//设置布局类型
        layout.getLayoutType();//获得布局类型
        layout.requestDoLayout();//请求刷新布局
        layout.forceDoLayout();//强制刷新布局
        layout.isClippingEnabled();//获取是否开启了裁剪的结果
        layout.setClippingEnabled(false);//设置是否开启裁剪
        layout.isLoopFocus();//获取是否启用循环焦点的结果
        layout.setLoopFocus(false);//设置是否启用循环焦点
        layout.isPassFocusToChild();//获取是否允许传递焦点到子节点上的结果
        layout.setPassFocusToChild(false);//设置是否允许传递焦点到子节点上
        layout.getClippingType();//获取裁剪类型
        layout.setClippingType(1);//设置裁剪类型
        layout.findNextFocusedWidget(ccui.Widget.LEFT,this);//获取指定方向中的下一个能够具有焦点的控件




        //裁剪必须结合下面两个函数使用
        layout.setContentSize(cc.size(280, 150));
        layout.setClippingEnabled(true);//允许剪裁
        this.addChild(layout);


        this.button = new ccui.Button();
        this.button.setTouchEnabled(true);
        this.button.loadTextures("ccs-res/cocosui/animationbuttonnormal.png", "ccs-res/cocosui/animationbuttonpressed.png", "");
        this.button.x = this.button.width / 2;
        this.button.y = layoutRect.height - this.button.height / 2;
        layout.addChild(this.button);


        //垂直布局
        //布局参数
        var lp = new ccui.LinearLayoutParameter();
        this.button.setLayoutParameter(lp);
        lp.setGravity(ccui.LinearLayoutParameter.CENTER_HORIZONTAL);//线性布局对齐方式
        lp.setMargin(new ccui.Margin(0,10,0,10))


        this.button_scale9 = new ccui.Button();
        this.button_scale9.setTouchEnabled(true);
        this.button_scale9.setScale9Enabled(true);
        this.button_scale9.loadTextures("ccs-res/cocosui/backtotopnormal.png", "ccs-res/cocosui/backtotoppressed.png", "");
        this.button_scale9.setTitleText("Text Button");
        this.button_scale9.x = size / 2;
        this.button_scale9.y = size / 2;
        layout.addChild(this.button_scale9);






        /***********************ScrollView继承于Layout****************************/
        var scrollView = new ccui.ScrollView();
        this.addChild(scrollView);


        var imageView = new ccui.ImageView();
        imageView.loadTexture("ccs-res/cocosui/ccicon.png");
        //ScrollView布局格式为DIR_HORIZONTAL使用这个
        var innerWidth = scrollView.width;
        var innerHeight = scrollView.height + imageView.height;
        //ScrollView布局格式为DIR_HORIZONTAL使用这个
        var scrollViewRect = scrollView.getContentSize();
        var innerWidth = scrollViewRect.width + imageView.getContentSize().width;
        var innerHeight = scrollViewRect.height;


        /*****************与方向相关的函数*******************/
        scrollView.getDirection();//获取方向
        scrollView.setDirection(ccui.ScrollView.DIR_VERTICAL);//设置方向
        /*****************与惯性、弹力效果相关的函数*******************/
        scrollView.isInertiaScrollEnabled();//获取是否开启滚动惯性效果的结果
        scrollView.setInertiaScrollEnabled(false);//设置是否开启滚动惯性效果
        scrollView.isBounceEnabled();//获取是否开启弹力效果的结果
        scrollView.setBounceEnabled(false);//设置是否开启弹力效果
        /*****************与容器及其大小相关的函数*******************/
        scrollView.getInnerContainer();//获取滚动视图的内部布局容器
        scrollView.getInnerContainerSize();//获取内部容器的大小
        scrollView.setInnerContainerSize(cc.size(innerWidth, innerHeight));//设置内部容器的大小
        /*****************与触摸事件相关的函数*******************/
        scrollView.onTouchBegan(function (touch,event) {
            return true;
        });
        scrollView.onTouchMoved(function (touch,event) {
        });
        scrollView.onTouchEnded(function (touch,event) {
        });
        scrollView.onTouchCancelled(function (touch,event) {
        });
        scrollView.addEventListener(function (touch,event) {
        });
        /*****************与滚动相关的函数*******************/
        scrollView.scrollToBottom(0.2,false);//滚动到滚动视图的底部         持续时间、滚动速度是否衰减
        scrollView.scrollToTop(0.2,false);//滚动到滚动视图的顶部
        scrollView.scrollToLeft(0.2,false);//滚动到视图的左端
        scrollView.scrollToRight(0.2,false);//滚动到视图的右端
        scrollView.scrollToTopLeft(0.2,false);//滚动到视图的左上角
        scrollView.scrollToTopRight(0.2,false);////滚动到视图的右上角
        scrollView.scrollToBottomLeft(0.2,false);////滚动到视图的左下角
        scrollView.scrollToBottomRight(0.2,false);////滚动到视图的右下角
        scrollView.scrollToPercentVertical(10,0.2,false);//按百分比竖直滚动
        scrollView.scrollToPercentHorizontal(10,0.2,false);//按百分比水平滚动
        scrollView.scrollToPercentBothDirection(cc.p(10,10),0.2,false);//竖直方向和水平方向分别按一定的百分比滚动
        /*****************与跳跃相关的函数*******************/
        //  cocos2d-js中listView的jumpToBottom()方法无效的解决方法
        //  本文提供两种解决方法：
        //  一、延时调用
        //  listView2.runAction(cc.sequence(cc.delayTime(0.1),cc.callFunc(function () {
        //            listView2.jumpToBottom();
        //        })),this);
        //        在listViwe创建（从cocostudio中获取）完毕并添加Item之后延时调用jumpToBottom()方法！
        //  二、更新视图
        //  var listView2 = ccui.helper.seekWidgetByName(this.mainscene,"ListView_2");
        //  listView2.refreshView();
        //  ……添加Item
        //  listView2.jumpToBottom();
        //  在listView创建（获取）之后先调用refreshView()方法更新list，再添加Item之后调用jumpToBottom()方法！
        //三、而scrollToBottom()暂时只能用延时的方法，解决初始化直接用不起作用的bug！
        scrollView.jumpToBottom();//跳到视图底端
        scrollView.jumpToTop();//跳到视图顶端
        scrollView.jumpToLeft();//跳到视图左边
        scrollView.jumpToRight();//跳到视图右边
        scrollView.jumpToTopLeft();//跳到视图左上角
        scrollView.jumpToTopRight();//跳到视图右上角
        scrollView.jumpToBottomLeft();//跳到视图右上角
        scrollView.jumpToBottomRight();//跳到视图右下角
        scrollView.jumpToPercentVertical(10);//竖直方向跳到指定百分比位置
        scrollView.jumpToPercentHorizontal(10);//水平方向跳到指定百分比位置
        scrollView.jumpToPercentBothDirection(cc.p(10,10));//竖直和水平方向跳到指定百分比位置






        scrollView.setTouchEnabled(true);
        scrollView.setContentSize(cc.size(280, 150));
        scrollView.x = (size.width) / 2 ;
        scrollView.y = size.height / 2;
        scrollView.setBackGroundColor(cc.color.GREEN);
        scrollView.setBackGroundColorType(ccui.Layout.BG_COLOR_SOLID);


        var button = new ccui.Button();
        button.setTouchEnabled(true);
        button.loadTextures("ccs-res/cocosui/animationbuttonnormal.png", "ccs-res/cocosui/animationbuttonpressed.png", "");
        button.x = innerWidth / 2;
        button.y = scrollView.getInnerContainerSize().height - button.height / 2;
        scrollView.addChild(button);


        var textButton = new ccui.Button();
        textButton.setTouchEnabled(true);
        textButton.loadTextures("ccs-res/cocosui/backtotopnormal.png", "ccs-res/cocosui/backtotoppressed.png", "");
        textButton.setTitleText("Text Button");
        textButton.x = innerWidth / 2;
        textButton.y = button.getBottomBoundary() - button.height;
        scrollView.addChild(textButton);


        var button_scale9 = new ccui.Button();
        button_scale9.setTouchEnabled(true);
        button_scale9.setScale9Enabled(true);
        button_scale9.loadTextures("ccs-res/cocosui/button.png", "ccs-res/cocosui/buttonHighlighted.png", "");
        button_scale9.width = 100;
        button_scale9.height = 32;
        button_scale9.x = innerWidth / 2;
        button_scale9.y = textButton.getBottomBoundary() - textButton.height;
        scrollView.addChild(button_scale9);


        //ScrollView布局格式为DIR_VERTICAL使用这个
        imageView.x = innerWidth / 2;
        imageView.y = imageView.height / 2;
        //ScrollView布局格式为DIR_HORIZONTAL使用这个
        imageView.x = innerWidth - imageView.width / 2;
        imageView.y = button_scale9.getBottomBoundary() - button_scale9.height / 2;
        scrollView.addChild(imageView);






        /***********************TableView继承于ScrollView****************************/
        //创建一个tableview
        var tableView = new cc.TableView(this, cc.size(500, 100 * 4));
        tableView.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);设置tableview的滑动的方向
        tableView.x = 100;
        tableView.y = 200;
        // 设置委托
        tableView.setDelegate(this);
        tableView.setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN);//tableView填充方式  (cc.TABLEVIEW_FILL_BOTTOMUP)
        this.addChild(tableView);
        //更新tableview
        tableView.reloadData();


        /***********************ListView继承于ScrollView****************************/
        this.listView = new ccui.ListView();
        /***************项操作的相关函数*****************/
        this.listView.setItemModel(widget);//设置项的模型
        this.listView.pushBackDefaultItem();//插入一个默认项(通过克隆模式创建)到列表视图的尾部
        this.listView.insertDefaultItem(1);//插入一个默认项(通过克隆模式创建)到列表视图的指定位置
        this.listView.pushBackCustomItem(widget);//插入一个自定义项到列表视图的尾部
        this.listView.insertCustomItem(widget,1);//插入自定义UI控件到列表视图中指定索引处
        this.listView.removeItem(1);//删除给定索引的项
        this.listView.removeLastItem();//删除最后一个项
        this.listView.removeAllItems();//删除所有项
        this.listView.getItem(1);//获取给定索引的项
        this.listView.getItems();//获取所有项
        this.listView.getIndex(widget);//获取指定项的索引
        this.listView.getCurSelectedIndex();//获取当前所选项的索引
        /***************边距、对齐方式以及方向相关的函数*****************/
        this.listView.getItemsMargin();//获取每个项之间的边距
        this.listView.setItemsMargin(1);//设置每个项之间的边距
        this.listView.getGravity();//获取对齐方式
        this.listView.setGravity(ccui.ListView.GRAVITY_RIGHT);//设置对齐方式
        this.listView.getDirection();//获取方向
        this.listView.setDirection(1);//设置方向
        /***************刷新相关的函数*****************/
        this.listView.requestRefreshView();//请求刷新视图和布局
        this.listView.refreshView();//刷新列表视图的视图
        this.listView.forceDoLayout();//强制刷新控件的布局
        this.listView.doLayout();//请求刷星控件的布局






        this.listView.setDirection(ccui.ScrollView.DIR_VERTICAL);//方向
        this.listView.setTouchEnabled(true);
        this.listView.setBounceEnabled(true);//是否反弹
        this.listView.setBackGroundImage("ccs-res/cocosui/green_edit.png");//背景图片
        this.listView.setBackGroundImageScale9Enabled(true);//九宫格
        this.listView.setScrollBarWidth(30); //滚动条的宽度
        this.listView.setScrollBarColor(cc.RED); //滚动条的颜色
        this.listView.setScrollBarPositionFromCorner(cc.p(7, 7));
        this.listView.setContentSize(cc.size(240, 130));
        this.listView.setAnchorPoint(cc.p(0.5 ,0.5));
        this.listView.x = size/ 2;
        this.listView.y = size / 2;
        this.listView.addEventListener(this.selectedItemEvent, this);
        this.addChild(this.listView);


        //创建一个按钮
        var default_button = new ccui.Button();
        default_button.setName("TextButton");
        default_button.setTouchEnabled(true);
        default_button.loadTextures("ccs-res/cocosui/backtotoppressed.png", "ccs-res/cocosui/backtotopnormal.png", "");


        //创建layout（模型）
        var default_item = new ccui.Layout();
        default_item.setTouchEnabled(true);
        default_item.setContentSize(default_button.getContentSize());
        default_item.width = this.listView.width;
        default_button.x = default_item.width / 2;
        default_button.y = default_item.height / 2;
        default_item.addChild(default_button);
        this.listView.setItemModel(default_item);//设置模型
        this._array = [];
        for (var i = 0; i < this._totalCount; ++i) {
            this._array.push("item_" + i);
        }
        for(var i = 0; i < 100; ++i) {
            if (i < 8) {
                var item = default_item.clone();
                item.setTag(i);
                var btn = item.getChildByName('TextButton');
                btn.setTitleText(this._array[i]);
                this.listView.pushBackCustomItem(item);
            }
        }






        /***********************PageView继承于ListView****************************/
        var pageView = new ccui.PageView();
        /****************添加、删除、查询页相关的函数******************/
        pageView.addPage(layout);//往分页视图的最后插入一页
        pageView.addWidgetToPage(widget,1,false);//把一个UI控件添加到分页视图中
        pageView.insertPage(layout,1);//在指定位置插入一页
        pageView.removePage(layout);//移除一页
        pageView.removePageAtIndex(1);//移除指定位置的页
        pageView.removeAllPages();//移除所有页
        pageView.setCurrentPageIndex(1);//跳入指定的页
        pageView.getCurrentPageIndex();//获取当前显示页的索引号
        pageView.getPages();//获取所有页的列表
        pageView.getPage(1);//获取指定的页
        //cocos2d-js中PageView的scrollToPage()方法直接使用无效的解决方法
        //contentPageView.runAction(cc.sequence(cc.delayTime(0.1),cc.callFunc(function () {
        //contentPageView.scrollToPage(index);
        //})),this);
        pageView.scrollToPage(1);//滚动到一个指定的页
        /****************滑动临界值相关的函数******************/
        pageView.setCustomScrollThreshold(1);//设置自定义滚动临界值
        pageView.getCustomScrollThreshold();//获取自定义滚动临界值
        pageView.setUsingCustomScrollThreshold(false);//设置是否使用自定义滚动临界值
        pageView.isUsingCustomScrollThreshold();//获取是否使用自定义滚动临界值的结果
        pageView.addEventListener(this.pageViewEvent, this);






        pageView.setTouchEnabled(true);
        pageView.setContentSize(cc.size(240, 130));
        var backgroundSize = background.getContentSize();
        pageView.setPosition(cc.p((size.width - backgroundSize.width) / 2.0 +
            (backgroundSize.width - pageView.getContentSize().width) / 2.0,
            (size.height - backgroundSize.height) / 2.0 +
            (backgroundSize.height - pageView.getContentSize().height) / 2.0));


        for (var i = 0; i < 3; ++i) {
            //layout
            var layout = new ccui.Layout();
            layout.setContentSize(cc.size(240, 130));
            var layoutRect = layout.getContentSize();


            //imageView
            var imageView = new ccui.ImageView();
            imageView.setTouchEnabled(true);
            imageView.setScale9Enabled(true);
            imageView.loadTexture("ccs-res/cocosui/scrollviewbg.png");
            imageView.setContentSize(cc.size(240, 130));
            imageView.x = layoutRect.width / 2;
            imageView.y = layoutRect.height / 2;
            layout.addChild(imageView);


            var text = new ccui.Text();
            text.string = "page" + (i + 1);
            text.font = "30px 'Marker Felt'";
            text.color = cc.color(192, 192, 192);
            text.x = layoutRect.width / 2;
            text.y = layoutRect.height / 2;
            layout.addChild(text);


            pageView.insertPage(layout, i);
        }
        this.addChild(pageView);




        /***********************EditBox****************************/
        var editBox = new ccui.EditBox(cc.size(360.00,53.00),new cc.Scale9Sprite("ccs-res/cocosui/sliderThumb.png"));
        editBox.x = size.width/2;
        editBox.y = size.height/2;
        editBox.setDelegate(this);
        editBox.setMaxLength(20);
        editBox.setPlaceHolder("点击输出账号");
        editBox.setInputFlag(cc.EDITBOX_INPUT_FLAG_SENSITIVE);//修改为不使用密文
        editBox.setInputMode(cc.EDITBOX_INPUT_MODE_ANY);
        editBox.setReturnType(cc.KEYBOARD_RETURNTYPE_DONE);
        this.addChild(editBox);




        /***********************Scale9Sprite****************************/
        var sprTV = new cc.Scale9Sprite("ccs-res/cocosui/sliderThumb.png", cc.rect(0, 0, 26, 26), cc.rect(10, 10, 7, 7));
        sprTV.x = size.width/2;
        sprTV.y = size.height/2;
        sprTV.width = sprTV.width + 20;
        sprTV.height = sprTV.height + 20;
        this.addChild(sprTV, 5);








        return true;
    },
    /********************************Button***********************************/
    touchEvent: function (sender,type) {
        switch (type){
            case ccui.Widget.TOUCH_BEGAN:
                console.log("TOUCH_BEGAN");
                break;
            case ccui.Widget.TOUCH_MOVED:
                console.log("TOUCH_MOVED");
                break;
            case ccui.Widget.TOUCH_ENDED:
                console.log("TOUCH_ENDED");
                break;
            case ccui.Widget.TOUCH_CANCELED:
                console.log("TOUCH_CANCELED");
                break;
            default:
                break;
        }
    },
    /********************************CheckBox***********************************/
    selectedStateEvent: function (sender, type) {
        switch (type) {
            case  ccui.CheckBox.EVENT_UNSELECTED:
                console.log("EVENT_UNSELECTED");
                break;
            case ccui.CheckBox.EVENT_SELECTED:
                console.log("EVENT_SELECTED");
                break;
            default:
                break;
        }
    },
    /********************************ListView***********************************/
    selectedItemEvent: function (sender, type) {
        switch (type) {
            case ccui.ListView.EVENT_SELECTED_ITEM:
                var listViewEx = sender;
                var item = listViewEx.getItem(listViewEx.getCurSelectedIndex());
                cc.log("select child index = " + item.getTag());
                break;
            default:
                break;
        }
    },
    /********************************PageView***********************************/
    pageViewEvent: function (sender, type) {
        switch (type) {
            case ccui.PageView.EVENT_TURNING:
                var pageView = sender;
                console.log("page = " + (pageView.getCurrentPageIndex().valueOf()-0 + 1));
                break;
            default:
                break;
        }
    },
    /********************************Slider***********************************/
    sliderEvent: function (sender, type) {
        switch (type) {
            case ccui.Slider.EVENT_PERCENT_CHANGED:
                var slider = sender;
                var percent = slider.getPercent();
                console.log(percent.toFixed(0));
                break;
            default:
                break;
        }
    },
    /********************************TextField***********************************/
    textFieldEvent: function (textField, type) {
        switch (type) {
            case ccui.TextField.EVENT_ATTACH_WITH_IME://光标进入输入框
                console.log("EVENT_ATTACH_WITH_IME");
                break;
            case ccui.TextField.EVENT_DETACH_WITH_IME://光标离开输入框
                console.log("EVENT_DETACH_WITH_IME");
                break;
            case ccui.TextField.EVENT_INSERT_TEXT://输入文本
                console.log("EVENT_INSERT_TEXT");
                break;
            case ccui.TextField.EVENT_DELETE_BACKWARD://删除文本
                console.log("EVENT_DELETE_BACKWARD");
                break;
            default:
                break;
        }
    },
    /********************************EditBox***********************************/
    editBoxEditingDidBegin: function (editBox) {
        cc.log("editBox " + editBox.getName() + " DidBegin !");
    },


    editBoxEditingDidEnd: function (editBox) {
        cc.log("editBox " + editBox.getName() + " DidEnd !");
    },


    editBoxTextChanged: function (editBox, text) {
        cc.log("editBox " + editBox.getName() + ", TextChanged, text: " + text);
    },
    editBoxReturn: function (editBox) {
        cc.log("editBox " + editBox.getName() + " was returned !");
    },
    /********************************Slider***********************************/
    onSliderEvent: function (sender, type) {
        switch (type) {
            case ccui.Slider.EVENT_PERCENT_CHANGED://滑块滑动
                var percent = sender.getPercent();
                console.log("百分比: "+percent.toFixed(0));//取整输出
                break;
            default:
                break;
        }
    },
    /********************************TableVew***********************************/
    //TableView继承ScrollView有这俩个方法，不需要添加任何内容
    scrollViewDidScroll: function (view) {
    },
    scrollViewDidZoom: function (view) {
    },
    //设置点击cell后的回调函数
    tableCellTouched: function (table, cell) {
        cc.log("cell touched at index: " + cell.getIdx());
    },


    //设置cell大小
    tableCellSizeForIndex: function (table, idx) {
        return cc.size(100, 135);
    },
    //添加Cell
    tableCellAtIndex: function (table, idx) {
        var strValue = idx.toFixed(0);
        //获得一个cell，滑动cell的时候会执行这个方法，把没有显示（没渲染）的cell拿过来，更改内容，为了减小内存的开销
        var cell = table.dequeueCell();
        var label;
        if (!cell) {


            cell = new CustomTableViewCell();
            //添加图片
            var sprite = new cc.Sprite("res/1.png");
            sprite.anchorX = 0;
            sprite.anchorY = 0;
            sprite.x = 0;
            sprite.y = 0;
            cell.addChild(sprite);
            // 添加文本
            label = new cc.LabelTTF(strValue, "Helvetica", 50);
            label.x = 0;
            label.y = 0;
            label.anchorX = 0;
            label.anchorY = 0;
            label.color = cc.color(255, 0, 0, 255);
            label.tag = 123;
            cell.addChild(label);
        } else {
            //更改文本信息
            label = cell.getChildByTag(123);
            label.setString(strValue);
        }


        return cell;
    },
    //设置cell个数
    numberOfCellsInTableView: function (table) {
        return 10;
    }


});


var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});