---

Licensed to the Apache Software Foundation (ASF) under one or more

contributor license agreements. See the NOTICE file distributed with

this work for additional information regarding copyright ownership.

The ASF licenses this file to You under the Apache License, Version 2.0

(the “License”); you may not use this file except in compliance with

the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an “AS IS” BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

layout: docpage title: Jewel View description: The Jewel View permalink: /component-sets/jewel/view

< Jewel Components list

Jewel View

Reference

Available since version 0.9.4.

Class	Extends	Implements
org.apache.royale.jewel.View{:target=‘_blank’}	ViewBase{:target=‘_blank’}	IMXMLDocument{:target=‘_blank’}

Note: This component is currently only available for JavaScript.

Overview

The View class is used as the initialView in a Royale Jewel Application. It is generally used as the root tag of MXML documents and UI controls and containers are added to it.

For responsive applications you can use ResponsiveView instead.

Example of use

In MXML declare a View like this:

<j:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:j="library://ns.apache.org/royale/jewel"
	width="100%" height="100%">

    <!-- View code goes here -->
</j:View>

or directly in the application mxml file inside the initialView:

<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:j="library://ns.apache.org/royale/jewel">
	...
	<j:initialView>
		<j:View width="100%" height="100%">
			<!-- View code goes here -->
		</j:View>
	</j:initialView>
</j:Application>

In ActionScript we can do the same in the following way:

// instantiate the view
var view:View = new View();
// add content to the view and and add to application's initialView
application.initialView = view;

where application is the Jewel Application.

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.View{:target=‘_blank’} for a more detailed list of properties and methods.

Properties

PROPERTY	Type	Description
applicationModel	Object	A reference to the Application's model.
currentState	String	The name of the current state.
numElements	int	The number of element children that can be laid out.
mxmlContent	Array	The array of childs for this view. Is the DefaultProperty.
popUpParent	IPopUpHostParent	A view can be the parent of a popup that will be part of the layout.
popUpHost	IPopUpHost	A view can host popups that will be part of the layout.
states	Array	The array of view states. These should be instances of org.apache.royale.states.State{:target=‘_blank’}

Methods

Method	Parameters	Description
addElement	c(IChild), dispatchEvent(Boolean=true)	Add a component to the parent.
addElementAt	c(IChild), index(int), dispatchEvent(Boolean=true)	Add a component to the parent at the specified index.
getElementIndex	c(IChild)	Gets the index of this subcomponent.
getElementAt	index(int)	Get a component from the parent at specified index.
removeElement	c(IChild), dispatchEvent(Boolean=true)	Remove a component from the parent.

Relevant Events

The most important event is initComplete, which indicates that the initialization of the view is complete.

It is needed when some action coded in a callback function needs to be triggered when the view is ready to use after initialization.

You can attach callback listeners to the initComplete event in MXML as follows:

<j:View initComplete="initCompleteHandler(event)"/>

the initComplete event will use the initCompleteHandler callback function you provide in ActionScript:

<fx:Script>
    <![CDATA[      
        private function initCompleteHandler(event:Event):void {
            trace("View is ready!");
        }
    ]]>
</fx:Script>

When the view is initialized the message “View is ready!” appears in the console log.

In ActionScript we can add an event handler this way:

var v:View = new View();
v.addEventListener('initComplete', initCompleteHandler);

Relevant Beads

Bead Type	Implementation	Description
GroupView{:target=‘_blank’}	org.apache.royale.core.IBeadView{:target=‘_blank’}	This is the default view bead.
ViewLayout{:target=‘_blank’}	org.apache.royale.core.IBeadLayout{:target=‘_blank’}	This is the default layout bead.

Optional Beads

Bead Type	Implementation	Description
ViewDataBinding{:target=‘_blank’}	org.apache.royale.binding.DataBindingBase{:target=‘_blank’}	Provide binding capabilities to the view.

Common Beads

Jewel View can use any of the layout beads available in the Jewel library. You can also check Related controls to see some preconfigured views with specific layouts.

More examples

• Creating a Hello World in Apache Royale{:target=‘_blank’}
• Using the Jewel Alert Control{:target=‘_blank’}
• Using View States to show or hide content{:target=‘_blank’}

Related controls

Other useful Jewel view components are:

• ResponsiveView
• Application