Embedding components

From Geoikia-english

Introduction

This section gives a brief overview of how the embedding works. You can use this information if you want to embed a component into an existing webpage or if you want to do something not provided for in the sample pages. You can use viewer.jsp and author.jsp as a starting point.

For every component there is a JavaScript file: viewer.js, author.js and catalog.js.jsp. These files contain the required JavaScript to embed and initialize the different components correctly.

All Flash components are added to html pages using SWObject. This is a JavaScript library that can be used to conveniently embed Flash components. The communication between the components developed using Adobe Flex and JavaScript requires the FABridge library.

Steps

To include a component the following has to be done:

1. Include the required JavaScript files:

   <script type="text/javascript" src="swfobject.js"></script>

   FABridge: (only required for the author and the catalog components)

   <script type="text/javascript" src="FABridge.js"></script>

   <script type="text/javascript" src="catalog/CatalogClient.js"></script>

   <script type="text/javascript" src="author/GeoideAuthor.js"></script>

   The catalog components depends on a thesaurus library:

   <script type='text/javascript' src='http://demo.x-border-gdi.org/thesauri-portlet/dwr/interface/SearchComponent.js'></script>

   <script type='text/javascript' src='http://demo.x-border-gdi.org/thesauri-portlet/dwr/interface/Linker.js'></script>

   <script type='text/javascript' src='http://demo.x-border-gdi.org/thesauri-portlet/dwr/engine.js'></script>

   <script type='text/javascript' src='http://demo.x-border-gdi.org/thesauri-portlet/dwr/util.js'></script>

   JavaScript files for every component:

   <script type="text/javascript" src="catalog.js.jsp"></script>

   <script type="text/javascript" src="author.js"></script>

   Viewer:

   <script type="text/javascript" src="client/geoide.js"></script>

   <script type="text/javascript" src="viewer.js"></script>

2. Create a 'div' element where you want the component to be placed: <div id=”name”></div>
3. Add the small piece of JavaScript:

Viewer:

var geoide = new Geoide("viewer", "100%", "100%", "client/", "*", {language}, {context}, {guiconfig});

The 'geoide' object provides access to the API of the viewer. In viewer.jsp this is used to integrate the catalog client into the viewer.

Author:

swfobject.embedSWF("author/GeoideAuthor.swf", {div name}, "100%", "100%", "9.0.0", "expressInstall.swf", {language: {language}, bridgeName: "GeoideAuthor"}, {menu: "false", wmode: "opaque", loop: "true"}, {});

FABridge.addInitializationCallback("GeoideAuthor", authorInitCallback);

Catalog:

swfobject.embedSWF("catalog/CatalogClient.swf", {div name}, "100%", "100%", "9.0.0", "expressInstall.swf", {language: {language}, bridgeName: "GeoideAuthor"}, {menu: "false", wmode: "opaque", loop: "true"}, {});

FABridge.addInitializationCallback("CatalogClient", catalogInitCallback);