Don't forget that we use composition to simplify things. So an AccordionItem can be a Container subclass with a TitleBarModel built in and a title property.
HTH, -Alex On 11/9/17, 12:51 PM, "Harbs" <[email protected]> wrote: >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%7Cfa7b1b5a7b34438794aed2c1 >>>>78 >>>> >>>>decee1%7C0%7C0%7C636458527527098248&sdata=DutGVMejNnl7H18IB%2BqhqlKOYlw >>>>Un >>>> G8sh2j%2BiKPPHhY%3D&reserved=0 >>>> >>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithu >>>>b. >>>> >>>>com%2Fyishayw%2FExamples%2Fblob%2FAccordion_Express%2FExamples.mxml&dat >>>>a= >>>> >>>>02%7C01%7C%7C095c290879ce4c1d712108d527a89e8e%7Cfa7b1b5a7b34438794aed2c >>>>17 >>>> >>>>8decee1%7C0%7C0%7C636458527527098248&sdata=DutGVMejNnl7H18IB%2BqhqlKOYl >>>>wU >>>> 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%2Fg >>>>>>>>>it >>>>>>>>> box >>>>>>>>> >>>>>>>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2F >>>>>>>>>gi >>>>>>>>> tbox> >>>>>>>>> .a >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>>pache.org%2Frepos%2Fasf%2Froyale-asjs.git&data=02%7C01%7C%7C562974 >>>>>>>>>be >>>>>>>>> fcb >>>>>>>>> e4 >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>>86610ce08d526f758a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6 >>>>>>>>>36 >>>>>>>>> 457 >>>>>>>>> 76 >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>>>6135386019&sdata=5cJenPvUsEXBM5%2FqvCbC557p5fkLxsCZCP%2By0LIitH8%3 >>>>>>>>>D& >>>>>>>>> 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]>']. >>>>>>>> >>>>>>> >>>>>> >>>>> >>>> >>> >> >
