Available since version 0.9.4.
Class | Extends |
---|---|
org.apache.royale.jewel.ResponsiveView{:target=‘_blank’} | View{:target=‘_blank’} |
Note: This component is currently only available for JavaScript.
ResponsiveView is the class used as the initialView
in a responsive Royale Jewel Application. It is generally used as the root tag of MXML documents, and UI controls and containers are added to it.
It normaly can host a TopAppBar, FooterBar, Drawer and a ApplicationMainContent with other organized content for navigation.
For non-responsive applications you can use just a simple View instead.
In MXML declare a ResponsiveView
like this:
<j:ResponsiveView xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:j="library://ns.apache.org/royale/jewel"> <!-- ResponsiveView code goes here --> </j:ResponsiveView>
ResponsiveView doesn't need to specify
width
orheight
since they are both sized 100% by default. In this way we can use the width of the application container to apply responsive rules on any part of the application.
You can also set the ResponsiveView 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:ResponsiveView> <!-- ResponsiveView code goes here --> </j:ResponsiveView> </j:initialView> </j:Application>
In ActionScript we can do the same in the following way:
// instantiate the view var responsiveView:ResponsiveView = new ResponsiveView(); // add content to the view and and add to application's initialView application.initialView = responsiveView;
where application
is the Jewel Application.
Check the Reference of org.apache.royale.jewel.ResponsiveView{:target=‘_blank’} for a more detailed list of properties and methods.
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’} |
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. |
The most important event is initComplete
, which indicates that 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:ResponsiveView 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("ResponsiveView is ready!"); } ]]> </fx:Script>
When the view is initialized the message “ResponsiveView is ready!” appears in the console log.
In ActionScript we can add an event handler this way:
var rv:ResponsiveView = new ResponsiveView(); rv.addEventListener('initComplete', initCompleteHandler);
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. |
Bead Type | Implementation | Description |
---|---|---|
ViewDataBinding{:target=‘_blank’} | org.apache.royale.binding.DataBindingBase{:target=‘_blank’} | Provide binding capabilities to the view. |
Other useful Jewel view components are: