JavascriptTutorial

Floorplanner can be embedded into an HTML page with the following three steps:

• Include the Floorplanner Javascript files;
• Create a Floorplanner object;
• Embed Floorplanner in an HTML element.

Embedding Floorplanner

First, you have to include the Floorplanner Javascript class into your page. Floorplanner uses the swfobject library, which must be included as well in the header of your page.

<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" 
    src="http://floorplanner.com/javascripts/floorplanner/floorplanner.js"></script>

Now make, sure to add an element to your page in which the Floorplanner application should be loaded. To load Floorplanner, you will have to create a Floorplanner-object, make it point to your project and embed in into the HTML element. Make sure the HTML element is loaded before you call the embed function. This can be done with the following code.

<script type="text/javascript">
<!--
var fp = new Floorplanner({project_id: your_project_id }); // Create the Floorplanner object
window.onload = function() { fp.embed('div_name'); }
-->
</script>

That should be all to get started!

To make it actually useful, you probably want to adjust the looks or some behavior of the Floorplanner application, or handle some events.

Additional resources: events, options & functions

• The Floorplanner application supports several options to change its looks and behaviour. These options can be passed to the Floorplanner constructor, just like the project_id options was passed. See JavascriptOptions for the available options.
• The application yields several events. You can add event handlers to these events to customize the behaviour. See JavascriptEvents for more information on this topic.
• The application exports several functions that can be called by Javascript. These functions can be used to inspect the current state of the application, or to perform actions on it. See JavascriptFunctions for a reference.

General Javascript considerations

At Floorplanner, we use some technologies to ease our Javascript development. You may want to use these technologies as well to make your life easier:

• Use a Javascript library like Prototype or jQuery. This irons out many of the differences between the browsers and eases a lot of common tasks. At Floorplanner, we use Prototype, mainly for DOM manipulation and AJAX calls. (Please note that for embedding Floorplanner, Prototype is not required.)
• Use Firefox as browser with the Firebug extension. The Firebug extension provides Javascript debugging functionality and the ability to inspect the current state of the DOM of your page. As you will probably change the DOM dynamically, a simple View source is not enough to know what is going on. However, never forget to test your Javascript on other browsers as well!