MaterialIcon binding

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

MaterialIcon binding

dslotemaker
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

Carlos Rovira-2
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

dslotemaker
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

Carlos Rovira-2
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

dslotemaker
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

Carlos Rovira-2
Hi David, 

I mean to add the value of the MENU constant, sin that text is what the icon needs to be shown
The constant are only for convenience and error checking

El lun, 22 feb 2021 a las 14:25, David Slotemaker de Bruine (<[hidden email]>) escribió:
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

dslotemaker
Hi Carlos,

OK! that worked, using just menu shows the correct icon. What could it be?

David

On Mon, 22 Feb 2021 at 16:13, Carlos Rovira <[hidden email]> wrote:
Hi David, 

I mean to add the value of the MENU constant, sin that text is what the icon needs to be shown
The constant are only for convenience and error checking

El lun, 22 feb 2021 a las 14:25, David Slotemaker de Bruine (<[hidden email]>) escribió:
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

Carlos Rovira-2
Hi, if that works, means icon lib is right and I think is the binding not working
I need to see the file. You can to a paste of the file [1]


El lun, 22 feb 2021 a las 17:55, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

OK! that worked, using just menu shows the correct icon. What could it be?

David

On Mon, 22 Feb 2021 at 16:13, Carlos Rovira <[hidden email]> wrote:
Hi David, 

I mean to add the value of the MENU constant, sin that text is what the icon needs to be shown
The constant are only for convenience and error checking

El lun, 22 feb 2021 a las 14:25, David Slotemaker de Bruine (<[hidden email]>) escribió:
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

dslotemaker
Hi Carlos,

What user should I use? I can't see on the apache website how to create a user.

I have reduced the example file greatly, I will paste it below:

<?xml version="1.0" encoding="utf-8"?>
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:html="library://ns.apache.org/royale/html"
              >

   <!--<fx:Style source="resources/app-styles.css"/>-->

    <fx:Script>
<![CDATA[
]]>
</fx:Script>
 
     <j:beads>
      <js:ContainerDataBinding/>
     </j:beads>
           
     <j:valuesImpl>
<js:SimpleCSSValuesImpl />
</j:valuesImpl>

    <j:initialView>  
     
        <j:ResponsiveView id="vMain" >
       
            <j:beads>
                <js:ContainerDataBinding/>
        <j:ResponsiveResizeListener localId="resizer"/>
        <j:CleanValidationErrors/>
            </j:beads>
           
       <j:Drawer localId="drawer">
        <j:beads>
            <j:ResponsiveDrawer auto="true"/>
        </j:beads>
        <j:DrawerHeader height="66">
<j:Label text="Menu"/>
        </j:DrawerHeader>
        <j:DrawerContent>
           
        </j:DrawerContent>

        <j:DrawerFooter localId="drawerFooter">
            <j:BarSection>
                <j:IconButton>
                    <j:icon>
                        <js:MaterialIcon text="feedback" />
                    </j:icon>
                </j:IconButton>
            </j:BarSection>
        </j:DrawerFooter>
    </j:Drawer>

<j:TopAppBar localId="topappbar" fixed="true" hasDrawer="{drawer.fixed &amp;&amp; drawer.isOpen}">
        <j:BarRow>
            <j:BarSection>
                <j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
                    <j:beads>
                        <j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false" />
                    </j:beads>
                    <j:icon>
                        <js:MaterialIcon text="{MaterialIconType.MENU}" />
                    </j:icon>
                </j:IconButton>
                <j:BarTitle text="Responsive App"/>
            </j:BarSection>
            <j:BarSection itemsHorizontalAlign="itemsRight">
             <j:ToggleButton>
                    <j:beads>
                        <j:ToolTip toolTip="show/hide FooterBar"/>
                    </j:beads>
                    <j:icon>
                        <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" />
                    </j:icon>
                </j:ToggleButton>
            </j:BarSection>
        </j:BarRow>
    </j:TopAppBar>

    <j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true">
    <j:ScrollableSectionContent>    
            <j:Card width="100%" height="100%">
            </j:Card>
            </j:ScrollableSectionContent>
            </j:ApplicationMainContent>
        </j:ResponsiveView >
    </j:initialView>
</j:Application>

D



On Mon, 22 Feb 2021 at 19:05, Carlos Rovira <[hidden email]> wrote:
Hi, if that works, means icon lib is right and I think is the binding not working
I need to see the file. You can to a paste of the file [1]


El lun, 22 feb 2021 a las 17:55, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

OK! that worked, using just menu shows the correct icon. What could it be?

David

On Mon, 22 Feb 2021 at 16:13, Carlos Rovira <[hidden email]> wrote:
Hi David, 

I mean to add the value of the MENU constant, sin that text is what the icon needs to be shown
The constant are only for convenience and error checking

El lun, 22 feb 2021 a las 14:25, David Slotemaker de Bruine (<[hidden email]>) escribió:
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

Carlos Rovira-2
Hi David,

I thought anyone can paste there, sorry. Anyway, I think there's other sites where you can share code. For example github gist.

Anyway following code works ok. Explanation: That mxml is Application, so you need to use "ApplicationDataBinding", sin ce it will affect all that mxml unit. Notice that I commented inner "js:ContainerDataBinding".

If you separate the view to another file you must use in that mxml "ViewDataBinding" (but we have currently a bug there so instead you need to use ContainerDataBinding).

Last, for any other mxml file use js:ContainerDataBinding

<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:html="library://ns.apache.org/royale/html">
<j:beads>
<js:ApplicationDataBinding/>
</j:beads>
<j:initialView>
<j:ResponsiveView id="vMain" >
<j:beads>
<!-- <js:ContainerDataBinding/> -->
</j:beads>
<j:Drawer localId="drawer">
<j:DrawerFooter localId="drawerFooter">
<j:BarSection>
<j:IconButton>
<j:icon>
<js:MaterialIcon text="{MaterialIconType.MENU}" />
</j:icon>
</j:IconButton>
</j:BarSection>
</j:DrawerFooter>
</j:Drawer>

</j:ResponsiveView>
</j:initialView>
</j:Application>

HTH

Carlos


El mar, 23 feb 2021 a las 9:37, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

What user should I use? I can't see on the apache website how to create a user.

I have reduced the example file greatly, I will paste it below:

<?xml version="1.0" encoding="utf-8"?>
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:html="library://ns.apache.org/royale/html"
              >

   <!--<fx:Style source="resources/app-styles.css"/>-->

    <fx:Script>
<![CDATA[
]]>
</fx:Script>
 
     <j:beads>
      <js:ContainerDataBinding/>
     </j:beads>
           
     <j:valuesImpl>
<js:SimpleCSSValuesImpl />
</j:valuesImpl>

    <j:initialView>  
     
        <j:ResponsiveView id="vMain" >
       
            <j:beads>
                <js:ContainerDataBinding/>
        <j:ResponsiveResizeListener localId="resizer"/>
        <j:CleanValidationErrors/>
            </j:beads>
           
       <j:Drawer localId="drawer">
        <j:beads>
            <j:ResponsiveDrawer auto="true"/>
        </j:beads>
        <j:DrawerHeader height="66">
<j:Label text="Menu"/>
        </j:DrawerHeader>
        <j:DrawerContent>
           
        </j:DrawerContent>

        <j:DrawerFooter localId="drawerFooter">
            <j:BarSection>
                <j:IconButton>
                    <j:icon>
                        <js:MaterialIcon text="feedback" />
                    </j:icon>
                </j:IconButton>
            </j:BarSection>
        </j:DrawerFooter>
    </j:Drawer>

<j:TopAppBar localId="topappbar" fixed="true" hasDrawer="{drawer.fixed &amp;&amp; drawer.isOpen}">
        <j:BarRow>
            <j:BarSection>
                <j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
                    <j:beads>
                        <j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false" />
                    </j:beads>
                    <j:icon>
                        <js:MaterialIcon text="{MaterialIconType.MENU}" />
                    </j:icon>
                </j:IconButton>
                <j:BarTitle text="Responsive App"/>
            </j:BarSection>
            <j:BarSection itemsHorizontalAlign="itemsRight">
             <j:ToggleButton>
                    <j:beads>
                        <j:ToolTip toolTip="show/hide FooterBar"/>
                    </j:beads>
                    <j:icon>
                        <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" />
                    </j:icon>
                </j:ToggleButton>
            </j:BarSection>
        </j:BarRow>
    </j:TopAppBar>

    <j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true">
    <j:ScrollableSectionContent>    
            <j:Card width="100%" height="100%">
            </j:Card>
            </j:ScrollableSectionContent>
            </j:ApplicationMainContent>
        </j:ResponsiveView >
    </j:initialView>
</j:Application>

D



On Mon, 22 Feb 2021 at 19:05, Carlos Rovira <[hidden email]> wrote:
Hi, if that works, means icon lib is right and I think is the binding not working
I need to see the file. You can to a paste of the file [1]


El lun, 22 feb 2021 a las 17:55, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

OK! that worked, using just menu shows the correct icon. What could it be?

David

On Mon, 22 Feb 2021 at 16:13, Carlos Rovira <[hidden email]> wrote:
Hi David, 

I mean to add the value of the MENU constant, sin that text is what the icon needs to be shown
The constant are only for convenience and error checking

El lun, 22 feb 2021 a las 14:25, David Slotemaker de Bruine (<[hidden email]>) escribió:
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

dslotemaker
Hi Carlos,

That was it! Great. Thank you. 

Questions: 

Does using js:ApplicationDataBinding  mean you dont have to use js:ContainerDataBinding in any child containiers? 

Why are there two different types of "binding" Beads? Wouldn't it be simple with just one type?

Do we have documentation outlining all beads?

Cheers,

David



On Wed, 24 Feb 2021 at 17:33, Carlos Rovira <[hidden email]> wrote:
Hi David,

I thought anyone can paste there, sorry. Anyway, I think there's other sites where you can share code. For example github gist.

Anyway following code works ok. Explanation: That mxml is Application, so you need to use "ApplicationDataBinding", sin ce it will affect all that mxml unit. Notice that I commented inner "js:ContainerDataBinding".

If you separate the view to another file you must use in that mxml "ViewDataBinding" (but we have currently a bug there so instead you need to use ContainerDataBinding).

Last, for any other mxml file use js:ContainerDataBinding

<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:html="library://ns.apache.org/royale/html">
<j:beads>
<js:ApplicationDataBinding/>
</j:beads>
<j:initialView>
<j:ResponsiveView id="vMain" >
<j:beads>
<!-- <js:ContainerDataBinding/> -->
</j:beads>
<j:Drawer localId="drawer">
<j:DrawerFooter localId="drawerFooter">
<j:BarSection>
<j:IconButton>
<j:icon>
<js:MaterialIcon text="{MaterialIconType.MENU}" />
</j:icon>
</j:IconButton>
</j:BarSection>
</j:DrawerFooter>
</j:Drawer>

</j:ResponsiveView>
</j:initialView>
</j:Application>

HTH

Carlos


El mar, 23 feb 2021 a las 9:37, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

What user should I use? I can't see on the apache website how to create a user.

I have reduced the example file greatly, I will paste it below:

<?xml version="1.0" encoding="utf-8"?>
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:html="library://ns.apache.org/royale/html"
              >

   <!--<fx:Style source="resources/app-styles.css"/>-->

    <fx:Script>
<![CDATA[
]]>
</fx:Script>
 
     <j:beads>
      <js:ContainerDataBinding/>
     </j:beads>
           
     <j:valuesImpl>
<js:SimpleCSSValuesImpl />
</j:valuesImpl>

    <j:initialView>  
     
        <j:ResponsiveView id="vMain" >
       
            <j:beads>
                <js:ContainerDataBinding/>
        <j:ResponsiveResizeListener localId="resizer"/>
        <j:CleanValidationErrors/>
            </j:beads>
           
       <j:Drawer localId="drawer">
        <j:beads>
            <j:ResponsiveDrawer auto="true"/>
        </j:beads>
        <j:DrawerHeader height="66">
<j:Label text="Menu"/>
        </j:DrawerHeader>
        <j:DrawerContent>
           
        </j:DrawerContent>

        <j:DrawerFooter localId="drawerFooter">
            <j:BarSection>
                <j:IconButton>
                    <j:icon>
                        <js:MaterialIcon text="feedback" />
                    </j:icon>
                </j:IconButton>
            </j:BarSection>
        </j:DrawerFooter>
    </j:Drawer>

<j:TopAppBar localId="topappbar" fixed="true" hasDrawer="{drawer.fixed &amp;&amp; drawer.isOpen}">
        <j:BarRow>
            <j:BarSection>
                <j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
                    <j:beads>
                        <j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false" />
                    </j:beads>
                    <j:icon>
                        <js:MaterialIcon text="{MaterialIconType.MENU}" />
                    </j:icon>
                </j:IconButton>
                <j:BarTitle text="Responsive App"/>
            </j:BarSection>
            <j:BarSection itemsHorizontalAlign="itemsRight">
             <j:ToggleButton>
                    <j:beads>
                        <j:ToolTip toolTip="show/hide FooterBar"/>
                    </j:beads>
                    <j:icon>
                        <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" />
                    </j:icon>
                </j:ToggleButton>
            </j:BarSection>
        </j:BarRow>
    </j:TopAppBar>

    <j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true">
    <j:ScrollableSectionContent>    
            <j:Card width="100%" height="100%">
            </j:Card>
            </j:ScrollableSectionContent>
            </j:ApplicationMainContent>
        </j:ResponsiveView >
    </j:initialView>
</j:Application>

D



On Mon, 22 Feb 2021 at 19:05, Carlos Rovira <[hidden email]> wrote:
Hi, if that works, means icon lib is right and I think is the binding not working
I need to see the file. You can to a paste of the file [1]


El lun, 22 feb 2021 a las 17:55, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

OK! that worked, using just menu shows the correct icon. What could it be?

David

On Mon, 22 Feb 2021 at 16:13, Carlos Rovira <[hidden email]> wrote:
Hi David, 

I mean to add the value of the MENU constant, sin that text is what the icon needs to be shown
The constant are only for convenience and error checking

El lun, 22 feb 2021 a las 14:25, David Slotemaker de Bruine (<[hidden email]>) escribió:
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: MaterialIcon binding

Carlos Rovira-2
Hi David,

you need always one binding bead at "mxml file level", so if you add a mxml file to the structure for any subpart and you have binding in the main app file and also in that mxml subpart separated file, you need to add binding beads in both. If a mxml sub part doesn't have binding you don't add anything and Royale will be work faster and will be more light weight since don't have that code processing in that part ;)

we have more that one type because of PAYG principle, If we add all cases in the same code, we'll be adding weight and you could or not use it. So the principle is to compose just what you really use, that makes your app lighter and faster. Please read in our docs about PAYG:


Beads: in each jewel component page I'm trying to add the beads, but is still on the works. For example:




El jue, 25 feb 2021 a las 8:37, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

That was it! Great. Thank you. 

Questions: 

Does using js:ApplicationDataBinding  mean you dont have to use js:ContainerDataBinding in any child containiers? 

Why are there two different types of "binding" Beads? Wouldn't it be simple with just one type?

Do we have documentation outlining all beads?

Cheers,

David



On Wed, 24 Feb 2021 at 17:33, Carlos Rovira <[hidden email]> wrote:
Hi David,

I thought anyone can paste there, sorry. Anyway, I think there's other sites where you can share code. For example github gist.

Anyway following code works ok. Explanation: That mxml is Application, so you need to use "ApplicationDataBinding", sin ce it will affect all that mxml unit. Notice that I commented inner "js:ContainerDataBinding".

If you separate the view to another file you must use in that mxml "ViewDataBinding" (but we have currently a bug there so instead you need to use ContainerDataBinding).

Last, for any other mxml file use js:ContainerDataBinding

<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:html="library://ns.apache.org/royale/html">
<j:beads>
<js:ApplicationDataBinding/>
</j:beads>
<j:initialView>
<j:ResponsiveView id="vMain" >
<j:beads>
<!-- <js:ContainerDataBinding/> -->
</j:beads>
<j:Drawer localId="drawer">
<j:DrawerFooter localId="drawerFooter">
<j:BarSection>
<j:IconButton>
<j:icon>
<js:MaterialIcon text="{MaterialIconType.MENU}" />
</j:icon>
</j:IconButton>
</j:BarSection>
</j:DrawerFooter>
</j:Drawer>

</j:ResponsiveView>
</j:initialView>
</j:Application>

HTH

Carlos


El mar, 23 feb 2021 a las 9:37, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

What user should I use? I can't see on the apache website how to create a user.

I have reduced the example file greatly, I will paste it below:

<?xml version="1.0" encoding="utf-8"?>
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:html="library://ns.apache.org/royale/html"
              >

   <!--<fx:Style source="resources/app-styles.css"/>-->

    <fx:Script>
<![CDATA[
]]>
</fx:Script>
 
     <j:beads>
      <js:ContainerDataBinding/>
     </j:beads>
           
     <j:valuesImpl>
<js:SimpleCSSValuesImpl />
</j:valuesImpl>

    <j:initialView>  
     
        <j:ResponsiveView id="vMain" >
       
            <j:beads>
                <js:ContainerDataBinding/>
        <j:ResponsiveResizeListener localId="resizer"/>
        <j:CleanValidationErrors/>
            </j:beads>
           
       <j:Drawer localId="drawer">
        <j:beads>
            <j:ResponsiveDrawer auto="true"/>
        </j:beads>
        <j:DrawerHeader height="66">
<j:Label text="Menu"/>
        </j:DrawerHeader>
        <j:DrawerContent>
           
        </j:DrawerContent>

        <j:DrawerFooter localId="drawerFooter">
            <j:BarSection>
                <j:IconButton>
                    <j:icon>
                        <js:MaterialIcon text="feedback" />
                    </j:icon>
                </j:IconButton>
            </j:BarSection>
        </j:DrawerFooter>
    </j:Drawer>

<j:TopAppBar localId="topappbar" fixed="true" hasDrawer="{drawer.fixed &amp;&amp; drawer.isOpen}">
        <j:BarRow>
            <j:BarSection>
                <j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
                    <j:beads>
                        <j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false" />
                    </j:beads>
                    <j:icon>
                        <js:MaterialIcon text="{MaterialIconType.MENU}" />
                    </j:icon>
                </j:IconButton>
                <j:BarTitle text="Responsive App"/>
            </j:BarSection>
            <j:BarSection itemsHorizontalAlign="itemsRight">
             <j:ToggleButton>
                    <j:beads>
                        <j:ToolTip toolTip="show/hide FooterBar"/>
                    </j:beads>
                    <j:icon>
                        <js:MaterialToggleIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" />
                    </j:icon>
                </j:ToggleButton>
            </j:BarSection>
        </j:BarRow>
    </j:TopAppBar>

    <j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true">
    <j:ScrollableSectionContent>    
            <j:Card width="100%" height="100%">
            </j:Card>
            </j:ScrollableSectionContent>
            </j:ApplicationMainContent>
        </j:ResponsiveView >
    </j:initialView>
</j:Application>

D



On Mon, 22 Feb 2021 at 19:05, Carlos Rovira <[hidden email]> wrote:
Hi, if that works, means icon lib is right and I think is the binding not working
I need to see the file. You can to a paste of the file [1]


El lun, 22 feb 2021 a las 17:55, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

OK! that worked, using just menu shows the correct icon. What could it be?

David

On Mon, 22 Feb 2021 at 16:13, Carlos Rovira <[hidden email]> wrote:
Hi David, 

I mean to add the value of the MENU constant, sin that text is what the icon needs to be shown
The constant are only for convenience and error checking

El lun, 22 feb 2021 a las 14:25, David Slotemaker de Bruine (<[hidden email]>) escribió:
If I remove the { , ie:

   <js:MaterialIcon text="MaterialIconType.MENU" />

The browser shows the character [ when the menu is hidden. The tool tips also no longer work.

Shall I send you a zip version of the project?

D



On Mon, 22 Feb 2021 at 09:59, Carlos Rovira <[hidden email]> wrote:
Hi David,

if you remove the binding and put the string directly it works?
If so, the library is ok. So it must be something in the bind and I need you to copy a bit of code you're using since I have no idea

El lun, 22 feb 2021 a las 8:53, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have it at both the Application tag level and the ResponsiveView Level. No dice.

I had it like the TDJ example (only at the ResponsiveView Level) and also no dice. I think binding is working because the tool tips still display.

I must be missing somthing else, but I dont know what. Any pointers?

Cheers,

D

On Sat, 20 Feb 2021 at 16:19, Carlos Rovira <[hidden email]> wrote:
Hi David,

Remember that binding requires to be composed in Royale (PAYG main principle).
Do you have this bead at mxml file level?

<js:ContainerDataBinding/>



El vie, 19 feb 2021 a las 11:13, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi all,

I am trying to recreate the Tour de Jewel Responsive Design. I have almost everything working but I am stuck with the following issue:

1)The MaterialIcon components that use binding (  <js:MaterialIcon text="{MaterialIconType.MENU}" />) to decide their image show blank, but the tool tips still work which seems to say it isn't a problem with the binding. Other Material Items that are set via code show correctly (eg ResponsiveIcon and the MenuNav Icons.)

Any ideas?



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation