Help
Components

BrainHoney supplies standard pieces of UI called components. For example, the content player, the teacher gradebook, and student grade view are all components. You can also create your own components. You typically display components in frames that coordinate communication amongst the components. (See Frames for more details.)

Defining Component Types and IDs

A component is identified by its type and ID. In the sections below that describe components, the section heading is the component type. For example, ActivityPlayer is the type for the activity player component. You specify a component's ID when you render or display the component. (See <%Render%> for more details.) If you omit the ID, the component automatically generates a unique one. When a component calls the Frame API method setComponentState, it specifies its type and ID. All other Frame API methods, events, or properties that refer to a component (such as getComponentState and componentStateChanged) refer to its type and ID.

Custom components do not have pre-defined types, you simply make one up in your VHTML file's call to setComponentState. You get your component's assigned ID from the variable $ID$. (See VHTML Files and Replacement Tags for more details.)

Passing Component Parameters

Most components define component-specific parameters that customize their behavior or display. You pass parameters to components in the <%Render%> replacement tag:

<%Render Href="Component/CoursePlayer" EnrollmentId="1234" Id="coursePlayer1"%>

You can also pass parameters as query parameters on the end of standalone component URLs:

https://myschool.brainhoney.com/Component/CoursePlayer?EnrollmentId=1234

If a component takes an enrollment identifier (EnrollmentId) as a parameter, you can pass in a course or section identifier instead of an enrollment identifier. If you do this, BrainHoney looks up the current enrollments for the currently authenticated user and tries to match the course or section identifier to one of those enrollments. If no enrollment is found, a pseudo enrollment is created that uses the currently authenticated user’s domain rights.

Rendering Components

For components to display correctly, you must place component <'%Render%> tags inside of <DIV> tags that do not have default positioning.

This is a bad example:

<div>
    <%Render Href="Component/CoursePlayer" EnrollmentId="1234"%>
</div>

This is a good example:

<div style="position:relative;">
    <%Render Href="Component/CoursePlayer" EnrollmentId="1234"%>
</div>

We describe each of the standard components in the following sections with their component-specific parameters.

See Also
Frames <%Render%> getComponentState componentStateChanged