[royale-asjs] branch develop updated: tour-de-jewel: show ResponsiveResizeListener in action. A icon is shown bottom left in TDJ to show the actual responsive size of the screen and updates accordingly to screen width changes

[carlosrovira]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 88b6791  tour-de-jewel: show ResponsiveResizeListener in action. A 
icon is shown bottom left in TDJ to show the actual responsive size of the 
screen and updates accordingly to screen width changes
88b6791 is described below

commit 88b6791fc8bbc16c53d8e2bd4b4a7714835d704c
Author: Carlos Rovira <carlos.rov...@apache.org>
AuthorDate: Mon Jul 20 16:47:08 2020 +0200

    tour-de-jewel: show ResponsiveResizeListener in action. A icon is shown 
bottom left in TDJ to show the actual responsive size of the screen and updates 
accordingly to screen width changes
---
 .../TourDeJewel/src/main/royale/MainContent.mxml   | 53 ++++++++++++++++++----
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml 
b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
index 348f519..32c0beb 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
@@ -28,7 +28,10 @@ limitations under the License.
 
     <fx:Script>
         <![CDATA[
+            import org.apache.royale.events.Event;
+            import org.apache.royale.icons.MaterialIcon;
             import org.apache.royale.jewel.supportClasses.ISelectableContent;
+            import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
             import org.apache.royale.routing.RouteState;
             import org.apache.royale.utils.OSUtils;
 
@@ -47,6 +50,39 @@ limitations under the License.
                 }
             }
 
+            private function setResponsiveSizeIndicatorListeners():void
+            {
+                
responsiveSizeIndicator.addEventListener('phoneResponsiveSize', 
changeIconToShowResponsiveSizeState);
+                
responsiveSizeIndicator.addEventListener('tabletResponsiveSize', 
changeIconToShowResponsiveSizeState);
+                
responsiveSizeIndicator.addEventListener('desktopResponsiveSize', 
changeIconToShowResponsiveSizeState);
+                
responsiveSizeIndicator.addEventListener('widescreenResponsiveSize', 
changeIconToShowResponsiveSizeState);
+                responsiveSizeIndicator.addEventListener('fullResponsiveSize', 
changeIconToShowResponsiveSizeState);
+            }
+            
+            private function changeIconToShowResponsiveSizeState(event:Event = 
null):void
+            {
+                if(event.type == 'phoneResponsiveSize') {
+                    responsiveSizeIndicator.icon.text = 
MaterialIconType.PHONE_IPHONE;
+                    responsiveSizeIndicatorToolTip.toolTip = 
ResponsiveSizes.PHONE + " Size";
+                }
+                else if(event.type == 'tabletResponsiveSize') {
+                    responsiveSizeIndicator.icon.text = 
MaterialIconType.TABLET_MAC;
+                    responsiveSizeIndicatorToolTip.toolTip = 
ResponsiveSizes.TABLET + " Size";
+                }
+                else if(event.type == 'desktopResponsiveSize') {
+                    responsiveSizeIndicator.icon.text = 
MaterialIconType.DESKTOP_MAC;
+                    responsiveSizeIndicatorToolTip.toolTip = 
ResponsiveSizes.DESKTOP + " Size";
+                }
+                else if(event.type == 'widescreenResponsiveSize') {
+                    responsiveSizeIndicator.icon.text = MaterialIconType.TV;
+                    responsiveSizeIndicatorToolTip.toolTip = 
ResponsiveSizes.WIDESCREEN + " Size";
+                }
+                else if(event.type == 'fullResponsiveSize') {
+                    responsiveSizeIndicator.icon.text = 
MaterialIconType.PANORAMA;
+                    responsiveSizeIndicatorToolTip.toolTip = 
ResponsiveSizes.FULL + " Size";
+                }
+            }
+
             private function setNavFromHash(hash:String):void{
                 var l:uint = 
mainNavigationModel.containerDrawerNavigation.length;
                                while(l--) {
@@ -258,14 +294,15 @@ limitations under the License.
                         <js:MaterialIcon text="{MaterialIconType.ADD_ALARM}" />
                     </j:icon>
                 </j:IconButton>
-                <j:IconButton>
-                    <j:beads>
-                        <j:Badge text="209" emphasis="emphasized" 
subindex="true" preindex="true" overlap="true"/>
-                    </j:beads>
-                    <j:icon>
-                        <js:MaterialIcon 
text="{MaterialIconType.ANNOUNCEMENT}" />
-                    </j:icon>
-                </j:IconButton>
+                <j:IconButton localId="responsiveSizeIndicator" 
beadsAdded="setResponsiveSizeIndicatorListeners()">
+                        <j:icon>
+                            <js:MaterialIcon 
localId="responsiveSizeIndicatorIcon"/>
+                        </j:icon>
+                        <j:beads>
+                            <j:ToolTip 
localId="responsiveSizeIndicatorToolTip"/>
+                            <j:ResponsiveResizeListener/>
+                        </j:beads>
+                    </j:IconButton>
             </j:BarSection>
         </j:BarRow>
     </j:FooterBar>