Moobile.ViewController

Extends Moobile.EventFirer

Provides an object for managing a view and its view controller hierarchy.

Initialization

Syntax:

var viewController = new Moobile.ViewController([options], [name]);

Parameters:

Name Type Description
options Optional Object The view controller's options.
name Optional String The view controller's name.

Subclassing Notes:

Don't instantiate this class. Instead, extend it by creating subclasses for your own implementation.

Example

File at /templates/say-hello-view.html:

<div class="say-hello-view">
    <h2>Tap the button</h2>
    <div data-role="button" data-name="tap-me-button">Tap me!</div>
</div>

The view controller:

var SayHelloViewController = new Class({

    Extends: Moobile.ViewController,

    tapMeButton: null,

    loadView: function() {
        this.view = Moobile.View.at('/templates/say-hello-view.html');
    },

    viewDidLoad: function() {
        this.tapMeButton = this.view.getChildComponent('tap-me-button');
        this.tapMeButton.addEvent('tap', this.bound('onTapMeButtonTap'));
    },

    destroy: function() {
        this.tapMeButton.removeEvent('tap', this.bound('onTapMeButtonTap'));
        this.tapMeButton = null;
        this.parent();
    },

    onTapMeButtonTap: function(e, sender) {
        alert('Mooooooooo!');
    }
});

Members

view

The view managed by the current view controller. Must be initialized using the loadView method.

Type:

Methods

loadView()

Creates the view managed by this view controller. Override this method and assign a view instance to the view member of this class. Do not call the parent method as it could overwrite your view.

Note:

Do not call the parent method when overriding this method, this would overwrite the current view.

Example

Loading a view:
var MyViewController = new Class({
    Extends: Moobile.ViewController,
    loadView: function() {
        var element = new Element('div.my-view').grab(new Element('h1').set('html', 'This is my view'));
        this.view = new Moobile.View(element);
    }
});
Loading a view from a file:

The content of the file at /templates/my-view.html:

<div class="my-view">
    <h1>This is my view</h1>
</div>

The view controller:

var MyViewController = new Class({
    Extends: Moobile.ViewController,
    loadView: function() {
        this.view = Moobile.View.at('/templates/my-view.html');
    }
});

addChildViewController(viewController)

Adds the specified view controller at the bottom this view controller hierarchy.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller to add to the hierarchy.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);

addChildViewControllerAfter(viewController, after)

Adds the specified view controller to the view controller hierarchy after a specified view controller. The specified view controller's view is added after the second view controller's view.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller to add to the hierarchy.
after Moobile.ViewController The view controller used as a context to put the specified view controller after.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
var viewControllerThree = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.addChildViewControllerAfter(viewControllerThree, viewControllerTwo); // viewControllerThree is after viewControllerTwo

addChildViewControllerBefore(viewController, before)

Adds specified view controller to the view controller hierarchy before a specified view controller. The specified view controller's view is added before the given second controller's view.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller to add to the hierarchy.
before Moobile.ViewController The view controller used as a context to put the child view controller before.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
var viewControllerThree = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.addChildViewControllerBefore(viewControllerThree, viewControllerTwo); // viewControllerThree is before viewControllerTwo

getChildViewController(name)

Returns a child view controller matching a specified name.

Parameters:

Name Type Description
name String The child view controller name to search form.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController(null, 'me');
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.getChildViewController('me'); // returns viewControllerTwo

getChildViewControllerAt(index)

Returns a child view controller at a specified index.

Parameters:

Name Type Description
index String The child view controller index.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.getChildViewControllerAt(0); // returns viewControllerTwo

getChildViewControllerIndex(index)

Returns the index of a specified view controller.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller to search for.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.getChildViewControllerIndex(viewControllerTwo); // returns 0

getChildViewControllers()

Return an array containing all child view controllers.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
var viewControllerThree = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.addChildViewController(viewControllerThree);
viewControllerOne.getChildViewControllers(); // returns [viewControllerTwo, viewControllerThree]

hasChildViewController(viewController)

Indicates whether the given viewController is a child of the current instance.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller to search for.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.hasChildViewController(viewControllerTwo); // returns true

removeChildViewController(viewController, [destroy])

Removes the given viewController from the child view controllers. If destroy is true, the given viewController will also be destroyed.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller to remove.
destroy Optional Boolean Whether to destroy the view controller upon removal.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.removeChildViewController(viewControllerTwo); // removes viewControllerTwo

removeChildViewControllers([destroy])

Removes all child view controllers. If destroy is true, All child view controllers will also be destroyed.

Parameters:

Name Type Description
destroy Optional Boolean Whether to destroy the view controller upon removal.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
var viewControllerThree = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerOne.addChildViewController(viewControllerThree);
viewControllerOne.removeChildViewControllers(); // viewControllerTwo and viewControllerThree are removed

removeFromParentViewController([destroy])

Removes the current instance from its parent.

Parameters:

Name Type Description
destroy Optional Boolean Whether to destroy the view controller upon removal.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.addChildViewController(viewControllerTwo);
viewControllerTwo.removeFromParentViewController(); // viewControllerTwo is removed

presentModalViewController(viewController, [viewTransition])

Displays a child view controller over this view controller using a specified transition. The view controller presented as modal will only have a reference to its parent view controller and will use it to dismiss the modal view controller.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller.
viewTransition Optional Moobile.ViewTransition The view transition.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.presentModalViewController(viewControllerTwo); // the viewControllerTwo's view is presented over the viewControllerOne's view

dismissModalViewController()

Dismisses the current modal view controller and destroy it.

Returns:

Example:

var viewControllerOne = new Moobile.ViewController();
var viewControllerTwo = new Moobile.ViewController();
viewControllerOne.presentModalViewController(viewControllerTwo);
viewControllerOne.dismissModalViewController(); // the viewControllerTwo's view is removed

getName()

Returns the view controller name.

Returns:

Example:

var viewController = new Moobile.ViewController(null, 'me');
viewController.getName(); // returns 'me'

setTitle(title)

Sets the title using either a string or a Moobile.Label instance. When provided with a string, this method creates a Moobile.Label instance and assign the given string as its text.

Parameters:

Name Type Description
title Mixed The title as a string or as a Moobile.Label instance.

Returns:

Example:

var viewController = new Moobile.ViewController();
viewController.setTitle('Moo');

getTitle()

Returns the title.

Returns:

Example:

var viewController = new Moobile.ViewController();
viewController.setTitle('Moo');
viewController.getTitle(); // returns 'Moo'

setImage(image)

Sets the image using either a string or a Moobile.Image instance. When provided with a string, this method creates a Moobile.Image instance and assign the given string as its source.

Parameters:

Name Type Description
image Mixed The image as a string or a Moobile.Image instance.

Returns:

Example:

var viewController = new Moobile.ViewController();
viewController.setImage('path/to/an-image.png');

getImage()

Returns the image.

Returns:

Example:

var viewController = new Moobile.ViewController();
viewController.setImage('path/to/an-image.png');
viewController.getImage(); // returns a Moobile.Image instance.

setModal(modal)

Sets whether the current instance is being presented as the modal view controller of another view controller. You should rarely use this method as it's handled by the Moobile.ViewController class.

Parameters:

Name Type Description
modal Boolean Whether this view controller is modal.

Returns:


isModal()

Indicates whether the current instance is being presented as a modal view controller of another view controller.

Returns:


isViewReady()

Indicates whether the managed view is ready.

The view is considered ready when it's a child of a Moobile.Window instance in the DOM. Upon being ready, the view can be, for instance, measured.

Returns:


getView()

Returns the managed view.

Returns:


setViewTransition(viewTransition)

Sets the view transition used to push or present a view controller. You should rarely use this method as the Moobile.ViewController class handles it.

Parameters:

Name Type Description
viewTransition Moobile.ViewTransition The view transition.

Returns:


getViewTransition()

Returns the view transition.

Returns:


setViewControllerPanel(viewControllerPanel)

Sets the view controller panel containing this view controller. You should rarely use this method as the Moobile.ViewController class handles it.

Parameters:

Name Type Description
viewControllerPanel Moobile.ViewControllerPanel The view controller panel.

Returns:


getViewControllerPanel()

Returns the view controller panel containing this view controller.

Returns:


setParentViewController(parentViewController)

Sets the parent view controller. You should rarely use this method as the Moobile.ViewController class handles it.

Parameters:

Name Type Description
parentViewController Moobile.ViewController The parent view controller.

Returns:


getParentViewController()

Returns the parent view controller.

Returns:


willAddChildViewController(viewController)

Tells this view controller a child view controller is about to be added. Override this method to provide your own implementation.

Parameters:

Name Type Description
viewController Moobile.ViewController The view controller to be added.

didAddChildViewController(viewController)

Tells this view controller a child view controller has been added. Override this method to provide your own implementation.

Parameters:

Name Type Description
viewController Moobile.ViewController The added child view controller.

willRemoveChildViewController(viewController)

Tells this view controller a child view controller is about to be removed. Override this method to provide your own implementation.

Parameters:

Name Type Description
viewController Moobile.ViewController The child view controller about to be removed.

didRemoveChildViewController(viewController)

Tells this view controller a child view controller has been removed. Override this method to provide your own implementation.

Parameters:

Name Type Description
viewController Moobile.ViewController The removed child view controller.

parentViewControllerWillChange(viewController)

Tells this view controller its parent view controller is about to change. Override this method to provide your own implementation.

Parameters:

Name Type Description
viewController Moobile.ViewController This view controller's parent view controller.

parentViewControllerDidChange(viewController)

Tells this view controller its parent view controller has changed. Override this method to provide your own implementation.

Parameters:

Name Type Description
viewController Moobile.ViewController This view controller's parent view controller.

willPresentModalViewController()

Tells this view controller its about to present a modal view controller. Override this method to provide your own implementation.


didPresentModalViewController()

Tells this view controller it has presented a modal view controller. Override this method to provide your own implementation.


willDismissModalViewController()

Tells this view controller its about to dismiss the current modal view controller. Override this method to provide your own implementation.


didDismissModalViewController()

Tells this view controller it has dismissed the current modal view controller. Override this method to provide your own implementation.


viewDidRotate(orientation)

Tells this view controller the device orientation changed. Override this method to provide your own implementation.

Parameters:

Name Type Description
orientation String The orientation, portrait or landscape.

viewDidLoad()

Tells this view controller its managed view was loaded. Override this method to provide your own implementation.


viewDidBecomeReady()

Tells this view controller its managed view became ready. Override this method to provide your own implementation.


viewWillEnter()

Tells this view controller its managed view is about to enter the screen and become visible. Override this method to provide your own implementation.


viewDidEnter()

Tells this view controller its managed view enterd the screen and became visible. Override this method to provide your own implementation.


viewWillLeave()

Tells this view controller its managed view is about to leave the screen and become hidden. Override this method to provide your own implementation.


viewDidLeave()

Tells this view controller its managed view is left the screen and became hidden. Override this method to provide your own implementation.


destroy()

Destroys this view controller's view controller hierarchy as well as the view it manages. Override this method to provide your own implementation.

Returns:

Table of Contents