Page Comparison

Now that you’ve got a basic understanding of how to use the Genie JavaScript SDK, let’s move on to some more advanced concepts that the SDK supports.

Adapters

Although the Genie JavaScript SDK provides basic UI functionality out of the box, its core purpose is to facilitate communication with the server. When building rich web applications, you will typically want to make use of a third party UI library. There are many of these available, and you should choose the one that best suits your needs. The SDK doesn’t want to dictate which one you should use, and thus has been designed to be extensible, providing the hooks to allow you to plug a third party UI library in. You can plug third party UI libraries into the Genie JavaScript SDK using adapters.

...

<input id="EventDate" attribute='value' adapter="datepicker" />
 
<div class='' bind="datafield" fieldid="myField" populatemethod="myMethod">
    <input id="myList" adapter="dropdownlist" emptyitemlabel="Select a Value" />
</div>

Creating Your Own Adapters

You can easily create your own custom adapters.  Once the page has loaded (i.e. the document is ready), adapters typically search for elements with a given attribute value specified, and customise those elements according to their requirements. The adapter can listen for events on those elements (the SDK will fire events on them), and respond accordingly.

The TimeInputAdapter is a simple example of how to implement a custom adapter, which listens for the valueUpdated event on an element (triggered by the SDK), and renders an alternative attribute value than the value attribute returned from the server.

Using the Custom Content Control

The server can publish data within a CustomContent element.  This enables data of any format and structure (as determined by the server application) to be published to the client.  For example, data used to populate a Google Map may be sent to the client this way.  The SDK doesn’t know how to render this data, so it leaves it up to the client application to handle this, by raising an event that can initiate the rendering when data has been received.

...

Note: If you expect to be reusing the same functionality elsewhere, consider wrapping the XML parsing and rendering in an adapter.

Customising HTML Generated by the SDK

The SDK generates some HTML dynamically to implement various scenarios, such as a loading indicator to indicate to the user that it’s waiting for a response from the server.  If you don’t like the default implementation, you can specify your own elements to be used instead.  Essentially, this just involves rewriting the functions under the genie.html namespace (found in the genie.html.js file in the source).  Each function returns an element wrapped in jQuery, which the function caller can append to the DOM.  You can rewrite various functions and return your own element to be used in place of the SDK’s implementation.

Pop Up Login Window

Provide an alternate implementation of the pop up login window by rewriting the genie.html.popupLoginForm function.

Overlays

Provide an alternate implementation of the pop up login window by rewriting the genie.html.overlayElement function.

Note that the root element must be named "overlayEx", that is it must have an id="overlayEx" attribute.

Loading Indicator

Provide an alternate implementation of the pop up login window by rewriting the genie.html.loadingIndicator function.

Note that the root element must be named "loadingIndicatorEx", that is it must have an id="loadingIndicatorEx" attribute.

Pop Up Windows as Activity Containers

When an activity is requested, you may wish to pop up a window and use that as the activity container. However, the SDK only has partial support for popup windows, so the responsibility of displaying and managing a popup window will need to be that of a third party UI library. The SDK provides a KendoUI adapter for the kendoWindow control (in KendoPopupWindowAdapter.js), so if you’re using KendoUI then support for popup windows is included “out of the box”. If you’re using another UI library, then you’ll need to create a custom adapter for it, which you can base upon the existing KendoUI adapter.

...

Now when the server requests the activity, the SDK will pop up a window on the current page and display the activity in it.

Loading Partial Content from the Server

Like My Details gets individual tab content.  Set autoLoad=”false” on activity.  Use code to load activity when content loaded.  See KendoTabStripAdapter.

genie.factory.bindActivities($(e.item).parents(), true);

Creating Custom Templates for Use with the Data Publication Control

TODO

The data publication control has been designed such that you can override its default rendering templates with your own.

...

Note that header templates for tables should include the <thead> element.

Pick Lists

Support for pick lists has been provided, but since they need to appear in a popup window, they (like popup window activity containers) need a UI library to provide the popup windowing support, via an adapter.

Debugging the Server Communication

If you want to debug the requests being made to the server, and the responses being returned, you can simply open the console in your browser’s debugging tools (Firebug for Firefox, Chrome Developer Tools for Chrome, IE Developer Tools for IE, etc).  All requests and responses will be written there.

Unfortunately, the XML will not be laid out in an easily readable fashion (all elements are on one line), so you’ll probably need to copy it and paste it into an XML file in Visual Studio or other tool that will format XML to be able read it.

Debugging the SDK Source

The “Configuring the Required JavaScript References” section earlier in this document demonstrated a way to selectively reference the SDK’s source files when running in debug mode, and the bundled and minified files when running in release mode.

...

If you have a released website that uses the bundled and minified version of the SDK, and you need to debug it, we provide source maps (*.map files) that you can use to map the “compiled” SDK back to its source. More information on source maps can be found here: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Communicating with Anonymous Activities

TODO

Message Transformation

The message control will display messages from the server, but the text from these messages is not always “user friendly”, and sometimes you might want to support custom localisation of the messages. The SDK contains support for transforming these messages to something more suitable (or suppress certain messages completely), via the jquery.i18n.properties library.

...

Note: You can suppress messages by specifying no value for the given key. Messages with no value will not appear in the message control.

Components

Not recommended for use

Maintenance Page

The SDK periodically checks to see if the application server is still alive. It does so by sending a “ping” message to the proxy, which tells it if the server is alive or not. If it’s not, then it will redirect the user to a page that can state that the server is under maintenance, and that the application cannot be used currently. The name of this page is configured in the config.js file we implemented earlier in the document. We also set up a page (Maintenance.cshtml) and an action for it. Therefore, all you need to do is to put the required text on the page informing the user that the application server is not currently available.

Listening for Field Value Changes in your Custom JavaScript

TODO