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

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


// 외부 이미지 미리 받아 놓기

            var imgList = [];

            imgList.push("http://www.onlifezone.com/files/attach/images/116/908/737/011/111.gif");

            imgList.push("http://t2.gstatic.com/images?q=tbn:ANd9GcSJo1HQiuwDIklcOZG1Puq2iO5h79emfGuQV0_4JIUMgVXvpVPCMii8aXdcNw");

            imgList.push("http://www.v3wall.com/wallpaper/1680_1050/1108/1680_1050_20110809091524388043.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/medium/1108/medium_20110809091236292253.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/medium/1108/medium_20110809091550345142.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/1600_1200/1108/1600_1200_20110809091508200270.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/1920_1080/1108/1920_1080_20110809091410556289.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/1920_1080/1108/1920_1080_20110809091324246399.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/1920_1080/1102/1920_1080_20110204103714496177.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/1920_1080/1102/1920_1080_20110204103756281487.jpg");

            imgList.push("http://www.v3wall.com/wallpaper/1920_1080/1102/1920_1080_20110204104030521738.jpg");

            imgList.push("mc/1920_1080_20110204104030521738.jpg");


            for (var i = 0; i < imgList.length; i++) {

                var imgLoader = qx.io.ImageLoader;

                imgLoader.load(imgList[i], function (source, entry) {

                    // TODO

                });

            }


// 내부 이미지 미리 받아 놓기.

for (var i=0; i<count; i++) { var icon = "icon/32/places/" + iconImages[Math.floor(Math.random() * iconImages.length)]; var resolved = aliasManager.resolve(icon); var url = resourceManager.toUri(resolved); items[i] = { label: "Icon #" + (i+1), icon: icon, resolvedIcon: url }; }

1

1. 위치: {$project}/config.json 

"let" :

{

...

"LOCALES"      : ["en", "ko"], 

...

}


2.  위치: {$project} /source/translation/

"en.po", "ko.po" 등 언어 추가된 파일을 추가한다.

(추가 내용 : qooxdoo-1.6-sdk\tool\data\cldr\main\ 안에 xml 파일이 있어야 생성이 된다.)


3. 위치: {$project}/ 

cmd 창을 열고 


>> python generate.py translation 



소스 코드 쓸때 예제처럼(빨간줄) 적어 놓으면 된다.



소스 코드 안의 코드의 추가 수정이 일어났을 경우는 1-3을 다시 한번 적용하고, 그 다음 qooxdoo의 generate 과정을 거치면 된다.

해제관련 유틸 제공


widget 일경우.

 Methods

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.


그 외

qx.util.DisposeUtil


 Static methods

void 

destroyContainer((Composite | Scroll | SlideBar | Stack) container)

Destroys a container and all of its children recursivly.

void 

disposeArray(Object obj, String field)

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

void 

disposeMap(Object obj, String field)

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

void 

disposeObjects(Object obj, Array arr, Boolean disposeSingletons?)

Disconnects and disposes given objects from instance.

void 

disposeTriggeredBy(Object disposeMe, Object trigger)

Disposes a given object when another object is disposed

widget.setNativeContextMenu(true);


Whether the native context menu should be enabled for this widget. To globally enable the native context menu set the #nativeContextMenu property of the root widget (qx.ui.root.Abstract) to true.

Allowed values:
any Boolean
Init value:
false
Change event:
Apply method:
Property attributes:
  • The property value can be set using appearance themes.
Generated methods:
#setNativeContextMenuSet the property value.
#getNativeContextMenuGet the property value.
#initNativeContextMenuCall apply method with the init value.
#resetNativeContextMenuReset the property value.
#toggleNativeContextMenuToggle the property value.
#isNativeContextMenuCheck whether the property equals true.

캔바스 지원 여부

qx.core.Environment.get("html.canvas");


터치 이벤트 qx.core.Environment.get("event.touch");


if (!qx.Class.isDefined(className)) {    // 클레스가 존재하지 않는다면 

  qx.Class.Defined(className, { ... }); // 동적선언 또는 다른곳에서 가져온다.

}


var makeClass = new className();

this.addListener('appear', function (e) { // 현재 로딩이 완료되어 나타난 상태

});


this.addListener('mousewheel', function (e) { // 마우스 휠 이벤트

    console.log(e.getWheelDelta());  // + 휠업, - 휠다운

});


마우스

mousemove : 1,

      mouseover : 1,

      mouseout : 1,

      mousedown : 1,

      mouseup : 1,

      click : 1,

      dblclick : 1,

      contextmenu : 1,

      mousewheel : 1


// 찾은 핸들러 이벤트 

문서 

"complete" : 완료

"loaded" : 

"success":

"fail":

"error":

"readystatechange":


Animation

"animate" : statics.animate,

"fadeIn" : statics.fadeIn,

"fadeOut" : statics.fadeOut,

"play" : statics.play,

"pause" : statics.pause,

"stop" : statics.stop,

"isEnded" : statics.isEnded,

"isPlaying" : statics.isPlaying


"setup" : 시작 "finish" : 끝


IFrame, Script

"uninitialized" : 1,

"loading"       : 2,

"loaded"        : 2,

"interactive"   : 3,

"complete"      : 4


프로그래스바

"complete" : 완료

"change" : 변경

+ Recent posts