You.i Engine
Scene Views

Detailed Description

The CYISceneView class is the base class for all user interface components.

A scene view is derived from the CYISceneNode class. Like a scene node, it can accept input, respond to scene tree transformations, and provide custom rendering. Unlike a scene node, it receives much of its visual behaviour from a view template and associated timelines exported from After Effects.

Focus plays a major role in creating predictable models of interaction. You.i Engine provides a robust focus model that can be extended to accommodate custom focus behaviors.

A scene view can have responsive layout applied to it when using the After Effects plug-in. Responsive layout is a means to control how a screen should scale when the density or proportions of a target display are different than those specified in the design. For more information, see CYISceneManager::ScaleType and EYIAnchorType for the various responsive layout anchor types and scales that can be applied.

Creating Custom Scene Views

Like the default views supplied with You.i Engine, a custom view must specify the class to use as a property on a composition in After Effects via the Properties Panel:

    class: MyCustomViewName

This property defines a string that is used to match against the name provided in an RTTI declaration. A custom view must inherit the CYISceneView type and define an appropriate RTTI type. An RTTI type is used to associate a class with a string name, so that the view can be instantiated automatically by You.i Engine when a view template is being used to build a view. Below is an example declaration:

    YI_TYPE_DEF(MyCustomViewName, CYISceneView)

There are other variations of the above macro, but the one illustrated here should be sufficient for most views. Please refer to Utility for more information about RTTI.

Call Ordering

Scene views have a two stage construction process. Custom scene views are required to provide an empty (default) constructor and should extend the CYISceneView::Init function to set up and configure the view prior to using it. It's important to remember to call the base class function CYISceneView::Init at a minimum when defining an implementation. Custom implementations should return false if the scene view failed to be constructed and should also check the return value coming from the base class.

Because the visual behaviors and properties for a scene view are defined in After Effects, the view will be built automatically by You.i Engine via the CYISceneView::BuildFromTemplate function before calling the CYISceneView::Init function when layout files are decoded using the associated asset or factory classes, or the various scene helper methods such as CYISceneManager::LoadScene. In the case where the view is constructed manually, the initialization call will fail if the view has been built without using a template.


When creating a custom scene view, it's important to consider interactivity. If the view is intended to be interactive, then the view will need a mesh to define the interactive region. A mesh is a set of vertices and indices that are used to define a piece of geometry, see the CYIMesh class for more details. This geometry provides a means for the view to capture input, such as touch input or through a pointing device. Neither scene view nor scene nodes have a mesh by default. Custom views can easily set a default hit zone by calling CYISceneView::EnableDefaultHitZone in their initialization functions. The default hit zone can be removed by setting the mesh to null via the CYISceneNode::SetMesh function.

Please refer to Events for more information about how input is captured and dispatched.


Focus must be considered when creating a custom view. If the custom view has children and those children require specific focus behaviors, then there are specific functions that must be implemented in order for the focus system to work as expected. The following functions should be considered:

Function Description
CYISceneView::HandlesFocusInDescendants Indicates whether or not this view handles focus in its descendants.
CYISceneView::RequestFocus Assigns initial focus within the view.
CYISceneView::FindNextFocusInDescendants Handles focus changes within this view.
CYISceneView::FocusChangedInDescendants Custom visual behavior when focus is lost.
CYISceneView::FocusGainedInDescendants Custom visual behavior when focus is gained.


Layouts can be set on views using the CYISceneView::SetLayout function. Custom views requiring custom measuring must implement the CYISceneMode::Measure function. For more information on the layout system, please see the Layout documentation.

Run-Time Type Information (RTTI)

In addition to providing a means for the view to be instantiated dynamically, the YI_TYPE_DEF macro also provides a means to register the custom view with the linker. Since scene views are instanced dynamically at run-time when the application loads content created in After Effects, it may be entirely possible that the compiler does not recognize use of a custom view as it may not be referenced directly in application code. When this happens, the compiler may strip the symbol during the linking process. To prevent this from happening, a reference to the view needs to be created.


Timelines are typically used by scene views to drive animation behavior but can also be used for any number of creative applications. See CYITimeline for more information about how timelines are accessed and used.

Please refer to Animation for more information about animating components.

Default Timelines

There are a few default timelines recognized by every view. These timeline names are defined for common animation behaviors each view may need to use. They are not required for the view to function, but will be used automatically if available. Application developers should be aware of these names and others like it used in the engine, so that accidental use does not occur.

Timeline Function Description
FocusIn Optional The animation played when a view receives focus.
FocusOut Optional The animation played when a view loses focus. If not defined, the reverse of FocusIn is used.
In Optional This timeline is used in a variety of circumstances, depending on the view type.
  • The animation played when a view is a list item that is inserted in the list.
  • The animation played when a view is part of a custom CYIStackView implementation, and a new active view is being set.
Out Optional This timeline is used in a variety of circumstances, depending on the view type.
  • The animation played when a view is a list item that is removed from the list.
  • The animation played when a view is part of a custom CYIStackView implementation, and the active view is becoming inactive.

Custom Timelines

Outside of the default names listed above, other timelines created in After Effects can be accessed easily via the CYISceneView::GetTimeline function:

    CYITimeline *pSpinAnimation = pSceneView->GetTimeline("SpinAnimation");

Timeline groups can be used to simultaneously control groups of timelines, including other timeline groups. Building timeline groups is also easy, if a common marker name is used. Simply call the following function to generate a CYITimelineGroup object:

    CYITimelineGroup *pAnimateCollapse = pSceneView->BuildTimelineGroup("Collapse");


 List View
 List views provide a means to display dynamic and scrollable content.


class  CYIPlatformView
 CYIPlatformView is a specialized view which combines the uses of an engine view (created through view templates) and a native platform view. This allows users to better integrate native platform views with applications created by You.i Engine. The user can also use values and timelines taken from view templates to position or animate the native platform view. More...
class  CYIWebView
 A visual representation of web content with basic navigation controls. More...
class  CYIPlayerTimePopupView
 This view displays current playing time. More...
class  CYIVideoSurfaceView
 View representation of a CYIAbstractVideoPlayer's CYIVideoSurface. More...
class  CYIAbstractButtonView
 Provides an abstraction for a button which accepts user interaction in the form of a press. More...
class  CYIActivityIndicatorView
 CYIActivityIndicatorView is a view that runs a timeline in a loop, showing that some processing is taking place. The view is automatically hidden upon initialization. More...
class  CYICreateDeleteViewRecycler
class  CYIDecoratedView
 A class used to add a background and a border to its content. This view supports clipping the content to the area defined by the border. More...
class  CYIDrawerView
 The CYIDrawerView can be placed around the edges of a view, making it possible for the user to swipe to open and close. More...
class  CYIFocusZoneView
 CYIFocusZoneView is a focus handler which assigns initial focus within its descendants based on which CYIFocusZoneView::EntryMode is set. More...
class  CYIImageView
 A simple view which downloads and renders images. More...
class  CYIListView
 A class that provides streaming functionality in a scrolling view. More...
class  CYIPageIndicatorView
 Page indicator control. More...
class  CYIPooledViewRecycler
class  CYIProgressBarView
 Template for a After Effects composition representing a progress bar. More...
class  CYIPushButtonView
 Provides an implementation of a button which accepts user interaction in the form of a press and release. More...
class  CYIRadioGroupView
 CYIRadioGroupView is a view that contains toggled button children, ensuring only one of them is ON at any given time. More...
class  CYISceneView
 The base class for all view types. Views are containers of renderable elements that often define interaction behaviours through APIs and user-driven events. More...
class  CYIScreenView
 The view representation of a screen. More...
class  CYIScrollBarView
 A scrollbar that offers thumb size adjustment, and an auto-hide feature. More...
class  CYIScrollController
 CYIScrollController provides scrolling behaviour to views. More...
class  CYIScrollingTextView
class  CYIScrollingView
 Allows users to scroll and pan through content inside. More...
class  CYIStackView
 CYIStackView displays one of it's child views at a time. More...
class  CYIToggleButtonView
 Provides an implementation of a button which maintains a state based on user interaction. More...
class  IYIViewRecycler
class  CYIPlayerPreviewThumbnailView
 This view will display thumbnails. More...


bool operator== (const CYIScrollingView::Magnets &lhs, const CYIScrollingView::Magnets &rhs)
bool operator!= (const CYIScrollingView::Magnets &lhs, const CYIScrollingView::Magnets &rhs)

Function Documentation

◆ operator!=()

bool operator!= ( const CYIScrollingView::Magnets lhs,
const CYIScrollingView::Magnets rhs 

◆ operator==()

bool operator== ( const CYIScrollingView::Magnets lhs,
const CYIScrollingView::Magnets rhs