mdl] - Final touches to MDL Dialog

carlosrovira Fri, 27 Jan 2017 14:14:36 -0800

Final touches to MDL Dialog


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/d4968b3d
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/d4968b3d
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/d4968b3d

Branch: refs/heads/feature/mdl
Commit: d4968b3d4454739d687fabf11ed3f2655c9fe7a1
Parents: 4cd4529
Author: Carlos Rovira <[email protected]>
Authored: Sat Jan 21 13:00:02 2017 +0100
Committer: Carlos Rovira <[email protected]>
Committed: Sat Jan 21 13:00:02 2017 +0100

----------------------------------------------------------------------
 .../MDLExample/src/main/flex/Dialogs.mxml       |  8 +--
 .../MDLExample/src/main/flex/TestDialog.mxml    |  6 +-
 .../src/main/flex/org/apache/flex/mdl/Dialog.as | 61 ++++++++++++++---
 .../org/apache/flex/mdl/beads/DialogTitle.as    | 71 ++++++++++++++++++++
 .../src/main/resources/mdl-manifest.xml         |  1 +
 5 files changed, 132 insertions(+), 15 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d4968b3d/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml 
b/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
index 494286b..d739141 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Dialogs.mxml
@@ -24,10 +24,10 @@ limitations under the License.
     <fx:Script>
         <![CDATA[
             private var dialog:TestDialog;
-            private function showModal():void
+            
+            private function showModalDialog():void
             {
-                if(dialog == null)
-                {
+                if(dialog == null) {
                     dialog = new TestDialog();
                 }
                 
@@ -38,7 +38,7 @@ limitations under the License.
 
     <mdl:Grid>
         
-        <mdl:Button text="Show Dialog" raised="true" click="showModal()"/>
+        <mdl:Button text="Show Modal Dialog" raised="true" 
click="showModalDialog()"/>
 
     </mdl:Grid>
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d4968b3d/examples/flexjs/MDLExample/src/main/flex/TestDialog.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/TestDialog.mxml 
b/examples/flexjs/MDLExample/src/main/flex/TestDialog.mxml
index 36dfb48..4e22a91 100644
--- a/examples/flexjs/MDLExample/src/main/flex/TestDialog.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/TestDialog.mxml
@@ -22,7 +22,11 @@ limitations under the License.
             xmlns:mdl="library://ns.apache.org/flexjs/mdl"
             xmlns="http://www.w3.org/1999/xhtml";>
     
-    <js:H4 text="Allow data collection?" className="mdl-dialog__title"/>
+    <js:H4 text="Allow data collection?">
+        <js:beads>
+            <mdl:DialogTitle/>
+        </js:beads>
+    </js:H4>
     
     <mdl:DialogContent>
         <js:P text="This is an example of the Material Design Lite dialog 
component. Please use responsibly."/>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d4968b3d/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Dialog.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Dialog.as
 
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Dialog.as
index 0a0dcc6..58375b2 100644
--- 
a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Dialog.as
+++ 
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Dialog.as
@@ -28,12 +28,20 @@ package org.apache.flex.mdl
     }
     
        /**
-        *  The Dialog class
+        *  The MDL Dialog class creates modal windows for dedicated user input.
+        *  The Material Design Lite (MDL) dialog component allows for 
verification of user actions, simple data input, 
+        *  and alerts to provide extra information to users.
+        *
+        *  Note: Dialogs use the HTML <dialog> element, which currently has 
very limited cross-browser support.
+        *  To ensure support across all modern browsers, we use use 
dialogPolyfill extern or creating your own.
+        *  There is no polyfill included with MDL.
+        *  
+        *  Use DialogContent to insert content and DialogActions for the 
buttons to allow user interaction
         *
         *  @langversion 3.0
         *  @playerversion Flash 10.2
         *  @playerversion AIR 2.6
-        *  @productversion FlexJS 0.0
+        *  @productversion FlexJS 0.8
         */
        public class Dialog extends ContainerBase implements IPopUp
        {
@@ -41,14 +49,14 @@ package org.apache.flex.mdl
                 *  constructor.
          *  
          *  <inject_html>
-         *  <link rel="stylesheet" type="text/css" 
href="http://cdn.css.net/libs/dialog-polyfill/0.4.5/dialog-polyfill.min.css";>
-         *  <script 
src="http://cdn.css.net/libs/dialog-polyfill/0.4.5/dialog-polyfill.min.js";></script>
+         *  <link rel="stylesheet" type="text/css" 
href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.5/dialog-polyfill.min.css";>
+         *  <script 
src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.5/dialog-polyfill.min.js";></script>
          *  </inject_html>
                 *
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
                public function Dialog()
                {
@@ -57,6 +65,9 @@ package org.apache.flex.mdl
                        className = ""; //set to empty string avoid 'undefined' 
output when no class selector is assigned by user;
                }
 
+               /**
+                * The html dialog component that parents the dialog content
+                */
                COMPILE::JS
                private var dialog:HTMLDialogElement;
 
@@ -95,9 +106,9 @@ package org.apache.flex.mdl
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion FlexJS 0.0
+                *  @productversion FlexJS 0.8
                 */
-               public function showModal():void
+               private function prepareDialog():void
                {
                        COMPILE::JS
                        {
@@ -115,16 +126,41 @@ package org.apache.flex.mdl
                                                
dialogPolyfill.registerDialog(dialog);
                                        }
                                }
-                               
+                       }
+               }
+
+               /**
+                *  show modal dialog
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.8
+                */
+               public function showModal():void
+               {       
+                       prepareDialog();
+
+                       COMPILE::JS
+                       {
                                dialog.showModal()
                        }
                }
                
                /**
-                * show
+                *  show dialog.
+                *  Note: It seems MDL does not support non modal dialogs, 
since there's no examples
+                *  and dialogs are always added to "document.body" We could 
study change this.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.8
                 */
                public function show():void
                {
+                       prepareDialog();
+
                        COMPILE::JS
                        {
                                dialog.show();
@@ -132,7 +168,12 @@ package org.apache.flex.mdl
                }
 
                /**
-                * close
+                * close dialog
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.8
                 */
                public function close():void
                {

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d4968b3d/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/DialogTitle.as
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/DialogTitle.as
 
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/DialogTitle.as
new file mode 100644
index 0000000..e7b8128
--- /dev/null
+++ 
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/DialogTitle.as
@@ -0,0 +1,71 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.flex.mdl.beads
+{      
+       import org.apache.flex.core.IBead;
+       import org.apache.flex.core.IStrand;
+       import org.apache.flex.core.UIBase;
+       
+       /**
+        *  The DialogTitle bead class is used in MDL Dialog to style the title.
+        *  You could add to some heading (H1 to H4) or other text component.
+        *  
+        *  @langversion 3.0
+        *  @playerversion Flash 10.2
+        *  @playerversion AIR 2.6
+        *  @productversion FlexJS 0.8
+        */
+       public class DialogTitle implements IBead
+       {
+               /**
+                *  constructor.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.8
+                */
+               public function DialogTitle()
+               {
+               }
+
+               private var _strand:IStrand;
+               
+               /**
+                *  @copy org.apache.flex.core.IBead#strand
+                *  
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion FlexJS 0.8
+                *  @flexjsignorecoercion HTMLInputElement
+                *  @flexjsignorecoercion org.apache.flex.core.UIBase;
+                */
+               public function set strand(value:IStrand):void
+               {
+                       _strand = value;
+                       
+                       COMPILE::JS
+                       {
+                               var host:UIBase = value as UIBase;
+                host.className = "mdl-dialog__title";
+                       }
+               }
+       }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d4968b3d/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
----------------------------------------------------------------------
diff --git 
a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml 
b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
index 580fde9..f941a55 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -64,6 +64,7 @@
     <component id="TableCell" class="org.apache.flex.mdl.TableCell"/>
     <component id="TableView" 
class="org.apache.flex.mdl.beads.views.TableView"/>
     <component id="Dialog" class="org.apache.flex.mdl.Dialog"/>
+    <component id="DialogTitle" class="org.apache.flex.mdl.beads.DialogTitle"/>
     <component id="DialogContent" class="org.apache.flex.mdl.DialogContent"/>
     <component id="DialogActions" class="org.apache.flex.mdl.DialogActions"/>
     <component id="NavigationLayout" 
class="org.apache.flex.mdl.NavigationLayout"/>

[11/50] git commit: [flex-asjs] [refs/heads/feature/mdl] - Final touches to MDL Dialog

Reply via email to