Screen

What is 'screen'?

Screen is a high-level building block for your page.
It represents a single page in your SPA application, related to some URL.

Screen is basically everything you see on your screen.

It is made of a template (with composites) and a callback, bounded to some URL.

How to reason about it?

You should use screen to define a single addressable page of your application.

This is one of the "entry points" of your application.

Usage

Definition

yaf.screen({
  // String.
  // Screen name. Should be camelCase.
  name: 'myScreen', 

  // String. 
  //The content of the associated style tag
  styles: require('./styles.css'),

  // String. 
  // The content of the associated template
  template: require('./template.html'), 

  // Map (String : Module|String).
  // The map of Alias Names and module objects to be used with element's associated logic
  inject: {
     // AMD/CommonJS format, will inject module.exports as ComponentAliasName
     // It's the same as var ComponentAliasName = require('../some-other-component');
    'ComponentAliasName' : require('../some-other-component'),

    // Angular format, will inject MySuperDirective using angular's DI
    // Also, it will add the injected angular-module to dependencies 
    'MySuperDirective' : 'my-super-module',

    // Mixed Angular-CJS/AMD format
    'MyCjsDirective' : require('../path/to/angular-module').name
  },
  
  // Array[String]
  // The list of channel names. The channels will be created automatically.
  channels: [ 'someChannel' ],

  // Function.
  // Will be called when screen is shown after route path is resolved and changed.
  ready: function(){
    // the map of values, available in template. Defaults to {}
    this.templateScope;

    // the map of injected components 
    this.injector;

    // the injected component reference
    this.injector.ComponentAliasName;

  }
});

Simplest form

yaf.screen({
  name: 'login',
  route: '/login',
  styles: require('./styles.css'),
  template: require('./template.html')
});

Conventions

• Screen MUST bind itself to some URL (controlled by framework).
• Screen MUST register all channels used on this page (controlled by framework. Warning will be issued for misused channels).
• Screen CAN have global channel definitions.
• Screen CAN have link definitions to control composites' relations.