You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/07/31 22:54:43 UTC
[royale-asjs] branch develop updated: Good example to show
add/remove beads and layout changes in AS3 code at runtime. This will be a
blog example soon.
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 a722589 Good example to show add/remove beads and layout changes in AS3 code at runtime. This will be a blog example soon.
a722589 is described below
commit a72258995db9c6891f2887bbe400012963bcbc9c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Aug 1 00:54:38 2018 +0200
Good example to show add/remove beads and layout changes in AS3 code at runtime. This will be a blog example soon.
---
.../src/main/royale/AlertPlayGround.mxml | 46 +++++++++++++++++++-
.../projects/Jewel/src/main/resources/defaults.css | 3 ++
.../royale/jewel/beads/layouts/StyledLayoutBase.as | 33 ++++++++++++++
.../apache/royale/jewel/beads/views/AlertView.as | 50 ++++++++++++++++------
.../Jewel/src/main/sass/components/_layout.sass | 4 ++
5 files changed, 123 insertions(+), 13 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
index c26bd83..1f7ec8f 100644
--- a/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
@@ -26,13 +26,50 @@ limitations under the License.
import org.apache.royale.jewel.Alert;
import org.apache.royale.events.CloseEvent;
import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.jewel.beads.views.AlertView;
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.jewel.CheckBox;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayout;
// Event handler function uses a static method to show
// a pop-up window with the title, message, and requested buttons.
private function clickHandler(event:MouseEvent):void {
var alert:Alert = Alert.show("Do you want to save your changes?", "Save Changes", 3);
alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);
- // alert.height = 300;
+ }
+
+ private var alert:Alert;
+ private var check:CheckBox;
+ // changing ControlBar's Buttons Layout
+ private function clickHandler2(event:MouseEvent):void {
+ alert = Alert.show("This example shows access to AlertView and ControlBar to expand Buttons layout and change defaults. The height of the alert is set up to 300px too.", "Save Changes", 3);
+ alert.height = 300;
+
+ check = new CheckBox();
+ check.selected = true;
+ check.text = "Buttons must fill control bar space";
+ check.addEventListener(Event.CHANGE, expandButtons);
+
+ expandButtons();
+ }
+
+ private function expandButtons(event:Event = null):void {
+ var alertView:AlertView = alert.getBeadByType(IBeadView) as AlertView;
+
+ var verticalLayout = new VerticalLayout();
+ verticalLayout.gap = 3;
+ alertView.content.addBead(verticalLayout);
+
+ if(event == null)
+ {
+ alertView.content.addElement(check);
+ }
+
+ var layout:HorizontalLayout = alertView.controlBar.getBeadByType(IBeadLayout) as HorizontalLayout;
+ layout.itemsExpand = check.selected;
}
// Event handler function for displaying the selected Alert button.
@@ -48,14 +85,21 @@ limitations under the License.
<j:Card width="350">
<html:H3 text="Jewel Alert"/>
+ <!-- Alert 1-->
<j:Label text="Click the button below to display a simple Alert window"
multiline="true"/>
<j:Button text="Click Me" click="Alert.show('This is an Alert component example that shows a label text and the default OK button.', 'Alert Example')"/>
+ <!-- Alert 2-->
<j:Label text="Click the button below to display an Alert window and capture the button pressed by the user."
multiline="true"/>
<j:Button text="Click Me" click="clickHandler(event)"/>
<j:Label id="status"/>
+
+ <!-- Alert 3 (Complex Example)-->
+ <j:Label text="This is a complex example that add and retrieve beads at runtime. Click the button below to display an Alert window that add content and make changes in some layout parts."
+ multiline="true"/>
+ <j:Button text="Click Me" click="clickHandler2(event)"/>
</j:Card>
</j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 50358c6..cfa7c54 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -468,6 +468,9 @@ j|Label {
.layout.itemsSpaceAround {
justify-content: space-around;
}
+.layout.itemsExpand > * {
+ flex: 1 0 auto !important;
+}
/* Horizontal */
.layout.horizontal {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
index fa07672..2648d66 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
@@ -158,5 +158,38 @@ package org.apache.royale.jewel.beads.layouts
}
}
}
+
+ private var _itemsExpand:Boolean = false;
+ /**
+ * A boolean flag to activate "itemsExpand" effect selector.
+ * Make items resize to the fill all container space
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get itemsExpand():Boolean
+ {
+ return _itemsExpand;
+ }
+
+ public function set itemsExpand(value:Boolean):void
+ {
+ if (_itemsExpand != value)
+ {
+ _itemsExpand = value;
+ COMPILE::JS
+ {
+ if(_itemsExpand)
+ {
+ hostClassList.add("itemsExpand");
+ } else
+ {
+ hostClassList.remove("itemsExpand");
+ }
+ }
+ }
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index d7af729..bcc7f77 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -76,15 +76,45 @@ package org.apache.royale.jewel.beads.views
protected var alertModel:IAlertModel;
- protected var titleBar:TitleBar;
- protected var content:Group;
- protected var label:Label;
- protected var controlBar:UIBase;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var titleBar:TitleBar;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var content:Group;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var label:Label;
- protected var okButton:Button;
- protected var cancelButton:Button;
- protected var yesButton:Button;
- protected var noButton:Button;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var controlBar:UIBase;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var okButton:Button;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var cancelButton:Button;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var yesButton:Button;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var noButton:Button;
/**
* @copy org.apache.royale.core.IBead#strand
@@ -131,10 +161,6 @@ package org.apache.royale.jewel.beads.views
titleBar.title = alertModel.title;
IParent(_strand).addElement(titleBar);
- // var layout:HorizontalLayout = titleBar.getBeadByType(IBeadLayout) as HorizontalLayout;
- // layout.itemsHorizontalAlign = "itemsSpaceBetween";
- // layout.gap = 2;
-
// Text
content = new Group();
content.typeNames = "content";
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 1adc22f..f1a95f7 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -59,6 +59,10 @@ $gap: 0px
&.itemsSpaceAround
justify-content: space-around
+ &.itemsExpand
+ > *
+ flex: 1 0 auto !important
+
/* Horizontal */
.layout
&.horizontal