<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Apache Royale Blog</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="/css/styles.css"><link rel="shortcut icon" href="/img/favicon.ico"></head><body class="page post" id="main"><header class="docs-header"><div class="container"><div class="topbar"><div class="topbar-left"><a href="/"><span class="site-title">Apache Royale</span></a></div><div class="topbar-center"></div><div class="topbar-right"><button class="topMenu-dropbtn"><i class="fa fa-bars"></i>&nbsp;Menu</button><ul class="topMenu"><li><a href="/features">Features</a></li><li><a href="https://apache.github.io/royale-docs/get-started">Get Started</a></li><li><a href="/download">Download</a></li><li><a href="/docs">Docs</a></li><li><a href="/blog">Blog</a></li><li><a href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="fa fa-github"></i> GitHub</a></li></ul></div></div><div class="post-header"><h1>Apache Royale Blog</h1><div class="post-meta"></div></div></div></header><div class="page-content"><div class="container"><article><h2 class="post-title"><a href="/blog/loading-external-data-through-httpservice/">Loading external data through HTTPService</a></h2><div class="post-meta">by Carlos Rovira on September 23, 2018</div><div><p>This example shows you how to use <strong>HTTPService</strong> to access external data to use in your Apache Royale application.</p><p>You can use HTTPService to retrieve data in XML, JSON, or other formats. We'll use Github API services to get JSON formatted GitHub data so we can load info about the code of this example, which is hosted in GitHub.</p><p>It uses the new Jewel UI set that supports themes and is available in <a href="https://royale.apache.org/download/">the 0.9.4 release or later</a>.</p><pre><code class="language-mxml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;j:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
              xmlns:j=&quot;library://ns.apache.org/royale/jewel&quot;
              xmlns:js=&quot;library://ns.apache.org/royale/basic&quot;
              xmlns:html=&quot;library://ns.apache.org/royale/html&quot;
              xmlns:services=&quot;services.*&quot;&gt;

    &lt;fx:Script&gt;
        &lt;![CDATA[
           import org.apache.royale.events.Event;
           import org.apache.royale.events.MouseEvent;
           import org.apache.royale.jewel.Alert;

           public function getGithubContent(event:MouseEvent):void
           {
               service.getContent();
           }
           
           public function dataReadyHandler(event:Event):void
            {
               Alert.show(service.jsonToString, &quot;JSON data retrieved&quot;);
               jsonData.html = &quot;Some JSON Data: &lt;br&gt;&lt;strong&gt; - service.json.name:&lt;/strong&gt; &quot; + service.json.name + 
                                &quot;&lt;br&gt;&lt;strong&gt; - service.json.sha:&lt;/strong&gt; &quot; + service.json.sha +
                                &quot;&lt;br&gt;&lt;strong&gt; - service.json._links.html&lt;/strong&gt; &quot; + service.json._links.html;
                sourceCodeMXMLText.text =  service.sourceCode;
            }
        ]]&gt;
    &lt;/fx:Script&gt;
    
    &lt;fx:Declarations&gt;
        &lt;services:GitHubService id=&quot;service&quot; 
           sourceCodeUrl=&quot;https://api.github.com/repos/apache/royale-asjs/contents/examples/blog/BE0011_Loading_external_data_through_HTTPService/src/main/royale/BE0011_Loading_external_data_through_HTTPService.mxml&quot;
           dataReady=&quot;dataReadyHandler(event)&quot;/&gt; 
    &lt;/fx:Declarations&gt;

    &lt;j:initialView&gt;
        &lt;j:View&gt;
            &lt;j:beads&gt;
                &lt;j:HorizontalCenteredLayout/&gt;
            &lt;/j:beads&gt;

            &lt;j:Card percentWidth=&quot;90&quot;&gt;
                &lt;html:H3 text=&quot;Loading Github external data through HTTPService&quot;/&gt;
                
                &lt;j:Label text=&quot;This example loads its source code in the text code panel:&quot;/&gt;

                 &lt;html:Pre height=&quot;300&quot; percentWidth=&quot;100&quot; style=&quot;background-color: white&quot;&gt;
                    &lt;html:beads&gt;
                        &lt;j:ScrollingViewport/&gt;
                    &lt;/html:beads&gt;
                    &lt;html:Code id=&quot;sourceCodeMXMLText&quot;/&gt;
                &lt;/html:Pre&gt;
                
                &lt;j:Label id=&quot;jsonData&quot; multiline=&quot;true&quot; html=&quot;This label shows JSON data when loaded.&quot;/&gt;

                &lt;j:Button text=&quot;Retrieve source code from Github&quot; emphasis=&quot;primary&quot; click=&quot;getGithubContent(event)&quot;/&gt;
             &lt;/j:Card&gt;
        &lt;/j:View&gt;
    &lt;/j:initialView&gt;
&lt;/j:Application&gt;
</code></pre><p>We create an Apache Royale interface that shows a text code panel to load the source code of this example in it. Github doesn't let us load a page from its domain in an iFrame, so this is the only way to embed GitHub content in your application.</p><p>The text code panel is made of <em>pre</em> and <em>code</em> html tags with some custom style to make the background white. We provide a Label to show accessing Json data directly with dot notation. Finally we provide a button to trigger the <strong>HTTPService</strong>.</p><blockquote><p><strong>Tip:</strong> We use the <strong>ScrollingViewport</strong> bead to add scrolling behavior to our text code panel.</p></blockquote><p>The most important piece in this example is the custom <strong>GitHubService</strong> class that wraps the HTTPService object. We declare it in MXML in our application to pass the Github URL to request and declare an event handler to show the data once it is loaded.</p><p>This is the <strong>GitHubService</strong> class:</p><pre><code class="language-as3">package services
{
    import org.apache.royale.events.Event;
    import org.apache.royale.events.EventDispatcher;
    import org.apache.royale.net.HTTPConstants;
    import org.apache.royale.net.HTTPService;
    import org.apache.royale.utils.string.Base64;

    [Event(name=&quot;dataReady&quot;, type=&quot;org.apache.royale.events.Event&quot;)]
    /**
     * GitHubService is in charge of getting the source code of some example
     * so we can show the code in a TabBarContentPanel along with the working example
     */
    public class GitHubService extends EventDispatcher
    {
        /**
         * constructor
         */
        public function GitHubService():void
        {    
            service = new HTTPService();
            service.addEventListener(HTTPConstants.COMPLETE, completeHandler);
        }

        /**
         * the service that performs the request to Github
         */
        private var service:HTTPService;

        /**
         * we dispatch an event once we have the source code from github
         */
        private function completeHandler(event:Event):void
        {
            dispatchEvent(new Event(&quot;dataReady&quot;));
        }

        private var _sourceCodeUrl:String = null;
        /**
         * The source code url we want to retrieve
         */
        public function get sourceCodeUrl():String
        {
            return _sourceCodeUrl;
        }
        public function set sourceCodeUrl(value:String):void
        {
            _sourceCodeUrl = value;
            service.url = sourceCodeUrl;
        }

        /**
         * json returns the retrieved GitHub JSON Object
         */
        public function get json():Object
        {
            return service.json;
        }

        /**
         * jsonToString returns the retrieved GitHub JSON Object as String
         */
        public function get jsonToString():String
        {
            return service.data;
        }

        /**
         * decode and return the base 64 content (real source code)
         */
        public function get sourceCode():String
        {
            return Base64.decode(service.json.content);
        }
        
        /**
         * trigger the HTTPService to retrieve the GitHub data
         */
        public function getContent():void
        {
            service.send();
        }
    }
}
</code></pre><p>We instantiate the HTTPService in the constructor, and declare an event listener for the <strong>HTTPConstants.COMPLETE</strong> event, so we perform actions when the data finishes loading. The action we do from this class is throw a new event &quot;<strong>dataReady</strong>&quot; to consume in our application.</p><p><strong>sourceCodeUrl</strong> will pass the GitHub url to be called by our service class, and fills <strong>HTTPService.url</strong> so HTTPService knows what url to target.</p><p>As we get the data loaded, we can manage it with <strong>HTTPService.data</strong>, and we have a convenient <strong>HTTPService.json</strong> getter to access the JSON Object that HTTPService already parses for us. We exposed this data in our json class as <strong>jsonToString</strong> and <strong>json</strong> getters respectively.</p><p>Finally, the source code is in the <strong>json.content</strong> variable, but comes encoded in <strong>base64</strong>, so we can use Apache Royale's <strong>decode</strong> function in the <strong>Base64</strong> class to get the decoded xml string to use in our example App. We exposed this in a convenient getter function in our service called <strong>sourceCode</strong>.</p><h2>Where to go from here</h2><ul><li><a href="https://apache.github.io/royale-docs/features/loading-external-data">Apache Royale documentation page about loading external data</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/label">Jewel Label Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/button">Jewel Button Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/card">Jewel Card Royale Docs page</a></li></ul><p>The result of this code snippet is the following:</p><iframe width="100%" height="650" src="/blog-examples/BE0011_Loading_external_data_through_HTTPService/index.html"></iframe><p>(We're using an iframe to host the actual results of this example compilation. To see the example in a separate window click <a href="/blog-examples/BE0011_Loading_external_data_through_HTTPService/index.html" target="_blank">this link</a>.)</p><p>Full project with source code can be found <a href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0011_Loading_external_data_through_HTTPService">here</a>:</p><p><a class="btn btn-download" href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0011_Loading_external_data_through_HTTPService"><i class="fa fa-download"></i> Project Source Code</a></p></div><h2 class="post-title"><a href="/blog/customization-through-the-royale-api/">Customization through the Royale API</a></h2><div class="post-meta">by Carlos Rovira on August 01, 2018</div><div><p>This example shows you how to use the powerful Royale API to get access to the internal workings of components and customize them to suit your needs. As you can see, although Royale does a lot for you to simplify development, you always have full control of your code.</p><p>It uses the new Jewel UI set that supports themes and is available in <a href="https://royale.apache.org/download/">the 0.9.4 release or later</a>.</p><pre><code class="language-mxml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;j:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
              xmlns:j=&quot;library://ns.apache.org/royale/jewel&quot;
              xmlns:js=&quot;library://ns.apache.org/royale/basic&quot;
              xmlns:html=&quot;library://ns.apache.org/royale/html&quot;
              xmlns:models=&quot;models.*&quot;&gt;

    &lt;fx:Script&gt;
        &lt;![CDATA[
            import org.apache.royale.core.IBeadLayout;
            import org.apache.royale.core.IBeadView;
            import org.apache.royale.events.CloseEvent;
            import org.apache.royale.events.Event;
            import org.apache.royale.events.MouseEvent;
            import org.apache.royale.jewel.Alert;
            import org.apache.royale.jewel.CheckBox;
            import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
            import org.apache.royale.jewel.beads.layouts.VerticalLayout;
            import org.apache.royale.jewel.beads.views.AlertView;

           private var alert:Alert;
           private var check:CheckBox;

           // Adding content to the Alert component and changing the ControlBar's Buttons Layout
           private function clickHandler(event:MouseEvent):void {
               alert = Alert.show(&quot;This example shows access to AlertView and ControlBar to add a CheckBox to the Alert's content area, expand the Button layout and change its defaults. The height of the alert is changed to 300px, too.&quot;, &quot;Customized Alert Example&quot;, 3);
               alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);
                alert.height = 300;

               check = new CheckBox();
               check.selected = true;
               check.text = &quot;Buttons must fill the ControlBar's available space&quot;;
               check.addEventListener(Event.CHANGE, expandButtons);

               expandButtons();
           }
           
           private function expandButtons(event:Event = null):void {
               var alertView:AlertView = alert.getBeadByType(IBeadView) as AlertView;

               if(event == null)
               {
                   var verticalLayout:VerticalLayout = new VerticalLayout();
                   verticalLayout.gap = 9;
                   alertView.content.addBead(verticalLayout);

                   alertView.content.addElement(check);
               }

               var layout:HorizontalLayout = alertView.controlBar.getBeadByType(IBeadLayout) as HorizontalLayout;
               layout.itemsExpand = check.selected;
           }

           // Event handler function for displaying the selected Alert button.
           private function alertClickHandler(event:CloseEvent):void {
               alert.removeEventListener(CloseEvent.CLOSE, alertClickHandler);

               if (event.detail == Alert.YES)
                   status.text=&quot;You answered Yes&quot;;
               else
                   status.text=&quot;You answered No&quot;;
           }
        ]]&gt;
    &lt;/fx:Script&gt;

    &lt;j:initialView&gt;
        &lt;j:View&gt;
            &lt;j:beads&gt;
                &lt;j:HorizontalCenteredLayout/&gt;
            &lt;/j:beads&gt;

            &lt;j:Card width=&quot;350&quot;&gt;
                &lt;html:H3 text=&quot;Customization through Royale API&quot;/&gt;
                
                &lt;j:Label text=&quot;This is a complex example that adds and retrieves beads at runtime. Click the button below to display an Alert window that adds content and makes changes in some parts of the default layout.&quot;
                       multiline=&quot;true&quot;/&gt;
                &lt;j:Button text=&quot;Click Me&quot; click=&quot;clickHandler(event)&quot;/&gt;
                &lt;j:Label id=&quot;status&quot;/&gt;
            &lt;/j:Card&gt;
        &lt;/j:View&gt;
    &lt;/j:initialView&gt;

&lt;/j:Application&gt;
</code></pre><p>This example takes the <a href="https://royale.apache.org/using-jewel-alert-control/">Using the Jewel Alert Control</a> example and uses the Royale API to add content and customize some parts of the Alert.</p><p>The code is more complex than in some of our other examples, for teaching purposes:</p><ul><li>In the <strong>clickHandler</strong> method, we create an Alert control and create a CheckBox to add to the Alert's content zone. Then we call the <strong>expandButtons</strong> method to end initial customization.</li><li>The <strong>expandButtons</strong> method is where the heavy work of the Royale API happens:<ul><li>Since all components in Royale are &quot;composed&quot; through the Strand/Bead API, we want to access the view part of the Alert; in this case we're talking about AlertView.</li><li>We can access AlertView with <strong>getBeadByType</strong> that retrieves a bead by its type.</li><li>Then, for learning purposes, we create a VerticalLayout bead and add it to the Alert's content using the <strong>addBead</strong> method (you can investigate other methods in the API like <strong>removeBead</strong> as well).</li><li>We add the CheckBox created in the previous method to the Alert's content. Since this involves a call-back method and an initialization method, we only want to add the checkbox at initialization time and not each time the user clicks the CheckBox.</li><li>Finally, we retrieve the ControlBar's default HorizontalLayout and customize it to expand its items (the buttons) to fill all the available space in the control bar. We use <strong>getBeadByType</strong> again to reference the layout, and then use a method available in most Jewel Layouts called <strong>itemsExpand</strong> that expect a Boolean. When this method is set to &quot;true&quot; all items in the layout expand to use all available space.</li></ul></li></ul><h2>Where to go from here</h2><ul><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/alert">Jewel Alert Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/button">Jewel Button Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/checkbox">Jewel CheckBox Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/label">Jewel Label Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/card">Jewel Card Royale Docs page</a></li></ul><p>The result of this code snippet is the following:</p><iframe width="100%" height="400" src="/blog-examples/BE0010_Customization_through_the_Royale_API/index.html"></iframe><p>(We're using an iframe to host the actual results of this example compilation. To see the example in a separate window click <a href="/blog-examples/BE0010_Customization_through_the_Royale_API/index.html" target="_blank">this link</a>.)</p><p>Full project with source code can be found <a href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0010_Customization_through_the_Royale_API">here</a>:</p><p><a class="btn btn-download" href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0010_Customization_through_the_Royale_API"><i class="fa fa-download"></i> Project Source Code</a></p></div><h2 class="post-title"><a href="/blog/using-an-item-renderer-with-a-list/">Using an Item Renderer with a List</a></h2><div class="post-meta">by Carlos Rovira on July 13, 2018</div><div><p>This example shows how to use an <strong>ItemRenderer</strong> to display the items in a List in your Royale application. It uses the new Jewel UI set that supports themes and is available in <a href="https://royale.apache.org/download/">the 0.9.4 release or later</a>.</p><pre><code class="language-mxml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;j:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
              xmlns:j=&quot;library://ns.apache.org/royale/jewel&quot;
              xmlns:js=&quot;library://ns.apache.org/royale/basic&quot;
              xmlns:html=&quot;library://ns.apache.org/royale/html&quot;
              xmlns:models=&quot;models.*&quot;&gt;

    &lt;fx:Style&gt;
        @namespace &quot;http://www.w3.org/1999/xhtml&quot;;
        @namespace j &quot;library://ns.apache.org/royale/jewel&quot;;

        .iconListItemRenderer
        {
            IItemRenderer: ClassReference(&quot;itemRenderers.IconListItemRenderer&quot;);
        }
        .iconListItemRenderer .fonticon
        {
            margin-right: 24px;
        }
    &lt;/fx:Style&gt;

    &lt;j:model&gt;
        &lt;models:ListsModel id=&quot;listModel&quot;/&gt;
    &lt;/j:model&gt;

    &lt;j:initialView&gt;
        &lt;j:View&gt;
            &lt;j:beads&gt;
                &lt;j:VerticalCenteredLayout/&gt;
            &lt;/j:beads&gt;

            &lt;j:Card width=&quot;340&quot;&gt;
                &lt;j:CardHeader&gt;
                    &lt;html:H3 text=&quot;Jewel List With ItemRenderer&quot; className=&quot;primary-normal&quot;/&gt;
                &lt;/j:CardHeader&gt;
                &lt;j:CardPrimaryContent&gt;
                
                    &lt;j:List width=&quot;100%&quot; height=&quot;300&quot; className=&quot;iconListItemRenderer&quot;&gt;
                        &lt;j:beads&gt;
                            &lt;js:ConstantBinding
                               sourceID=&quot;listModel&quot;
                               sourcePropertyName=&quot;iconListData&quot;
                               destinationPropertyName=&quot;dataProvider&quot;/&gt;
                        &lt;/j:beads&gt;
                    &lt;/j:List&gt;
                    
                &lt;/j:CardPrimaryContent&gt;
            &lt;/j:Card&gt;
        &lt;/j:View&gt;
    &lt;/j:initialView&gt;

&lt;/j:Application&gt;
</code></pre><p>By default, Apache Royale Jewel List-based controls display their data as plain text using <strong>ListItemRenderer</strong>. But Royale is capable of much more, and you can extend ListItemRenderer to display the items in your list in a pleasing and user-friendly way.</p><p>In this example we created an <strong>IconListItemRenderer</strong> in mxml that extends ListItemRenderer:</p><pre><code class="language-mxml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;j:ListItemRenderer xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
                    xmlns:j=&quot;library://ns.apache.org/royale/jewel&quot;
                    xmlns:js=&quot;library://ns.apache.org/royale/basic&quot;
                    xmlns:html=&quot;library://ns.apache.org/royale/html&quot;&gt;

    &lt;fx:Script&gt;
        &lt;![CDATA[
            import vos.IconListVO;
            
            [Bindable(&quot;dataChange&quot;)]
            public function get iconList():IconListVO
            {
                return data as IconListVO;
            }
        ]]&gt;
    &lt;/fx:Script&gt;

    &lt;j:beads&gt;
        &lt;js:ItemRendererDataBinding /&gt;
        &lt;j:HorizontalLayout gap=&quot;3&quot; itemsVerticalAlign=&quot;itemsCenter&quot;/&gt;
    &lt;/j:beads&gt;
    
    &lt;js:MaterialIcon text=&quot;{iconList ? iconList.icon : ''}&quot; visible=&quot;{iconList ? iconList.icon != null : false}&quot;/&gt;

    &lt;html:Span text=&quot;{iconList ? iconList.label : ''}&quot;/&gt;
    
&lt;/j:ListItemRenderer&gt;
</code></pre><p>The list gets its items from the data provider and passes them through the item renderer. The item renderer models each item in a consistent way: it adds a <strong>FontIcon</strong> to display an appropriate icon (selected, in this case, from the Google Material Icons font) at the left, and the text of the item in a Label to the right. To manage the components for each list item, you can use absolute positioning, layout classes or CSS. We used CSS in the <strong>fx:Style</strong> section in the main file for simplicity. As you see, the item renderer is declared in CSS as well, and is located in the <em>itemRenderers</em> package.</p><p>Note that we use Data Binding, deploying <strong>ItemRendererDataBinding</strong>. Data binding in Royale is not available by default to reduce code size. You add it where you need it, following the <strong>PAYG</strong> principle in Royale: <strong>Pay As You Go</strong>. We add a data binding bead here since we need the function, and not anywhere we don't need it.</p><p>The data used in the List control <strong>dataProvider</strong> is declared in the ActionScript 3 <strong>ListsModel</strong> class:</p><pre><code class="language-mxml">package models
{
    import org.apache.royale.collections.ArrayList;
    import vos.IconListVO;

    public class ListsModel 
    {
        /**
         * this is the dataProvider for the List
         */
        private var _iconListData:ArrayList = new ArrayList([
            new IconListVO(&quot;Alert&quot;, MaterialIconType.WEB_ASSET),
            new IconListVO(&quot;Button&quot;, MaterialIconType.CROP_7_5),
            new IconListVO(&quot;DropDownList&quot;, MaterialIconType.CREDIT_CARD),
            new IconListVO(&quot;CheckBox&quot;, MaterialIconType.CHECK_BOX),
            new IconListVO(&quot;Label&quot;, MaterialIconType.LABEL),
            new IconListVO(&quot;List&quot;, MaterialIconType.LIST_ALT),
            new IconListVO(&quot;RadioButton&quot;, MaterialIconType.RADIO_BUTTON_CHECKED),
            new IconListVO(&quot;Slider&quot;, MaterialIconType.STORAGE),
            new IconListVO(&quot;Text&quot;, MaterialIconType.SUBJECT),
            new IconListVO(&quot;TextInput&quot;, MaterialIconType.TEXT_FIELDS)            
        ]);

        public function get iconListData():ArrayList
        {
            return _iconListData;
        }
    }
}
</code></pre><p>The <strong>MaterialIconType</strong> class uses the icon names as they appear in the Material Icons font for convenience and to avoid typos. One additional benefit of using MaterialIconType in your code is that it injects the font into your html directly, without you having to deal with that step.</p><p>This class uses a data object (DOT, or POJO, depending on how you name this kind of code), called <strong>IconListVO</strong> to instance each piece of data that will appear in the List control.</p><p>Here's the result of this code snippet:</p><pre><code class="language-as3">package vos
{
    [Bindable]
    public class IconListVO
    {
        public var label:String;
        public var icon:String;

        public function IconListVO(label:String, icon:String = null)
        {
            this.label = label;
            this.icon = icon;
        }
    }
}
</code></pre><p>In the main file, note how we link the <strong>ListsModel</strong> class through the <strong>model</strong> variable accessible throughout Royale to make it easy to link a model as a bead.</p><p>Finally, we link the model data to the list dataProvider using data binding, with <strong>ApplicationDataBinding</strong> (since we are at the Application level) and the <strong>ConstantBinding</strong> class that knows where the data is located (<em>sourceID</em>), what property holds it (<em>iconListData</em>) and where to inject the data (<em>destinationPropertyName</em>).</p><p>Hope you like this example 🙂</p><h2>Where to go from here</h2><ul><li><a href="https://apache.github.io/royale-docs/features/item-renderers">ItemRenderers Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/list">Jewel List Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/card">Jewel Card Royale Docs page</a></li></ul><p>The result of this code snippet is the following:</p><iframe width="100%" height="500" src="/blog-examples/BE0009_Using_an_Item_Renderer_with_a_List/index.html"></iframe><p>(We're using an iframe to host the actual results of this example compilation. To see the example in a separate window click <a href="/blog-examples/BE0009_Using_an_Item_Renderer_with_a_List/index.html" target="_blank">this link</a>.)</p><p>Full project with source code can be found <a href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0009_Using_an_Item_%20Renderer_with_a_List">here</a>:</p><p><a class="btn btn-download" href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0009_Using_an_Item_%20Renderer_with_a_List"><i class="fa fa-download"></i> Project Source Code</a></p></div><a class="btn btn-quiet" href="/blog/page/4/"><i class="fa fa-arrow-left"></i> Newer Posts</a> <a class="btn btn-quiet" href="/blog/page/6/">Older Posts <i class="fa fa-arrow-right"></i></a></article></div></div><footer class="footer"><div class="footer-row"><div class="footer-column"><ul class="footer-list"><li class="apacheroyale"><a href="/">Apache Royale</a></li><li><a href="/">Home</a></li><li><a href="/features">Features</a></li><li><a href="/download">Download</a></li><li><a href="/ides">IDEs and Editors</a></li><li><a href="/showcase">Showcase</a></li><li><a href="/blog">Blog</a></li><li><a href="/team">Team</a></li><li><a href="/thanks-to">Thanks To</a></li><li><a href="https://apache.org/logos/#royale"><i class="fa fa-external-link-square"></i> Logos</a></li><li><a href="https://www.apache.org/licenses/"><i class="fa fa-external-link-square"></i> Apache License v2.0</a></li></ul></div><div class="footer-column"><ul class="footer-list"><li class="documentation"><a href="/docs">Documentation</a></li><li><a href="https://apache.github.io/royale-docs/get-started">Get Started</a></li><li><a href="/docs">Docs</a></li><li><a href="/asdoc">API Reference</a></li><li><a href="https://github.com/apache/royale-asjs/wiki"><i class="fa fa-github"></i>Wiki</a></li><li><a href="https://stackoverflow.com/questions/tagged/apache-royale"><i class="fa fa-stack-overflow"></i> StackOverFlow Tag</a></li></ul><ul class="footer-list"><li class="community"><a href="/get-involved">Community</a></li><li><a href="/get-involved">Get Involved</a></li><li><a href="/mailing-lists">Mailing Lists</a></li><li><a href="/faq">FAQ</a></li></ul><ul class="footer-list"><li class="development"><a href="/source-code">Development</a></li><li><a href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="fa fa-github"></i> Github</a></li><li><a href="https://github.com/apache/royale-asjs/issues"><i class="fa fa-github"></i> Issues</a></li><li><a href="/source-code"><i class="fa fa-code"></i> Source Code</a></li></ul></div><div class="footer-column"><ul class="footer-list"><li class="social_t">Social</li><li><a href="https://twitter.com/apacheroyale"><i class="fa fa-twitter"></i> Twitter</a></li><li><a href="https://facebook.com/ApacheRoyaleSDK/"><i class="fa fa-facebook"></i> Facebook</a></li><li><a href="https://www.linkedin.com/groups/12118437"><i class="fa fa-linkedin"></i> LinkedIn</a></li><li><a href="/feed/index.xml"><i class="fa fa-rss"></i> RSS</a></li></ul><ul class="footer-list"><li class="apache"><a href="https://www.apache.org/">Apache</a></li><li><a href="https://www.apache.org/"><i class="fa fa-external-link-square"></i> Apache</a></li><li><a href="https://www.apache.org/foundation/contributing.html"><i class="fa fa-external-link-square"></i> Donations</a></li><li><a href="https://www.apache.org/events/current-event"><i class="fa fa-external-link-square"></i> Events</a></li><li><a href="https://www.apache.org/foundation/sponsorship.html"><i class="fa fa-external-link-square"></i> Sponsorship</a></li><li><a href="https://www.apache.org/foundation/thanks.html"><i class="fa fa-external-link-square"></i> Thanks</a></li><li><a href="https://www.apache.org/security/"><i class="fa fa-external-link-square"></i>Security</a></li></ul></div><div class="aboutusdiv"><p class="aboutus">About Us</p><p class="aboutus_p"><img class="aboutus-logo" src="/img/apache-royale-logo-footer-circle-grey.svg"><a href="/" class="aboutus_a">Apache Royale™</a> is a highly productive open source application technology for building expressive frontend applications that outputs to different formats and deploy consistently on all major browsers, desktops and devices.</p><p><img class="aboutus-apache-logo" src="/img/Apache_PoweredBy.svg"> <a href="/" class="aboutus_a">Apache Royale™</a>, <a href="https://www.apache.org" class="aboutus_a">Apache™</a> and the <a href="https://www.apache.org/foundation/press/kit/" class="aboutus_a">Apache feather logo™</a> are trademarks of The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of their respective owners. Read more about our privacy policy on our <a href="/privacy-policy">Privacy Policy page</a>.</p></div></div><div class="asf">Copyright &copy; 2017-2022 <a href="https://www.apache.org">The Apache Software Foundation</a>, Licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></div></footer></body></html>