Getting started with the TV Application Layer
Create a new directory to house your application and configure your web server to serve files from it. If you are going to make use of the (minimal) Node.js bootstrap code included within the framework, you will also need Node.js and NPM installed.
Within the application directory, check out the TAL repo to a folder named ‘antie’ (the internal name for TAL)
git clone https://github.com/fmtvp/tal.git antie
Change into the directory and use NPM to install its node.js dependencies:
cd antie
npm install
You can arrange the rest of your application as you please, but the example applications and included device configurations assume the directory structure below:
├── sampleapp // Root application folder
│ ├── antie // The framework
| | ├── config // Framework configuration directory
| | | ├── devices // Framework Device configuration files [1]
| | | ├── sometv.json
| | | ├── someothertv.json
| | | ├── myfaveblurayplayer.json
| | | ├── ...
| | ├── ... // Other framework directories
│ ├── config // Application device configuration files [2]
│ │ ├── sometv.json
│ │ ├── someothertv.json
│ │ ├── myfaveblurayplayer.json
| | ├── ...
│ ├── index.php // Index - application entry point for devices
│ ├── static // JavaScript, images, video etc
│ │ ├── script // JavaScript
│ │ │ ├── appui
│ │ │ │ ├── components // The components that make up the application
│ │ │ │ │ ├── videoplayer.js
│ │ │ │ │ ├── menubrowser.js
│ │ │ │ ├── layouts // Resolution specific configuration
│ │ │ │ │ ├── 1080p.js
│ │ │ │ │ ├── 540p.js
│ │ │ │ │ └── 720p.js
│ │ │ │ └── sampleapp.js // JavaScript entry point of the application
│ │ │ └── image // Local images
│ │ │ ├── prettypic.jpeg
│ │ │ ├── toptvshow.jpeg
│ │ │ ├── titlebar.jpeg
│ │ │ └── penguins.jpeg
│ │ └── style // CSS
│ │ ├── base.css // Base - Applied to everything
│ │ └── layouts // Resolution specific styles
│ │ ├── 1080p.css
│ │ ├── 540p.css
│ │ └── 720p.css
If you do use another structure, you will need to:
The framework abstracts device specific portions of code to a common API. To specify which differences apply to which devices, configuration files are used [1]. The framework contains configuration files for a number of devices which specify defaults we have found to work well. You are free to override these defaults and provide your own configuration via device configuration files within your application. [2]
For more information see Device Configuration.
The talexample repository contains an example framework application. It demonstrates the use of some TAL widgets and media playback.
It includes its own simple web server implemented in Node.js. While TAL’s static JavaScript files can be hosted statically on any web server, the index page - containing the <script> tags that power TAL - must be generated based on the calling device’s brand and model. The Node.js server included with the example project performs both roles for simplicity.
To check out and run the example project:
git clone https://github.com/fmtvp/talexample.git talexample
cd talexample
npm install
node index.js
Finally, browse to:
http://127.0.0.1:1337/
Example Application Menu
Example Application Carousel
Over the next few pages we will describe the minimum setup required to launch a TAL application for use on multiple devices.
This stripped down ‘Hello World’ application is also in the talexample repo, but on a separate branch, helloworld
git checkout helloworld
Hello World
Next page: Creating an index