Widget is not defined - Huh? - Forums

Board index » YUI 3.x: » General

Widget is not defined - Huh?

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Norman Potter

Username: webbear1000
Joined: Mon Feb 06, 2012 2:37 am
Posts: 5

Tags:

widget

Widget is not defined - Huh?

Posted: Sun May 06, 2012 2:37 am

+0-

Hello ladies and gentlemen.

I'm trying to create an extremely simple widget to continue my (constantly stalling) learning YUI experience.

I'm scratched my head, huffed AND puffed but can't figure out why I keep being told that "Widget is not undefined".

Any help hugely appreciated ...

The Widget of Despair

Code:

YUI.add("collapsable-panel", function(Y){
    CollapsablePanel = function(config){
        CollapsablePanel.superclass.constructor.apply(this, arguments);
    }
    
    CollapsablePanel.NAME = "collpsablePanel";
    
    CollapsablePanel.ATTRS = {
        open: { value: false }
    };
    
    CollapsablePanel.HTML_PARSER = {
        toggle: "",
        content: ""
    };
    
    Y.extend(CollapsablePanel, Widget, {
        initializer: function(config){
        }
    });
}, "0.0.1", {requires: ["widget"]});

The Implementation of Hope

Code:

YUI({
    modules: {
       "collapsable-panel": {
           fullpath: "/resources/js/widgets/collapsable-panel.js",
           type: "js",
           requires: ["widget"]
        }
    }
}).use("collapsable-panel", function(Y){
    x = new Y.CollapsablePanel();
});

Juan Ignacio Dopazo

YUI Contributor

Username: jdopazo
Joined: Fri Oct 02, 2009 5:39 am
Posts: 620
Location: Buenos Aires, Argentina
Twitter: juandopazo
GitHub: juandopazo
Gists: juandopazo

Re: Widget is not defined - Huh?

Posted: Sun May 06, 2012 6:26 am

+0-

You're using YUI right. The Loader part is ok and the module structure is also ok. The problem isn't in YUI but in how variables and object properties work.

When you create a module with YUI.add you don't get for free all the YUI classes inside the function. You get them as properties of the Y variable. So Widget is undefined because it should be Y.Widget, a property of Y. That is also valid for your own class. You need to add it as a property of Y at some point to be able to reference it later. So you need to do Y.CollapsablePanel = CollapsablePanel somewhere after you declare it as a variable. Which leads me to the last comment...

Always use the "var" keyword for declaring variables. Otherwise all your variables will end up being global and that can have very unexpected consequences.

Here's a working example: http://jsfiddle.net/juandopazo/Ts69w/

Last edited by jdopazo on Mon May 07, 2012 5:23 am, edited 1 time in total.