Loading ...
Sorry, an error occurred while loading the content.

Re: "Skinning" the YUI

Expand Messages
  • mori57
    Still no responses on this issue from any of the developers of the YUI...? Well, in the meantime, here s an idea of something I started playing with. In the
    Message 1 of 5 , Jul 31, 2006
    • 0 Attachment
      Still no responses on this issue from any of the developers of the YUI...?

      Well, in the meantime, here's an idea of something I started playing with.

      In the Yahoo.js file, I add:
      /**
      * Stubs to add to YAHOO object to make it easier to maintain the
      * paths to assets used by other modules in the YUI toolkit.
      */
      YAHOO.cfg.PROTOCOL =
      (document.location.protocol=="https:")?"https:":"http:";
      YAHOO.cfg.SERVER = document.location.host;
      YAHOO.cfg.BASEURL= YAHOO.cfg.PROTOCOL + "//" + YAHOO.cfg.SERVER;
      YAHOO.cfg.ASSETS = {};
      // below are user-set properties to point at their own dirs
      YAHOO.cfg.ASSETS["IMG"] = YAHOO.cfg.BASEURL + "/images/yui/";
      YAHOO.cfg.ASSETS["SHIM"] = YAHOO.cfg.ASSETS.IMG + "shim.gif";

      Then, it's simply a matter of changing the other related files to get
      rid of the hardcoded refs, calling instead YAHOO.cfg.ASSETS.IMG, or
      .SHIM when they need to get those resources.

      Any thoughts on whether this would be a sound approach? It means that
      users only have to worry about modifying one file (Yahoo.js), as
      opposed to tracking changes through multiple files and recompiling the
      JS every time a new version comes out.
    • mori57
      Excuse me while I smack myself. I found a way to get around all this, using the base libraries as provided by YAHOO; simply subclass the controls that you wish
      Message 2 of 5 , Aug 1, 2006
      • 0 Attachment
        Excuse me while I smack myself.

        I found a way to get around all this, using the base libraries as provided by YAHOO; simply subclass the controls that you wish to modify, in the case of things such as the Calendar control. Or, if you're trying to "fix" the Container code, you can load a separate JS file after you've loaded the Container js files that does something to this extent:

        /**
         * Note that the first two depend on an internal function I've named
         * GetRoot() which does all the nasty business of correcting for
         * environmental differences... as long as I have all my images under
         * images/yui/assets/ in the appropriate environment, my images show
         * up when needed, and without calling out to YAHOO!'s chosen servers.   
         */

        /**
        * Overrides the constant representing the
        * prefix path to use for non-secure images
        * @type string
        */
        YAHOO.widget.Module.IMG_ROOT = GetRoot() + "images/yui/assets/";

        /**
        * Overrides the constant representing the
        * prefix path to use for securely served images
        * @type string
        */
        YAHOO.widget.Module.IMG_ROOT_SSL = GetRoot() + "images/yui/assets/";

        /**
        * Overrides the URL of the blank
        * image that will be placed in the iframe
        * @type string
        * @final
        */
        YAHOO.widget.Overlay.IFRAME_SRC = "shim.gif";

        /**
        * Overrides the constant for the
        * standard network icon for a blocking action
        * @type string
        * @final
        */
        YAHOO.widget.SimpleDialog.ICON_BLOCK = "blck16_1.gif";

        /**
        * Overrides the constant for the standard network icon for alarm
        * @type string
        * @final
        */
        YAHOO.widget.SimpleDialog.ICON_ALARM = "alrt16_1.gif";

        /**
        * Overrides the constant for the standard network icon for help
        * @type string
        * @final
        */
        YAHOO.widget.SimpleDialog.ICON_HELP  = "hlp16_1.gif";

        /**
        * Overrides the constant for the standard network icon for info
        * @type string
        * @final
        */
        YAHOO.widget.SimpleDialog.ICON_INFO  = "info16_1.gif";

        /**
        * Overrides the constant for the standard network icon for warn
        * @type string
        * @final
        */
        YAHOO.widget.SimpleDialog.ICON_WARN  = "warn16_1.gif";

        /**
        * Overrides the constant for the standard network icon for a tip
        * @type string
        * @final
        */
        YAHOO.widget.SimpleDialog.ICON_TIP   = "tip16_1.gif";


      Your message has been successfully submitted and would be delivered to recipients shortly.