You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ha...@apache.org on 2018/11/13 09:01:37 UTC
[royale-asjs] 01/01: Added Modal beads with example
This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch feature/modal
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 163309989007f5c0d205e2b169de2a2a515b6ab1
Author: Harbs <ha...@in-tools.com>
AuthorDate: Tue Nov 13 11:01:08 2018 +0200
Added Modal beads with example
---
examples/royale/AlertExample/asconfig.json | 14 ++
.../royale/AlertExample/src/main/royale/ASModal.as | 56 ++++++
.../AlertExample/src/main/royale/AlertExample.mxml | 29 ++-
.../AlertExample/src/main/royale/MXMLModal.mxml | 29 +++
.../Basic/src/main/resources/basic-manifest.xml | 3 +
.../main/royale/org/apache/royale/core/UIBase.as | 4 +
.../royale/html/beads/plugin/IModalDisplay.as | 35 ++++
.../royale/html/beads/plugin/ModalDisplay.as | 191 ++++++++++++++++++
.../royale/html/beads/plugin/ModalOverlay.as | 215 +++++++++++++++++++++
9 files changed, 573 insertions(+), 3 deletions(-)
diff --git a/examples/royale/AlertExample/asconfig.json b/examples/royale/AlertExample/asconfig.json
new file mode 100644
index 0000000..c8328c9
--- /dev/null
+++ b/examples/royale/AlertExample/asconfig.json
@@ -0,0 +1,14 @@
+{
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale"],
+ "source-map": true
+ },
+ "copySourcePathAssets": true,
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/AlertExample.mxml"
+ ]
+}
diff --git a/examples/royale/AlertExample/src/main/royale/ASModal.as b/examples/royale/AlertExample/src/main/royale/ASModal.as
new file mode 100644
index 0000000..63bd828
--- /dev/null
+++ b/examples/royale/AlertExample/src/main/royale/ASModal.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.html.VContainer;
+ import org.apache.royale.html.beads.plugin.ModalDisplay;
+ import org.apache.royale.html.beads.plugin.ModalOverlay;
+ import org.apache.royale.html.Label;
+ import org.apache.royale.html.TextButton;
+ import org.apache.royale.events.MouseEvent;
+
+ public class ASModal extends VContainer
+ {
+ public function ASModal()
+ {
+ super();
+ this.style = {"backgroundColor":"#FFFFFF"};
+ _modal = new ModalDisplay();
+ _modal.maxWidth = 600;
+ addBead(_modal);
+ var overlay:ModalOverlay = new ModalOverlay();
+ overlay.hideOnClick = true;
+ addBead(overlay);
+ this.height = 300;
+ var text:Label = new Label();
+ text.text = "Just a Modal";
+ addElement(text);
+ var close:TextButton = new TextButton();
+ close.text = "Close";
+ close.addEventListener(MouseEvent.CLICK,function(ev:MouseEvent):void{_modal.hide()});
+ addElement(close);
+ }
+ private var _modal:ModalDisplay;
+
+ public function get modal():ModalDisplay
+ {
+ return _modal;
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/royale/AlertExample/src/main/royale/AlertExample.mxml b/examples/royale/AlertExample/src/main/royale/AlertExample.mxml
index b9c28e2..765dc09 100644
--- a/examples/royale/AlertExample/src/main/royale/AlertExample.mxml
+++ b/examples/royale/AlertExample/src/main/royale/AlertExample.mxml
@@ -30,7 +30,26 @@ limitations under the License.
//alert.height = 150;
//alert.addEventListener("close", onShowAlertAction);
}
-
+ private var modal:MXMLModal;
+ private function showMXMLModal():void{
+ if(!modal)
+ {
+ modal = new MXMLModal();
+ // beads declared via MXML are not added until it's added to parent,
+ // so we first need to add the element.
+ this.addElement(modal);
+ }
+ modal.modal.show(this);
+ }
+ private var asModal:ASModal;
+ private function showASModal():void{
+ if(!asModal){
+ asModal = new ASModal();
+ // We added the beads in the constructor,
+ // so there's no need to add it before show call show()
+ }
+ asModal.modal.show(this);
+ }
/*private function onShowAlertAction(event:CloseEvent):void
{
alertStatus.text = "Alert status: " + event.detail;
@@ -42,8 +61,12 @@ limitations under the License.
</js:valuesImpl>
<js:initialView>
<js:View>
- <js:TextButton text="Show Alert" click="onBtnShowAlert(event)"
- width="100" height="30"/>
+ <js:TextButton text="Show Alert" click="onBtnShowAlert(event)"
+ width="150" height="30"/>
+ <js:TextButton text="Show MXMLModal" click="showMXMLModal()"
+ x="160" width="150" height="30"/>
+ <js:TextButton text="Show ASModal" click="showASModal()"
+ x="320" width="150" height="30"/>
<js:Label id="alertStatus" width="150" height="30" text="Alert status: " y="35"/>
</js:View>
</js:initialView>
diff --git a/examples/royale/AlertExample/src/main/royale/MXMLModal.mxml b/examples/royale/AlertExample/src/main/royale/MXMLModal.mxml
new file mode 100644
index 0000000..f2902c1
--- /dev/null
+++ b/examples/royale/AlertExample/src/main/royale/MXMLModal.mxml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<js:VContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic" xmlns:html="library://ns.apache.org/royale/html" height="300" style="backgroundColor:#FFFFFF" visible="false">
+
+ <js:beads>
+ <js:ModalDisplay id="modal" maxWidth="600"/>
+ <js:ModalOverlay hideOnClick="true"/>
+ </js:beads>
+ <js:Label width="100%" text="Just a Modal"/>
+ <js:TextButton text="Close" click="modal.hide()"/>
+</js:VContainer>
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
index 5945ef0..42b30db 100644
--- a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
@@ -248,4 +248,7 @@
<component id="CascadingMenuFactory" class="org.apache.royale.html.beads.CascadingMenuFactory" />
+ <component id="ModalDisplay" class="org.apache.royale.html.beads.plugin.ModalDisplay"/>
+ <component id="ModalOverlay" class="org.apache.royale.html.beads.plugin.ModalOverlay"/>
+
</componentPackage>
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
index 644ba96..5ed85ba 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1402,6 +1402,7 @@ package org.apache.royale.core
}
}
+ private var onceAdded:Boolean;
/**
* The method called when added to a parent. This is a good
* time to set up beads.
@@ -1415,6 +1416,9 @@ package org.apache.royale.core
*/
public function addedToParent():void
{
+ if(onceAdded)
+ return;
+ onceAdded = true;
var c:Class;
COMPILE::JS
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/IModalDisplay.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/IModalDisplay.as
new file mode 100644
index 0000000..27199f2
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/IModalDisplay.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.royale.html.beads.plugin
+{
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.utils.UIUtils;
+
+ public interface IModalDisplay
+ {
+ function show(parent:IPopUpHost):void;
+ function hide():void;
+
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/ModalDisplay.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/ModalDisplay.as
new file mode 100644
index 0000000..2ce4db7
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/ModalDisplay.as
@@ -0,0 +1,191 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.royale.html.beads.plugin
+{
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.events.IEventDispatcher;
+
+ public class ModalDisplay extends EventDispatcher implements IBead, IModalDisplay
+ {
+ public function ModalDisplay()
+ {
+ super();
+ }
+ /**
+ * The strand. Do not modify except
+ * via the strand setter. For reading only.
+ *
+ * Because Object.defineProperties in JS
+ * doesn't allow you to just override the setter
+ * (you have to override the getter as well even
+ * if it just calls the super getter) it is
+ * more efficient to expose this variable than
+ * have all of the layers of simple overrides.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var _strand:IStrand;
+
+ /**
+ * Get the strand for this bead
+ *
+ * Override this for whatever else you need to do when
+ * being hooked to the Strand
+ *
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ *
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ /**
+ * The host component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ public function get host():IUIBase
+ {
+ return _strand as IUIBase;
+ }
+
+ /**
+ * Shows the host in a popup host
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function show(parent:IPopUpHost):void
+ {
+ COMPILE::JS
+ {
+ var elem:HTMLElement = host.element;
+ elem.style.position = "fixed";
+ elem.style.left = "50%";
+ elem.style.maxWidth = "100%";
+ elem.style.maxHeight = "100%";
+ if(_maxWidth)
+ elem.style.width = "" + _maxWidth + "px";
+
+ switch(_position)
+ {
+ case "top":
+ elem.style.top = "0px";
+ elem.style.transform = "translate(-50%)";
+ break;
+ case "bottom":
+ elem.style.transform = "translate(-50%)";
+ //TODO calculate bottom
+ break;
+ default:
+ elem.style.top = "50%";
+ elem.style.transform = "translate(-50%, -50%)";
+ }
+
+ }
+ parent.popUpParent.addElement(host);
+ COMPILE::SWF
+ {
+ var parentComp:IUIBase = parent as IUIBase;
+ host.x = (parentComp.width - host.width) / 2;
+ switch(_position){
+ case "top":
+ host.y = 0;
+ break;
+ case "bottom":
+ host.y = parentComp.height - host.height;
+ break;
+ default:
+ host.y = (parentComp.height - host.height) / 2;
+ break;
+ }
+ }
+ host.visible = true;
+ host.dispatchEvent(new Event("modalShown"));
+ }
+
+ /**
+ * Removes the host from the display list
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function hide():void
+ {
+ host.parent.removeElement(host);
+ host.dispatchEvent(new Event("modalHidden"));
+ }
+
+ private var _position:String;
+
+ /**
+ * position can be "top", "bottom" or "center" (defaults to center)
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private function get position():String
+ {
+ return _position;
+ }
+
+ private function set position(value:String):void
+ {
+ _position = value;
+ }
+
+ private var _maxWidth:Number;
+
+ public function get maxWidth():Number
+ {
+ return _maxWidth;
+ }
+
+ public function set maxWidth(value:Number):void
+ {
+ _maxWidth = value;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/ModalOverlay.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/ModalOverlay.as
new file mode 100644
index 0000000..b241871
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/plugin/ModalOverlay.as
@@ -0,0 +1,215 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.royale.html.beads.plugin
+{
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.core.IParent;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.utils.CSSUtils;
+ import org.apache.royale.events.MouseEvent;
+
+ COMPILE::SWF
+ {
+ import flash.display.Shape;
+ }
+
+ public class ModalOverlay extends EventDispatcher implements IBead
+ {
+ public function ModalOverlay()
+ {
+ super();
+ }
+ /**
+ * The strand. Do not modify except
+ * via the strand setter. For reading only.
+ *
+ * Because Object.defineProperties in JS
+ * doesn't allow you to just override the setter
+ * (you have to override the getter as well even
+ * if it just calls the super getter) it is
+ * more efficient to expose this variable than
+ * have all of the layers of simple overrides.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var _strand:IStrand;
+
+ /**
+ * Get the strand for this bead
+ *
+ * Override this for whatever else you need to do when
+ * being hooked to the Strand
+ *
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ *
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ (_strand as IEventDispatcher).addEventListener("modalShown", handleShown);
+ (_strand as IEventDispatcher).addEventListener("modalHidden", handleHidden);
+ }
+
+ /**
+ * The host component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ public function get host():IUIBase
+ {
+ return _strand as IUIBase;
+ }
+ // Application and View are both possible parents,
+ // but there's no single interface for both that will work.
+ private var hostParent:IParent;
+ private var overlay:UIBase;
+ /**
+ * @royaleignorecoercion Object
+ */
+ private function handleShown(ev:Event):void
+ {
+ hostParent = host.parent;
+ var index:int = hostParent.getElementIndex(host);
+ overlay = new UIBase();
+ COMPILE::SWF
+ {
+ overlay.width = (hostParent as Object).width;
+ overlay.height = (hostParent as Object).height;
+ var shape:Shape = new Shape();
+ shape.graphics.beginFill(color,alpha);
+ shape.graphics.drawRect(0, 0, overlay.width, overlay.height);
+ shape.graphics.endFill();
+ overlay.addChild(shape);
+
+ }
+
+ COMPILE::JS
+ {
+ var style:CSSStyleDeclaration = overlay.element.style;
+ style.position = "fixed";
+ style.top = "0px";
+ style.left = "0px";
+ style.width = "100%";
+ style.height = "100%";
+ style.opacity = alpha;
+ style.backgroundColor = CSSUtils.attributeFromColor(color);
+ }
+ hostParent.addElementAt(overlay,index);
+ overlay.addEventListener(MouseEvent.CLICK,handleClick);
+ }
+
+ private function handleClick(ev:MouseEvent):void
+ {
+ ev.preventDefault();
+ ev.stopImmediatePropagation();
+ if(_hideOnClick)
+ {
+ var displayBead:IModalDisplay = host.getBeadByType(IModalDisplay) as IModalDisplay;
+ displayBead.hide();
+ }
+ }
+
+ private function handleHidden(ev:Event):void
+ {
+ hostParent.removeElement(overlay);
+ }
+
+ private var _hideOnClick:Boolean = true;
+
+ /**
+ * If <code>hideOnClick</code> is true, the host will be closed when clicking
+ * on the overlay. default is true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get hideOnClick():Boolean
+ {
+ return _hideOnClick;
+ }
+
+ public function set hideOnClick(value:Boolean):void
+ {
+ _hideOnClick = value;
+ }
+
+ private var _color:uint = 0;
+
+ /**
+ * The color value of the overlay (default black)
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get color():uint
+ {
+ return _color;
+ }
+
+ public function set color(value:uint):void
+ {
+ _color = value;
+ }
+
+ private var _alpha:Number = 0.5;
+
+ /**
+ * The alpha of the overlay in a value of 0 through 1 (default 0.5).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get alpha():Number
+ {
+ return _alpha;
+ }
+
+ public function set alpha(value:Number):void
+ {
+ _alpha = value;
+ }
+ }
+}
\ No newline at end of file