You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@royale.apache.org by Roman Isitua <ro...@gmail.com> on 2022/01/08 14:34:47 UTC

Spectrum UI components

Hi Harbs,

I am trying to create a login form. How do I hide the password in

<sp:TextField placeholder="Enter password"/>

 could it be that it does not support password hiding ? Do I have to resort
to using royale basic text field ?

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
So that I am clear about what you said. By cherry pick you mean take what
you just did on the royale spectrum source and apply it locally (on my pc)
on the spectrum 0.9.8 source ?

In other words what do you mean by cherry pick ?

On Mon, 28 Feb 2022, 10:14 Harbs, <ha...@gmail.com> wrote:

> Spectrum Menus are a bit non-standard when it comes to data. It expects an
> IMenuItem. If it’s a plain object, the text is set to the label or text
> property of the object and the rest of the menu properties are inferred as
> well. The original object is *replaced* with a MenuItem if the original is
> not an IMenuItem.
>
> We are using spectrum based on royale 0.9.8 with this commit id "024b730"
>
> In other words we are not on version 0.9.9-snapshot?
>
>
> You can cherry-pick the change.
>
> On Feb 28, 2022, at 10:44 AM, Roman Isitua <ro...@gmail.com> wrote:
>
> Is there a label property ? That allows us to specify the field in our
> data object to be used ?
>
>
> Also, How can we access this latest change ?
>
> We are using spectrum based on royale 0.9.8 with this commit id "024b730"
>
> In other words we are not on version 0.9.9-snapshot?
>
>
>
>
>
> On Mon, 28 Feb 2022, 09:38 Harbs, <ha...@gmail.com> wrote:
>
>> How can I use an arrayList of data objects instead ?
>>>
>>
>> <sp:ComboBox placeholder="Type here" quiet=“true”
>>> dataProvider=“{myArrayListProvider}"/>
>>>
>>
>> The spectrum combobox also doesn't have a change attribute. How do you
>> execute an event on selecting from the list.
>>
>>
>> It looks like we forgot to add Event metadata for that.
>> Fixed.
>> https://github.com/unhurdle/spectrum-royale/commit/a53c16b59cc2b352adffbb570067e9fddcb9ec46
>>
>> On Feb 27, 2022, at 2:48 AM, Timothy Tokmang Wang <ti...@gmail.com>
>> wrote:
>>
>> The spectrum combobox also doesn't have a change attribute. How do you
>> execute an event on selecting from the list.
>>
>> On Sun, Feb 27, 2022 at 12:28 AM Roman Isitua <ro...@gmail.com>
>> wrote:
>>
>>> How can I populate a spectrum combo box dynamically ? I intend to use an
>>> array list of data objects ?
>>>
>>> For spectrum List (sp:List) the following can be used
>>>
>>> <sp:List id="navLinks" className="home_side_nav"
>>> labelField="description"
>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>        <sp:beads>
>>>            <js:DataItemRendererFactoryForArrayList/>
>>>            <js:EasyDataProviderChangeNotifier/>
>>>            <js:DynamicRemoveAllItemRendererForArrayListData/>
>>>         </sp:beads>
>>>       </sp:List>
>>>
>>>
>>> From the royale spectrum show case the code snippet was used.
>>>
>>> <sp:ComboBox placeholder="Type here" quiet="true">
>>>   <sp:dataProvider>
>>>   <fx:Array>
>>>     <sp:MenuItem text="Ballard"/>
>>>     <sp:MenuItem text="Freemont"/>
>>>     <sp:MenuItem text="Greenwood"/>
>>>     <sp:MenuItem isDivider="true"/>
>>>     <sp:MenuItem text="United States of America" disabled="true"/>
>>>   </fx:Array>
>>>   </sp:dataProvider>
>>> </sp:ComboBox>
>>>
>>>
>>> In the above example a static fx array was used. How can I use an
>>> arrayList of data objects instead ?
>>>
>>>
>>>
>>> On Wed, Jan 12, 2022 at 5:21 PM Roman Isitua <ro...@gmail.com>
>>> wrote:
>>>
>>>> Understood. Thanks.
>>>>
>>>> On Wed, Jan 12, 2022 at 5:14 PM Harbs <ha...@gmail.com> wrote:
>>>>
>>>>>
>>>>>
>>>>> On Jan 12, 2022, at 6:08 PM, Roman Isitua <ro...@gmail.com>
>>>>> wrote:
>>>>>
>>>>> What is the purpose of  <js:ArrayListSelectionModel /> ?  since it
>>>>> was no longer necessary
>>>>>
>>>>>
>>>>> It’s necessary in Royale Basic to use ArrayLists.
>>>>>
>>>>> In Spectrum, there’s a default ListModel which correctly handles both
>>>>> both Array and ArrayList data.
>>>>>
>>>>>
>>>>> Also, another question
>>>>> which will you recommend one uses ? why should one choose Array over
>>>>> ArrayList or ArrayList over Array.
>>>>>
>>>>>
>>>>> Array is simpler. There’s less overhead. If you have data which
>>>>> doesn’t change, use Array.
>>>>> If you need the list to update when data changes, use ArrayList.
>>>>>
>>>>
>>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Spectrum Menus are a bit non-standard when it comes to data. It expects an IMenuItem. If it’s a plain object, the text is set to the label or text property of the object and the rest of the menu properties are inferred as well. The original object is *replaced* with a MenuItem if the original is not an IMenuItem.

> We are using spectrum based on royale 0.9.8 with this commit id "024b730"
> 
> In other words we are not on version 0.9.9-snapshot?

You can cherry-pick the change.

> On Feb 28, 2022, at 10:44 AM, Roman Isitua <ro...@gmail.com> wrote:
> 
> Is there a label property ? That allows us to specify the field in our data object to be used ?
> 
> 
> Also, How can we access this latest change ?
> 
> We are using spectrum based on royale 0.9.8 with this commit id "024b730"
> 
> In other words we are not on version 0.9.9-snapshot?
> 
> 
> 
> 
> 
> On Mon, 28 Feb 2022, 09:38 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> How can I use an arrayList of data objects instead ?
> 
> <sp:ComboBox placeholder="Type here" quiet=“true” dataProvider=“{myArrayListProvider}"/>
> 
>> The spectrum combobox also doesn't have a change attribute. How do you execute an event on selecting from the list.
> 
> It looks like we forgot to add Event metadata for that.
> Fixed. https://github.com/unhurdle/spectrum-royale/commit/a53c16b59cc2b352adffbb570067e9fddcb9ec46 <https://github.com/unhurdle/spectrum-royale/commit/a53c16b59cc2b352adffbb570067e9fddcb9ec46>
>> On Feb 27, 2022, at 2:48 AM, Timothy Tokmang Wang <timoshimmo88@gmail.com <ma...@gmail.com>> wrote:
>> 
>> The spectrum combobox also doesn't have a change attribute. How do you execute an event on selecting from the list.
>> 
>> On Sun, Feb 27, 2022 at 12:28 AM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> How can I populate a spectrum combo box dynamically ? I intend to use an array list of data objects ? 
>> 
>> For spectrum List (sp:List) the following can be used
>> 
>> <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>        <sp:beads>         
>>            <js:DataItemRendererFactoryForArrayList/>
>>            <js:EasyDataProviderChangeNotifier/> 
>>            <js:DynamicRemoveAllItemRendererForArrayListData/>
>>         </sp:beads>
>>       </sp:List>
>> 
>> 
>> From the royale spectrum show case the code snippet was used.
>> 
>> <sp:ComboBox placeholder="Type here" quiet="true">
>>   <sp:dataProvider>
>>   <fx:Array>
>>     <sp:MenuItem text="Ballard"/>
>>     <sp:MenuItem text="Freemont"/>
>>     <sp:MenuItem text="Greenwood"/>
>>     <sp:MenuItem isDivider="true"/>
>>     <sp:MenuItem text="United States of America" disabled="true"/>
>>   </fx:Array>
>>   </sp:dataProvider>
>> </sp:ComboBox>
>> 
>> 
>> In the above example a static fx array was used. How can I use an arrayList of data objects instead ?
>> 
>> 
>> 
>> On Wed, Jan 12, 2022 at 5:21 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> Understood. Thanks.
>> 
>> On Wed, Jan 12, 2022 at 5:14 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> 
>> 
>>> On Jan 12, 2022, at 6:08 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> What is the purpose of  <js:ArrayListSelectionModel />   ?  since it was no longer necessary 
>> 
>> It’s necessary in Royale Basic to use ArrayLists.
>> 
>> In Spectrum, there’s a default ListModel which correctly handles both both Array and ArrayList data.
>> 
>>> 
>>> Also, another question
>>> which will you recommend one uses ? why should one choose Array over ArrayList or ArrayList over Array.
>> 
>> Array is simpler. There’s less overhead. If you have data which doesn’t change, use Array.
>> If you need the list to update when data changes, use ArrayList.
>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
Is there a label property ? That allows us to specify the field in our data
object to be used ?


Also, How can we access this latest change ?

We are using spectrum based on royale 0.9.8 with this commit id "024b730"

In other words we are not on version 0.9.9-snapshot?





On Mon, 28 Feb 2022, 09:38 Harbs, <ha...@gmail.com> wrote:

> How can I use an arrayList of data objects instead ?
>>
>
> <sp:ComboBox placeholder="Type here" quiet=“true”
>> dataProvider=“{myArrayListProvider}"/>
>>
>
> The spectrum combobox also doesn't have a change attribute. How do you
> execute an event on selecting from the list.
>
>
> It looks like we forgot to add Event metadata for that.
> Fixed.
> https://github.com/unhurdle/spectrum-royale/commit/a53c16b59cc2b352adffbb570067e9fddcb9ec46
>
> On Feb 27, 2022, at 2:48 AM, Timothy Tokmang Wang <ti...@gmail.com>
> wrote:
>
> The spectrum combobox also doesn't have a change attribute. How do you
> execute an event on selecting from the list.
>
> On Sun, Feb 27, 2022 at 12:28 AM Roman Isitua <ro...@gmail.com>
> wrote:
>
>> How can I populate a spectrum combo box dynamically ? I intend to use an
>> array list of data objects ?
>>
>> For spectrum List (sp:List) the following can be used
>>
>> <sp:List id="navLinks" className="home_side_nav" labelField="description"
>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>        <sp:beads>
>>            <js:DataItemRendererFactoryForArrayList/>
>>            <js:EasyDataProviderChangeNotifier/>
>>            <js:DynamicRemoveAllItemRendererForArrayListData/>
>>         </sp:beads>
>>       </sp:List>
>>
>>
>> From the royale spectrum show case the code snippet was used.
>>
>> <sp:ComboBox placeholder="Type here" quiet="true">
>>   <sp:dataProvider>
>>   <fx:Array>
>>     <sp:MenuItem text="Ballard"/>
>>     <sp:MenuItem text="Freemont"/>
>>     <sp:MenuItem text="Greenwood"/>
>>     <sp:MenuItem isDivider="true"/>
>>     <sp:MenuItem text="United States of America" disabled="true"/>
>>   </fx:Array>
>>   </sp:dataProvider>
>> </sp:ComboBox>
>>
>>
>> In the above example a static fx array was used. How can I use an
>> arrayList of data objects instead ?
>>
>>
>>
>> On Wed, Jan 12, 2022 at 5:21 PM Roman Isitua <ro...@gmail.com>
>> wrote:
>>
>>> Understood. Thanks.
>>>
>>> On Wed, Jan 12, 2022 at 5:14 PM Harbs <ha...@gmail.com> wrote:
>>>
>>>>
>>>>
>>>> On Jan 12, 2022, at 6:08 PM, Roman Isitua <ro...@gmail.com>
>>>> wrote:
>>>>
>>>> What is the purpose of  <js:ArrayListSelectionModel /> ?  since it was
>>>> no longer necessary
>>>>
>>>>
>>>> It’s necessary in Royale Basic to use ArrayLists.
>>>>
>>>> In Spectrum, there’s a default ListModel which correctly handles both
>>>> both Array and ArrayList data.
>>>>
>>>>
>>>> Also, another question
>>>> which will you recommend one uses ? why should one choose Array over
>>>> ArrayList or ArrayList over Array.
>>>>
>>>>
>>>> Array is simpler. There’s less overhead. If you have data which doesn’t
>>>> change, use Array.
>>>> If you need the list to update when data changes, use ArrayList.
>>>>
>>>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
> How can I use an arrayList of data objects instead ?

<sp:ComboBox placeholder="Type here" quiet=“true” dataProvider=“{myArrayListProvider}"/>

> The spectrum combobox also doesn't have a change attribute. How do you execute an event on selecting from the list.

It looks like we forgot to add Event metadata for that.
Fixed. https://github.com/unhurdle/spectrum-royale/commit/a53c16b59cc2b352adffbb570067e9fddcb9ec46

> On Feb 27, 2022, at 2:48 AM, Timothy Tokmang Wang <ti...@gmail.com> wrote:
> 
> The spectrum combobox also doesn't have a change attribute. How do you execute an event on selecting from the list.
> 
> On Sun, Feb 27, 2022 at 12:28 AM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
> How can I populate a spectrum combo box dynamically ? I intend to use an array list of data objects ? 
> 
> For spectrum List (sp:List) the following can be used
> 
> <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>        <sp:beads>         
>            <js:DataItemRendererFactoryForArrayList/>
>            <js:EasyDataProviderChangeNotifier/> 
>            <js:DynamicRemoveAllItemRendererForArrayListData/>
>         </sp:beads>
>       </sp:List>
> 
> 
> From the royale spectrum show case the code snippet was used.
> 
> <sp:ComboBox placeholder="Type here" quiet="true">
>   <sp:dataProvider>
>   <fx:Array>
>     <sp:MenuItem text="Ballard"/>
>     <sp:MenuItem text="Freemont"/>
>     <sp:MenuItem text="Greenwood"/>
>     <sp:MenuItem isDivider="true"/>
>     <sp:MenuItem text="United States of America" disabled="true"/>
>   </fx:Array>
>   </sp:dataProvider>
> </sp:ComboBox>
> 
> 
> In the above example a static fx array was used. How can I use an arrayList of data objects instead ?
> 
> 
> 
> On Wed, Jan 12, 2022 at 5:21 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
> Understood. Thanks.
> 
> On Wed, Jan 12, 2022 at 5:14 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> 
> 
>> On Jan 12, 2022, at 6:08 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> What is the purpose of  <js:ArrayListSelectionModel />   ?  since it was no longer necessary 
> 
> It’s necessary in Royale Basic to use ArrayLists.
> 
> In Spectrum, there’s a default ListModel which correctly handles both both Array and ArrayList data.
> 
>> 
>> Also, another question
>> which will you recommend one uses ? why should one choose Array over ArrayList or ArrayList over Array.
> 
> Array is simpler. There’s less overhead. If you have data which doesn’t change, use Array.
> If you need the list to update when data changes, use ArrayList.

Re: Spectrum UI components

Posted by Timothy Tokmang Wang <ti...@gmail.com>.
The spectrum combobox also doesn't have a change attribute. How do you
execute an event on selecting from the list.

On Sun, Feb 27, 2022 at 12:28 AM Roman Isitua <ro...@gmail.com> wrote:

> How can I populate a spectrum combo box dynamically ? I intend to use an
> array list of data objects ?
>
> For spectrum List (sp:List) the following can be used
>
> <sp:List id="navLinks" className="home_side_nav" labelField="description"
>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>        <sp:beads>
>            <js:DataItemRendererFactoryForArrayList/>
>            <js:EasyDataProviderChangeNotifier/>
>            <js:DynamicRemoveAllItemRendererForArrayListData/>
>         </sp:beads>
>       </sp:List>
>
>
> From the royale spectrum show case the code snippet was used.
>
> <sp:ComboBox placeholder="Type here" quiet="true">
>   <sp:dataProvider>
>   <fx:Array>
>     <sp:MenuItem text="Ballard"/>
>     <sp:MenuItem text="Freemont"/>
>     <sp:MenuItem text="Greenwood"/>
>     <sp:MenuItem isDivider="true"/>
>     <sp:MenuItem text="United States of America" disabled="true"/>
>   </fx:Array>
>   </sp:dataProvider>
> </sp:ComboBox>
>
>
> In the above example a static fx array was used. How can I use an
> arrayList of data objects instead ?
>
>
>
> On Wed, Jan 12, 2022 at 5:21 PM Roman Isitua <ro...@gmail.com>
> wrote:
>
>> Understood. Thanks.
>>
>> On Wed, Jan 12, 2022 at 5:14 PM Harbs <ha...@gmail.com> wrote:
>>
>>>
>>>
>>> On Jan 12, 2022, at 6:08 PM, Roman Isitua <ro...@gmail.com> wrote:
>>>
>>> What is the purpose of  <js:ArrayListSelectionModel /> ?  since it was
>>> no longer necessary
>>>
>>>
>>> It’s necessary in Royale Basic to use ArrayLists.
>>>
>>> In Spectrum, there’s a default ListModel which correctly handles both
>>> both Array and ArrayList data.
>>>
>>>
>>> Also, another question
>>> which will you recommend one uses ? why should one choose Array over
>>> ArrayList or ArrayList over Array.
>>>
>>>
>>> Array is simpler. There’s less overhead. If you have data which doesn’t
>>> change, use Array.
>>> If you need the list to update when data changes, use ArrayList.
>>>
>>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
How can I populate a spectrum combo box dynamically ? I intend to use an
array list of data objects ?

For spectrum List (sp:List) the following can be used

<sp:List id="navLinks" className="home_side_nav" labelField="description"
      dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
       <sp:beads>
           <js:DataItemRendererFactoryForArrayList/>
           <js:EasyDataProviderChangeNotifier/>
           <js:DynamicRemoveAllItemRendererForArrayListData/>
        </sp:beads>
      </sp:List>


From the royale spectrum show case the code snippet was used.

<sp:ComboBox placeholder="Type here" quiet="true">
  <sp:dataProvider>
  <fx:Array>
    <sp:MenuItem text="Ballard"/>
    <sp:MenuItem text="Freemont"/>
    <sp:MenuItem text="Greenwood"/>
    <sp:MenuItem isDivider="true"/>
    <sp:MenuItem text="United States of America" disabled="true"/>
  </fx:Array>
  </sp:dataProvider>
</sp:ComboBox>


In the above example a static fx array was used. How can I use an arrayList
of data objects instead ?



On Wed, Jan 12, 2022 at 5:21 PM Roman Isitua <ro...@gmail.com> wrote:

> Understood. Thanks.
>
> On Wed, Jan 12, 2022 at 5:14 PM Harbs <ha...@gmail.com> wrote:
>
>>
>>
>> On Jan 12, 2022, at 6:08 PM, Roman Isitua <ro...@gmail.com> wrote:
>>
>> What is the purpose of  <js:ArrayListSelectionModel /> ?  since it was
>> no longer necessary
>>
>>
>> It’s necessary in Royale Basic to use ArrayLists.
>>
>> In Spectrum, there’s a default ListModel which correctly handles both
>> both Array and ArrayList data.
>>
>>
>> Also, another question
>> which will you recommend one uses ? why should one choose Array over
>> ArrayList or ArrayList over Array.
>>
>>
>> Array is simpler. There’s less overhead. If you have data which doesn’t
>> change, use Array.
>> If you need the list to update when data changes, use ArrayList.
>>
>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
Understood. Thanks.

On Wed, Jan 12, 2022 at 5:14 PM Harbs <ha...@gmail.com> wrote:

>
>
> On Jan 12, 2022, at 6:08 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> What is the purpose of  <js:ArrayListSelectionModel /> ?  since it was no
> longer necessary
>
>
> It’s necessary in Royale Basic to use ArrayLists.
>
> In Spectrum, there’s a default ListModel which correctly handles both both
> Array and ArrayList data.
>
>
> Also, another question
> which will you recommend one uses ? why should one choose Array over
> ArrayList or ArrayList over Array.
>
>
> Array is simpler. There’s less overhead. If you have data which doesn’t
> change, use Array.
> If you need the list to update when data changes, use ArrayList.
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.

> On Jan 12, 2022, at 6:08 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> What is the purpose of  <js:ArrayListSelectionModel />   ?  since it was no longer necessary 

It’s necessary in Royale Basic to use ArrayLists.

In Spectrum, there’s a default ListModel which correctly handles both both Array and ArrayList data.

> 
> Also, another question
> which will you recommend one uses ? why should one choose Array over ArrayList or ArrayList over Array.

Array is simpler. There’s less overhead. If you have data which doesn’t change, use Array.
If you need the list to update when data changes, use ArrayList.

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
It now renders. Thanks.

[image: image.png]


I apply the beads you mentioned as follows

<sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" labelField=
"description"
      dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
       <sp:beads>
           <js:DataItemRendererFactoryForArrayList/>
           <js:EasyDataProviderChangeNotifier/>
           <js:DynamicRemoveAllItemRendererForArrayListData/>
        </sp:beads>
      </sp:List>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
  </sp:FlexContainer>


What is the purpose of  <js:ArrayListSelectionModel /> ?  since it was no
longer necessary

Also, another question
which will you recommend one uses ? why should one choose Array over
ArrayList or ArrayList over Array.




On Wed, Jan 12, 2022 at 4:32 PM Harbs <ha...@gmail.com> wrote:

> Yeah. You probably need these:
>
>   <js:EasyDataProviderChangeNotifier/> (handles modifying single items to
> the ArrayList)
>   <js:DynamicRemoveAllItemRendererForArrayListData/> (handles removeAll())
>
>
> On Jan 12, 2022, at 5:23 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> The base component for the mxml is a FlexContainer.
>
> I have attached it to this mail. You can have a look.
>
>
> On Wed, Jan 12, 2022 at 4:19 PM Harbs <ha...@gmail.com> wrote:
>
>> How are you assigning the ArrayList? What’s the base component for the
>> MXML?
>>
>> You might need to add ContainerDataBinding.
>>
>> On Jan 12, 2022, at 5:08 PM, Roman Isitua <ro...@gmail.com> wrote:
>>
>> I have tested it again. No errors.
>>
>>
>>
>> On Wed, Jan 12, 2022 at 3:54 PM Harbs <ha...@gmail.com> wrote:
>>
>>> Do you get an error of some kind?
>>>
>>> On Jan 12, 2022, at 4:29 PM, Roman Isitua <ro...@gmail.com> wrote:
>>>
>>> Sorry, what I meant to say is that the arrayList does not render.
>>>
>>> For example when I use Array as follows
>>>
>>> <sp:FlexContainer className="home_side_area" wrap="false">
>>>       <sp:Icon> </sp:Icon>
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>> "description" dataProvider="{menuItemList}"
>>>        change="onSelectMenu(event)"/>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>   </sp:FlexContainer>
>>>
>>> The side menu renders
>>>
>>> <image.png>
>>>
>>>
>>> However, when I use array List as follows
>>>
>>> <sp:FlexContainer className="home_side_area" wrap="false">
>>>       <sp:Icon> </sp:Icon>
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>> "description"
>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>        <sp:beads>
>>>            <js:ArrayListSelectionModel />
>>>            <js:DataItemRendererFactoryForArrayList/>
>>>         </sp:beads>
>>>       </sp:List>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>   </sp:FlexContainer>
>>>
>>>
>>> it does not render. see Below
>>>
>>> <image.png>
>>>
>>>
>>>
>>>
>>>
>>> On Wed, Jan 12, 2022 at 3:18 PM Harbs <ha...@gmail.com> wrote:
>>>
>>>>  It's not working.
>>>>
>>>>
>>>> What’s not working?
>>>>
>>>> Did I apply it correctly ?
>>>>
>>>>
>>>> Looks like it.
>>>>
>>>> Another question, which one do you use for your apps in production ?
>>>>
>>>>
>>>> I usually use Arrays. The css code was copied from one of my apps which
>>>> uses an ArrayList in a Spectrum List..
>>>>
>>>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <ro...@gmail.com>
>>>> wrote:
>>>>
>>>> I have attempted the second approach. It's not working. I am not sure I
>>>> am applying it correctly. See how I defined it.
>>>>
>>>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">
>>>>       <sp:Icon> </sp:Icon>
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>       <sp:List id="navLinks" className="home_side_nav"
>>>> labelField="description" dataProvider="{menuItemList}"
>>>>        change="onSelectMenu(event)"/>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>   </sp:FlexContainer> -->
>>>>
>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>       <sp:Icon> </sp:Icon>
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>>> "description"
>>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>>        <sp:beads>
>>>>            <js:ArrayListSelectionModel />
>>>>            <js:DataItemRendererFactoryForArrayList/>
>>>>         </sp:beads>
>>>>       </sp:List>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>   </sp:FlexContainer>
>>>>
>>>>
>>>> Note: in the commented out code above, I supplied an array. It works
>>>> fine.
>>>>
>>>> Did I apply it correctly ?
>>>>
>>>> Another question, which one do you use for your apps in production ?
>>>>
>>>>
>>>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <ha...@gmail.com> wrote:
>>>>
>>>>> Any one of those three should work.
>>>>>
>>>>> On Jan 12, 2022, at 3:09 PM, Harbs <ha...@gmail.com> wrote:
>>>>>
>>>>> CSS:
>>>>> #uploadsList{
>>>>>   IBeadModel:
>>>>> ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>>>   IDataProviderItemRendererMapper:
>>>>> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>>>> }
>>>>>
>>>>> MXML:
>>>>>   <sp:beads>
>>>>>     <js:ArrayListSelectionModel/>
>>>>>     <js:DataItemRendererFactoryForArrayList/>
>>>>>   </sp:beads>
>>>>>
>>>>> ActionScript:
>>>>>   addBead(new ArrayListSelectionModel());
>>>>>   addBead(new DataItemRendererFactoryForArrayList());
>>>>>
>>>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <ro...@gmail.com>
>>>>> wrote:
>>>>>
>>>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>>>
>>>>>  Let's say I want to use arrayList  as data provider.
>>>>>
>>>>>
>>>>> On Wed, 12 Jan 2022, 13:41 Harbs, <ha...@gmail.com> wrote:
>>>>>
>>>>>> Yes.The default IDataProviderItemRendererMapper is
>>>>>> DataItemRendererFactoryForArrayData.
>>>>>>
>>>>>> If you are using collections you should
>>>>>> use DataItemRendererFactoryForArrayList or
>>>>>> DataItemRendererFactoryForCollectionView instead.
>>>>>>
>>>>>> HTH,
>>>>>> Harbs
>>>>>>
>>>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <ro...@gmail.com>
>>>>>> wrote:
>>>>>>
>>>>>> Hence the reason, I need to confirm from Harbs the array data type
>>>>>> that is supported in spectrum.
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mj...@iest.com>
>>>>>> wrote:
>>>>>>
>>>>>>> Hi,
>>>>>>>
>>>>>>> From what I see in the "ListModel.as" code it allows Object, IArray
>>>>>>> and IArrayList.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> Hiedra
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> *De:* Roman Isitua <ro...@gmail.com>
>>>>>>> *Enviado el:* martes, 11 de enero de 2022 20:40
>>>>>>> *Para:* users@royale.apache.org
>>>>>>> *Asunto:* Re: Spectrum UI components
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> It is now displaying. The issue was not related to the sp:List as I
>>>>>>> initially thought.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> <sp:Group>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> <sp:beads>
>>>>>>>
>>>>>>>         <js:ContainerDataBinding />
>>>>>>>
>>>>>>>     </sp:beads>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>>>
>>>>>>>       <sp:Icon> </sp:Icon>
>>>>>>>
>>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>>
>>>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>>>>>> "description" dataProvider="{menuItemList}"
>>>>>>>
>>>>>>>        change="onSelectMenu(event)"/>
>>>>>>>
>>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>>>
>>>>>>>
>>>>>>>   </sp:FlexContainer>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>    <sp:Container id="mainArea">
>>>>>>>
>>>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>>>>
>>>>>>>    </sp:Container>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> </sp:Group>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> I changed the parent component from flex container to group. Though
>>>>>>> that had nothing to do  with the issue I was having.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> My current question
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> is Array data type the only collection class that is supported in
>>>>>>> spectrum ?
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>
>>>>>>> wrote:
>>>>>>>
>>>>>>> Hi,
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> I am trying to populate my first List <sp:List> for some reason it
>>>>>>> is not being populated. Here is my code snippet.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> <sp:beads>
>>>>>>>
>>>>>>>         <js:ContainerDataBinding />
>>>>>>>
>>>>>>>     </sp:beads>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>>>
>>>>>>>       <sp:Icon> </sp:Icon>
>>>>>>>
>>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>>
>>>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
>>>>>>> "{newMenuItemList}"
>>>>>>>
>>>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>>>>
>>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>>>
>>>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>>>>
>>>>>>>   </sp:FlexContainer>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> I have the following questions
>>>>>>>
>>>>>>> 1. what is the expected data provider ? Array,
>>>>>>> or org.apache.royale.collections.ArrayList ?
>>>>>>>
>>>>>>> I have tried both none of them works.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> 2.  Did I register data binding correctly ?
>>>>>>>
>>>>>>> The above ui is wrapped by a FlexContainer.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> my data source is supposed to be an arrayList of data transfer
>>>>>>> objects (MenuItemDTO) with get set functions for each field.
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>>>>>>>
>>>>>>> Use a <sp:PasswordField>
>>>>>>>
>>>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com>
>>>>>>> wrote:
>>>>>>> >
>>>>>>> > Hi Harbs,
>>>>>>> >
>>>>>>> > I am trying to create a login form. How do I hide the password in
>>>>>>> >
>>>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>>>> >
>>>>>>> >  could it be that it does not support password hiding ? Do I have
>>>>>>> to resort to using royale basic text field ?
>>>>>>>
>>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>
>>>
>> <Home2.mxml>
>
>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Yeah. You probably need these:

  <js:EasyDataProviderChangeNotifier/> (handles modifying single items to the ArrayList)
  <js:DynamicRemoveAllItemRendererForArrayListData/> (handles removeAll())


> On Jan 12, 2022, at 5:23 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> The base component for the mxml is a FlexContainer.
> 
> I have attached it to this mail. You can have a look.
> 
> 
> On Wed, Jan 12, 2022 at 4:19 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> How are you assigning the ArrayList? What’s the base component for the MXML?
> 
> You might need to add ContainerDataBinding.
> 
>> On Jan 12, 2022, at 5:08 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> I have tested it again. No errors.
>> 
>> 
>> 
>> On Wed, Jan 12, 2022 at 3:54 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> Do you get an error of some kind?
>> 
>>> On Jan 12, 2022, at 4:29 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> Sorry, what I meant to say is that the arrayList does not render.
>>> 
>>> For example when I use Array as follows
>>> 
>>> <sp:FlexContainer className="home_side_area" wrap="false">      
>>>       <sp:Icon> </sp:Icon>      
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>>        change="onSelectMenu(event)"/>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>   </sp:FlexContainer>
>>> 
>>> The side menu renders
>>> 
>>> <image.png>
>>> 
>>> 
>>> However, when I use array List as follows
>>> 
>>> <sp:FlexContainer className="home_side_area" wrap="false">      
>>>       <sp:Icon> </sp:Icon>      
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>        <sp:beads>
>>>            <js:ArrayListSelectionModel />
>>>            <js:DataItemRendererFactoryForArrayList/>
>>>         </sp:beads>
>>>       </sp:List>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>   </sp:FlexContainer>
>>> 
>>> 
>>> it does not render. see Below
>>> 
>>> <image.png>
>>> 
>>> 
>>> 
>>> 
>>> 
>>> On Wed, Jan 12, 2022 at 3:18 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>  It's not working.
>>> 
>>> What’s not working?
>>> 
>>>> Did I apply it correctly ?
>>> 
>>> Looks like it.
>>> 
>>>> Another question, which one do you use for your apps in production ?
>>> 
>>> I usually use Arrays. The css code was copied from one of my apps which uses an ArrayList in a Spectrum List..
>>> 
>>>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> I have attempted the second approach. It's not working. I am not sure I am applying it correctly. See how I defined it.
>>>> 
>>>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>       <sp:Icon> </sp:Icon>      
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>>>        change="onSelectMenu(event)"/>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>>   </sp:FlexContainer> -->
>>>> 
>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>       <sp:Icon> </sp:Icon>      
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>>        <sp:beads>
>>>>            <js:ArrayListSelectionModel />
>>>>            <js:DataItemRendererFactoryForArrayList/>
>>>>         </sp:beads>
>>>>       </sp:List>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>>   </sp:FlexContainer>
>>>> 
>>>> 
>>>> Note: in the commented out code above, I supplied an array. It works fine. 
>>>> 
>>>> Did I apply it correctly ?
>>>> 
>>>> Another question, which one do you use for your apps in production ?
>>>> 
>>>> 
>>>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>> Any one of those three should work.
>>>> 
>>>>> On Jan 12, 2022, at 3:09 PM, Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> CSS:
>>>>> #uploadsList{
>>>>>   IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>>>   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>>>> }
>>>>> 
>>>>> MXML:
>>>>>   <sp:beads>
>>>>>     <js:ArrayListSelectionModel/>
>>>>>     <js:DataItemRendererFactoryForArrayList/>
>>>>>   </sp:beads>
>>>>> 
>>>>> ActionScript:
>>>>>   addBead(new ArrayListSelectionModel());
>>>>>   addBead(new DataItemRendererFactoryForArrayList());
>>>>> 
>>>>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>> 
>>>>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>>>> 
>>>>>>  Let's say I want to use arrayList  as data provider. 
>>>>>> 
>>>>>> 
>>>>>> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>>> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
>>>>>> 
>>>>>> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
>>>>>> 
>>>>>> HTH,
>>>>>> Harbs
>>>>>> 
>>>>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> 
>>>>>>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>>>>>>> 
>>>>>>> 
>>>>>>> 
>>>>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>>>>>>> Hi,
>>>>>>> 
>>>>>>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> Hiedra
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>>>>>>> Enviado el: martes, 11 de enero de 2022 20:40
>>>>>>> Para: users@royale.apache.org <ma...@royale.apache.org>
>>>>>>> Asunto: Re: Spectrum UI components
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> <sp:Group>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> <sp:beads>
>>>>>>> 
>>>>>>>         <js:ContainerDataBinding />      
>>>>>>> 
>>>>>>>     </sp:beads>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>>>> 
>>>>>>>       <sp:Icon> </sp:Icon>      
>>>>>>> 
>>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>> 
>>>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>>>>>>> 
>>>>>>>        change="onSelectMenu(event)"/>
>>>>>>> 
>>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>>>>>>> 
>>>>>>>   </sp:FlexContainer>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>    <sp:Container id="mainArea">
>>>>>>> 
>>>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>>>> 
>>>>>>>    </sp:Container>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> </sp:Group>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> My current question 
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> is Array data type the only collection class that is supported in spectrum ? 
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> 
>>>>>>> Hi,
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> <sp:beads>
>>>>>>> 
>>>>>>>         <js:ContainerDataBinding />      
>>>>>>> 
>>>>>>>     </sp:beads>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>>> 
>>>>>>>       <sp:Icon> </sp:Icon>      
>>>>>>> 
>>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>> 
>>>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>>>>>>> 
>>>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>>>> 
>>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>>> 
>>>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>>>> 
>>>>>>>   </sp:FlexContainer>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> I have the following questions
>>>>>>> 
>>>>>>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>>>>>>> 
>>>>>>> I have tried both none of them works.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> 2.  Did I register data binding correctly ? 
>>>>>>> 
>>>>>>> The above ui is wrapped by a FlexContainer.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> 
>>>>>>> Use a <sp:PasswordField>
>>>>>>> 
>>>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> > 
>>>>>>> > Hi Harbs,
>>>>>>> > 
>>>>>>> > I am trying to create a login form. How do I hide the password in 
>>>>>>> > 
>>>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>>>> > 
>>>>>>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>>>>>>> 
>>>>>> 
>>>>> 
>>>> 
>>> 
>> 
> 
> <Home2.mxml>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
The base component for the mxml is a FlexContainer.

I have attached it to this mail. You can have a look.


On Wed, Jan 12, 2022 at 4:19 PM Harbs <ha...@gmail.com> wrote:

> How are you assigning the ArrayList? What’s the base component for the
> MXML?
>
> You might need to add ContainerDataBinding.
>
> On Jan 12, 2022, at 5:08 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> I have tested it again. No errors.
>
>
>
> On Wed, Jan 12, 2022 at 3:54 PM Harbs <ha...@gmail.com> wrote:
>
>> Do you get an error of some kind?
>>
>> On Jan 12, 2022, at 4:29 PM, Roman Isitua <ro...@gmail.com> wrote:
>>
>> Sorry, what I meant to say is that the arrayList does not render.
>>
>> For example when I use Array as follows
>>
>> <sp:FlexContainer className="home_side_area" wrap="false">
>>       <sp:Icon> </sp:Icon>
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>> "description" dataProvider="{menuItemList}"
>>        change="onSelectMenu(event)"/>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>   </sp:FlexContainer>
>>
>> The side menu renders
>>
>> <image.png>
>>
>>
>> However, when I use array List as follows
>>
>> <sp:FlexContainer className="home_side_area" wrap="false">
>>       <sp:Icon> </sp:Icon>
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>> "description"
>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>        <sp:beads>
>>            <js:ArrayListSelectionModel />
>>            <js:DataItemRendererFactoryForArrayList/>
>>         </sp:beads>
>>       </sp:List>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>   </sp:FlexContainer>
>>
>>
>> it does not render. see Below
>>
>> <image.png>
>>
>>
>>
>>
>>
>> On Wed, Jan 12, 2022 at 3:18 PM Harbs <ha...@gmail.com> wrote:
>>
>>>  It's not working.
>>>
>>>
>>> What’s not working?
>>>
>>> Did I apply it correctly ?
>>>
>>>
>>> Looks like it.
>>>
>>> Another question, which one do you use for your apps in production ?
>>>
>>>
>>> I usually use Arrays. The css code was copied from one of my apps which
>>> uses an ArrayList in a Spectrum List..
>>>
>>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <ro...@gmail.com> wrote:
>>>
>>> I have attempted the second approach. It's not working. I am not sure I
>>> am applying it correctly. See how I defined it.
>>>
>>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">
>>>       <sp:Icon> </sp:Icon>
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav"
>>> labelField="description" dataProvider="{menuItemList}"
>>>        change="onSelectMenu(event)"/>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>   </sp:FlexContainer> -->
>>>
>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>       <sp:Icon> </sp:Icon>
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>> "description"
>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>        <sp:beads>
>>>            <js:ArrayListSelectionModel />
>>>            <js:DataItemRendererFactoryForArrayList/>
>>>         </sp:beads>
>>>       </sp:List>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>   </sp:FlexContainer>
>>>
>>>
>>> Note: in the commented out code above, I supplied an array. It works
>>> fine.
>>>
>>> Did I apply it correctly ?
>>>
>>> Another question, which one do you use for your apps in production ?
>>>
>>>
>>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <ha...@gmail.com> wrote:
>>>
>>>> Any one of those three should work.
>>>>
>>>> On Jan 12, 2022, at 3:09 PM, Harbs <ha...@gmail.com> wrote:
>>>>
>>>> CSS:
>>>> #uploadsList{
>>>>   IBeadModel:
>>>> ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>>   IDataProviderItemRendererMapper:
>>>> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>>> }
>>>>
>>>> MXML:
>>>>   <sp:beads>
>>>>     <js:ArrayListSelectionModel/>
>>>>     <js:DataItemRendererFactoryForArrayList/>
>>>>   </sp:beads>
>>>>
>>>> ActionScript:
>>>>   addBead(new ArrayListSelectionModel());
>>>>   addBead(new DataItemRendererFactoryForArrayList());
>>>>
>>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <ro...@gmail.com>
>>>> wrote:
>>>>
>>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>>
>>>>  Let's say I want to use arrayList  as data provider.
>>>>
>>>>
>>>> On Wed, 12 Jan 2022, 13:41 Harbs, <ha...@gmail.com> wrote:
>>>>
>>>>> Yes.The default IDataProviderItemRendererMapper is
>>>>> DataItemRendererFactoryForArrayData.
>>>>>
>>>>> If you are using collections you should
>>>>> use DataItemRendererFactoryForArrayList or
>>>>> DataItemRendererFactoryForCollectionView instead.
>>>>>
>>>>> HTH,
>>>>> Harbs
>>>>>
>>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <ro...@gmail.com>
>>>>> wrote:
>>>>>
>>>>> Hence the reason, I need to confirm from Harbs the array data type
>>>>> that is supported in spectrum.
>>>>>
>>>>>
>>>>>
>>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mj...@iest.com>
>>>>> wrote:
>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> From what I see in the "ListModel.as" code it allows Object, IArray
>>>>>> and IArrayList.
>>>>>>
>>>>>>
>>>>>>
>>>>>> Hiedra
>>>>>>
>>>>>>
>>>>>>
>>>>>> *De:* Roman Isitua <ro...@gmail.com>
>>>>>> *Enviado el:* martes, 11 de enero de 2022 20:40
>>>>>> *Para:* users@royale.apache.org
>>>>>> *Asunto:* Re: Spectrum UI components
>>>>>>
>>>>>>
>>>>>>
>>>>>> It is now displaying. The issue was not related to the sp:List as I
>>>>>> initially thought.
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> <sp:Group>
>>>>>>
>>>>>>
>>>>>>
>>>>>> <sp:beads>
>>>>>>
>>>>>>         <js:ContainerDataBinding />
>>>>>>
>>>>>>     </sp:beads>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>>
>>>>>>       <sp:Icon> </sp:Icon>
>>>>>>
>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>
>>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>>>>> "description" dataProvider="{menuItemList}"
>>>>>>
>>>>>>        change="onSelectMenu(event)"/>
>>>>>>
>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>>
>>>>>>
>>>>>>   </sp:FlexContainer>
>>>>>>
>>>>>>
>>>>>>
>>>>>>    <sp:Container id="mainArea">
>>>>>>
>>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>>>
>>>>>>    </sp:Container>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> </sp:Group>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> I changed the parent component from flex container to group. Though
>>>>>> that had nothing to do  with the issue I was having.
>>>>>>
>>>>>>
>>>>>>
>>>>>> My current question
>>>>>>
>>>>>>
>>>>>>
>>>>>> is Array data type the only collection class that is supported in
>>>>>> spectrum ?
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>
>>>>>> wrote:
>>>>>>
>>>>>> Hi,
>>>>>>
>>>>>>
>>>>>>
>>>>>> I am trying to populate my first List <sp:List> for some reason it is
>>>>>> not being populated. Here is my code snippet.
>>>>>>
>>>>>>
>>>>>>
>>>>>> <sp:beads>
>>>>>>
>>>>>>         <js:ContainerDataBinding />
>>>>>>
>>>>>>     </sp:beads>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>>
>>>>>>       <sp:Icon> </sp:Icon>
>>>>>>
>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>
>>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
>>>>>> "{newMenuItemList}"
>>>>>>
>>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>>>
>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>>
>>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>>>
>>>>>>   </sp:FlexContainer>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> I have the following questions
>>>>>>
>>>>>> 1. what is the expected data provider ? Array,
>>>>>> or org.apache.royale.collections.ArrayList ?
>>>>>>
>>>>>> I have tried both none of them works.
>>>>>>
>>>>>>
>>>>>>
>>>>>> 2.  Did I register data binding correctly ?
>>>>>>
>>>>>> The above ui is wrapped by a FlexContainer.
>>>>>>
>>>>>>
>>>>>>
>>>>>> my data source is supposed to be an arrayList of data transfer
>>>>>> objects (MenuItemDTO) with get set functions for each field.
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>>>>>>
>>>>>> Use a <sp:PasswordField>
>>>>>>
>>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com>
>>>>>> wrote:
>>>>>> >
>>>>>> > Hi Harbs,
>>>>>> >
>>>>>> > I am trying to create a login form. How do I hide the password in
>>>>>> >
>>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>>> >
>>>>>> >  could it be that it does not support password hiding ? Do I have
>>>>>> to resort to using royale basic text field ?
>>>>>>
>>>>>>
>>>>>
>>>>
>>>>
>>>
>>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Also:

If you need the list to dynamically update itself you might need EasyDataProviderChangeNotifier like I have below.

> On Jan 12, 2022, at 5:19 PM, Harbs <ha...@gmail.com> wrote:
> 
> How are you assigning the ArrayList? What’s the base component for the MXML?
> 
> You might need to add ContainerDataBinding.
> 
>> On Jan 12, 2022, at 5:08 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> I have tested it again. No errors.
>> 
>> 
>> 
>> On Wed, Jan 12, 2022 at 3:54 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> Do you get an error of some kind?
>> 
>>> On Jan 12, 2022, at 4:29 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> Sorry, what I meant to say is that the arrayList does not render.
>>> 
>>> For example when I use Array as follows
>>> 
>>> <sp:FlexContainer className="home_side_area" wrap="false">      
>>>       <sp:Icon> </sp:Icon>      
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>>        change="onSelectMenu(event)"/>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>   </sp:FlexContainer>
>>> 
>>> The side menu renders
>>> 
>>> <image.png>
>>> 
>>> 
>>> However, when I use array List as follows
>>> 
>>> <sp:FlexContainer className="home_side_area" wrap="false">      
>>>       <sp:Icon> </sp:Icon>      
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>        <sp:beads>
>>>            <js:ArrayListSelectionModel />
>>>            <js:DataItemRendererFactoryForArrayList/>
>>>         </sp:beads>
>>>       </sp:List>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>   </sp:FlexContainer>
>>> 
>>> 
>>> it does not render. see Below
>>> 
>>> <image.png>
>>> 
>>> 
>>> 
>>> 
>>> 
>>> On Wed, Jan 12, 2022 at 3:18 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>  It's not working.
>>> 
>>> What’s not working?
>>> 
>>>> Did I apply it correctly ?
>>> 
>>> Looks like it.
>>> 
>>>> Another question, which one do you use for your apps in production ?
>>> 
>>> I usually use Arrays. The css code was copied from one of my apps which uses an ArrayList in a Spectrum List..
>>> 
>>>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> I have attempted the second approach. It's not working. I am not sure I am applying it correctly. See how I defined it.
>>>> 
>>>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>       <sp:Icon> </sp:Icon>      
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>>>        change="onSelectMenu(event)"/>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>>   </sp:FlexContainer> -->
>>>> 
>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>       <sp:Icon> </sp:Icon>      
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>>        <sp:beads>
>>>>            <js:ArrayListSelectionModel />
>>>>            <js:DataItemRendererFactoryForArrayList/>
>>>>         </sp:beads>
>>>>       </sp:List>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>>   </sp:FlexContainer>
>>>> 
>>>> 
>>>> Note: in the commented out code above, I supplied an array. It works fine. 
>>>> 
>>>> Did I apply it correctly ?
>>>> 
>>>> Another question, which one do you use for your apps in production ?
>>>> 
>>>> 
>>>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>> Any one of those three should work.
>>>> 
>>>>> On Jan 12, 2022, at 3:09 PM, Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> CSS:
>>>>> #uploadsList{
>>>>>   IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>>>   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>>>> }
>>>>> 
>>>>> MXML:
>>>>>   <sp:beads>
>>>>>     <js:ArrayListSelectionModel/>
>>>>>     <js:DataItemRendererFactoryForArrayList/>
>>>>>   </sp:beads>
>>>>> 
>>>>> ActionScript:
>>>>>   addBead(new ArrayListSelectionModel());
>>>>>   addBead(new DataItemRendererFactoryForArrayList());
>>>>> 
>>>>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>> 
>>>>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>>>> 
>>>>>>  Let's say I want to use arrayList  as data provider. 
>>>>>> 
>>>>>> 
>>>>>> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>>> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
>>>>>> 
>>>>>> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
>>>>>> 
>>>>>> HTH,
>>>>>> Harbs
>>>>>> 
>>>>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> 
>>>>>>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>>>>>>> 
>>>>>>> 
>>>>>>> 
>>>>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>>>>>>> Hi,
>>>>>>> 
>>>>>>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> Hiedra
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>>>>>>> Enviado el: martes, 11 de enero de 2022 20:40
>>>>>>> Para: users@royale.apache.org <ma...@royale.apache.org>
>>>>>>> Asunto: Re: Spectrum UI components
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> <sp:Group>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> <sp:beads>
>>>>>>> 
>>>>>>>         <js:ContainerDataBinding />      
>>>>>>> 
>>>>>>>     </sp:beads>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>>>> 
>>>>>>>       <sp:Icon> </sp:Icon>      
>>>>>>> 
>>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>> 
>>>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>>>>>>> 
>>>>>>>        change="onSelectMenu(event)"/>
>>>>>>> 
>>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>>>>>>> 
>>>>>>>   </sp:FlexContainer>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>    <sp:Container id="mainArea">
>>>>>>> 
>>>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>>>> 
>>>>>>>    </sp:Container>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> </sp:Group>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> My current question 
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> is Array data type the only collection class that is supported in spectrum ? 
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> 
>>>>>>> Hi,
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> <sp:beads>
>>>>>>> 
>>>>>>>         <js:ContainerDataBinding />      
>>>>>>> 
>>>>>>>     </sp:beads>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>>> 
>>>>>>>       <sp:Icon> </sp:Icon>      
>>>>>>> 
>>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>>> 
>>>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>>>>>>> 
>>>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>>>> 
>>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>>> 
>>>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>>>> 
>>>>>>>   </sp:FlexContainer>
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> I have the following questions
>>>>>>> 
>>>>>>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>>>>>>> 
>>>>>>> I have tried both none of them works.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> 2.  Did I register data binding correctly ? 
>>>>>>> 
>>>>>>> The above ui is wrapped by a FlexContainer.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>>  
>>>>>>> 
>>>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> 
>>>>>>> Use a <sp:PasswordField>
>>>>>>> 
>>>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>>> > 
>>>>>>> > Hi Harbs,
>>>>>>> > 
>>>>>>> > I am trying to create a login form. How do I hide the password in 
>>>>>>> > 
>>>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>>>> > 
>>>>>>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>>>>>>> 
>>>>>> 
>>>>> 
>>>> 
>>> 
>> 
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
How are you assigning the ArrayList? What’s the base component for the MXML?

You might need to add ContainerDataBinding.

> On Jan 12, 2022, at 5:08 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> I have tested it again. No errors.
> 
> 
> 
> On Wed, Jan 12, 2022 at 3:54 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> Do you get an error of some kind?
> 
>> On Jan 12, 2022, at 4:29 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> Sorry, what I meant to say is that the arrayList does not render.
>> 
>> For example when I use Array as follows
>> 
>> <sp:FlexContainer className="home_side_area" wrap="false">      
>>       <sp:Icon> </sp:Icon>      
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>        change="onSelectMenu(event)"/>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>   </sp:FlexContainer>
>> 
>> The side menu renders
>> 
>> <image.png>
>> 
>> 
>> However, when I use array List as follows
>> 
>> <sp:FlexContainer className="home_side_area" wrap="false">      
>>       <sp:Icon> </sp:Icon>      
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>        <sp:beads>
>>            <js:ArrayListSelectionModel />
>>            <js:DataItemRendererFactoryForArrayList/>
>>         </sp:beads>
>>       </sp:List>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>   </sp:FlexContainer>
>> 
>> 
>> it does not render. see Below
>> 
>> <image.png>
>> 
>> 
>> 
>> 
>> 
>> On Wed, Jan 12, 2022 at 3:18 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>  It's not working.
>> 
>> What’s not working?
>> 
>>> Did I apply it correctly ?
>> 
>> Looks like it.
>> 
>>> Another question, which one do you use for your apps in production ?
>> 
>> I usually use Arrays. The css code was copied from one of my apps which uses an ArrayList in a Spectrum List..
>> 
>>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> I have attempted the second approach. It's not working. I am not sure I am applying it correctly. See how I defined it.
>>> 
>>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">      
>>>       <sp:Icon> </sp:Icon>      
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>>        change="onSelectMenu(event)"/>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>   </sp:FlexContainer> -->
>>> 
>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>       <sp:Icon> </sp:Icon>      
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>>        <sp:beads>
>>>            <js:ArrayListSelectionModel />
>>>            <js:DataItemRendererFactoryForArrayList/>
>>>         </sp:beads>
>>>       </sp:List>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>>   </sp:FlexContainer>
>>> 
>>> 
>>> Note: in the commented out code above, I supplied an array. It works fine. 
>>> 
>>> Did I apply it correctly ?
>>> 
>>> Another question, which one do you use for your apps in production ?
>>> 
>>> 
>>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>> Any one of those three should work.
>>> 
>>>> On Jan 12, 2022, at 3:09 PM, Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> CSS:
>>>> #uploadsList{
>>>>   IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>>   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>>> }
>>>> 
>>>> MXML:
>>>>   <sp:beads>
>>>>     <js:ArrayListSelectionModel/>
>>>>     <js:DataItemRendererFactoryForArrayList/>
>>>>   </sp:beads>
>>>> 
>>>> ActionScript:
>>>>   addBead(new ArrayListSelectionModel());
>>>>   addBead(new DataItemRendererFactoryForArrayList());
>>>> 
>>>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>>> 
>>>>>  Let's say I want to use arrayList  as data provider. 
>>>>> 
>>>>> 
>>>>> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
>>>>> 
>>>>> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
>>>>> 
>>>>> HTH,
>>>>> Harbs
>>>>> 
>>>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>> 
>>>>>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>>>>>> 
>>>>>> 
>>>>>> 
>>>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>>>>>> Hi,
>>>>>> 
>>>>>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> Hiedra
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>>>>>> Enviado el: martes, 11 de enero de 2022 20:40
>>>>>> Para: users@royale.apache.org <ma...@royale.apache.org>
>>>>>> Asunto: Re: Spectrum UI components
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> <sp:Group>
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> <sp:beads>
>>>>>> 
>>>>>>         <js:ContainerDataBinding />      
>>>>>> 
>>>>>>     </sp:beads>
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>>> 
>>>>>>       <sp:Icon> </sp:Icon>      
>>>>>> 
>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>> 
>>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>>>>>> 
>>>>>>        change="onSelectMenu(event)"/>
>>>>>> 
>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>>>>>> 
>>>>>>   </sp:FlexContainer>
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>    <sp:Container id="mainArea">
>>>>>> 
>>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>>> 
>>>>>>    </sp:Container>
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> </sp:Group>
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> My current question 
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> is Array data type the only collection class that is supported in spectrum ? 
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>> 
>>>>>> Hi,
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> <sp:beads>
>>>>>> 
>>>>>>         <js:ContainerDataBinding />      
>>>>>> 
>>>>>>     </sp:beads>
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>> 
>>>>>>       <sp:Icon> </sp:Icon>      
>>>>>> 
>>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>> 
>>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>>>>>> 
>>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>>> 
>>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>> 
>>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>>> 
>>>>>>   </sp:FlexContainer>
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> I have the following questions
>>>>>> 
>>>>>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>>>>>> 
>>>>>> I have tried both none of them works.
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> 2.  Did I register data binding correctly ? 
>>>>>> 
>>>>>> The above ui is wrapped by a FlexContainer.
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>>  
>>>>>> 
>>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>>> 
>>>>>> Use a <sp:PasswordField>
>>>>>> 
>>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>>> > 
>>>>>> > Hi Harbs,
>>>>>> > 
>>>>>> > I am trying to create a login form. How do I hide the password in 
>>>>>> > 
>>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>>> > 
>>>>>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>>>>>> 
>>>>> 
>>>> 
>>> 
>> 
>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
I have tested it again. No errors.



On Wed, Jan 12, 2022 at 3:54 PM Harbs <ha...@gmail.com> wrote:

> Do you get an error of some kind?
>
> On Jan 12, 2022, at 4:29 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> Sorry, what I meant to say is that the arrayList does not render.
>
> For example when I use Array as follows
>
> <sp:FlexContainer className="home_side_area" wrap="false">
>       <sp:Icon> </sp:Icon>
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" labelField=
> "description" dataProvider="{menuItemList}"
>        change="onSelectMenu(event)"/>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>   </sp:FlexContainer>
>
> The side menu renders
>
> <image.png>
>
>
> However, when I use array List as follows
>
> <sp:FlexContainer className="home_side_area" wrap="false">
>       <sp:Icon> </sp:Icon>
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" labelField=
> "description"
>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>        <sp:beads>
>            <js:ArrayListSelectionModel />
>            <js:DataItemRendererFactoryForArrayList/>
>         </sp:beads>
>       </sp:List>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>   </sp:FlexContainer>
>
>
> it does not render. see Below
>
> <image.png>
>
>
>
>
>
> On Wed, Jan 12, 2022 at 3:18 PM Harbs <ha...@gmail.com> wrote:
>
>>  It's not working.
>>
>>
>> What’s not working?
>>
>> Did I apply it correctly ?
>>
>>
>> Looks like it.
>>
>> Another question, which one do you use for your apps in production ?
>>
>>
>> I usually use Arrays. The css code was copied from one of my apps which
>> uses an ArrayList in a Spectrum List..
>>
>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <ro...@gmail.com> wrote:
>>
>> I have attempted the second approach. It's not working. I am not sure I
>> am applying it correctly. See how I defined it.
>>
>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">
>>       <sp:Icon> </sp:Icon>
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav"
>> labelField="description" dataProvider="{menuItemList}"
>>        change="onSelectMenu(event)"/>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>   </sp:FlexContainer> -->
>>
>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>       <sp:Icon> </sp:Icon>
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>> "description"
>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>        <sp:beads>
>>            <js:ArrayListSelectionModel />
>>            <js:DataItemRendererFactoryForArrayList/>
>>         </sp:beads>
>>       </sp:List>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>   </sp:FlexContainer>
>>
>>
>> Note: in the commented out code above, I supplied an array. It works
>> fine.
>>
>> Did I apply it correctly ?
>>
>> Another question, which one do you use for your apps in production ?
>>
>>
>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <ha...@gmail.com> wrote:
>>
>>> Any one of those three should work.
>>>
>>> On Jan 12, 2022, at 3:09 PM, Harbs <ha...@gmail.com> wrote:
>>>
>>> CSS:
>>> #uploadsList{
>>>   IBeadModel:
>>> ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>   IDataProviderItemRendererMapper:
>>> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>> }
>>>
>>> MXML:
>>>   <sp:beads>
>>>     <js:ArrayListSelectionModel/>
>>>     <js:DataItemRendererFactoryForArrayList/>
>>>   </sp:beads>
>>>
>>> ActionScript:
>>>   addBead(new ArrayListSelectionModel());
>>>   addBead(new DataItemRendererFactoryForArrayList());
>>>
>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <ro...@gmail.com> wrote:
>>>
>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>
>>>  Let's say I want to use arrayList  as data provider.
>>>
>>>
>>> On Wed, 12 Jan 2022, 13:41 Harbs, <ha...@gmail.com> wrote:
>>>
>>>> Yes.The default IDataProviderItemRendererMapper is
>>>> DataItemRendererFactoryForArrayData.
>>>>
>>>> If you are using collections you should
>>>> use DataItemRendererFactoryForArrayList or
>>>> DataItemRendererFactoryForCollectionView instead.
>>>>
>>>> HTH,
>>>> Harbs
>>>>
>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <ro...@gmail.com>
>>>> wrote:
>>>>
>>>> Hence the reason, I need to confirm from Harbs the array data type that
>>>> is supported in spectrum.
>>>>
>>>>
>>>>
>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mj...@iest.com>
>>>> wrote:
>>>>
>>>>> Hi,
>>>>>
>>>>> From what I see in the "ListModel.as" code it allows Object, IArray
>>>>> and IArrayList.
>>>>>
>>>>>
>>>>>
>>>>> Hiedra
>>>>>
>>>>>
>>>>>
>>>>> *De:* Roman Isitua <ro...@gmail.com>
>>>>> *Enviado el:* martes, 11 de enero de 2022 20:40
>>>>> *Para:* users@royale.apache.org
>>>>> *Asunto:* Re: Spectrum UI components
>>>>>
>>>>>
>>>>>
>>>>> It is now displaying. The issue was not related to the sp:List as I
>>>>> initially thought.
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> <sp:Group>
>>>>>
>>>>>
>>>>>
>>>>> <sp:beads>
>>>>>
>>>>>         <js:ContainerDataBinding />
>>>>>
>>>>>     </sp:beads>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>
>>>>>       <sp:Icon> </sp:Icon>
>>>>>
>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>
>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>>>> "description" dataProvider="{menuItemList}"
>>>>>
>>>>>        change="onSelectMenu(event)"/>
>>>>>
>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>
>>>>>
>>>>>   </sp:FlexContainer>
>>>>>
>>>>>
>>>>>
>>>>>    <sp:Container id="mainArea">
>>>>>
>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>>
>>>>>    </sp:Container>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> </sp:Group>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> I changed the parent component from flex container to group. Though
>>>>> that had nothing to do  with the issue I was having.
>>>>>
>>>>>
>>>>>
>>>>> My current question
>>>>>
>>>>>
>>>>>
>>>>> is Array data type the only collection class that is supported in
>>>>> spectrum ?
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>
>>>>> wrote:
>>>>>
>>>>> Hi,
>>>>>
>>>>>
>>>>>
>>>>> I am trying to populate my first List <sp:List> for some reason it is
>>>>> not being populated. Here is my code snippet.
>>>>>
>>>>>
>>>>>
>>>>> <sp:beads>
>>>>>
>>>>>         <js:ContainerDataBinding />
>>>>>
>>>>>     </sp:beads>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>>
>>>>>       <sp:Icon> </sp:Icon>
>>>>>
>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>>
>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
>>>>> "{newMenuItemList}"
>>>>>
>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>>
>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>>
>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>>
>>>>>   </sp:FlexContainer>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> I have the following questions
>>>>>
>>>>> 1. what is the expected data provider ? Array,
>>>>> or org.apache.royale.collections.ArrayList ?
>>>>>
>>>>> I have tried both none of them works.
>>>>>
>>>>>
>>>>>
>>>>> 2.  Did I register data binding correctly ?
>>>>>
>>>>> The above ui is wrapped by a FlexContainer.
>>>>>
>>>>>
>>>>>
>>>>> my data source is supposed to be an arrayList of data transfer objects
>>>>> (MenuItemDTO) with get set functions for each field.
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>>>>>
>>>>> Use a <sp:PasswordField>
>>>>>
>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com>
>>>>> wrote:
>>>>> >
>>>>> > Hi Harbs,
>>>>> >
>>>>> > I am trying to create a login form. How do I hide the password in
>>>>> >
>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>> >
>>>>> >  could it be that it does not support password hiding ? Do I have to
>>>>> resort to using royale basic text field ?
>>>>>
>>>>>
>>>>
>>>
>>>
>>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Do you get an error of some kind?

> On Jan 12, 2022, at 4:29 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> Sorry, what I meant to say is that the arrayList does not render.
> 
> For example when I use Array as follows
> 
> <sp:FlexContainer className="home_side_area" wrap="false">      
>       <sp:Icon> </sp:Icon>      
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>        change="onSelectMenu(event)"/>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>   </sp:FlexContainer>
> 
> The side menu renders
> 
> <image.png>
> 
> 
> However, when I use array List as follows
> 
> <sp:FlexContainer className="home_side_area" wrap="false">      
>       <sp:Icon> </sp:Icon>      
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>        <sp:beads>
>            <js:ArrayListSelectionModel />
>            <js:DataItemRendererFactoryForArrayList/>
>         </sp:beads>
>       </sp:List>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>   </sp:FlexContainer>
> 
> 
> it does not render. see Below
> 
> <image.png>
> 
> 
> 
> 
> 
> On Wed, Jan 12, 2022 at 3:18 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>  It's not working.
> 
> What’s not working?
> 
>> Did I apply it correctly ?
> 
> Looks like it.
> 
>> Another question, which one do you use for your apps in production ?
> 
> I usually use Arrays. The css code was copied from one of my apps which uses an ArrayList in a Spectrum List..
> 
>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> I have attempted the second approach. It's not working. I am not sure I am applying it correctly. See how I defined it.
>> 
>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">      
>>       <sp:Icon> </sp:Icon>      
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>        change="onSelectMenu(event)"/>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>   </sp:FlexContainer> -->
>> 
>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>       <sp:Icon> </sp:Icon>      
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>        <sp:beads>
>>            <js:ArrayListSelectionModel />
>>            <js:DataItemRendererFactoryForArrayList/>
>>         </sp:beads>
>>       </sp:List>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>   </sp:FlexContainer>
>> 
>> 
>> Note: in the commented out code above, I supplied an array. It works fine. 
>> 
>> Did I apply it correctly ?
>> 
>> Another question, which one do you use for your apps in production ?
>> 
>> 
>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> Any one of those three should work.
>> 
>>> On Jan 12, 2022, at 3:09 PM, Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> CSS:
>>> #uploadsList{
>>>   IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>> }
>>> 
>>> MXML:
>>>   <sp:beads>
>>>     <js:ArrayListSelectionModel/>
>>>     <js:DataItemRendererFactoryForArrayList/>
>>>   </sp:beads>
>>> 
>>> ActionScript:
>>>   addBead(new ArrayListSelectionModel());
>>>   addBead(new DataItemRendererFactoryForArrayList());
>>> 
>>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>> 
>>>>  Let's say I want to use arrayList  as data provider. 
>>>> 
>>>> 
>>>> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
>>>> 
>>>> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
>>>> 
>>>> HTH,
>>>> Harbs
>>>> 
>>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>>>>> 
>>>>> 
>>>>> 
>>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>>>>> Hi,
>>>>> 
>>>>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>>>>> 
>>>>>  
>>>>> 
>>>>> Hiedra
>>>>> 
>>>>>  
>>>>> 
>>>>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>>>>> Enviado el: martes, 11 de enero de 2022 20:40
>>>>> Para: users@royale.apache.org <ma...@royale.apache.org>
>>>>> Asunto: Re: Spectrum UI components
>>>>> 
>>>>>  
>>>>> 
>>>>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> <sp:Group>
>>>>> 
>>>>>  
>>>>> 
>>>>> <sp:beads>
>>>>> 
>>>>>         <js:ContainerDataBinding />      
>>>>> 
>>>>>     </sp:beads>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>> 
>>>>>       <sp:Icon> </sp:Icon>      
>>>>> 
>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>> 
>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>>>>> 
>>>>>        change="onSelectMenu(event)"/>
>>>>> 
>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>>>>> 
>>>>>   </sp:FlexContainer>
>>>>> 
>>>>>  
>>>>> 
>>>>>    <sp:Container id="mainArea">
>>>>> 
>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>> 
>>>>>    </sp:Container>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> </sp:Group>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>>>>> 
>>>>>  
>>>>> 
>>>>> My current question 
>>>>> 
>>>>>  
>>>>> 
>>>>> is Array data type the only collection class that is supported in spectrum ? 
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> Hi,
>>>>> 
>>>>>  
>>>>> 
>>>>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>>>>> 
>>>>>  
>>>>> 
>>>>> <sp:beads>
>>>>> 
>>>>>         <js:ContainerDataBinding />      
>>>>> 
>>>>>     </sp:beads>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>> 
>>>>>       <sp:Icon> </sp:Icon>      
>>>>> 
>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>> 
>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>>>>> 
>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>> 
>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>> 
>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>> 
>>>>>   </sp:FlexContainer>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> I have the following questions
>>>>> 
>>>>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>>>>> 
>>>>> I have tried both none of them works.
>>>>> 
>>>>>  
>>>>> 
>>>>> 2.  Did I register data binding correctly ? 
>>>>> 
>>>>> The above ui is wrapped by a FlexContainer.
>>>>> 
>>>>>  
>>>>> 
>>>>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> Use a <sp:PasswordField>
>>>>> 
>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>> > 
>>>>> > Hi Harbs,
>>>>> > 
>>>>> > I am trying to create a login form. How do I hide the password in 
>>>>> > 
>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>> > 
>>>>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>>>>> 
>>>> 
>>> 
>> 
>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
Sorry, what I meant to say is that the arrayList does not render.

For example when I use Array as follows

<sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" labelField=
"description" dataProvider="{menuItemList}"
       change="onSelectMenu(event)"/>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
  </sp:FlexContainer>

The side menu renders

[image: image.png]


However, when I use array List as follows

<sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" labelField=
"description"
      dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
       <sp:beads>
           <js:ArrayListSelectionModel />
           <js:DataItemRendererFactoryForArrayList/>
        </sp:beads>
      </sp:List>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
  </sp:FlexContainer>


it does not render. see Below

[image: image.png]





On Wed, Jan 12, 2022 at 3:18 PM Harbs <ha...@gmail.com> wrote:

>  It's not working.
>
>
> What’s not working?
>
> Did I apply it correctly ?
>
>
> Looks like it.
>
> Another question, which one do you use for your apps in production ?
>
>
> I usually use Arrays. The css code was copied from one of my apps which
> uses an ArrayList in a Spectrum List..
>
> On Jan 12, 2022, at 4:00 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> I have attempted the second approach. It's not working. I am not sure I am
> applying it correctly. See how I defined it.
>
> <!-- <sp:FlexContainer className="home_side_area" wrap="false">
>       <sp:Icon> </sp:Icon>
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav"
> labelField="description" dataProvider="{menuItemList}"
>        change="onSelectMenu(event)"/>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>   </sp:FlexContainer> -->
>
>   <sp:FlexContainer className="home_side_area" wrap="false">
>       <sp:Icon> </sp:Icon>
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" labelField=
> "description"
>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>        <sp:beads>
>            <js:ArrayListSelectionModel />
>            <js:DataItemRendererFactoryForArrayList/>
>         </sp:beads>
>       </sp:List>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>   </sp:FlexContainer>
>
>
> Note: in the commented out code above, I supplied an array. It works fine.
>
> Did I apply it correctly ?
>
> Another question, which one do you use for your apps in production ?
>
>
> On Wed, Jan 12, 2022 at 2:09 PM Harbs <ha...@gmail.com> wrote:
>
>> Any one of those three should work.
>>
>> On Jan 12, 2022, at 3:09 PM, Harbs <ha...@gmail.com> wrote:
>>
>> CSS:
>> #uploadsList{
>>   IBeadModel:
>> ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>   IDataProviderItemRendererMapper:
>> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>> }
>>
>> MXML:
>>   <sp:beads>
>>     <js:ArrayListSelectionModel/>
>>     <js:DataItemRendererFactoryForArrayList/>
>>   </sp:beads>
>>
>> ActionScript:
>>   addBead(new ArrayListSelectionModel());
>>   addBead(new DataItemRendererFactoryForArrayList());
>>
>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <ro...@gmail.com> wrote:
>>
>> How can this be applied let say for example on an sp:List ? As a bead ?
>>
>>  Let's say I want to use arrayList  as data provider.
>>
>>
>> On Wed, 12 Jan 2022, 13:41 Harbs, <ha...@gmail.com> wrote:
>>
>>> Yes.The default IDataProviderItemRendererMapper is
>>> DataItemRendererFactoryForArrayData.
>>>
>>> If you are using collections you should
>>> use DataItemRendererFactoryForArrayList or
>>> DataItemRendererFactoryForCollectionView instead.
>>>
>>> HTH,
>>> Harbs
>>>
>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <ro...@gmail.com> wrote:
>>>
>>> Hence the reason, I need to confirm from Harbs the array data type that
>>> is supported in spectrum.
>>>
>>>
>>>
>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mj...@iest.com> wrote:
>>>
>>>> Hi,
>>>>
>>>> From what I see in the "ListModel.as" code it allows Object, IArray and
>>>> IArrayList.
>>>>
>>>>
>>>>
>>>> Hiedra
>>>>
>>>>
>>>>
>>>> *De:* Roman Isitua <ro...@gmail.com>
>>>> *Enviado el:* martes, 11 de enero de 2022 20:40
>>>> *Para:* users@royale.apache.org
>>>> *Asunto:* Re: Spectrum UI components
>>>>
>>>>
>>>>
>>>> It is now displaying. The issue was not related to the sp:List as I
>>>> initially thought.
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> <sp:Group>
>>>>
>>>>
>>>>
>>>> <sp:beads>
>>>>
>>>>         <js:ContainerDataBinding />
>>>>
>>>>     </sp:beads>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>
>>>>       <sp:Icon> </sp:Icon>
>>>>
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>
>>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>>> "description" dataProvider="{menuItemList}"
>>>>
>>>>        change="onSelectMenu(event)"/>
>>>>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>
>>>>   </sp:FlexContainer>
>>>>
>>>>
>>>>
>>>>    <sp:Container id="mainArea">
>>>>
>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>
>>>>    </sp:Container>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> </sp:Group>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> I changed the parent component from flex container to group. Though
>>>> that had nothing to do  with the issue I was having.
>>>>
>>>>
>>>>
>>>> My current question
>>>>
>>>>
>>>>
>>>> is Array data type the only collection class that is supported in
>>>> spectrum ?
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>
>>>> wrote:
>>>>
>>>> Hi,
>>>>
>>>>
>>>>
>>>> I am trying to populate my first List <sp:List> for some reason it is
>>>> not being populated. Here is my code snippet.
>>>>
>>>>
>>>>
>>>> <sp:beads>
>>>>
>>>>         <js:ContainerDataBinding />
>>>>
>>>>     </sp:beads>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>
>>>>       <sp:Icon> </sp:Icon>
>>>>
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>
>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
>>>> "{newMenuItemList}"
>>>>
>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>
>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>
>>>>   </sp:FlexContainer>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> I have the following questions
>>>>
>>>> 1. what is the expected data provider ? Array,
>>>> or org.apache.royale.collections.ArrayList ?
>>>>
>>>> I have tried both none of them works.
>>>>
>>>>
>>>>
>>>> 2.  Did I register data binding correctly ?
>>>>
>>>> The above ui is wrapped by a FlexContainer.
>>>>
>>>>
>>>>
>>>> my data source is supposed to be an arrayList of data transfer objects
>>>> (MenuItemDTO) with get set functions for each field.
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>>>>
>>>> Use a <sp:PasswordField>
>>>>
>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com>
>>>> wrote:
>>>> >
>>>> > Hi Harbs,
>>>> >
>>>> > I am trying to create a login form. How do I hide the password in
>>>> >
>>>> > <sp:TextField placeholder="Enter password"/>
>>>> >
>>>> >  could it be that it does not support password hiding ? Do I have to
>>>> resort to using royale basic text field ?
>>>>
>>>>
>>>
>>
>>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Here’s the list of beads I’m using for a Spectrum List elsewhere (you don’t necessarily need ArrayListSelectionModel):

<sp:beads>
  <js:DataItemRendererFactoryForArrayList/>
  <js:EasyDataProviderChangeNotifier/>
  <js:DynamicRemoveAllItemRendererForArrayListData/>
  <js:OverflowViewport/>
  <js:TileLayout id="thumbnailLayout" columnWidth="125" rowHeight="150"/>
</sp:beads>


> On Jan 12, 2022, at 4:18 PM, Harbs <ha...@gmail.com> wrote:
> 
>>  It's not working.
> 
> What’s not working?
> 
>> Did I apply it correctly ?
> 
> Looks like it.
> 
>> Another question, which one do you use for your apps in production ?
> 
> I usually use Arrays. The css code was copied from one of my apps which uses an ArrayList in a Spectrum List..
> 
>> On Jan 12, 2022, at 4:00 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> I have attempted the second approach. It's not working. I am not sure I am applying it correctly. See how I defined it.
>> 
>> <!-- <sp:FlexContainer className="home_side_area" wrap="false">      
>>       <sp:Icon> </sp:Icon>      
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>>        change="onSelectMenu(event)"/>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>   </sp:FlexContainer> -->
>> 
>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>       <sp:Icon> </sp:Icon>      
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>>        <sp:beads>
>>            <js:ArrayListSelectionModel />
>>            <js:DataItemRendererFactoryForArrayList/>
>>         </sp:beads>
>>       </sp:List>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>>   </sp:FlexContainer>
>> 
>> 
>> Note: in the commented out code above, I supplied an array. It works fine. 
>> 
>> Did I apply it correctly ?
>> 
>> Another question, which one do you use for your apps in production ?
>> 
>> 
>> On Wed, Jan 12, 2022 at 2:09 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> Any one of those three should work.
>> 
>>> On Jan 12, 2022, at 3:09 PM, Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> CSS:
>>> #uploadsList{
>>>   IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>>   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>>> }
>>> 
>>> MXML:
>>>   <sp:beads>
>>>     <js:ArrayListSelectionModel/>
>>>     <js:DataItemRendererFactoryForArrayList/>
>>>   </sp:beads>
>>> 
>>> ActionScript:
>>>   addBead(new ArrayListSelectionModel());
>>>   addBead(new DataItemRendererFactoryForArrayList());
>>> 
>>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>>> 
>>>>  Let's say I want to use arrayList  as data provider. 
>>>> 
>>>> 
>>>> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
>>>> 
>>>> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
>>>> 
>>>> HTH,
>>>> Harbs
>>>> 
>>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>>>>> 
>>>>> 
>>>>> 
>>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>>>>> Hi,
>>>>> 
>>>>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>>>>> 
>>>>>  
>>>>> 
>>>>> Hiedra
>>>>> 
>>>>>  
>>>>> 
>>>>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>>>>> Enviado el: martes, 11 de enero de 2022 20:40
>>>>> Para: users@royale.apache.org <ma...@royale.apache.org>
>>>>> Asunto: Re: Spectrum UI components
>>>>> 
>>>>>  
>>>>> 
>>>>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> <sp:Group>
>>>>> 
>>>>>  
>>>>> 
>>>>> <sp:beads>
>>>>> 
>>>>>         <js:ContainerDataBinding />      
>>>>> 
>>>>>     </sp:beads>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>>> 
>>>>>       <sp:Icon> </sp:Icon>      
>>>>> 
>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>> 
>>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>>>>> 
>>>>>        change="onSelectMenu(event)"/>
>>>>> 
>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>>>>> 
>>>>>   </sp:FlexContainer>
>>>>> 
>>>>>  
>>>>> 
>>>>>    <sp:Container id="mainArea">
>>>>> 
>>>>>       <sp:Label text="Overview area"></sp:Label>
>>>>> 
>>>>>    </sp:Container>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> </sp:Group>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>>>>> 
>>>>>  
>>>>> 
>>>>> My current question 
>>>>> 
>>>>>  
>>>>> 
>>>>> is Array data type the only collection class that is supported in spectrum ? 
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> Hi,
>>>>> 
>>>>>  
>>>>> 
>>>>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>>>>> 
>>>>>  
>>>>> 
>>>>> <sp:beads>
>>>>> 
>>>>>         <js:ContainerDataBinding />      
>>>>> 
>>>>>     </sp:beads>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>>> 
>>>>>       <sp:Icon> </sp:Icon>      
>>>>> 
>>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>>> 
>>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>>>>> 
>>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>>> 
>>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>>> 
>>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>>> 
>>>>>   </sp:FlexContainer>
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> I have the following questions
>>>>> 
>>>>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>>>>> 
>>>>> I have tried both none of them works.
>>>>> 
>>>>>  
>>>>> 
>>>>> 2.  Did I register data binding correctly ? 
>>>>> 
>>>>> The above ui is wrapped by a FlexContainer.
>>>>> 
>>>>>  
>>>>> 
>>>>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>>  
>>>>> 
>>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>>> 
>>>>> Use a <sp:PasswordField>
>>>>> 
>>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>>> > 
>>>>> > Hi Harbs,
>>>>> > 
>>>>> > I am trying to create a login form. How do I hide the password in 
>>>>> > 
>>>>> > <sp:TextField placeholder="Enter password"/>
>>>>> > 
>>>>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>>>>> 
>>>> 
>>> 
>> 
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
>  It's not working.

What’s not working?

> Did I apply it correctly ?

Looks like it.

> Another question, which one do you use for your apps in production ?

I usually use Arrays. The css code was copied from one of my apps which uses an ArrayList in a Spectrum List..

> On Jan 12, 2022, at 4:00 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> I have attempted the second approach. It's not working. I am not sure I am applying it correctly. See how I defined it.
> 
> <!-- <sp:FlexContainer className="home_side_area" wrap="false">      
>       <sp:Icon> </sp:Icon>      
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}" 
>        change="onSelectMenu(event)"/>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>   </sp:FlexContainer> -->
> 
>   <sp:FlexContainer className="home_side_area" wrap="false">      
>       <sp:Icon> </sp:Icon>      
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" labelField="description" 
>       dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
>        <sp:beads>
>            <js:ArrayListSelectionModel />
>            <js:DataItemRendererFactoryForArrayList/>
>         </sp:beads>
>       </sp:List>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>     
>   </sp:FlexContainer>
> 
> 
> Note: in the commented out code above, I supplied an array. It works fine. 
> 
> Did I apply it correctly ?
> 
> Another question, which one do you use for your apps in production ?
> 
> 
> On Wed, Jan 12, 2022 at 2:09 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> Any one of those three should work.
> 
>> On Jan 12, 2022, at 3:09 PM, Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> 
>> CSS:
>> #uploadsList{
>>   IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>>   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
>> }
>> 
>> MXML:
>>   <sp:beads>
>>     <js:ArrayListSelectionModel/>
>>     <js:DataItemRendererFactoryForArrayList/>
>>   </sp:beads>
>> 
>> ActionScript:
>>   addBead(new ArrayListSelectionModel());
>>   addBead(new DataItemRendererFactoryForArrayList());
>> 
>>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> How can this be applied let say for example on an sp:List ? As a bead ?
>>> 
>>>  Let's say I want to use arrayList  as data provider. 
>>> 
>>> 
>>> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
>>> 
>>> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
>>> 
>>> HTH,
>>> Harbs
>>> 
>>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>>>> 
>>>> 
>>>> 
>>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>>>> Hi,
>>>> 
>>>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>>>> 
>>>>  
>>>> 
>>>> Hiedra
>>>> 
>>>>  
>>>> 
>>>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>>>> Enviado el: martes, 11 de enero de 2022 20:40
>>>> Para: users@royale.apache.org <ma...@royale.apache.org>
>>>> Asunto: Re: Spectrum UI components
>>>> 
>>>>  
>>>> 
>>>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>> <sp:Group>
>>>> 
>>>>  
>>>> 
>>>> <sp:beads>
>>>> 
>>>>         <js:ContainerDataBinding />      
>>>> 
>>>>     </sp:beads>
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>>> 
>>>>       <sp:Icon> </sp:Icon>      
>>>> 
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>> 
>>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>>>> 
>>>>        change="onSelectMenu(event)"/>
>>>> 
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>>>> 
>>>>   </sp:FlexContainer>
>>>> 
>>>>  
>>>> 
>>>>    <sp:Container id="mainArea">
>>>> 
>>>>       <sp:Label text="Overview area"></sp:Label>
>>>> 
>>>>    </sp:Container>
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>> </sp:Group>
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>>>> 
>>>>  
>>>> 
>>>> My current question 
>>>> 
>>>>  
>>>> 
>>>> is Array data type the only collection class that is supported in spectrum ? 
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> Hi,
>>>> 
>>>>  
>>>> 
>>>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>>>> 
>>>>  
>>>> 
>>>> <sp:beads>
>>>> 
>>>>         <js:ContainerDataBinding />      
>>>> 
>>>>     </sp:beads>
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>> 
>>>>       <sp:Icon> </sp:Icon>      
>>>> 
>>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>> 
>>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>>>> 
>>>>       labelField="description" change="onSelectMenu(event)"/>
>>>> 
>>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>> 
>>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>> 
>>>>   </sp:FlexContainer>
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>> I have the following questions
>>>> 
>>>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>>>> 
>>>> I have tried both none of them works.
>>>> 
>>>>  
>>>> 
>>>> 2.  Did I register data binding correctly ? 
>>>> 
>>>> The above ui is wrapped by a FlexContainer.
>>>> 
>>>>  
>>>> 
>>>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>>  
>>>> 
>>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>>> 
>>>> Use a <sp:PasswordField>
>>>> 
>>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>> > 
>>>> > Hi Harbs,
>>>> > 
>>>> > I am trying to create a login form. How do I hide the password in 
>>>> > 
>>>> > <sp:TextField placeholder="Enter password"/>
>>>> > 
>>>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>>>> 
>>> 
>> 
>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
I have attempted the second approach. It's not working. I am not sure I am
applying it correctly. See how I defined it.

<!-- <sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav"
labelField="description" dataProvider="{menuItemList}"
       change="onSelectMenu(event)"/>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
  </sp:FlexContainer> -->

  <sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" labelField=
"description"
      dataProvider="{newMenuItemList}" change="onSelectMenu(event)">
       <sp:beads>
           <js:ArrayListSelectionModel />
           <js:DataItemRendererFactoryForArrayList/>
        </sp:beads>
      </sp:List>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
  </sp:FlexContainer>


Note: in the commented out code above, I supplied an array. It works fine.

Did I apply it correctly ?

Another question, which one do you use for your apps in production ?


On Wed, Jan 12, 2022 at 2:09 PM Harbs <ha...@gmail.com> wrote:

> Any one of those three should work.
>
> On Jan 12, 2022, at 3:09 PM, Harbs <ha...@gmail.com> wrote:
>
> CSS:
> #uploadsList{
>   IBeadModel:
> ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>   IDataProviderItemRendererMapper:
> ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
> }
>
> MXML:
>   <sp:beads>
>     <js:ArrayListSelectionModel/>
>     <js:DataItemRendererFactoryForArrayList/>
>   </sp:beads>
>
> ActionScript:
>   addBead(new ArrayListSelectionModel());
>   addBead(new DataItemRendererFactoryForArrayList());
>
> On Jan 12, 2022, at 2:44 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> How can this be applied let say for example on an sp:List ? As a bead ?
>
>  Let's say I want to use arrayList  as data provider.
>
>
> On Wed, 12 Jan 2022, 13:41 Harbs, <ha...@gmail.com> wrote:
>
>> Yes.The default IDataProviderItemRendererMapper is
>> DataItemRendererFactoryForArrayData.
>>
>> If you are using collections you should
>> use DataItemRendererFactoryForArrayList or
>> DataItemRendererFactoryForCollectionView instead.
>>
>> HTH,
>> Harbs
>>
>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <ro...@gmail.com> wrote:
>>
>> Hence the reason, I need to confirm from Harbs the array data type that
>> is supported in spectrum.
>>
>>
>>
>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mj...@iest.com> wrote:
>>
>>> Hi,
>>>
>>> From what I see in the "ListModel.as" code it allows Object, IArray and
>>> IArrayList.
>>>
>>>
>>>
>>> Hiedra
>>>
>>>
>>>
>>> *De:* Roman Isitua <ro...@gmail.com>
>>> *Enviado el:* martes, 11 de enero de 2022 20:40
>>> *Para:* users@royale.apache.org
>>> *Asunto:* Re: Spectrum UI components
>>>
>>>
>>>
>>> It is now displaying. The issue was not related to the sp:List as I
>>> initially thought.
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> <sp:Group>
>>>
>>>
>>>
>>> <sp:beads>
>>>
>>>         <js:ContainerDataBinding />
>>>
>>>     </sp:beads>
>>>
>>>
>>>
>>>
>>>
>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>
>>>       <sp:Icon> </sp:Icon>
>>>
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>
>>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>>> "description" dataProvider="{menuItemList}"
>>>
>>>        change="onSelectMenu(event)"/>
>>>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>
>>>   </sp:FlexContainer>
>>>
>>>
>>>
>>>    <sp:Container id="mainArea">
>>>
>>>       <sp:Label text="Overview area"></sp:Label>
>>>
>>>    </sp:Container>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> </sp:Group>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> I changed the parent component from flex container to group. Though that
>>> had nothing to do  with the issue I was having.
>>>
>>>
>>>
>>> My current question
>>>
>>>
>>>
>>> is Array data type the only collection class that is supported in
>>> spectrum ?
>>>
>>>
>>>
>>>
>>>
>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>
>>> wrote:
>>>
>>> Hi,
>>>
>>>
>>>
>>> I am trying to populate my first List <sp:List> for some reason it is
>>> not being populated. Here is my code snippet.
>>>
>>>
>>>
>>> <sp:beads>
>>>
>>>         <js:ContainerDataBinding />
>>>
>>>     </sp:beads>
>>>
>>>
>>>
>>>
>>>
>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>>
>>>       <sp:Icon> </sp:Icon>
>>>
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>>
>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
>>> "{newMenuItemList}"
>>>
>>>       labelField="description" change="onSelectMenu(event)"/>
>>>
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>>
>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>>
>>>   </sp:FlexContainer>
>>>
>>>
>>>
>>>
>>>
>>> I have the following questions
>>>
>>> 1. what is the expected data provider ? Array,
>>> or org.apache.royale.collections.ArrayList ?
>>>
>>> I have tried both none of them works.
>>>
>>>
>>>
>>> 2.  Did I register data binding correctly ?
>>>
>>> The above ui is wrapped by a FlexContainer.
>>>
>>>
>>>
>>> my data source is supposed to be an arrayList of data transfer objects
>>> (MenuItemDTO) with get set functions for each field.
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>>>
>>> Use a <sp:PasswordField>
>>>
>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com>
>>> wrote:
>>> >
>>> > Hi Harbs,
>>> >
>>> > I am trying to create a login form. How do I hide the password in
>>> >
>>> > <sp:TextField placeholder="Enter password"/>
>>> >
>>> >  could it be that it does not support password hiding ? Do I have to
>>> resort to using royale basic text field ?
>>>
>>>
>>
>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Any one of those three should work.

> On Jan 12, 2022, at 3:09 PM, Harbs <ha...@gmail.com> wrote:
> 
> CSS:
> #uploadsList{
>   IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
>   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
> }
> 
> MXML:
>   <sp:beads>
>     <js:ArrayListSelectionModel/>
>     <js:DataItemRendererFactoryForArrayList/>
>   </sp:beads>
> 
> ActionScript:
>   addBead(new ArrayListSelectionModel());
>   addBead(new DataItemRendererFactoryForArrayList());
> 
>> On Jan 12, 2022, at 2:44 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> How can this be applied let say for example on an sp:List ? As a bead ?
>> 
>>  Let's say I want to use arrayList  as data provider. 
>> 
>> 
>> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
>> 
>> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
>> 
>> HTH,
>> Harbs
>> 
>>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>>> 
>>> 
>>> 
>>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>>> Hi,
>>> 
>>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>>> 
>>>  
>>> 
>>> Hiedra
>>> 
>>>  
>>> 
>>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>>> Enviado el: martes, 11 de enero de 2022 20:40
>>> Para: users@royale.apache.org <ma...@royale.apache.org>
>>> Asunto: Re: Spectrum UI components
>>> 
>>>  
>>> 
>>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>> <sp:Group>
>>> 
>>>  
>>> 
>>> <sp:beads>
>>> 
>>>         <js:ContainerDataBinding />      
>>> 
>>>     </sp:beads>
>>> 
>>>  
>>> 
>>>  
>>> 
>>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>>> 
>>>       <sp:Icon> </sp:Icon>      
>>> 
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>> 
>>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>>> 
>>>        change="onSelectMenu(event)"/>
>>> 
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>>> 
>>>   </sp:FlexContainer>
>>> 
>>>  
>>> 
>>>    <sp:Container id="mainArea">
>>> 
>>>       <sp:Label text="Overview area"></sp:Label>
>>> 
>>>    </sp:Container>
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>> </sp:Group>
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>>> 
>>>  
>>> 
>>> My current question 
>>> 
>>>  
>>> 
>>> is Array data type the only collection class that is supported in spectrum ? 
>>> 
>>>  
>>> 
>>>  
>>> 
>>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> Hi,
>>> 
>>>  
>>> 
>>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>>> 
>>>  
>>> 
>>> <sp:beads>
>>> 
>>>         <js:ContainerDataBinding />      
>>> 
>>>     </sp:beads>
>>> 
>>>  
>>> 
>>>  
>>> 
>>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>> 
>>>       <sp:Icon> </sp:Icon>      
>>> 
>>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>> 
>>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>>> 
>>>       labelField="description" change="onSelectMenu(event)"/>
>>> 
>>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>> 
>>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>> 
>>>   </sp:FlexContainer>
>>> 
>>>  
>>> 
>>>  
>>> 
>>> I have the following questions
>>> 
>>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>>> 
>>> I have tried both none of them works.
>>> 
>>>  
>>> 
>>> 2.  Did I register data binding correctly ? 
>>> 
>>> The above ui is wrapped by a FlexContainer.
>>> 
>>>  
>>> 
>>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>>> 
>>> Use a <sp:PasswordField>
>>> 
>>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>> > 
>>> > Hi Harbs,
>>> > 
>>> > I am trying to create a login form. How do I hide the password in 
>>> > 
>>> > <sp:TextField placeholder="Enter password"/>
>>> > 
>>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>>> 
>> 
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
CSS:
#uploadsList{
  IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel");
  IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayList");
}

MXML:
  <sp:beads>
    <js:ArrayListSelectionModel/>
    <js:DataItemRendererFactoryForArrayList/>
  </sp:beads>

ActionScript:
  addBead(new ArrayListSelectionModel());
  addBead(new DataItemRendererFactoryForArrayList());

> On Jan 12, 2022, at 2:44 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> How can this be applied let say for example on an sp:List ? As a bead ?
> 
>  Let's say I want to use arrayList  as data provider. 
> 
> 
> On Wed, 12 Jan 2022, 13:41 Harbs, <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.
> 
> If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.
> 
> HTH,
> Harbs
> 
>> On Jan 12, 2022, at 1:35 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
>> 
>> 
>> 
>> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
>> Hi,
>> 
>> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
>> 
>>  
>> 
>> Hiedra
>> 
>>  
>> 
>> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
>> Enviado el: martes, 11 de enero de 2022 20:40
>> Para: users@royale.apache.org <ma...@royale.apache.org>
>> Asunto: Re: Spectrum UI components
>> 
>>  
>> 
>> It is now displaying. The issue was not related to the sp:List as I initially thought.
>> 
>>  
>> 
>>  
>> 
>>  
>> 
>> <sp:Group>
>> 
>>  
>> 
>> <sp:beads>
>> 
>>         <js:ContainerDataBinding />      
>> 
>>     </sp:beads>
>> 
>>  
>> 
>>  
>> 
>>   <sp:FlexContainer className="home_side_area" wrap="false">      
>> 
>>       <sp:Icon> </sp:Icon>      
>> 
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>> 
>>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
>> 
>>        change="onSelectMenu(event)"/>
>> 
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
>> 
>>   </sp:FlexContainer>
>> 
>>  
>> 
>>    <sp:Container id="mainArea">
>> 
>>       <sp:Label text="Overview area"></sp:Label>
>> 
>>    </sp:Container>
>> 
>>  
>> 
>>  
>> 
>>  
>> 
>> </sp:Group>
>> 
>>  
>> 
>>  
>> 
>>  
>> 
>>  
>> 
>> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
>> 
>>  
>> 
>> My current question 
>> 
>>  
>> 
>> is Array data type the only collection class that is supported in spectrum ? 
>> 
>>  
>> 
>>  
>> 
>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> 
>> Hi,
>> 
>>  
>> 
>> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
>> 
>>  
>> 
>> <sp:beads>
>> 
>>         <js:ContainerDataBinding />      
>> 
>>     </sp:beads>
>> 
>>  
>> 
>>  
>> 
>>   <sp:FlexContainer className="home_side_area" wrap="false">
>> 
>>       <sp:Icon> </sp:Icon>      
>> 
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>> 
>>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
>> 
>>       labelField="description" change="onSelectMenu(event)"/>
>> 
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>> 
>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>> 
>>   </sp:FlexContainer>
>> 
>>  
>> 
>>  
>> 
>> I have the following questions
>> 
>> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
>> 
>> I have tried both none of them works.
>> 
>>  
>> 
>> 2.  Did I register data binding correctly ? 
>> 
>> The above ui is wrapped by a FlexContainer.
>> 
>>  
>> 
>> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
>> 
>>  
>> 
>>  
>> 
>>  
>> 
>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> 
>> Use a <sp:PasswordField>
>> 
>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>> > 
>> > Hi Harbs,
>> > 
>> > I am trying to create a login form. How do I hide the password in 
>> > 
>> > <sp:TextField placeholder="Enter password"/>
>> > 
>> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>> 
>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
How can this be applied let say for example on an sp:List ? As a bead ?

 Let's say I want to use arrayList  as data provider.


On Wed, 12 Jan 2022, 13:41 Harbs, <ha...@gmail.com> wrote:

> Yes.The default IDataProviderItemRendererMapper is
> DataItemRendererFactoryForArrayData.
>
> If you are using collections you should
> use DataItemRendererFactoryForArrayList or
> DataItemRendererFactoryForCollectionView instead.
>
> HTH,
> Harbs
>
> On Jan 12, 2022, at 1:35 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> Hence the reason, I need to confirm from Harbs the array data type that is
> supported in spectrum.
>
>
>
> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mj...@iest.com> wrote:
>
>> Hi,
>>
>> From what I see in the "ListModel.as" code it allows Object, IArray and
>> IArrayList.
>>
>>
>>
>> Hiedra
>>
>>
>>
>> *De:* Roman Isitua <ro...@gmail.com>
>> *Enviado el:* martes, 11 de enero de 2022 20:40
>> *Para:* users@royale.apache.org
>> *Asunto:* Re: Spectrum UI components
>>
>>
>>
>> It is now displaying. The issue was not related to the sp:List as I
>> initially thought.
>>
>>
>>
>>
>>
>>
>>
>> <sp:Group>
>>
>>
>>
>> <sp:beads>
>>
>>         <js:ContainerDataBinding />
>>
>>     </sp:beads>
>>
>>
>>
>>
>>
>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>
>>       <sp:Icon> </sp:Icon>
>>
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>
>>       <sp:List id="navLinks" className="home_side_nav" labelField=
>> "description" dataProvider="{menuItemList}"
>>
>>        change="onSelectMenu(event)"/>
>>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>
>>   </sp:FlexContainer>
>>
>>
>>
>>    <sp:Container id="mainArea">
>>
>>       <sp:Label text="Overview area"></sp:Label>
>>
>>    </sp:Container>
>>
>>
>>
>>
>>
>>
>>
>> </sp:Group>
>>
>>
>>
>>
>>
>>
>>
>>
>>
>> I changed the parent component from flex container to group. Though that
>> had nothing to do  with the issue I was having.
>>
>>
>>
>> My current question
>>
>>
>>
>> is Array data type the only collection class that is supported in
>> spectrum ?
>>
>>
>>
>>
>>
>> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>
>> wrote:
>>
>> Hi,
>>
>>
>>
>> I am trying to populate my first List <sp:List> for some reason it is not
>> being populated. Here is my code snippet.
>>
>>
>>
>> <sp:beads>
>>
>>         <js:ContainerDataBinding />
>>
>>     </sp:beads>
>>
>>
>>
>>
>>
>>   <sp:FlexContainer className="home_side_area" wrap="false">
>>
>>       <sp:Icon> </sp:Icon>
>>
>>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>>
>>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
>> "{newMenuItemList}"
>>
>>       labelField="description" change="onSelectMenu(event)"/>
>>
>>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>>
>>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>>
>>   </sp:FlexContainer>
>>
>>
>>
>>
>>
>> I have the following questions
>>
>> 1. what is the expected data provider ? Array,
>> or org.apache.royale.collections.ArrayList ?
>>
>> I have tried both none of them works.
>>
>>
>>
>> 2.  Did I register data binding correctly ?
>>
>> The above ui is wrapped by a FlexContainer.
>>
>>
>>
>> my data source is supposed to be an arrayList of data transfer objects
>> (MenuItemDTO) with get set functions for each field.
>>
>>
>>
>>
>>
>>
>>
>> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>>
>> Use a <sp:PasswordField>
>>
>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com> wrote:
>> >
>> > Hi Harbs,
>> >
>> > I am trying to create a login form. How do I hide the password in
>> >
>> > <sp:TextField placeholder="Enter password"/>
>> >
>> >  could it be that it does not support password hiding ? Do I have to
>> resort to using royale basic text field ?
>>
>>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Yes.The default IDataProviderItemRendererMapper is DataItemRendererFactoryForArrayData.

If you are using collections you should use DataItemRendererFactoryForArrayList or DataItemRendererFactoryForCollectionView instead.

HTH,
Harbs

> On Jan 12, 2022, at 1:35 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> Hence the reason, I need to confirm from Harbs the array data type that is supported in spectrum.
> 
> 
> 
> On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mjesteve@iest.com <ma...@iest.com>> wrote:
> Hi,
> 
> From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.
> 
>  
> 
> Hiedra
> 
>  
> 
> De: Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> 
> Enviado el: martes, 11 de enero de 2022 20:40
> Para: users@royale.apache.org <ma...@royale.apache.org>
> Asunto: Re: Spectrum UI components
> 
>  
> 
> It is now displaying. The issue was not related to the sp:List as I initially thought.
> 
>  
> 
>  
> 
>  
> 
> <sp:Group>
> 
>  
> 
> <sp:beads>
> 
>         <js:ContainerDataBinding />      
> 
>     </sp:beads>
> 
>  
> 
>  
> 
>   <sp:FlexContainer className="home_side_area" wrap="false">      
> 
>       <sp:Icon> </sp:Icon>      
> 
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
> 
>       <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
> 
>        change="onSelectMenu(event)"/>
> 
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>    
> 
>   </sp:FlexContainer>
> 
>  
> 
>    <sp:Container id="mainArea">
> 
>       <sp:Label text="Overview area"></sp:Label>
> 
>    </sp:Container>
> 
>  
> 
>  
> 
>  
> 
> </sp:Group>
> 
>  
> 
>  
> 
>  
> 
>  
> 
> I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.
> 
>  
> 
> My current question 
> 
>  
> 
> is Array data type the only collection class that is supported in spectrum ? 
> 
>  
> 
>  
> 
> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
> 
> Hi,
> 
>  
> 
> I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.
> 
>  
> 
> <sp:beads>
> 
>         <js:ContainerDataBinding />      
> 
>     </sp:beads>
> 
>  
> 
>  
> 
>   <sp:FlexContainer className="home_side_area" wrap="false">
> 
>       <sp:Icon> </sp:Icon>      
> 
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
> 
>       <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
> 
>       labelField="description" change="onSelectMenu(event)"/>
> 
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
> 
>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
> 
>   </sp:FlexContainer>
> 
>  
> 
>  
> 
> I have the following questions
> 
> 1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ? 
> 
> I have tried both none of them works.
> 
>  
> 
> 2.  Did I register data binding correctly ? 
> 
> The above ui is wrapped by a FlexContainer.
> 
>  
> 
> my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.
> 
>  
> 
>  
> 
>  
> 
> On Sat, Jan 8, 2022 at 5:47 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> 
> Use a <sp:PasswordField>
> 
> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
> > 
> > Hi Harbs,
> > 
> > I am trying to create a login form. How do I hide the password in 
> > 
> > <sp:TextField placeholder="Enter password"/>
> > 
> >  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?
>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
Hence the reason, I need to confirm from Harbs the array data type that is
supported in spectrum.



On Tue, 11 Jan 2022, 21:33 Maria Jose Esteve, <mj...@iest.com> wrote:

> Hi,
>
> From what I see in the "ListModel.as" code it allows Object, IArray and
> IArrayList.
>
>
>
> Hiedra
>
>
>
> *De:* Roman Isitua <ro...@gmail.com>
> *Enviado el:* martes, 11 de enero de 2022 20:40
> *Para:* users@royale.apache.org
> *Asunto:* Re: Spectrum UI components
>
>
>
> It is now displaying. The issue was not related to the sp:List as I
> initially thought.
>
>
>
>
>
>
>
> <sp:Group>
>
>
>
> <sp:beads>
>
>         <js:ContainerDataBinding />
>
>     </sp:beads>
>
>
>
>
>
>   <sp:FlexContainer className="home_side_area" wrap="false">
>
>       <sp:Icon> </sp:Icon>
>
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>
>       <sp:List id="navLinks" className="home_side_nav" labelField=
> "description" dataProvider="{menuItemList}"
>
>        change="onSelectMenu(event)"/>
>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>
>   </sp:FlexContainer>
>
>
>
>    <sp:Container id="mainArea">
>
>       <sp:Label text="Overview area"></sp:Label>
>
>    </sp:Container>
>
>
>
>
>
>
>
> </sp:Group>
>
>
>
>
>
>
>
>
>
> I changed the parent component from flex container to group. Though that
> had nothing to do  with the issue I was having.
>
>
>
> My current question
>
>
>
> is Array data type the only collection class that is supported in spectrum
> ?
>
>
>
>
>
> On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>
> wrote:
>
> Hi,
>
>
>
> I am trying to populate my first List <sp:List> for some reason it is not
> being populated. Here is my code snippet.
>
>
>
> <sp:beads>
>
>         <js:ContainerDataBinding />
>
>     </sp:beads>
>
>
>
>
>
>   <sp:FlexContainer className="home_side_area" wrap="false">
>
>       <sp:Icon> </sp:Icon>
>
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>
>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
> "{newMenuItemList}"
>
>       labelField="description" change="onSelectMenu(event)"/>
>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>
>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>
>   </sp:FlexContainer>
>
>
>
>
>
> I have the following questions
>
> 1. what is the expected data provider ? Array,
> or org.apache.royale.collections.ArrayList ?
>
> I have tried both none of them works.
>
>
>
> 2.  Did I register data binding correctly ?
>
> The above ui is wrapped by a FlexContainer.
>
>
>
> my data source is supposed to be an arrayList of data transfer objects
> (MenuItemDTO) with get set functions for each field.
>
>
>
>
>
>
>
> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>
> Use a <sp:PasswordField>
>
> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com> wrote:
> >
> > Hi Harbs,
> >
> > I am trying to create a login form. How do I hide the password in
> >
> > <sp:TextField placeholder="Enter password"/>
> >
> >  could it be that it does not support password hiding ? Do I have to
> resort to using royale basic text field ?
>
>

RE: Spectrum UI components

Posted by Maria Jose Esteve <mj...@iest.com>.
Hi,
From what I see in the "ListModel.as" code it allows Object, IArray and IArrayList.

Hiedra

De: Roman Isitua <ro...@gmail.com>
Enviado el: martes, 11 de enero de 2022 20:40
Para: users@royale.apache.org
Asunto: Re: Spectrum UI components

It is now displaying. The issue was not related to the sp:List as I initially thought.



<sp:Group>

<sp:beads>
        <js:ContainerDataBinding />
    </sp:beads>


  <sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" labelField="description" dataProvider="{menuItemList}"
       change="onSelectMenu(event)"/>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
  </sp:FlexContainer>

   <sp:Container id="mainArea">
      <sp:Label text="Overview area"></sp:Label>
   </sp:Container>



</sp:Group>




I changed the parent component from flex container to group. Though that had nothing to do  with the issue I was having.

My current question

is Array data type the only collection class that is supported in spectrum ?


On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com>> wrote:
Hi,

I am trying to populate my first List <sp:List> for some reason it is not being populated. Here is my code snippet.

<sp:beads>
        <js:ContainerDataBinding />
    </sp:beads>


  <sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" dataProvider="{newMenuItemList}"
      labelField="description" change="onSelectMenu(event)"/>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
      <sp:beads> <js:ContainerDataBinding />  </sp:beads>
  </sp:FlexContainer>


I have the following questions
1. what is the expected data provider ? Array, or org.apache.royale.collections.ArrayList ?
I have tried both none of them works.

2.  Did I register data binding correctly ?
The above ui is wrapped by a FlexContainer.

my data source is supposed to be an arrayList of data transfer objects (MenuItemDTO) with get set functions for each field.



On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com>> wrote:
Use a <sp:PasswordField>

> On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com>> wrote:
>
> Hi Harbs,
>
> I am trying to create a login form. How do I hide the password in
>
> <sp:TextField placeholder="Enter password"/>
>
>  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
It is now displaying. The issue was not related to the sp:List as I
initially thought.

<sp:Group>

<sp:beads>
        <js:ContainerDataBinding />
    </sp:beads>



  <sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" labelField=
"description" dataProvider="{menuItemList}"
       change="onSelectMenu(event)"/>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
  </sp:FlexContainer>

   <sp:Container id="mainArea">
      <sp:Label text="Overview area"></sp:Label>
   </sp:Container>

</sp:Group>


I changed the parent component from flex container to group. Though that
had nothing to do  with the issue I was having.

My current question

is Array data type the only collection class that is supported in spectrum
?


On Tue, Jan 11, 2022 at 6:30 PM Roman Isitua <ro...@gmail.com> wrote:

> Hi,
>
> I am trying to populate my first List <sp:List> for some reason it is not
> being populated. Here is my code snippet.
>
> <sp:beads>
>         <js:ContainerDataBinding />
>     </sp:beads>
>
>
>
>   <sp:FlexContainer className="home_side_area" wrap="false">
>       <sp:Icon> </sp:Icon>
>       <sp:Button text="Add New" flavor="cta"></sp:Button>
>       <sp:List id="navLinks" className="home_side_nav" dataProvider=
> "{newMenuItemList}"
>       labelField="description" change="onSelectMenu(event)"/>
>       <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
>       <sp:beads> <js:ContainerDataBinding />  </sp:beads>
>   </sp:FlexContainer>
>
>
> I have the following questions
> 1. what is the expected data provider ? Array,
> or org.apache.royale.collections.ArrayList ?
> I have tried both none of them works.
>
> 2.  Did I register data binding correctly ?
> The above ui is wrapped by a FlexContainer.
>
> my data source is supposed to be an arrayList of data transfer objects
> (MenuItemDTO) with get set functions for each field.
>
>
>
> On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:
>
>> Use a <sp:PasswordField>
>>
>> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com> wrote:
>> >
>> > Hi Harbs,
>> >
>> > I am trying to create a login form. How do I hide the password in
>> >
>> > <sp:TextField placeholder="Enter password"/>
>> >
>> >  could it be that it does not support password hiding ? Do I have to
>> resort to using royale basic text field ?
>>
>>

Re: Spectrum UI components

Posted by Roman Isitua <ro...@gmail.com>.
Hi,

I am trying to populate my first List <sp:List> for some reason it is not
being populated. Here is my code snippet.

<sp:beads>
        <js:ContainerDataBinding />
    </sp:beads>



  <sp:FlexContainer className="home_side_area" wrap="false">
      <sp:Icon> </sp:Icon>
      <sp:Button text="Add New" flavor="cta"></sp:Button>
      <sp:List id="navLinks" className="home_side_nav" dataProvider=
"{newMenuItemList}"
      labelField="description" change="onSelectMenu(event)"/>
      <sp:Button text="Log Out" click="logOut(event)"></sp:Button>
      <sp:beads> <js:ContainerDataBinding />  </sp:beads>
  </sp:FlexContainer>


I have the following questions
1. what is the expected data provider ? Array,
or org.apache.royale.collections.ArrayList ?
I have tried both none of them works.

2.  Did I register data binding correctly ?
The above ui is wrapped by a FlexContainer.

my data source is supposed to be an arrayList of data transfer objects
(MenuItemDTO) with get set functions for each field.



On Sat, Jan 8, 2022 at 5:47 PM Harbs <ha...@gmail.com> wrote:

> Use a <sp:PasswordField>
>
> > On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com> wrote:
> >
> > Hi Harbs,
> >
> > I am trying to create a login form. How do I hide the password in
> >
> > <sp:TextField placeholder="Enter password"/>
> >
> >  could it be that it does not support password hiding ? Do I have to
> resort to using royale basic text field ?
>
>

Re: Spectrum UI components

Posted by Harbs <ha...@gmail.com>.
Use a <sp:PasswordField>

> On Jan 8, 2022, at 4:34 PM, Roman Isitua <ro...@gmail.com> wrote:
> 
> Hi Harbs,
> 
> I am trying to create a login form. How do I hide the password in 
> 
> <sp:TextField placeholder="Enter password"/>
> 
>  could it be that it does not support password hiding ? Do I have to resort to using royale basic text field ?