Hi Roman,

In Apache Royale repository you have couple of examples marked as MDL as
well [1]. In case of transpiledaction script this was and is my effort - Go
to main page [2] and you will find link to GitHub. You probably need to
switch to branch "Examples" to have the most updated code. Web page itself
is also created using MDL. :)

[1] https://github.com/apache/royale-asjs/tree/develop/examples/royale
[2] https://transpiledactionscript.com/

Thanks,
Piotr

śr., 8 wrz 2021 o 12:49 Roman Isitua <[email protected]> napisał(a):

>
> I just stumbled upon this
>
> https://apache.github.io/royale-docs/libraries/mdl-royale
>
> The links references this two interesting showcase
>
> https://transpiledactionscript.com/examples/MDLExample/
>
> https://transpiledactionscript.com/examples/PureMVCEmployeeAdminMDL/
>
> Are the sources for the above examples available on github ?
>
> If not, I would still appreciate any other showcase.
>
>
>
> Regards,
>
>
>
> On Wed, Sep 8, 2021 at 11:03 AM Yishay Weiss <[email protected]> wrote:
>
>> There used to be an extensive mdl example with source code. I expect
>> navigation was also showcased. @piotr, do you know where roman can find
>> this example?
>>
>> On 2021/09/07 13:39:31, Roman Isitua <[email protected]> wrote:
>> > Hi everyone,
>> >
>> > I am exploring the feasibility of using royale with material design
>> > lite(MDL) to port an existing application built with react that uses
>> > material design.
>> > I have no prior experience with material design so I am getting up to
>> speed
>> > with it by learning from this site.
>> >
>> >
>> https://www.tutorialspoint.com/materialdesignlite/materialdesignlite_environment.htm
>> >
>> > I am trying to replicate the following
>> >
>> >  <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
>> >          <div class = "mdl-layout__drawer">
>> >             <span class = "mdl-layout-title">Material Design</span>
>> >             <nav class = "mdl-navigation">
>> >                <a class = "mdl-navigation__link" href = "">Home</a>
>> >                <a class = "mdl-navigation__link" href = "">Features</a>
>> >                <a class = "mdl-navigation__link" href = "">About Us</a>
>> >                <a class = "mdl-navigation__link" href = "">Log Out</a>
>> >             </nav>
>> >          </div>
>> >
>> >          <main class = "mdl-layout__content">
>> >             <div class = "page-content" style =
>> "padding-left:100px;">Hello
>> > World!</div>
>> >          </main>
>> >
>> >
>> > in royale. It appears to be much more complicated than I thought.
>> > My implementation
>> >
>> > <html:Div className = "mdl-layout mdl-js-layout
>> mdl-layout--fixed-drawer">
>> >          <html:Div className = "mdl-layout__drawer">
>> >             <html:Span class = "mdl-layout-title">Material
>> > Design</html:Span>
>> >             <mdl:Navigation className = "mdl-navigation">
>> >                <mdl:NavigationLink className = "mdl-navigation__link"
>> href
>> > = "" innerText="Home"></mdl:NavigationLink>
>> >                <mdl:NavigationLink className = "mdl-navigation__link"
>> href
>> > = "" innerText="Features"></mdl:NavigationLink>
>> >                <mdl:NavigationLink className = "mdl-navigation__link"
>> href
>> > = "" innerText="About Us"></mdl:NavigationLink>
>> >                <mdl:NavigationLink className = "mdl-navigation__link"
>> href
>> > = "" innerText="Log Out"></mdl:NavigationLink>
>> >             </mdl:Navigation>
>> >          </html:Div>
>> >
>> >         <html:Div id="main" className = "mdl-layout__content">
>> >             <html:Div className = "page-content" style =
>> > "padding-left:100px;" innerText="Hello World !!!"></html:Div>
>> >          </html:Div>
>> >
>> >     </html:Div>
>> >
>> >
>> > The navigation links do not show.
>> > The action script documentation for the material design lite does not
>> open
>> > so I have no idea how to configure it.
>> >
>> > Browsing through the source code of royale mdl library I found the
>> > following comment on mdl Navigation.as
>> >
>> > /*
>> > The Navigation class is a <nav> tag in HTML. It parents a list of links
>> > *  In Royale Navigation is implemented as a List component and by
>> default
>> > *  it uses NavigationLinkItemRenderer class to define each item.
>> > */
>> >
>> > This made me realise that my above configuration will not work.
>> >
>> > Would appreciate help on this.
>> >
>> >
>> > Regards,
>> >
>>
>

-- 

Piotr Zarzycki

Reply via email to