##Using the wf_* functions in your code:

Although the first example described the basic process of creating a widget and what is involved, I didn't go into any detail on how the widgets can interact with the environment.

When your code is invoked, it is provided with a special variable 'key' that you will need to pass to all of the functions that you will use.

In order to make this as clear as possible, I'll create another example - this one that displays the user's global flair image given their GUID (which can easily be retrieved):

1. Create a new widget and use the HTML code from the previous tutorial.

2. Start with the following JS code:

    // Remember that this section of code is passed a parameter
    // 'key' that we will need for the wf_* functions.
   
    // Get the user's GUID
    var user_guid = wf_getUserGUID(key);
   
    // Now construct the URL of the image we will display in the widget
    var image_url =
        'http://stackimage.quickmediasolutions.com/global.php?guid='
        + user_guid;
   
    // Set the contents of the DIV to the image
    $('#' + wf_getRootDiv(key)).html('<img src="' + image_url + '" />');
   

3. Now try it out - you will see your global flair appear in the widget.

That was pretty easy - once again, notice that each of the wf_* functions require your 'key' in order to work. The wf_getUserGUID function returns the association ID of the user. (This is derived from the information the user supplies when registering.) The wf_getRootDiv function returns the id of the widget's DIV. That is the DIV where your widget's content should go.

In a later tutorial, I will describe how the settings dialog and code work as well as the wf_readSetting and wf_writeSetting functions. Also, I will explain the wf_makeAPIRequest function.

##Using the wf_* functions in your code:

Although the first example described the basic process of creating a widget and what is involved, I didn't go into any detail on how the widgets can interact with the environment.

When your code is invoked, it is provided with a special variable 'key' that you will need to pass to all of the functions that you will use.

In order to make this as clear as possible, I'll create another example - this one that displays the user's global flair image given their GUID (which can easily be retrieved):

1. Create a new widget and use the HTML code from the previous tutorial.

2. Start with the following JS code:

    // Remember that this section of code is passed a parameter
    // 'key' that we will need for the wf_* functions.
   
    // Get the user's GUID
    var user_guid = wf_getUserGUID(key);
   
    // Now construct the URL of the image we will display in the widget
    var image_url =
        'http://stackimage.quickmediasolutions.com/global.php?guid='
        + user_guid;
   
    // Set the contents of the DIV to the image
    $('#' + wf_getRootDiv(key)).html('<img src="' + image_url + '" />');
   

3. Now try it out - you will see your global flair appear in the widget.

That was pretty easy - once again, notice that each of the wf_* functions require your 'key' in order to work. The wf_getUserGUID function returns the association ID of the user. (This is derived from the information the user supplies when registering.) The wf_getRootDiv function returns the id of the widget's DIV. That is the DIV where your widget's content should go.

In a later tutorial, I will describe how the settings dialog and code work as well as the wf_readSetting and wf_writeSetting functions. Also, I will explain the wf_makeAPIRequest function.