You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by pe...@apache.org on 2017/12/12 20:49:24 UTC
[royale-asjs] branch develop updated: Updated the Slider by moving
the layout into its own layout bead (HorizontalSliderLayout) and fixing
some calculations. Added a VerticalSliderLayout. Mouse tracking on HTML/JS
an issue. VerticalSliderLayout not fully working yet.
This is an automated email from the ASF dual-hosted git repository.
pent 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 3b304a0 Updated the Slider by moving the layout into its own layout bead (HorizontalSliderLayout) and fixing some calculations. Added a VerticalSliderLayout. Mouse tracking on HTML/JS an issue. VerticalSliderLayout not fully working yet.
3b304a0 is described below
commit 3b304a077747dd97da1945a52cf7f9b62084f633
Author: Peter Ent <pe...@apache.org>
AuthorDate: Tue Dec 12 15:49:59 2017 -0500
Updated the Slider by moving the layout into its own layout bead (HorizontalSliderLayout) and fixing some calculations. Added a VerticalSliderLayout. Mouse tracking on HTML/JS an issue. VerticalSliderLayout not fully working yet.
---
.../Basic/src/main/resources/basic-manifest.xml | 2 +
.../projects/Basic/src/main/resources/defaults.css | 12 +-
.../projects/Basic/src/main/royale/BasicClasses.as | 2 +
.../org/apache/royale/html/beads/SliderView.as | 73 ++++-------
.../html/beads/layouts/HorizontalSliderLayout.as | 138 +++++++++++++++++++++
.../html/beads/layouts/VerticalSliderLayout.as | 137 ++++++++++++++++++++
.../apache/royale/html/beads/models/RangeModel.as | 2 +
7 files changed, 312 insertions(+), 54 deletions(-)
diff --git a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
index 7b1f06d..81ad5b3 100644
--- a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
@@ -72,10 +72,12 @@
<component id="VerticalLayout" class="org.apache.royale.html.beads.layouts.VerticalLayout"/>
<component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.html.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
<component id="VerticalFlexLayout" class="org.apache.royale.html.beads.layouts.VerticalFlexLayout"/>
+ <component id="VerticalSliderLayout" class="org.apache.royale.html.beads.layouts.VerticalSliderLayout" />
<component id="HorizontalLayout" class="org.apache.royale.html.beads.layouts.HorizontalLayout"/>
<component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.html.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
<component id="HorizontalFlexLayout" class="org.apache.royale.html.beads.layouts.HorizontalFlexLayout"/>
<component id="HorizontalFlowLayout" class="org.apache.royale.html.beads.layouts.HorizontalFlowLayout" />
+ <component id="HorizontalSliderLayout" class="org.apache.royale.html.beads.layouts.HorizontalSliderLayout" />
<component id="TileLayout" class="org.apache.royale.html.beads.layouts.TileLayout"/>
<component id="ListView" class="org.apache.royale.html.beads.ListView"/>
<component id="AccordionView" class="org.apache.royale.html.beads.AccordionView"/>
diff --git a/frameworks/projects/Basic/src/main/resources/defaults.css b/frameworks/projects/Basic/src/main/resources/defaults.css
index 8f87548..9e4f541 100644
--- a/frameworks/projects/Basic/src/main/resources/defaults.css
+++ b/frameworks/projects/Basic/src/main/resources/defaults.css
@@ -482,8 +482,16 @@ SimpleList
Slider
{
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
- iBeadView: ClassReference("org.apache.royale.html.beads.SliderView");
- iBeadController: ClassReference("org.apache.royale.html.beads.controllers.SliderMouseController");
+ IBeadView: ClassReference("org.apache.royale.html.beads.SliderView");
+ IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.SliderMouseController");
+ position: relative;
+}
+.SliderTrack {
+ position: absolute;
+}
+.SliderThumb {
+ position: absolute;
}
Spinner
diff --git a/frameworks/projects/Basic/src/main/royale/BasicClasses.as b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
index 2bad00e..2112bc3 100644
--- a/frameworks/projects/Basic/src/main/royale/BasicClasses.as
+++ b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
@@ -72,6 +72,8 @@ internal class BasicClasses
import org.apache.royale.html.beads.PanelView; PanelView;
import org.apache.royale.html.supportClasses.PanelLayoutProxy; PanelLayoutProxy;
import org.apache.royale.html.beads.SliderView; SliderView;
+ import org.apache.royale.html.beads.layouts.HorizontalSliderLayout; HorizontalSliderLayout;
+ import org.apache.royale.html.beads.layouts.VerticalSliderLayout; VerticalSliderLayout;
import org.apache.royale.html.beads.PanelWithControlBarView; PanelWithControlBarView;
import org.apache.royale.html.beads.AccordionItemRendererView; AccordionItemRendererView;
COMPILE::SWF
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as
index b3c30c1..a7edf54 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as
@@ -24,18 +24,19 @@ package org.apache.royale.html.beads
}
import org.apache.royale.core.BeadViewBase;
- import org.apache.royale.core.IBead;
- import org.apache.royale.core.IBeadModel;
- import org.apache.royale.core.IBeadView;
- import org.apache.royale.core.IRangeModel;
- import org.apache.royale.core.IStrand;
- import org.apache.royale.core.UIBase;
- import org.apache.royale.core.IUIBase;
- import org.apache.royale.core.ValuesManager;
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.html.Button;
- import org.apache.royale.html.TextButton;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.Button;
+ import org.apache.royale.html.TextButton;
/**
* The SliderView class creates the visual elements of the org.apache.royale.html.Slider
@@ -75,6 +76,12 @@ package org.apache.royale.html.beads
{
super.strand = value;
+ var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
+ if (layout == null) {
+ var klass:Class = ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout");
+ _strand.addBead(new klass() as IBead);
+ }
+
COMPILE::SWF {
var s:UIBase = UIBase(_strand);
@@ -101,9 +108,6 @@ package org.apache.royale.html.beads
host.addElement(_thumb);
}
- host.addEventListener("widthChanged",sizeChangeHandler);
- host.addEventListener("heightChanged",sizeChangeHandler);
-
rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
var rm:IEventDispatcher = rangeModel as IEventDispatcher;
@@ -115,7 +119,7 @@ package org.apache.royale.html.beads
rm.addEventListener("stepSizeChange",modelChangeHandler);
rm.addEventListener("snapIntervalChange",modelChangeHandler);
- sizeChangeHandler(null);
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
}
private var _track:Button;
@@ -155,48 +159,13 @@ package org.apache.royale.html.beads
{
return _strand as UIBase;
}
- /**
- * @private
- */
- private function sizeChangeHandler( event:Event ) : void
- {
- var w:Number = host.width;
- var h:Number = host.height;
-
- _thumb.width = 20;
- _thumb.height = host.height;
-
- // the track is inset 1/2 of the thumbwidth so the thumb can
- // overlay the track on either end with the thumb center being
- // on the track's edge
- _track.width = host.width - _thumb.width;
- _track.height = 5;
- _track.x = _thumb.width/2;
- _track.y = (host.height - _track.height)/2;
-
- setThumbPositionFromValue(rangeModel.value);
- }
/**
* @private
*/
private function modelChangeHandler( event:Event ) : void
{
- setThumbPositionFromValue(rangeModel.value);
- }
-
- /**
- * @private
- */
- private function setThumbPositionFromValue( value:Number ) : void
- {
- var p:Number = (value-rangeModel.minimum)/(rangeModel.maximum-rangeModel.minimum);
- var xloc:Number = (p*_track.width);
- COMPILE::JS
- {
- _thumb.element.style.position = 'absolute';
- }
- _thumb.x = xloc;
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
}
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/HorizontalSliderLayout.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/HorizontalSliderLayout.as
new file mode 100644
index 0000000..3c64316
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/HorizontalSliderLayout.as
@@ -0,0 +1,138 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.ISliderView;
+
+ /**
+ * Use the HorizontalSliderLayout with a Slider to orient the Slider
+ * horizontally.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public class HorizontalSliderLayout implements IBeadLayout
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function HorizontalSliderLayout()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @see org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ host.addEventListener("layoutNeeded", performLayout);
+
+ host.addEventListener("widthChanged",performLayout);
+ host.addEventListener("heightChanged",performLayout);
+ }
+
+ /**
+ * @private
+ */
+ private function performLayout(event:Event):void
+ {
+ layout();
+ }
+
+ /**
+ * @private
+ */
+ public function get host():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ /**
+ * Performs the layout (size and positioning) of the elements of the slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function layout():Boolean
+ {
+ var viewBead:ISliderView = host.view as ISliderView;
+ if (viewBead == null) {
+ return false;
+ }
+
+ var useWidth:Number = host.width;
+ if (isNaN(useWidth)) {
+ useWidth = 100;
+ }
+ var useHeight:Number = host.height;
+ if (isNaN(useHeight)) {
+ useHeight = 25;
+ }
+ var square:Number = Math.min(useWidth, useHeight);
+ var trackHeight:Number = useHeight / 3;
+
+ var thumb:IUIBase = viewBead.thumb as IUIBase;
+ thumb.width = square;
+ thumb.height = square;
+
+ var track:IUIBase = viewBead.track as IUIBase;
+ track.x = square/2;
+ track.y = trackHeight; // 1/3 of the totalHeight
+ track.width = useWidth - square;
+ track.height = trackHeight;
+
+ // determine the thumb position from the model information
+ var model:IRangeModel = host.model as IRangeModel;
+ var value:Number = model.value;
+ if (value < model.minimum) value = model.minimum;
+ if (value > model.maximum) value = model.maximum;
+ var p:Number = (value-model.minimum)/(model.maximum-model.minimum);
+ var xloc:Number = p * (useWidth - square);
+ thumb.x = xloc;
+ thumb.y = 0;
+
+ return true;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/VerticalSliderLayout.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/VerticalSliderLayout.as
new file mode 100644
index 0000000..4af850e
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/VerticalSliderLayout.as
@@ -0,0 +1,137 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.html.beads.ISliderView;
+
+ /**
+ * Use the VerticalSliderLayout with a Slider to orient the
+ * slider vertically.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public class VerticalSliderLayout implements IBeadLayout
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function VerticalSliderLayout()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @see org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ host.addEventListener("layoutNeeded", performLayout);
+
+ host.addEventListener("widthChanged",performLayout);
+ host.addEventListener("heightChanged",performLayout);
+ }
+
+ /**
+ * @private
+ */
+ private function performLayout(event:Event):void
+ {
+ layout();
+ }
+
+ /**
+ * @private
+ */
+ public function get host():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ /**
+ * Performs the layout (size and positioning) of the Slide elements.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function layout():Boolean
+ {
+ var viewBead:ISliderView = host.view as ISliderView;
+ if (viewBead == null) {
+ return false;
+ }
+
+ var useWidth:Number = host.width;
+ if (isNaN(useWidth)) {
+ useWidth = 25;
+ }
+ var useHeight:Number = host.height;
+ if (isNaN(useHeight)) {
+ useHeight = 100;
+ }
+ var square:Number = Math.min(useWidth, useHeight);
+ var trackWidth:Number = useWidth / 3;
+
+ var thumb:IUIBase = viewBead.thumb as IUIBase;
+ thumb.width = square;
+ thumb.height = square;
+
+ var track:IUIBase = viewBead.track as IUIBase;
+ track.y = square/2;
+ track.x = trackWidth; // 1/3 of the totalWidth
+ track.height = useHeight - square;
+ track.width = trackWidth;
+
+ // determine the thumb position from the model information
+ var model:IRangeModel = host.model as IRangeModel;
+ var value:Number = model.value;
+ if (value < model.minimum) value = model.minimum;
+ if (value > model.maximum) value = model.maximum;
+ var p:Number = (value-model.minimum)/(model.maximum-model.minimum);
+ var yloc:Number = p * (useHeight - square);
+ thumb.y = yloc;
+ thumb.x = 0;
+
+ return true;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/RangeModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/RangeModel.as
index 22c6abe..5c8cbf9 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/RangeModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/RangeModel.as
@@ -85,6 +85,7 @@ package org.apache.royale.html.beads.models
if (value != _maximum)
{
_maximum = value;
+ if (_value > _maximum) _value = _maximum;
dispatchEvent(new Event("maximumChange"));
}
}
@@ -111,6 +112,7 @@ package org.apache.royale.html.beads.models
if (value != _minimum)
{
_minimum = value;
+ if (_value < _minimum) _value = _minimum;
dispatchEvent(new Event("minimumChange"));
}
}
--
To stop receiving notification emails like this one, please contact
['"commits@royale.apache.org" <co...@royale.apache.org>'].