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 c3100fc jewel-wizard: support transitions navigating from a step to
any other one in the wizard, also add a example of requesting navigation steps
from a page
c3100fc is described below
commit c3100fcc5f64222842819f991a94fbef8b99ba16
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Apr 8 17:45:41 2019 +0200
jewel-wizard: support transitions navigating from a step to any other one
in the wizard, also add a example of requesting navigation steps from a page
---
.../src/main/royale/WizardPlayGround.mxml | 29 +++++++++++++++++++--
.../royale/org/apache/royale/jewel/WizardPage.as | 30 ++++++----------------
.../jewel/beads/controllers/WizardController.as | 26 +++++++++++++++++++
.../apache/royale/jewel/beads/views/WizardView.as | 6 +----
4 files changed, 62 insertions(+), 29 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
index 46dc0b7..7454c5c 100644
--- a/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/WizardPlayGround.mxml
@@ -27,11 +27,30 @@ limitations under the License.
<![CDATA[
import org.apache.royale.events.Event;
import org.apache.royale.jewel.Button;
+ import org.apache.royale.jewel.events.WizardEvent;
public function getStepLabel(step:WizardStep):String
{
return step.stepLabel;
}
+
+ public function goToPage(num:int):void
+ {
+ var navEvent:WizardEvent = new
WizardEvent(WizardEvent.REQUEST_NAVIGATE_TO_STEP, 'page' + num);
+ page3.dispatchEvent(navEvent);
+ }
+
+ public function goToNextPage():void
+ {
+ var navEvent:WizardEvent = new
WizardEvent(WizardEvent.REQUEST_NAVIGATE_NEXT_STEP);
+ page3.dispatchEvent(navEvent);
+ }
+
+ public function goToPreviousPage():void
+ {
+ var navEvent:WizardEvent = new
WizardEvent(WizardEvent.REQUEST_NAVIGATE_PREVIOUS_STEP);
+ page3.dispatchEvent(navEvent);
+ }
]]>
</fx:Script>
@@ -40,7 +59,7 @@ limitations under the License.
</j:beads>
<j:Card width="600">
- <j:Wizard id="wizard" width="100%" height="500"
title="{getStepLabel(wizard.currentStep)}" activateEffect="false">
+ <j:Wizard id="wizard" width="100%" height="500"
title="{getStepLabel(wizard.currentStep)}" activateEffect="true">
<j:previousButton>
<j:Group>
<j:IconButton
emphasis="{Button.SECONDARY}">
@@ -90,7 +109,7 @@ limitations under the License.
</j:WizardPage>
- <j:WizardPage name="page3">
+ <j:WizardPage name="page3" localId="page3">
<views:step>
<j:WizardStep name="page3"
previousStep="page2" nextStep="page4" stepLabel="Page 3"/>
</views:step>
@@ -100,6 +119,12 @@ limitations under the License.
<j:VerticalCenteredLayout
gap="9"/>
</j:beads>
<html:H1 text="Page 3"/>
+ <j:Button text="Go To Page 1"
emphasis="primary" click="goToPage(1);"/>
+ <j:Button text="Go To Page 6"
emphasis="primary" click="goToPage(6);"/>
+ <j:HGroup gap="3">
+ <j:Button text="Go To Previous"
emphasis="emphasized" click="goToPreviousPage();"/>
+ <j:Button text="Go To Next"
emphasis="emphasized" click="goToNextPage();"/>
+ </j:HGroup>
</j:Group>
</j:WizardPage>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
index 6e98b20..bec33b6 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
@@ -87,6 +87,9 @@ package org.apache.royale.jewel
*/
public class WizardPage extends SectionContent
{
+ public static const LEFT_EFFECT:String = "slideLeft";
+ public static const RIGHT_EFFECT:String = "slideRight";
+
/**
* constructor.
*
@@ -190,7 +193,6 @@ package org.apache.royale.jewel
{
dispatchEvent(new Event("exitPage"));
exitPage();
- moveEffect(model.activateEffect, "slideRight",
true);
}
if(model.currentStep.previousStep == step.name)
{
@@ -198,22 +200,9 @@ package org.apache.royale.jewel
model.showNextButton = showNextButton;
dispatchEvent(new Event("enterPage"));
enterPage();
- moveEffect(model.activateEffect, "slideLeft",
false);
- }
- }
-
- public function moveEffect(activate:Boolean, direction:String,
addclass:Boolean = true):void
- {
- if(activate)
- {
- // COMPILE::JS
- // {
- // element.addEventListener(transitionEvent,
transitionendHandler);
- // }
- addclass ? addClass(direction) :
removeClass(direction);
}
}
-
+
// public function transitionendHandler(event:Event):void
// {
// if(event["propertyName"] == "opacity")
@@ -243,7 +232,6 @@ package org.apache.royale.jewel
{
dispatchEvent(new Event("exitPage"));
exitPage();
- moveEffect(model.activateEffect, "slideLeft",
true);
}
if(model.currentStep.nextStep == step.name)
{
@@ -251,7 +239,6 @@ package org.apache.royale.jewel
model.showNextButton = showNextButton;
dispatchEvent(new Event("enterPage"));
enterPage();
- moveEffect(model.activateEffect, "slideRight",
false);
}
}
@@ -302,17 +289,16 @@ package org.apache.royale.jewel
{
switch (event.type){
case WizardEvent.REQUEST_NAVIGATE_TO_STEP:
- wizard.showPage(event.stepName);
+ var step:WizardStep =
wizard.findStepByName(event.stepName);
+ model.currentStep = step;
break;
case WizardEvent.REQUEST_NAVIGATE_PREVIOUS_STEP:
wizard.dispatchEvent(new Event("goToPreviousStep"));
- wizard.currentStep =
wizard.findStepByName(wizard.currentStep.previousStep);
- // wizard.dispatchEvent(new Event("change"));
+ model.currentStep =
wizard.findStepByName(wizard.currentStep.previousStep);
break;
case WizardEvent.REQUEST_NAVIGATE_NEXT_STEP:
wizard.dispatchEvent(new Event("goToNextStep"));
- wizard.currentStep =
wizard.findStepByName(wizard.currentStep.nextStep);
- // wizard.dispatchEvent(new Event("change"));
+ model.currentStep =
wizard.findStepByName(wizard.currentStep.nextStep);
break;
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as
index f5c2b35..75c8deb 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as
@@ -93,6 +93,7 @@ package org.apache.royale.jewel.beads.controllers
*/
protected function handleStepChange(event:Event):void
{
+ setUpEffects();
wizard.content.selectedContent = model.currentStep.name;
wizard.title = model.currentStep.stepLabel;
}
@@ -171,5 +172,30 @@ package org.apache.royale.jewel.beads.controllers
return null;
}
+
+ public function setUpEffects():void
+ {
+ if(model.activateEffect)
+ {
+ model.currentStep.page.removeClass(WizardPage.LEFT_EFFECT);
+ model.currentStep.page.removeClass(WizardPage.RIGHT_EFFECT);
+
+ var previous:WizardStep = findStep(model.currentStep, true);
+ while(previous != null)
+ {
+ previous.page.removeClass(WizardPage.RIGHT_EFFECT);
+
previous.page.addClass(WizardPage.LEFT_EFFECT);
+ previous = findStep(previous, true);
+ }
+
+ var next:WizardStep = findStep(model.currentStep, false);
+ while(next != null)
+ {
+ next.page.removeClass(WizardPage.LEFT_EFFECT);
+ next.page.addClass(WizardPage.RIGHT_EFFECT);
+ next = findStep(next, false);
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
index 9174ae4..47f8b7b 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
@@ -304,9 +304,6 @@ package org.apache.royale.jewel.beads.views
*/
protected function stepChangeAction():void
{
- model.currentStep.page.removeClass("slideLeft");
- model.currentStep.page.removeClass("slideRight");
-
if(model.activateEffect) {
COMPILE::JS
{
@@ -317,9 +314,8 @@ package org.apache.royale.jewel.beads.views
previousButton.visible =
model.showPreviousButton && model.currentStep && model.currentStep.previousStep
!= null;
nextButton.visible = model.showNextButton &&
model.currentStep && model.currentStep.nextStep != null;
}
-
}
-
+
protected function setupContentAreaLayout():void
{
