// 스크롤 을 움직이는 예제

var control = this.getChildControl("scrollpane");


            if (control) {

                if (!this.__isAnimate) {

                    var self = this,

                        element = control.getContainerElement().getDomElement();


                    self.__isAnimate = true;


                    var ani = jQuery(element);


                    var pos;

                    if (this.getOrientation() === "horizontal") {

                        element.style.scrollAnimationPositon = control.getScrollX();

                        pos = control.getScrollX();

                    } else {

                        element.style.scrollAnimationPositon = control.getScrollY();

                        pos = control.getScrollY();

                    }


                    ani.animate(

                        {   scrollAnimationPositon: option + self.getScrollStep() },

                        {   duration: 500,

//                            easing: "easeInBack",

                            step: function(now, fx) {

// now는 애니메이션 이동 텀을 나타낸다.

                                self.scrollTo(parseFloat(pos) + parseFloat(now)); 

                            },

                            complete:function () {

                                self.__isAnimate = false;

                            }

                        }

                    );

                }

            }

'Dev > Qooxdoo' 카테고리의 다른 글

Qooxdoo Class 만들기  (0) 2015.04.01
랩핑했어요. pureMVC-for-Qooxdoo  (0) 2015.03.03
qooxdoo로 만든 socket class  (0) 2015.03.03
1. qooxdoo Project 만들기  (0) 2012.07.27
Qooxdoo를 이용한 객체 생성 및 해제 예제  (0) 2012.07.09
appearances, decorations 추가 하기 (예-버튼)  (0) 2012.05.30
이미지 미리받아놓기  (0) 2012.05.23
다국어 지원  (0) 2012.05.18
해제 관련  (0) 2012.05.09
qooxdoo 오른쪽 버튼 활성화  (0) 2012.05.09

참고 자료

void 

_disposeArray(String field)

Disposes all members of the given array and deletes the field which refers to the array afterwards.

void 

_disposeMap(String field)

Disposes all members of the given map and deletes the field which refers to the map afterwards.

void 

_disposeObjects(arguments varargs)

Disconnects and disposes given objects from instance.

void 

_disposeSingletonObjects(arguments varargs)

Disconnects and disposes given singleton objects from instance.


/*

 * class  

 */


qx.Class.define("mc.testClass",

{

    extend:qx.ui.core.Widget,


    /*

     *****************************************************************************

     CONSTRUCTOR

     *****************************************************************************

     */

    construct:function (eventContext) {

        this.base(arguments);


/*destruct에 추가 될부분*/

        this.__array = qx.data.Array();

        this.__map = [];

this.__map['testKey'] = new qx.ui.form.Button("MyObject");

        this.__myObject = new qx.ui.form.Button("MyObject");

        this.__layout = new qx.ui.layout.Canvas();

/*------------------------*/

        this._setLayout(this.__layout);


        // 이벤트를 호출할 객체.

        if (eventContext) {

            this.setEventTarget(eventContext);

        }



        this._createChildControl("layout_main"); // getChildControl 대신 _CreateChildControl 사용

    },


    /*

     *****************************************************************************

     EVENTS

     *****************************************************************************

     */

    events:{

    },


    /*

     *****************************************************************************

     PROPERTY

     *****************************************************************************

     */

    properties:{

        eventTarget:{

            init:null,

            nullable : true

        },


        preloader:{

            init:mc.util.PreLoader.getInstance(),

            nullable : true

        }

    },


    /*

     *****************************************************************************

     STATICS

     *****************************************************************************

     */

    statics:{

    },


    /*

     *****************************************************************************

     MEMBERS

     *****************************************************************************

     */

    members:{

        __array: null,

        __map:null,

        __myObject:null,

        __layout:null,


        //override 

_createChildControlImpl 에서 생성된놈은 this가 해제시 자동 해제 됨

// new 될때마다 id가 생겨야됨.

        _createChildControlImpl : function(id, hash)

        {

            var control,

                preloader = mc.util.PreLoader.getInstance();


            switch(id)

            {

                // 레이아웃 생성

                case "layout_UserInfo":

                    var layout = new qx.ui.layout.VBox();

                    control = new qx.ui.container.Composite(layout);

                    control.add(this.getChildControl("control_UserInfoLabel")); // _createChildContrl; 대신 getControl 를 사용


                    // 아이템 여러개 생성시

                    for (var i = 0; i < 10; i++) {

                        control.add(this.getChildControl("control_test#"+i)); // i 대신 스트링이든 뭐든 가능

                    }


                    this._add(control, {left:0, top:0});

                    break;


                // 콘트롤 생성

                case "control_UserInfoLabel":

                    control = new qx.ui.form.Button(this.tr("my Button")); // 다국어 설정시 예제

                    break;


                case "control_test":

                    control = new qx.ui.form.Button("SHOP");

                    break;


// 조사중 하면 될까?

case "myArray":

control = qx.data.Array();

break;

            }


            return control || this.base(arguments, id);

        }

    },


    /*

     *****************************************************************************

     DESTRUCT

     *****************************************************************************

     */

    destruct:function () {

        try {

       

            this.setPreloader(null);

            this.setEventTarget(null);

        }

        finally {

// 직접 생성한 객체 해제 _createChildControlImpl 에서 생성된놈은 this가 해제시 자동 해제 됨

            this._disposeMap("__map");

            this._disposeObjects("__myObject", "__layout");

            this._disposeArray("__array");

            // this._disposeSingletonObjects();

        }

    }

});

// Decoration

            var id, image0, image1, image2, image3

            var deco = qx.theme.manager.Decoration.getInstance();

            var decotheme = deco.getTheme();


            decotheme.decorations[id] = {

                decorator : [qx.ui.decoration.Background],

                style : {backgroundImage: image1}

            }


            decotheme.decorations[id + "-disabled"] = {

                include : "testButton",

                style : {backgroundImage: image2}

            }


            decotheme.decorations[id + "-focused"] = {

                include : "testButton",

                style : {backgroundImage: image1}

            }


            decotheme.decorations[id + "-hovered"] = {

                include : "testButton",

                style : {backgroundImage: image0}

            }


            decotheme.decorations[id + "-pressed"] = {

                include : "testButton",

                style : {backgroundImage: image3}

            }


            // testButton

            var appr = qx.theme.manager.testButton.getInstance();

            var apprtheme = appr.getTheme();

            apprtheme.appearances[id] = {

                alias : "atom",


                style : function(states)

                {

                    var decorator, textColor;

                    var padding = [3, 9]; // default padding css-case


                    if (states.checked && states.focused && !states.inner)

                    {

                        decorator = "button-checked-focused";

                        textColor = undefined;

                        padding = [1, 7];

                    }

                    else if (states.disabled)

                    {

                        decorator = id + "-disabled";

                        textColor = undefined;

                    }

                    else if (states.pressed)

                    {

                        decorator = id + "-pressed";

                        textColor = "text-hovered";

                    }

                    else if (states.hovered)

                    {

                        decorator = id + "-focused";

                        textColor = "text-hovered";

                    }

                    else if (states.focused && !states.inner)

                    {

                        decorator = id + "-focused";

                        textColor = undefined;

                        padding = [1, 7];

                    }

                    else

                    {

                        decorator = id;

                        textColor = undefined;

                    }


                    return {

                        decorator : decorator,

                        textColor : textColor,

                        padding : padding,

                        margin : [1, 0],

                        center : true

                    };

                }

            }


this.getRoot().add(new qx.ui.form.Button("testButton").setApperance("testButton"));


추가 정보 : 모든 값은 qx.theme.manager 를 통해서 변경 가능하다.


Appearance  

qx.theme.manager.Appearance

Manager for appearance themes

Color  

qx.theme.manager.Color

Manager for color themes

Decoration  

qx.theme.manager.Decoration

Manager for decoration themes

Font  

qx.theme.manager.Font

Manager for font themes

Icon  

qx.theme.manager.Icon

Manager for icon themes

Meta  

qx.theme.manager.Meta

Manager for meta themes


+ Recent posts