You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2017/01/21 12:00:13 UTC
git commit: [flex-asjs] [refs/heads/develop] - Final touches to MDL
Dialog
Repository: flex-asjs
Updated Branches:
refs/heads/develop 4cd45291f -> d4968b3d4
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/develop
Commit: d4968b3d4454739d687fabf11ed3f2655c9fe7a1
Parents: 4cd4529
Author: Carlos Rovira <ca...@apache.org>
Authored: Sat Jan 21 13:00:02 2017 +0100
Committer: Carlos Rovira <ca...@apache.org>
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"/>