Development JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Development
  4. Using Logger to Debug YUI Library Components



Logger Widget :: YUI Integration Example







    #statesmod {position:relative;}
    #statesautocomplete{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
    #statesinput {width:100%;height:1.4em;}
    #statescontainer {position:absolute;top:1.7em;width:100%}
    #statescontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    #statescontainer ul {padding:5px 0;width:100%;}
    #statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
    #statescontainer li.yui-ac-highlight {background:#ff0;}
    #statescontainer li.yui-ac-prehighlight {background:#FFFFCC;}




    
        

Logger Widget :: YUI Integration Example


    

    
        
        
            
                
                    
                    

Using Logger to Debug YUI Library Components


                    

In this example, we have set up an instance of AutoComplete. By using the
                    debug build of AutoComplete source code, we are able to instantiate a
                    LogReader on this page and read the messages generated from the component.
                    In order to place the LogReader in a convenient spot, we pass in a custom
                    bottom value into its constructor.


                    
                    
                        
                            

Find a state:


                            
                                
                                

                            

                        
                    
                    
                
                
            
        
        
        
            
            
                

Sample Code


                
                
                ///No custom CSS styles were defined.
                // No custom markup was defined.
                // We have first included the debug builds of YUI components
                // event-debug.js and autocomplete-debug.js
                // Then we can see log messages being output to our LogReader
                var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
                
                
            
            
        
    
    











var statesArray = [
    "Alabama",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    "Colorado",
    "Connecticut",
    "Delaware",
    "Florida",
    "Georgia",
    "Hawaii",
    "Idaho",
    "Illinois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Kentucky",
    "Louisiana",
    "Maine",
    "Maryland",
    "Massachusetts",
    "Michigan",
    "Minnesota",
    "Mississippi",
    "Missouri",
    "Montana",
    "Nebraska",
    "Nevada",
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Dakota",
    "North Carolina",
    "Ohio",
    "Oklahoma",
    "Oregon",
    "Pennsylvania",
    "Rhode Island",
    "South Carolina",
    "South Dakota",
    "Tennessee",
    "Texas",
    "Utah",
    "Vermont",
    "Virginia",
    "Washington",
    "West Virginia",
    "Wisconsin",
    "Wyoming"
];



YAHOO.example.AutoCompleteLogger = function() {
    return {
        validateForm: function() {
            // Validate form inputs here
            return false;
        },
        init: function() {
            // Instatiate LogReader
            var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
            // Instantiate DataSource
            var oACDS = new YAHOO.widget.DS_JSArray(statesArray);
            // Instantiate AutoComplete
            var oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
            oAutoComp.queryDelay = 0;
            oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
        }
    };
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.AutoCompleteLogger.init);



dp.SyntaxHighlighter.HighlightAll('code');



           
       
yui.zip( 3,714 k)