I wonder if that's not a little too complex. I really couldn't figure out
how to use it without experimentation and even then, didn't realize about
the itemRenderer aspect.
How about something like this:
<js:Accordion>
<js:AccordionItem title="Child 1">
<js:VGroup>
</js:VGroup>
</js:AccordionItem>
<js:AccordionItem title="Child 2">
<js:HGroup>
</js:HGroup>
</js:AccordionItem>
</js:Accordion>
This way we don't have to do much special and the developer doesn't have
to see dataProviders and <fx:Array>. The AccordionItem really supplies
just a header and it could even be a subclass of TitleBar that accepts a
single child. Plus you could change its IBeadView from
AccordionItemViewBead to something custom. And with each AccordionItem
having a single child, that child could be anything you wanted.
I'll just publish an example for how it works now and leave it unless
there's a desire for something else.
—peter
On 11/9/17, 2:32 PM, "Harbs" <[email protected]> wrote:
>The rendering of the items is done by ItemRenderers (which in the default
>I believe is a Panel).
>
>> On Nov 9, 2017, at 9:31 PM, Harbs <[email protected]> wrote:
>>
>> Accordion was designed to not care what specific components the
>>individual panels are. For a title, it needs a TitleBarModel. That’s it.
>>
>> Here’s an example:
>>
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.c
>>om%2Fyishayw%2FExamples%2Fblob%2FAccordion_Express%2FExamples.mxml&data=0
>>2%7C01%7C%7C095c290879ce4c1d712108d527a89e8e%7Cfa7b1b5a7b34438794aed2c178
>>decee1%7C0%7C0%7C636458527527098248&sdata=DutGVMejNnl7H18IB%2BqhqlKOYlwUn
>>G8sh2j%2BiKPPHhY%3D&reserved=0
>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.
>>com%2Fyishayw%2FExamples%2Fblob%2FAccordion_Express%2FExamples.mxml&data=
>>02%7C01%7C%7C095c290879ce4c1d712108d527a89e8e%7Cfa7b1b5a7b34438794aed2c17
>>8decee1%7C0%7C0%7C636458527527098248&sdata=DutGVMejNnl7H18IB%2BqhqlKOYlwU
>>nG8sh2j%2BiKPPHhY%3D&reserved=0>
>>
>>> On Nov 9, 2017, at 6:39 PM, Peter Ent <[email protected]
>>><mailto:[email protected]>> wrote:
>>>
>>> I saw that Container worked, but how do you get labels on them?
>>> —peter
>>>
>>>
>>> On 11/9/17, 9:54 AM, "Harbs" <[email protected]
>>><mailto:[email protected]>> wrote:
>>>
>>>> Inside the js:Array should be Container elements.
>>>>
>>>> I’m using it in production.
>>>>
>>>>> On Nov 9, 2017, at 4:28 PM, Peter Ent <[email protected]
>>>>><mailto:[email protected]>> wrote:
>>>>>
>>>>> I tested my change. I don't think it adversely affects Accordion at
>>>>>all,
>>>>> but Accordion doesn't seem to be working correctly anyway.
>>>>>
>>>>> I'm getting Panels inside of Panels. So if in the <fx:Array>
>>>>>supplied to
>>>>> Accordion, I have a <js:Panel>, that Panel gives title to the
>>>>>Accordion
>>>>> header, but then a panel becomes a child of that container. I think
>>>>> Accordion needs a re-do.
>>>>>
>>>>> The change I made to PanelView is very simple and I cannot see it
>>>>>having
>>>>> any adverse affects. I also found an old email where I said I would
>>>>>make
>>>>> an official AccordionExample as part of the examples/ directory. I'm
>>>>> going
>>>>> to take what I just put together and do that so we'll have something
>>>>>to
>>>>> work with.
>>>>>
>>>>> ‹peter
>>>>>
>>>>> On 11/8/17, 5:23 PM, "Harbs" <[email protected]
>>>>><mailto:[email protected]>> wrote:
>>>>>
>>>>>> Did you test if this effects Accordion?
>>>>>>
>>>>>>> On Nov 8, 2017, at 8:00 PM, [email protected]
>>>>>>><mailto:[email protected]> wrote:
>>>>>>>
>>>>>>> This is an automated email from the ASF dual-hosted git repository.
>>>>>>>
>>>>>>> pent pushed a commit to branch develop
>>>>>>> in repository
>>>>>>>
>>>>>>>
>>>>>>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgit
>>>>>>>box
>>>>>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgi
>>>>>>>tbox>
>>>>>>> .a
>>>>>>>
>>>>>>>
>>>>>>>pache.org%2Frepos%2Fasf%2Froyale-asjs.git&data=02%7C01%7C%7C562974be
>>>>>>>fcb
>>>>>>> e4
>>>>>>>
>>>>>>>
>>>>>>>86610ce08d526f758a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636
>>>>>>>457
>>>>>>> 76
>>>>>>>
>>>>>>>
>>>>>>>6135386019&sdata=5cJenPvUsEXBM5%2FqvCbC557p5fkLxsCZCP%2By0LIitH8%3D&
>>>>>>>res
>>>>>>> er
>>>>>>> ved=0
>>>>>>>
>>>>>>>
>>>>>>> The following commit(s) were added to refs/heads/develop by this
>>>>>>>push:
>>>>>>> new 3e77b0c PanelView no longer removes beads. Instead, it
>>>>>>> transfers beads from the Panel to its Container content area.
>>>>>>> 3e77b0c is described below
>>>>>>>
>>>>>>> commit 3e77b0ce0a9e967fd229a2218cd277d593b58e69
>>>>>>> Author: Peter Ent <[email protected]>
>>>>>>> AuthorDate: Wed Nov 8 13:00:20 2017 -0500
>>>>>>>
>>>>>>> PanelView no longer removes beads. Instead, it transfers beads
>>>>>>>from
>>>>>>> the Panel to its Container content area.
>>>>>>> ---
>>>>>>> .../org/apache/royale/html/beads/PanelView.as | 58
>>>>>>> ++++++++++++----------
>>>>>>> 1 file changed, 32 insertions(+), 26 deletions(-)
>>>>>>>
>>>>>>> diff --git
>>>>>>>
>>>>>>>
>>>>>>>a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/b
>>>>>>>ead
>>>>>>> s/
>>>>>>> PanelView.as
>>>>>>>
>>>>>>>
>>>>>>>b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/b
>>>>>>>ead
>>>>>>> s/
>>>>>>> PanelView.as
>>>>>>> index 67b0552..e1343ff 100644
>>>>>>> ---
>>>>>>>
>>>>>>>
>>>>>>>a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/b
>>>>>>>ead
>>>>>>> s/
>>>>>>> PanelView.as
>>>>>>> +++
>>>>>>>
>>>>>>>
>>>>>>>b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/b
>>>>>>>ead
>>>>>>> s/
>>>>>>> PanelView.as
>>>>>>> @@ -133,10 +133,29 @@ package org.apache.royale.html.beads
>>>>>>>
>>>>>>> var host:UIBase = UIBase(value);
>>>>>>>
>>>>>>> + // Look for a layout and/or viewport bead on
>>>>>>> the host's beads
>>>>>>> list.
>>>>>>> If one
>>>>>>> + // is found, pull it off so it will not be
>>>>>>> added permanently
>>>>>>> + // to the strand.
>>>>>>> + var beads: Array = host.beads;
>>>>>>> + var transferLayoutBead: IBeadLayout;
>>>>>>> + var transferViewportBead: IViewport;
>>>>>>> + if (host.beads != null) {
>>>>>>> + for(var i:int=host.beads.length-1; i >=
>>>>>>> 0; i--) {
>>>>>>> + if (host.beads[i] is
>>>>>>> IBeadLayout) {
>>>>>>> + transferLayoutBead =
>>>>>>> host.beads[i] as IBeadLayout;
>>>>>>> + host.beads.splice(i, 1);
>>>>>>> + }
>>>>>>> + else if (host.beads[i] is
>>>>>>> IViewport) {
>>>>>>> + transferViewportBead =
>>>>>>> host.beads[i] as IViewport
>>>>>>> + host.beads.splice(i, 1);
>>>>>>> + }
>>>>>>> + }
>>>>>>> + }
>>>>>>> +
>>>>>>> if (!_titleBar) {
>>>>>>> _titleBar = new TitleBar();
>>>>>>> }
>>>>>>> -
>>>>>>> +
>>>>>>> _titleBar.id = "panelTitleBar";
>>>>>>>
>>>>>>> COMPILE::SWF {
>>>>>>> @@ -153,7 +172,7 @@ package org.apache.royale.html.beads
>>>>>>> _titleBar.element.style["flex-grow"] =
>>>>>>> "0";
>>>>>>> _titleBar.element.style["order"] = "1";
>>>>>>> }
>>>>>>> -
>>>>>>> +
>>>>>>> _titleBar.addEventListener("close",
>>>>>>> handleClose);
>>>>>>>
>>>>>>> // replace the TitleBar's model with the
>>>>>>> Panel's model (it
>>>>>>> implements ITitleBarModel) so that
>>>>>>> @@ -167,7 +186,13 @@ package org.apache.royale.html.beads
>>>>>>> if (!_contentArea) {
>>>>>>> _contentArea = new Container();
>>>>>>> _contentArea.id = "panelContent";
>>>>>>> - _contentArea.className = "PanelContent";
>>>>>>> + _contentArea.typeNames = "PanelContent";
>>>>>>> +
>>>>>>> + // add the layout bead to the content
>>>>>>> area.
>>>>>>> + if (transferLayoutBead)
>>>>>>>_contentArea.addBead(transferLayoutBead);
>>>>>>> +
>>>>>>> + // add the viewport bead to the content
>>>>>>> area.
>>>>>>> + if (transferViewportBead)
>>>>>>> _contentArea.addBead(transferViewportBead);
>>>>>>>
>>>>>>> COMPILE::SWF {
>>>>>>> _contentArea.percentWidth = 100;
>>>>>>> @@ -195,31 +220,12 @@ package org.apache.royale.html.beads
>>>>>>>
>>>>>>> super.strand = value;
>>>>>>>
>>>>>>> - // If the Panel was given a layout, transfer it
>>>>>>> to the content
>>>>>>> area.
>>>>>>> - var layoutBead:IBeadLayout =
>>>>>>> value.getBeadByType(IBeadLayout)
>>>>>>>as
>>>>>>> IBeadLayout;
>>>>>>> - if (layoutBead) {
>>>>>>> - value.removeBead(layoutBead);
>>>>>>> -
>>>>>>> - var contentLayout:IBeadLayout =
>>>>>>> _contentArea.getBeadByType(IBeadLayout) as IBeadLayout;
>>>>>>> - if (contentLayout) {
>>>>>>> -
>>>>>>> _contentArea.removeBead(contentLayout);
>>>>>>> - }
>>>>>>> - _contentArea.addBead(layoutBead);
>>>>>>> - }
>>>>>>> -
>>>>>>> - // If the Panel was given a viewport, transfer
>>>>>>> it to the
>>>>>>>content
>>>>>>> area.
>>>>>>> - var viewportBead:IViewport =
>>>>>>> value.getBeadByType(IViewport) as
>>>>>>> IViewport;
>>>>>>> - if (viewportBead) {
>>>>>>> - value.removeBead(viewportBead);
>>>>>>> - _contentArea.addBead(viewportBead);
>>>>>>> - }
>>>>>>> -
>>>>>>> if (contentArea.parent == null) {
>>>>>>> (_strand as
>>>>>>> Panel).$addElement(contentArea as IChild);
>>>>>>> }
>>>>>>>
>>>>>>> // Now give the Panel its own layout
>>>>>>> - layoutBead = new VerticalFlexLayout();
>>>>>>> + var layoutBead:IBeadLayout = new
>>>>>>> VerticalFlexLayout();
>>>>>>> value.addBead(layoutBead);
>>>>>>> }
>>>>>>>
>>>>>>> @@ -247,7 +253,7 @@ package org.apache.royale.html.beads
>>>>>>> override protected function completeSetup():void
>>>>>>> {
>>>>>>> super.completeSetup();
>>>>>>> -
>>>>>>> +
>>>>>>> performLayout(null);
>>>>>>> }
>>>>>>>
>>>>>>> @@ -266,11 +272,11 @@ package org.apache.royale.html.beads
>>>>>>> _contentArea.dispatchEvent(new
>>>>>>> Event("layoutNeeded"));
>>>>>>> performLayout(event);
>>>>>>> }
>>>>>>> -
>>>>>>> +
>>>>>>> private function handleClose(event:Event):void
>>>>>>> {
>>>>>>> IEventDispatcher(_strand).dispatchEvent(new
>>>>>>> Event("close"));
>>>>>>> }
>>>>>>> -
>>>>>>> +
>>>>>>> }
>>>>>>> }
>>>>>>>
>>>>>>> --
>>>>>>> To stop receiving notification emails like this one, please contact
>>>>>>> ['"[email protected]" <[email protected]>'].
>>>>>>
>>>>>
>>>>
>>>
>>
>
