Chapter 2. Overview

The Yahoo KONtx Toolbox contains the common user interface elements and behaviors used in building apps. The purpose of the Yahoo KONtx Toolbox is to:

  • Help streamline the app development process.
  • Encapsulate primitive objects to provide extended functionality.
  • Provide a normalized programming interface with consistency in app layout and behaviors.
  • Promote the adoption of Yahoo design guidelines by app developers.

The supported standards in the Yahoo KONtx Toolbox are:

  • DOM 2 node structure
  • DOM 2 event model
  • XPath
  • Limited CSS
    • No selectors, inline only
    • No relative positioning
    • Limited box model

The Yahoo KONtx Toolbox is implemented through the KONtx Framework which is defined by the JavaScript file Framework/kontx/version/src/all.js. This file is included by each TV App and defines the elements, components, controls, and behaviors of Yahoo objects used for the rapid development of apps.

Framework Development Methodology

The design and implementation of TV Apps is based on a Framework Development methodology. The Yahoo KONtx Framework is a flexible application generator which supports the creation of all types of TV Apps. The KONtx Framework encapsulates all communication with the Application Engine (the "Engine") and provides pre-packaged user interface components and building blocks for the app developer. The KONtx Framework listens for events from the Engine that are passed to the app through the Container. The Container is the encapsulating software that manages the communication and display for multiple apps on the connected TV device. The Container supports the privileged functionality of both the dock and the sidebar, and is in charge of all those elements that are outside of the control of individual apps (for example, dock, sidebar, global toolbar, bookmark activation, adding, and deleting apps, and others).

An individual TV App written in object literal notation JavaScript makes calls to and is wrapped by the KONtx Framework. The KONtx Framework communicates with the Engine through the Container app and the Container API. The Container app manages the dock and all the app’s running simultaneously in a user’s profile.

The call stack for KONtx Framework development is illustrated below:

Determine the version of the KONtx Framework

When communicating with Yahoo support you may need to indicate the version of the Engine Toolbox Framework (KONtx Framework). KONtx Framework version 0.2.2 has been deprecated and you should move to newer supported Framework versions. To determine the version of the Framework you need to switch to Main app and print this JavaScript property from the console:

TV App Views Extend View Base Classes

The KONtx Framework has elevated repeated patterns found in many app implementations to be part of the Yahoo core Framework proper. TV App code has been restructured around views and view classes. Events and methods are simplified to support the concepts of UI component creation and content update.

The KONtx Framework will simplify coding going forward by having a lot of previously manual tasks handled for you automatically, it will also maximize the performance of your apps for the best possible user experience leveraging internal caching built into the Engine.

The basic app views (bookmark, sidebar, fullscreen) are represented by these classes:

  • KONtx.system.SnippetView – this view is an abstract base class for bookmarks, use AnchorSnippetView and ProfileSnippetView instead.
  • KONtx.system.AnchorSnippetView – the main bookmark view for the app. This view is not removed when switching profiles if both profiles have the app installed.
  • KONtx.system.ProfileSnippetView – a profile specific bookmark view. This view is removed when switching profiles.
  • KONtx.system.SidebarView – a sidebar view.
  • KONtx.system.FullscreenView – a fullscreen view.

To create a view for your app, you extend the view class and override two app-specific methods: createView(), and updateView(). The method createView() is where you create the basic user interface components in the view. No content is present at this stage. The createView() method is called once. The method updateView() is where you populate the view with content. The updateView() method is called each time a user views the page, or the data on the page has been updated. The user interface components in the view do not need to be physically re-rendered to update data in the view.

Using the methods createView() and updateView() allow the Engine to optimize rendering views. Once createView() is called, the Engine does not need to create the XML elements onscreen again. Calling the updateView() method is fast because it can swap content inside the view without having to re-render the XML, which is often slow.

Application View Initialization

Each view is defined by a view Id, a view class and an optional data parameter. The defaultViewId is the navigation start point or HOME of your app. The settingsViewId is displayed when the GREEN key on the remote control is pressed. The settingsViewId is used for the “About Box” of the app, and can be set to the default view KONtx.views.AboutBox.

The views array and the defaultViewId properties are required. The settingsViewId property is recommended and an error is logged if the settings view is not set. If your app does not require a network connection set the widgetNeedsNetwork property to false. The default value for widgetNeedsNetwork is true.

Table of Contents