A View is a unique screen in your project. It's essentially a full screen scroll component with special hooks into the App component. A common format for a View is shown here:

# 0.0.0 My View

myView = new View
    title: 'Landing'
    key: "0.0.0"
    contentInset:
        top: 0
        bottom: 72


myView.onPreload (resolve, reject) ->
    fetch "https://baconipsum.com/api/?type=meat-and-filler"
    .then (response) -> response.json()
        .then (json) -> resolve(json[0])


myView.onLoad (loremText) ->

    # LAYERS

    for sentence, i in loremText.split('  ')
        new TextLayer
            parent: @content
            width: @width
            fontSize: 16
            text: sentence

    # EVENTS

    @content.children[0].onTap -> print "Hello world!"


myView.onPostload ->
    Utils.stack(@content.children, 16)
    @updateContent()

Views are Framework's secret to supporting Very Large Prototypes. The basic idea is that a View's content is only ever present while the View itself is showing. When the App loads a View, the View creates its content right then and there. When the App navigates away, the View erases its content.

To make this happen, Views have four "lifecycle" methods: preload, load, postload and unload.

When the App navigates to a view ( using app.showNext(view) ), it runs view.preload, a Promise. When the Preload promise resolves, it passes the resolved data into view.load, a method. When this method completes and the stack clears, it then runs view.postload, another method, and transitions to the view.

The first methods are used to generate content. Because view.preload is a Promise, it can be used to fetch asynchronous data. The App will show a "loading" animation as it waits for the preload promise to resolve. App.load is where most of the work will be done, and should be used to build all of the layers and functions that operate on those layers.

Later, when the App navigates to a different view, it runs the exiting view's view.unload method. This method destroys all of the view's child Layers except for view.content -- and then it destroys all of content's children, too. When the App navigates back to the View, however, either through a showNext or showPrevious, the View runs its load method again, rebuilding the content.

For this to work, the View's preload and/or load methods must be used to create a View's content. Any descendants that are not created using these methods will be erased after the View unloads, and not re-created when it loads again.

myView = new View
    #title: 'Getting Started'
    #padding: {top: 16, left: 16, right: 16}
    #key: '0.0.1 My View'

myView.onLoad ->
    new Layer
        parent: @content

app.showNext(myView)

The view's title. If the App is set to change its title based on the current view, this property will be used for the app's title.

myView = new View
    title: 'Home'
 
myView.title = 'Home'

The padding to use for new children. Layers with edges outside of the padding will be adjusted to fit into it. Changing a view's padding won't affect children already added to the view. To turn off padding, set a null value. When a View is created, its default paddings are {top: 16, left: 16, right: 16}.

myView = new View
    padding: {top: 16, left: 16, right: 16}
    
myView.padding = {top: 16, left: 16, right: 16}

Adds a fixed label to the View for testing and demonstration purposes. Constructor only.

myView = new View
    key: "0.0.1 My View"

By default, all Views destroy their content when the View unloads. This is right and natural, but it may cause problems on certain drill-down interfaces, such as when returning to the results of a search. To prevent the View from resetting when it unloads, you can enable preserveContent.

myView = new View
    preserveContent: true
    
myView.preserveContent = true

If enabled, the View will destroy itself after it unloads.

myView = new View
    oneoff: true
    
myView.oneoff = true

When the App shows a new View, it will first run the View's preload Promise. By default, this Promise resolves immediately. When redefining view.preload, be sure that the promise resolves. Any data it resolves will be passed into the view.load method. It should be overwritten using the view.onPreload method.

myView = new View

myView.onPreload (resolve, reject) ->
    fetch "https://baconipsum.com/api/?type=meat-and-filler"
    .then (response) -> response.json()
        .then (json) -> resolve(json[0])

myView.onLoad (loremText) ->
	
    new TextLayer
        parent: @content
        width: @width
        fontSize: 16
        text: loremText

When the App shows a new View, it will run the View's load method as soon as view.preload resolves, with the resolved data as an argument. This method should be used to create all of the View's layers and functions that operate on those layers.

A View must have a load property - you'll get an error if you try to show a View that doesn't have one.

myView = new View

myView.onPreload (resolve, reject) ->
    fetch "https://baconipsum.com/api/?type=meat-and-filler"
    .then (response) -> response.json()
        .then (json) -> resolve(json[0])

myView.onLoad (loremText) ->
	
    new TextLayer
        parent: @content
        width: @width
        fontSize: 16
        text: loremText

Additional event listeners may also be added to the view's load using standard events, shown in the Events section below.

The view.postLoad method will run after view.load completes and after a 1 millisecond timeout, giving the current stack a chance to clear. This method is useful for performing cleanup and positioning work on the layers created in view.load.

myView = new View

myView.onPreload (resolve, reject) ->
    fetch "https://baconipsum.com/api/?type=meat-and-filler"
    .then (response) -> response.json()
        .then (json) -> resolve(json[0])

myView.onLoad (loremText) ->
	
    for sentence, i in loremText.split('  ')
        new TextLayer
            parent: @content
            width: @width
            fontSize: 16
            text: sentence

myView.onPostload ->
    Utils.stack(@content.children, 16)
    @updateContent()

Additional event listeners may also be added to the view's load using standard events, shown in the Events section below.

When the App navigates away from a View, it will run the View's unload method with three arguments: the app instance, the App's new current View, and the app's previous View (this view). This method will run just before the View destroys its sublayers.

myView = new View

myView.onPreload (resolve, reject) ->
    fetch "https://baconipsum.com/api/?type=meat-and-filler"
    .then (response) -> response.json()
        .then (json) -> resolve(json[0])

myView.onLoad (loremText) ->
	
    for sentence, i in loremText.split('  ')
        new TextLayer
            parent: @content
            width: @width
            fontSize: 16
            text: sentence

myView.onPostload ->
    Utils.stack(@content.children, 16)
    @updateContent()

myView.onUnload ->
    database.meaninglessData = @content.children.length

A Framerish shortcut for setting a view's preload Promise.

myView.onPreload (resolve, reject) ->
    Utils.domLoadJSON "data/users.json", (data) -> 
        resolve(data)

A Framerish shortcut for setting a view's load callback.

myView.onLoad (data) -> 
    for user in data
        new TextLayer
            parent: @content
            text: user.name

A Framerish shortcut for setting a view's postload callback.

myView.onPostload -> 
    Utils.stack(@content.children, 16)
    @updateContent()

A Framerish shortcut for setting a view's unload callback.

myView.onUnload -> 
    print 'Goodbye world!'

Events may be added to the View using the "load" event. Adding listeners will not change or replace the view's load property.

myView.on "load", -> print "view is loaded!"

Events may be added to the View using the "unload" event. Adding listeners will not change or replace the view's unload property.

myView.on "unload", -> print "view just unloaded!"