I’ve also been thinking about the router in general, and I came up with an idea on how to do it with beads.
It’ll probably take me a few days until I implement the changes… In addition to <ComponentRouting>, I think we can also offer <PathRouting> which would allow different routers to be attached to different places in the application and each level of the hierarchy can take care of its own state. Harbs > On Jan 21, 2020, at 11:29 PM, Harbs <harbs.li...@gmail.com> wrote: > > FWIW, I’d like to write a version of a router which allows for more > declarative syntax for routing to components. > > Something like this: > <Router> > <beads> > <ComponentRouting> > <ComponentRoute component=“LayoutsPlayGround” state=“layouts_panel” > title=“Layouts”/> > <ComponentRoute component=“GridPlayGround” state=“grid_panel” title=“Grids”/> > <ComponentRoute component=“ButtonBarPlayGround” state=“button_panel” > title=“Button Bar”/> > etc... > </ComponentRouting> > </beads> > </Router> > >> On Jan 21, 2020, at 11:20 PM, Harbs <harbs.li...@gmail.com >> <mailto:harbs.li...@gmail.com>> wrote: >> >> To see what I mean about href links, check out this page and click on a link: >> http://spectrum-royale/SpectrumBrowser/bin/js-debug/#!link >> <http://spectrum-royale/SpectrumBrowser/bin/js-debug/#!link> >> >> Then use the side panel to navigate to the same pages. >> >>> On Jan 21, 2020, at 11:18 PM, Harbs <harbs.li...@gmail.com >>> <mailto:harbs.li...@gmail.com>> wrote: >>> >>> The problem is the href in the <a> element in the nav. The hash is being >>> changed to “#" after the router redirects. >>> >>> You need to handle routing in one of two ways (and not both). >>> 1. Use setState() >>> 2. Use href links >>> >>> To do #1, you need to remove the href from the <a> elements (or use >>> something else such as a div or li). >>> >>> If you use href links, the logic of actually switching the views should be >>> handled by the router, so for example in Card, the href should be >>> #card_panel or #!card_panel. >>> >>> Then setNavSelection will work. >>> >>> The downside of the second method is that I’m not sure how to set the >>> title. Maybe that should be a separate method that can be called. >>> >>>> On Jan 21, 2020, at 8:48 PM, Carlos Rovira <carlosrov...@apache.org >>>> <mailto:carlosrov...@apache.org>> wrote: >>>> >>>> Hi Harbs, >>>> >>>> this paste is the MainContent.mxml from TDJ with the changes I tried: >>>> >>>> https://paste.apache.org/ez6aq <https://paste.apache.org/ez6aq> >>>> >>>> You can override whole file in your local and try to compile to see >>>> results. I'm sure you'll get the right way to work for your code. >>>> >>>> Thanks >>>> >>>> Carlos >>>> >>>> >>>> >>>> El mar., 21 ene. 2020 a las 19:31, Harbs (<harbs.li...@gmail.com >>>> <mailto:harbs.li...@gmail.com>>) escribió: >>>> >>>>> Oops. I thought this email went out yesterday… >>>>> >>>>> I have very little time today. >>>>> >>>>> Can you show me the code you tried? >>>>> >>>>>> On Jan 20, 2020, at 8:01 PM, Carlos Rovira <carlosrov...@apache.org >>>>>> <mailto:carlosrov...@apache.org>> >>>>> wrote: >>>>>> >>>>>> Hi Harbs, >>>>>> >>>>>> thanks for adding this. I think it will deserve some blog example, since >>>>> is >>>>>> something people requested in social media. >>>>>> Can you please add it to Tour De Jewel? I tried but, I get two problems: >>>>>> 1.- back/forth buttons are not working >>>>>> 2.- previous button seems to register more than once the same state. >>>>>> Thanks >>>>>> >>>>>> Carlos >>>>>> >>>>>> >>>>>> El lun., 20 ene. 2020 a las 14:38, Harbs (<harbs.li...@gmail.com >>>>>> <mailto:harbs.li...@gmail.com>>) >>>>> escribió: >>>>>> >>>>>>> I don’t remember how deep linking worked, but the concept is similar. >>>>>>> Routing is the modern term. >>>>>>> >>>>>>> FWIW, here’s an article on routing strategies vis a vis url paths: >>>>>>> https://codecraft.tv/courses/angular/routing/routing-strategies/ >>>>>>> <https://codecraft.tv/courses/angular/routing/routing-strategies/> < >>>>>>> https://codecraft.tv/courses/angular/routing/routing-strategies/ >>>>>>> <https://codecraft.tv/courses/angular/routing/routing-strategies/>> >>>>>>> >>>>>>>> On Jan 20, 2020, at 3:33 PM, Andrew Wetmore <cottag...@gmail.com >>>>>>>> <mailto:cottag...@gmail.com>> >>>>> wrote: >>>>>>>> >>>>>>>> Thanks for this. In what way is this different from deep linking in >>>>> Flex, >>>>>>>> apart from the name? >>>>>>>> >>>>>>>> On Mon, Jan 20, 2020 at 8:30 AM Harbs <harbs.li...@gmail.com >>>>>>>> <mailto:harbs.li...@gmail.com> <mailto: >>>>>>> harbs.li...@gmail.com <mailto:harbs.li...@gmail.com>>> wrote: >>>>>>>> >>>>>>>>> Not sure what you’re looking for. I tried to document the class as >>>>> best >>>>>>> as >>>>>>>>> I could: >>>>>>>>> >>>>>>>>> >>>>>>> >>>>> https://github.com/apache/royale-asjs/blob/6cbc5559bcc99bf2ceb3e033747ca3680b3b0d91/frameworks/projects/Basic/src/main/royale/org/apache/royale/routing/Router.as >>>>> >>>>> <https://github.com/apache/royale-asjs/blob/6cbc5559bcc99bf2ceb3e033747ca3680b3b0d91/frameworks/projects/Basic/src/main/royale/org/apache/royale/routing/Router.as> >>>>>>> < >>>>>>> >>>>> https://github.com/apache/royale-asjs/blob/6cbc5559bcc99bf2ceb3e033747ca3680b3b0d91/frameworks/projects/Basic/src/main/royale/org/apache/royale/routing/Router.as >>>>>>>> >>>>>>>>> < >>>>>>>>> >>>>>>> >>>>> https://github.com/apache/royale-asjs/blob/6cbc5559bcc99bf2ceb3e033747ca3680b3b0d91/frameworks/projects/Basic/src/main/royale/org/apache/royale/routing/Router.as >>>>>>> < >>>>>>> >>>>> https://github.com/apache/royale-asjs/blob/6cbc5559bcc99bf2ceb3e033747ca3680b3b0d91/frameworks/projects/Basic/src/main/royale/org/apache/royale/routing/Router.as >>>>>>>> >>>>>>>>>> >>>>>>>>> >>>>>>>>> * “Routing” uses the browser history APIs to allow forward and back >>>>>>>>> navigation. >>>>>>>>> * When the hash of a URL is changed, the router dispatches an event >>>>>>>>> * The state of the strand component can be automatically synced to the >>>>>>>>> Router routeState.state value. >>>>>>>>> * The application can call either setState() to add a point to the >>>>>>> browser >>>>>>>>> history, or: >>>>>>>>> * call renderState() to add a point and trigger a state change in the >>>>>>> app >>>>>>>>> (i.e. diapatch an event fro the browser) >>>>>>>>> >>>>>>>>> Helpful? >>>>>>>>> >>>>>>>>> Some JS frameworks let you declaratively declare routes for a router, >>>>>>> that >>>>>>>>> might be something worth looking into, but I was not sure what that >>>>>>> would >>>>>>>>> look like in Royale. >>>>>>>>> >>>>>>>>>> On Jan 20, 2020, at 3:22 PM, Andrew Wetmore <cottag...@gmail.com> >>>>>>> wrote: >>>>>>>>>> >>>>>>>>>> @harbs, would you have a chance to blurt out some text about >>>>> "routing", >>>>>>>>> and >>>>>>>>>> especially how and where it differs from "deep linking" in Flex? We >>>>>>> need >>>>>>>>>> some documentation about this and I thought I knew where I was going >>>>> to >>>>>>>>> go >>>>>>>>>> with it until I saw this as an example of routing. >>>>>>>>>> >>>>>>>>>> Does not have to be finished text....bullet points and pointers would >>>>>>> be >>>>>>>>>> fine. I can then rework it for the help docs. >>>>>>>>>> >>>>>>>>>> Thanks! >>>>>>>>>> >>>>>>>>>> On Mon, Jan 20, 2020 at 8:09 AM Harbs <harbs.li...@gmail.com> wrote: >>>>>>>>>> >>>>>>>>>>> It’s declared here: >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>> >>>>>>> >>>>> https://github.com/unhurdle/spectrum-royale/blob/master/SpectrumBrowser/src/view/MainView.mxml#L213 >>>>>>>>>>> >>>>>>>>>>> And used here: >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>> >>>>>>> >>>>> https://github.com/unhurdle/spectrum-royale/blob/master/SpectrumBrowser/src/view/MainView.mxml#L131 >>>>>>>>>>> >>>>>>>>>>> here: >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>> >>>>>>> >>>>> https://github.com/unhurdle/spectrum-royale/blob/master/SpectrumBrowser/src/view/MainView.mxml#L167 >>>>>>>>>>> >>>>>>>>>>> and here: >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>> >>>>>>> >>>>> https://github.com/unhurdle/spectrum-royale/blob/master/SpectrumBrowser/src/models/Theme.as#L20 >>>>>>>>>>> >>>>>>>>>>>> On Jan 20, 2020, at 3:03 PM, Harbs <harbs.li...@gmail.com> wrote: >>>>>>>>>>>> >>>>>>>>>>>> I created a Router bead which I’m now using in the demo app. >>>>>>>>>>>> >>>>>>>>>>>> Here’s two very different states: >>>>>>>>>>>> >>>>>>>>>>>> >>>>> https://unhurdle.github.io/spectrum-royale/#!combobox?colorstop=dark >>>>>>>>>>>> https://unhurdle.github.io/spectrum-royale/#!asset_list >>>>>>>>>>>> >>>>>>>>>>>> Router supports”state”, paths and parameters. >>>>>>>>>>>> >>>>>>>>>>>> The demo app is using state and parameters. >>>>>>>>>>>> >>>>>>>>>>>> Harbs >>>>>>>>>>>> >>>>>>>>>>>>> On Jan 20, 2020, at 10:54 AM, Carlos Rovira < >>>>>>> carlosrov...@apache.org> >>>>>>>>>>> wrote: >>>>>>>>>>>>> >>>>>>>>>>>>> Hi Harbs, >>>>>>>>>>>>> >>>>>>>>>>>>> about routing, I expect urls will be more like permalinks without >>>>>>> the >>>>>>>>>>> need >>>>>>>>>>>>> of !# chars. Is this possible? >>>>>>>>>>>>> >>>>>>>>>>>>> This: >>>>>>>>>>>>> https://unhurdle.github.io/spectrum-royale/bar_loader >>>>>>>>>>>>> >>>>>>>>>>>>> instead of this: >>>>>>>>>>>>> https://unhurdle.github.io/spectrum-royale/#!bar_loader >>>>>>>>>>>>> >>>>>>>>>>>>> And have it as a library "Routing" that we could use. >>>>>>>>>>>>> As any other framework out there, is something that they support >>>>>>> with >>>>>>>>>>> some >>>>>>>>>>>>> API, and I think is one of the things we already don't offer. >>>>>>>>>>>>> Would be great to have for 1.0, since is something people will >>>>> want >>>>>>>>> very >>>>>>>>>>>>> soon in their tests for sure. >>>>>>>>>>>>> >>>>>>>>>>>>> What do you think? >>>>>>>>>>>>> >>>>>>>>>>>>> Carlos >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> El lun., 20 ene. 2020 a las 7:31, Harbs (<harbs.li...@gmail.com>) >>>>>>>>>>> escribió: >>>>>>>>>>>>> >>>>>>>>>>>>>> Good catch. Thanks! >>>>>>>>>>>>>> >>>>>>>>>>>>>>> On Jan 20, 2020, at 1:52 AM, Andrew Wetmore < >>>>> cottag...@gmail.com> >>>>>>>>>>> wrote: >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> Small thing, but I think the code example for "Avatar" is >>>>>>> reversed, >>>>>>>>>>>>>>> implying that the first of the two images is disabled rather >>>>> than >>>>>>>>> the >>>>>>>>>>>>>>> second. >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> On Sun, Jan 19, 2020 at 6:42 PM Harbs <harbs.li...@gmail.com> >>>>>>>>> wrote: >>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> FYI, I just added routing to the demo app. It was pretty >>>>>>> painless, >>>>>>>>>>>>>>>> although I’d like to make it even simpler… >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> https://unhurdle.github.io/spectrum-royale/#!bar_loader < >>>>>>>>>>>>>>>> https://unhurdle.github.io/spectrum-royale/#!bar_loader> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> On Jan 15, 2020, at 7:08 PM, Harbs <harbs.li...@gmail.com> >>>>>>> wrote: >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> FYI, I just updated the project readme with a link to the demo >>>>>>> and >>>>>>>>>>> some >>>>>>>>>>>>>>>> markup to show what a full Royale app looks like: >>>>>>>>>>>>>>>>> https://github.com/unhurdle/spectrum-royale < >>>>>>>>>>>>>>>> https://github.com/unhurdle/spectrum-royale> >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>> On Jan 13, 2020, at 1:30 AM, Harbs <harbs.li...@gmail.com >>>>>>>>> <mailto: >>>>>>>>>>>>>>>> harbs.li...@gmail.com>> wrote: >>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>> FYI, I’ve been working on filling out a demo the Spectrum >>>>>>> Royale >>>>>>>>>>>>>>>> components: >>>>>>>>>>>>>>>>>> https://unhurdle.github.io/spectrum-royale/ < >>>>>>>>>>>>>>>> https://unhurdle.github.io/spectrum-royale/> >>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>> I’m going to be filling them out over the next week… >>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>> Harbs >>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> -- >>>>>>>>>>>>>>> Andrew Wetmore >>>>>>>>>>>>>>> >>>>>>>>>>>>>>> http://cottage14.blogspot.com/ >>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> -- >>>>>>>>>>>>> Carlos Rovira >>>>>>>>>>>>> http://about.me/carlosrovira >>>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>> >>>>>>>>>> -- >>>>>>>>>> Andrew Wetmore >>>>>>>>>> >>>>>>>>>> http://cottage14.blogspot.com/ >>>>>>>>> >>>>>>>>> >>>>>>>> >>>>>>>> -- >>>>>>>> Andrew Wetmore >>>>>>>> >>>>>>>> http://cottage14.blogspot.com/ <http://cottage14.blogspot.com/> >>>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> Carlos Rovira >>>>>> http://about.me/carlosrovira >>>>> >>>>> >>>> >>>> -- >>>> Carlos Rovira >>>> http://about.me/carlosrovira <http://about.me/carlosrovira> >>> >> >
