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

"Skinning" the YUI

Expand Messages
  • mori57
    I have something that s a cross between a request and a suggestion. My apps reside behind a firewall, and I can t rely on the idea that users will always have
    Message 1 of 5 , Jul 21 8:22 AM
    • 0 Attachment
      I have something that's a cross between a request and a suggestion.

      My apps reside behind a firewall, and I can't rely on the idea that
      users will always have access to the public internet. Causing an app
      to call back to Yahoo! for the images poses a potential security
      issue. The images are included in the package that we download.

      I'm loathe to have to re-edit the YUI files that I've had to edit to
      make images work properly for my apps... if I want to use the compact
      versions, I have to edit those as well, or compress the Javascript
      files myself.

      My question to the community is: How are you dealing with these issues
      (if at all)? Are you simply biting the bullet and letting your apps
      call back to Yahoo! for the images, or have you manually edited your
      files?

      One idea: In the yahoo.js file, at the top level, provide a
      configuration object that each user can modify to provide global,
      application-specific, functions to the dependent .js files. Populate
      it with your defaults, by all means, with IMG_ROOT set to whatever you
      normally want it to be, but placing it at that level should make it
      easier for changes like root urls to be set in one place and
      propagated to the dependent modules without forcing users to have to
      re-edit every time a new version of the YUI comes out.

      Or, instead of creating actual <img> tags (in the Widgets, like the
      Calendar), you might use class'd <span>s with a background:url()
      specified in a separate .css file (say, "YUISkin.css" or somesuch?).
      Then, users need only modify the .css file to point at the images they
      want to use. This, however, does make it necessary to know and keep
      track of the sizes of the images so that they display properly.

      Anyhow, thoughts, suggestions on ways this could be done?
    • Hans Hübner
      ... To us, this is a problem as well. We are using the library in embedded products that are typically used in environments completely detached from the
      Message 2 of 5 , Jul 22 12:31 AM
      • 0 Attachment
        2006/7/21, mori57 <mori57@...>:
        > My apps reside behind a firewall, and I can't rely on the idea that
        > users will always have access to the public internet. [...]

        > I'm loathe to have to re-edit the YUI files that I've had to edit to
        > make images work properly for my apps... if I want to use the compact
        > versions, I have to edit those as well, or compress the Javascript
        > files myself.

        To us, this is a problem as well. We are using the library in
        embedded products that are typically used in environments completely
        detached from the Internet. Presently, I'm hand-importing the source
        from the distribution tree, but this is very annoying and prone to
        errors.

        In general, I was a bit disturbed when I discovered strange relative
        paths and absolute URLs in this otherwise well-engineered library. I
        can only hope that this area has been left for further improvement,
        and that this improvement will happen soon.

        I would prefer to see the tool to create the build tree from the real
        sources be included in the distribution. This will be the only real
        way to change the library and follow new releases, as otherwise the
        -min, -debug and standard version will run out of sync with the Yahoo!
        version.

        The build tool is the right place to perform global path replacement,
        but having the paths be configurable at run-time would be a Good
        Thing, too. I'm just not sure whether background image paths stored
        in CSS files can be changed at run-time - Maybe it is possible through
        the styles object.

        If things stay as they are, there will be hundreds of forks for the
        library because it simply cannot be used without manually editing at
        least the CSS files.

        -Hans
      • mori57
        ... I agree. As for the question of whether background image paths could be changed at run time, you could do so either via the process of creating your CSS
        Message 3 of 5 , Jul 24 8:50 AM
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Hans Hübner"
          <hans.huebner@...> wrote:
          >
          > 2006/7/21, mori57 <mori57@...>:
          > > My apps reside behind a firewall, and I can't rely on the idea that
          > > users will always have access to the public internet. [...]
          >
          > > I'm loathe to have to re-edit the YUI files that I've had to edit to
          > > make images work properly for my apps... if I want to use the compact
          > > versions, I have to edit those as well, or compress the Javascript
          > > files myself.
          >
          > To us, this is a problem as well. We are using the library in
          > embedded products that are typically used in environments completely
          > detached from the Internet. Presently, I'm hand-importing the source
          > from the distribution tree, but this is very annoying and prone to
          > errors.
          >
          > In general, I was a bit disturbed when I discovered strange relative
          > paths and absolute URLs in this otherwise well-engineered library. I
          > can only hope that this area has been left for further improvement,
          > and that this improvement will happen soon.
          >
          > I would prefer to see the tool to create the build tree from the real
          > sources be included in the distribution. This will be the only real
          > way to change the library and follow new releases, as otherwise the
          > -min, -debug and standard version will run out of sync with the Yahoo!
          > version.
          >
          > The build tool is the right place to perform global path replacement,
          > but having the paths be configurable at run-time would be a Good
          > Thing, too. I'm just not sure whether background image paths stored
          > in CSS files can be changed at run-time - Maybe it is possible through
          > the styles object.
          >
          > If things stay as they are, there will be hundreds of forks for the
          > library because it simply cannot be used without manually editing at
          > least the CSS files.
          >
          > -Hans
          >

          I agree. As for the question of whether background image paths could
          be changed at run time, you could do so either via the process of
          creating your CSS files dynamically (via server-side scripting) or
          through client-side manipulation. I don't think there's any reason you
          couldn't override the style through script... though that might be
          more involved and a heavier client-side solution, as the change would
          have to be made for each request to your system.
        • 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 4 of 5 , Jul 31 7:45 AM
          • 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 5 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.