Mojo.View

Namespace Detail

All User Interface (UI) layout files are located in the views folder of your application. Much of the user interface in Mojo is assembled out of text files containing fragments of HTML and special tags indicating locations to insert dynamic data.

A scene assistant has one main HTML view file, which provides the static structure and content of its presentation page. It also includes zero or more HTML template view files that may be used to display dynamic data, such as JavaScript object properties from a scene assistant.

Developers can use templates directly by calling Mojo.View.render, but more often they will pass names of templates as part of widget setup or use them implicitly in scene creation.

Method Summary
Method Name and Description
Mojo.View.addTemplateLocation(basePath, localizedPath, viewFolderName)
Mojo.View.addTouchFeedback(targetElement)
Mojo.View.advanceFocus(containingElement, optionalSelection)
Mojo.View.clearTouchFeedback(root)
Mojo.View.convertToNode(htmlContent, targetDocument)
Mojo.View.convertToNodeList(htmlContent, targetDocument)
Mojo.View.getFocusableList(containingElement)
Mojo.View.getFocusedElement(containingElement)
Mojo.View.getScrollerForElement(targetElement)
Mojo.View.makeFocusable(targetElement)
Mojo.View.makeNotFocusable(targetElement)
Mojo.View.removeTouchFeedback(targetElement)
Mojo.View.render(renderParams)
Mojo.View.requiresProperties(element, target, one)
Mojo.View.visible(element)

Method Detail

Mojo.View.addTemplateLocation(basePath, localizedPath, viewFolderName)

Adds a pair of locations to be used for loading localized templates. If a template is specified by full path and the base path is a prefix of the full path, the localized path for the correct locale will be searched first for the template.

Parameters:
{String} basePath: Path containing templates
{String} localizedPath: Path containing a localized resources
{String} viewFolderName: Name of the folder inside the resources folder that contains the views.

Mojo.View.addTouchFeedback(targetElement)

Adds touch feedback to a new element and always removes touch feedback from the existing highlighted element

Parameters:
{Element} targetElement: Element to which to add feedback

Mojo.View.advanceFocus(containingElement, optionalSelection)

Advances the current text focus to the next focusable element in the containing element, or sets it to the first focusable element in the container if nothing in the container is currently focused.

Parameters:
{Element} containingElement: Element in which to advance focus
optionalSelection

Mojo.View.clearTouchFeedback(root)

Parameters:
root

Mojo.View.convertToNode(htmlContent, targetDocument)

Converts the given HTML content into nodes, and returns the first element node at the top level of the content.

Parameters:
{Object} htmlContent
targetDocument

Mojo.View.convertToNodeList(htmlContent, targetDocument)

Returns a nodelist resulting from converting the given html content into nodes. A shared rendering div is used for t his conversion, so the caller should not keep a reference to the nodelist, and needs to remove the nodes from their parent (the shared div).

Parameters:
{Object} htmlContent: the html content to convert
targetDocument

{String|Object|Array|Boolean|Number} Mojo.View.getFocusableList(containingElement)

Returns a list of DOM elements that are considered focusable.

Parameters:
{Element} containingElement: Defines the subtree of the DOM to search for focusable elements. The element itself is not included in the search.

Returns:: Describe what it returns

Mojo.View.getFocusedElement(containingElement)

Returns the currently focused element inside the passed in container, or null if there is no such element.

Parameters:
{Element} containingElement: Element to search

Mojo.View.getScrollerForElement(targetElement)

Searches from targetElement up the DOM looking for a Scroller widget that contains the targetElement.

Parameters:
targetElement: is the element to get the scroller for.

Mojo.View.makeFocusable(targetElement)

Marks an element as being one that can be focused. Currently implemented by adding a tabindex attribute of value "0".

Parameters:
{Element} targetElement: Element to make focusable

Mojo.View.makeNotFocusable(targetElement)

Marks an element as being one that can not be focused. Currently implemented by removing the tab index value

Parameters:
{Element} targetElement: Element to make not focusable

Mojo.View.removeTouchFeedback(targetElement)

Removes touch feedback from an element

Parameters:
{Element} targetElement: Element from which to remove touch feedback

Mojo.View.render(renderParams)

Use a partial and one or more objects to create HTML markup.

The first example shows how we would bind a single object to a template:

    var content = Mojo.View.render({object: contact, template: 'detail/header'})
    headerElement.innerHTML = content;

This shows how we render a list of objects with a template and a separator:

    var content = Mojo.View.render({collection: songs, template: 'list/song', separator: 'list/separator''})
    listElement.innerHTML = content;

Parameters:

renderParams

is a hash which may contain the following values property names and values:

[object] the object to use to resolve property references in the template.

[collection] a list of objects to bind individually to a template in order to create a list.

[attributes] an extra object which is additionally used to resolve property references in templates, when the property does not exist in 'object' or the appropriate 'collection' element.

[formatters] A hash of property names to formatter functions which should be applied prior to rendering. See Mojo.Model.format().

[template] the partial or full path to the template.

[separator] when rendering a collection, a template to use as a separator between individual list elements.

Mojo.View.requiresProperties(element, target, one)

Given a DOM element and a target object, hide the element if the value of any of the named properties are undefined or have a false value in the target.

Parameters:
{Object} element: DOM element to hide
{Object} target: object to check for property definitions
{Object} one: or more property names

{Boolean} Mojo.View.visible(element)

Returns true of the element and all of its ancestory are visible.

Parameters:
{Object|} element: element to check for visibility