I think the architecture is sound. The use of it could probably be improved.
Making an AccordionItem which encapsulates a title model would be a good idea. How do we get AccordionItems without putting them in an array? > On Nov 9, 2017, at 9:40 PM, Peter Ent <[email protected]> wrote: > > 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]>']. >>>>>>> >>>>>> >>>>> >>>> >>> >> >
