Help
Custom Student Home Page Example

This example demonstrates how to build a custom student home page. It features Frame API and DLAP calls from Javascript, StudentCourseList and AnnouncementList component use, and domain customization to configure the custom student home page.

You can download the component source code from StudentHome.zip.

This custom student home page shows the current student's name, their profile picture, their course list, and announcement list. It is implemented as a custom component, whose rendering looks similar to this:

student home

Creating the Component

The component is a VHTML file. It includes jQuery, an open-source Javascript library that simplifies HTML document handling. The component depends on the containing BrainHoney Frame to provide the Frame API.

1.

Create a file named studenthome.vhtm. Include jQuery and define some CSS styles that the component can use. Because the component is intended to be displayed within another HTML page (not in an iframe), it is an HTML fragment, without the outermost html and body tags.

<!-- Include jQuery for easy HTML manipulation -->
<script type="text/javascript" 
  src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

<!-- Define some styles -->
<style type="text/css">

.user-name 
{
    font-size:30px;
    font-weight:normal;
    color:#217CCF;
    text-align:center;
}

</style>
2.

Create a heading and image tag for the user name and image. We'll populate the "h1" contents and the image "src" from Javascript later.

<!-- Place to show the user's name and their current profile picture -->
<h1 class="user-name"></h1>
<img id="userprofile" src="" width="96" height="96" alt="Profile Picture" 
    class="color_light default_border rounded_box shadow" 
    style="display:block;margin-left:auto;margin-right:auto" />
3.

Add two divs to contain the student course list and the announcement list components:


<!-- Include the StudentCourseList component -->
<div style="position:relative;margin: 20px 20px 20px 20px;" class="color_light default_border rounded_box shadow">
  <%Render Href="component/StudentCourseList" AutoWidth="False" AutoHeight="True"%>
</div>

<!-- Include the AnnouncementList component -->
<div style="position:relative;margin: 20px 20px 20px 20px;" class="color_light default_border rounded_box shadow">
  <%Render Href="component/AnnouncementList" AutoWidth="False" AutoHeight="True"%>
</div>

4.

Create a Javascript script tag, and within it, create an encapsulation function that will contain all our component's Javascript. This prevents collisions between our functions and other objects/functions in the global scope.

<script type="text/javascript">
(function() {

  // All other Javascript logic will go here...

})();
5.

Define a function that jQuery executes when the DOM is ready for manipulation. This function calls the FRAME_API to set the page title (setComponentState). It gets the current user display name from the FRAME_API and updates the h1 element. It then executes the GetUser DLAP command by calling executeCommand to get the path to the user's profile picture. Finally, it updates the image element with the user's profile image, if any.


    // a jQuery method that executes when the page is ready for manipulation
    $(document).ready(function() {
        initLayout();
    });

    // Initializes the page layout
    function initLayout() {

        // Set the title of the page
        FRAME_API.setComponentState("DemoStudentHome", "$ID$", 
          {pageTitle:"Student Home"});

        // Set the current user's name
        $('.user-name').append(FRAME_API.userDisplay);

        // Call DLAP to get the resource path to the current user's picture
        FRAME_API.executeCommand("getuser", {userid:FRAME_API.userId}, {
            callback: function(options, success, response) {
                var result = null;
                if (success) {
                    // extra the profilepicture element from the response XML
                    var data = $('profilepicture', response.responseXML);
                    if (data && data.text()) {
                        result = '<%AppRoot%>/Resource/' + FRAME_API.userId + 
                          '/' + data.text();
                    }
                }
                // Set the user profile image src property to either the user's 
                // profile picture,
                // or to no_profile.png if the user has no profile picture
                $('#userprofile').prop('src', 
                    result || '<%ResourceRoot%>/images/no_profile.png');
            }
        });
    }

That completes the component definition. To test it, you must upload it to a domain and then launch it, as described in the following sections.

Uploading the Component

You upload the studenthome.vhtm file to your BrainHoney domain content folder.

1.
admin gear

Log into BrainHoney with a domain administrator account and click the Administrator gear icon to open the administration page.

2.
content tab

Click the Content tab to display the domain's content files.

3.
upload content dialog

Click the Upload Content button, choose the saved studenthome.vhtm file and then click [OK]. Repeat for all images (in this case, no_profile.png) referenced by the page, but specify "Images" for the Upload Folder, since that is where studenthome.vhtm references them.

If you are familiar with FTP programs, you can avoid the individual uploads and clicking by simply FTPing the files to the URL displayed in the bottom right corner of the Content tab.

Configure the Domain to use the Component for Student Home Page

Now that the files are uploaded, configure your domain to use the component when students visit their home page.

1.
admin gear

Log into BrainHoney with a domain administrator account and click the Administrator gear icon to open the administration page.

2.
customization tab

Click the Edit button to open the Edit Domain dialog and then click the Customization tab.

3.

Locate the existing <files> XML element; otherwise create one. (See files for more details.) Within it, add a file element for studenthome:

<files>
<file type="studenthome" path="studenthome.vhtm"/>
</files>

Click [OK] when you are done.

4.

To see the custom student home page, log off and log back in to BrainHoney as a user with student enrollments in your domain.