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

Overriding labelStyle of TextNode

Expand Messages
  • jr_tunstall
    Hi I m trying to customise a treeview control, having a node display an image of my choice. I attempted to do this by overriding the labelStyle attribute of
    Message 1 of 5 , Dec 27, 2006
      Hi

      I'm trying to customise a treeview control, having a node display an image of my choice. I attempted to do this by overriding the labelStyle attribute of YAHOO.widget.TextNode as described here: 

      http://developer.yahoo.com/yui/docs/YAHOO.widget.TextNode.html


      The docs tell me I have to set the 'labelStyle' property. However to get it to work I have to set the 'style' property.

      Looks like a bug to me (see line 1798 in treeview.js) , but it's the first time I've used yui I'm unsure.  Can confirm this or put me right?

      Cheers

      James
    • Eric Miraglia
      James, Thanks for the note. I tried to replicate your issue doing the following: .myStyle {background-color:#99FFCC;}
      Message 2 of 5 , Dec 27, 2006
        James,

        Thanks for the note.

        I tried to replicate your issue doing the following:

        <div id="treeDiv1"></div>

        <style>
        .myStyle {background-color:#99FFCC;}
        </style>

        <script>
        tree = new YAHOO.widget.TreeView("treeDiv1");
        mynode = new YAHOO.widget.TextNode("mylabel", tree.getRoot(), false);
        tmpNode.labelStyle = "myStyle";
        </script>

        When I do this and then use Firebug to inspect the DOM, I find that the <a> element containing my label does indeed have the class "myStyle" applied to it.  I didn't test exhaustively, but it looked as though this was working in Safari and IE7 as well as FF2.

        Could you give me a little more context as to what error you're seeing here?

        Regards,
        Eric

        ______________________________________________
        Eric Miraglia
        Yahoo! User Interface Library



        On Dec 27, 2006, at 3:44 AM, jr_tunstall wrote:

        Hi

        I'm trying to customise a treeview control, having a node display an image of my choice. I attempted to do this by overriding the labelStyle attribute of YAHOO.widget.TextNode as described here: 

        http://developer.yahoo.com/yui/docs/YAHOO.widget.TextNode.html

        The docs tell me I have to set the 'labelStyle' property. However to get it to work I have to set the 'style' property.

        Looks like a bug to me (see line 1798 in treeview.js) , but it's the first time I've used yui I'm unsure.  Can confirm this or put me right?

        Cheers

        James


      • jr_tunstall
        Eric, Thanks for the quick reply, sorry I didn t reciprocate (holidays). Hopefully this code will show what I m trying to do: //this works and the style
        Message 3 of 5 , Jan 2, 2007
          Eric,

          Thanks for the quick reply, sorry I didn't reciprocate (holidays).  Hopefully this code will show what I'm trying to do:

                  //this works and the style changes
                  var oDataStyle = { style:"urgentlink", label:"using style" };
                  var tmpNode = new YAHOO.widget.TextNode( oDataStyle, root, false);
                 
                  //this doesn't change the style as I'd expect
                  var oDataLabelStyle = { labelStyle :"urgentlink", label:"using labelStyle" };
                  var tmpNode = new YAHOO.widget.TextNode( oDataLabelStyle, root, false);

          The example code in full 

          Is my use of the API valid ?

          Cheers

          James



          --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
          >
          > James,
          >
          > Thanks for the note.
          >
          > I tried to replicate your issue doing the following:
          >
          > <div id="treeDiv1"></div>
          >
          > <style>
          > .myStyle {background-color:#99FFCC;}
          > </style>
          >
          > <script>
          > tree = new YAHOO.widget.TreeView("treeDiv1");
          > mynode = new YAHOO.widget.TextNode("mylabel", tree.getRoot(), false);
          > tmpNode.labelStyle = "myStyle";
          > </script>
          >
          > When I do this and then use Firebug to inspect the DOM, I find that
          > the <a> element containing my label does indeed have the class
          > "myStyle" applied to it. I didn't test exhaustively, but it looked
          > as though this was working in Safari and IE7 as well as FF2.
          >
          > Could you give me a little more context as to what error you're
          > seeing here?
          >
          > Regards,
          > Eric
          >
          > ______________________________________________
          > Eric Miraglia
          > Yahoo! User Interface Library
          >
          >
          >
          > On Dec 27, 2006, at 3:44 AM, jr_tunstall wrote:
          >
          > > Hi
          > >
          > > I'm trying to customise a treeview control, having a node display
          > > an image of my choice. I attempted to do this by overriding the
          > > labelStyle attribute of YAHOO.widget.TextNode as described here:
          > >
          > > http://developer.yahoo.com/yui/docs/YAHOO.widget.TextNode.html
          > >
          > > The docs tell me I have to set the 'labelStyle' property. However
          > > to get it to work I have to set the 'style' property.
          > >
          > > Looks like a bug to me (see line 1798 in treeview.js) , but it's
          > > the first time I've used yui I'm unsure. Can confirm this or put
          > > me right?
          > >
          > > Cheers
          > >
          > > James
          > >
          > >
          >
        • Eric Miraglia
          James, Happy new year! Your use of the TreeView API is just a bit off in the example that s not working. You can set the labelStyle in two ways...the first
          Message 4 of 5 , Jan 2, 2007
            James,

            Happy new year!

            Your use of the TreeView API is just a bit off in the example that's not working.  You can set the labelStyle in two ways...the first one you deduced as follows:

            //this works and the style changes
            var oDataStyle = { style:"urgentlink", label:"using style" };
            var tmpNode = new YAHOO.widget.TextNode( oDataStyle, root, false);
                  
            When you do this, the TextNode class sees the generic style indicator and applies it to the labelStyle property for you in line 1797ff of TreeView.js:

                    if (oData.style) {
                        this.labelStyle = oData.style;
                    }

            The second method is to apply the property directly to your node instance after you've created it:

            var myNode = new YAHOO.widget.TextNode(...);
            myNode.labelStyle = "mystyle";

            Either of these should work just fine.

            Regards,
            Eric

            ______________________________________________
            Eric Miraglia
            Yahoo! User Interface Library



            On Jan 2, 2007, at 3:43 AM, jr_tunstall wrote:

            Eric,

            Thanks for the quick reply, sorry I didn't reciprocate (holidays).  Hopefully this code will show what I'm trying to do:

                    //this works and the style changes
                    var oDataStyle = { style:"urgentlink", label:"using style" };
                    var tmpNode = new YAHOO.widget.TextNode( oDataStyle, root, false);
                   
                    //this doesn't change the style! as I'd expect
                    var oDataLabelStyle = { labelStyle :"urgentlink", label:"using labelStyle" };
                    var tmpNode = new YAHOO.widget.TextNode( oDataLabelStyle, root, false);

            The example code in full 

            Is my use of the API valid ?

            Cheers

            James



            --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
            >
            > James,
            >
            > Thanks for the note.
            >
            > I tried to replicate your issue doing the following:
            >
            > <div id="treeDiv1"></div>
            >
            > <style>
            > .myStyle {background-color:#99FFCC! ;}
            > </style>
            >
            > <script>
            > tree = new YAHOO.widget.TreeView("treeDiv1");
            > mynode = new YAHOO.widget.TextNode("mylabel", tree.getRoot(), false);
            > tmpNode.labelStyle = "myStyle";
            > </script>
            >
            > When I do this and then use Firebug to inspect the DOM, I find that
            > the <a> element containing my label does indeed have the class
            > "myStyle" applied to it. I didn't test exhaustively, but it looked
            > as though this was working in Safari and IE7 as well as FF2.
            >
            > Could you give me a little more context as to what error you're
            > seeing here?
            >
            > Regards,
            > Eric
            >
            > ______________________________________________
            > Eric Miraglia
            > Yahoo! User Interface Library
            >
            >
            >
            > On Dec 27, 2006, at 3:44 AM, jr_tunstall wrote:
            >
            > > Hi
            > >
            > > I'm trying to customise a treev! iew control, having a node display
            > > an image of my choice. I attempted to do this by overriding the
            > > labelStyle attribute of YAHOO.widget.TextNode as described here:
            > >
            > > http://developer.yahoo.com/yui/docs/YAHOO.widget.TextNode.html
            > >
            > > The docs tell me I have to set the 'labelStyle' property. However
            > > to get it to work I have to set the 'style' property.
            > >
            > > Looks like a bug to me (see line 1798 in treeview.js) , but it's
            > > the first time I've used yui I'm unsure. Can confirm this or put
            > > me right?
            > >
            > > Cheers
            > >
            > > James
            > >
            > >
            >


          • jr_tunstall
            Eric, Cheers for the clearing that up. Have a great 07. James
            Message 5 of 5 , Jan 3, 2007
              Eric,

              Cheers for the clearing that up.

              Have a great 07.

              James


              --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
              >
              > James,
              >
              > Happy new year!
              >
              > Your use of the TreeView API is just a bit off in the example that's
              > not working. You can set the labelStyle in two ways...the first one
              > you deduced as follows:
              >
              > //this works and the style changes
              > var oDataStyle = { style:"urgentlink", label:"using style" };
              > var tmpNode = new YAHOO.widget.TextNode( oDataStyle, root, false);
              >
              > When you do this, the TextNode class sees the generic style indicator
              > and applies it to the labelStyle property for you in line 1797ff of
              > TreeView.js:
              >
              > if (oData.style) {
              > this.labelStyle = oData.style;
              > }
              >
              > The second method is to apply the property directly to your node
              > instance after you've created it:
              >
              > var myNode = new YAHOO.widget.TextNode(...);
              > myNode.labelStyle = "mystyle";
              >
              > Either of these should work just fine.
              >
              > Regards,
              > Eric
              >
              > ______________________________________________
              > Eric Miraglia
              > Yahoo! User Interface Library
              >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.