Web Add-in Extensibility Developer Guide > Tutorial: Learning to Create Web Custom Toolkit Support > Learning to Create UFT Support for a Simple Custom Web Control > Developing the Toolkit Support Set > Stage 8: Implementing Support for Recording on the Book Control

Stage 8: Implementing Support for Recording on the Book Control

By this point in the tutorial, your toolkit support set already enables full UFT functionality. UFT recognizes the Book control, can learn it and can run tests on it.

An additional, optional way to create tests in UFT is by recording operations that a user performs on the application. As you can see in Planning Support for the Web Add-in Extensibility Book Sample Toolkit, by default UFT records plain Click operations on the various Web link and image objects within the Book control. It would be more helpful to record Select, GoToAuthorPage, and GoToUsedBooksPage operations on the Book control itself, in response to those same clicks.

To support customized recording on your control, you must instruct UFT to listen to the relevant events and inform UFT what test steps to record in response to each event.

To do this you write two types of JavaScript functions:

For information on the syntax of the utility object functions, see the _util section in the API Reference.

To develop support for recording on the Book control:

Note: You can modify the WebExtSample.xml and WebExtBook.js files in the toolkit support set folder and then later deploy them to UFT for testing, or you can modify these files in <UFT installation folder>\dat\Extensibility\Web\Toolkits\WebExtSample directly.

  1. In the toolkit configuration file, within the Control element add the following Record\EventListening element:

    <Record>
        <EventListening use_default_event_handling_for_children="false" 
                        use_default_event_handling="false" 
                        type="javascript" 
                        function="ListenToEvents"/>
    </Record>
    

    This instructs UFT not to use the default Web Event Configuration for handling events on the Book control and its children, but to call the JavaScript function ListenToEvents. Because you did not specify a JavaScript file, UFT looks for the JavaScript function in the WebExtBook.js file that you specified at the Control level for the WebExtBook test object class.

  2. In the WebExtBook.js file, add the following ListenToEvents function:

    function ListenToEvents( elem )
    {
        // Connect to the "Select" event: When the book name or the 
        // book icon is clicked, call OnSelectClicked.
        _util.RegisterForEvent( _elem.rows[0].cells[0].children[0], "onclick", "OnSelectClicked");
        _util.RegisterForEvent( _elem.rows[0].cells[1].children[0], "onclick", "OnSelectClicked" );
        // Connect to the "Author" event: When an author name is 
        // clicked, call OnAuthorClicked.
        for( var i = 0 ; i < _elem.rows[1].cells[0].children.length ; ++i )
        {
            if( _elem.rows[1].cells[0].children[i].tagName == "A" )
            {
                _util.RegisterForEvent( _elem.rows[1].cells[0].children[i], "onclick", "OnAuthorClicked" );
            }
        }
        // Connect to the "UsedBooks" event: When "Used" is 
        // clicked, call OnUsedBooksClicked.
        if(  _elem.rows[3].cells[0].children.length > 1 )
            _util.RegisterForEvent( _elem.rows[3].cells[0].children[1], "onclick", "OnUsedBooksClicked" );
        return true;
    }
    

    This function registers UFT to listen to click events on the book's title, image, and authors, and on the Used link. When registering for an event, this function specifies what JavaScript function UFT must call when the event occurs.

  3. In the WebExtBook.js file add the following event handler JavaScript functions:

    function OnSelectClicked( handlerParam , eventObj )
    {
        // Record the "Select" step
        var arr = new Array();
        _util.Record( "Select", toSafeArray(arr) , 0 );
        return true;
    }
    
    function OnAuthorClicked( handlerParam , eventObj )
    {
        // Record the "GoToAuthorPage" step
        var arr = new Array();
        arr[0] = eventObj.srcElement.innerText; 
        _util.Record( "GoToAuthorPage", toSafeArray(arr) , 0 );
        return true;
    }
    
    function OnUsedBooksClicked( handlerParam , eventObj )
    {
        // Record the "GoToUsedBooksPage" step
        var arr = new Array();
        _util.Record( "GoToUsedBooksPage", toSafeArray(arr) , 0 );
        return true;
    }

    These functions record Select, GoToAuthorPage, and GoToUsedBooksPage on the WebExtBook test object, as planned in Planning Support for the Web Add-in Extensibility Book Sample Toolkit.

To complete this stage, perform the procedures in Deploying and Testing the Toolkit Support Set (for Stage 8).