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 2019/03/21 23:05:31 UTC
[royale-asjs] branch feature/jewel-datefield-year-month updated:
jewel-datechooser: support 3 view states: calendar,
year and month instead of just one, to make selecction of dates more usable
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-datefield-year-month
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/jewel-datefield-year-month by this push:
new b9e8216 jewel-datechooser: support 3 view states: calendar, year and month instead of just one, to make selecction of dates more usable
b9e8216 is described below
commit b9e8216a7ac1cb74b671cdbe6c3f1eb5003cb46c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 22 00:05:24 2019 +0100
jewel-datechooser: support 3 view states: calendar, year and month instead of just one, to make selecction of dates more usable
---
.../controllers/DateChooserMouseController.as | 22 +-
.../royale/jewel/beads/models/DateChooserModel.as | 98 ++++++--
.../royale/jewel/beads/views/DateChooserView.as | 256 +++++++++++++++------
.../royale/jewel/beads/views/DateFieldView.as | 14 +-
.../royale/jewel/itemRenderers/DateItemRenderer.as | 14 +-
5 files changed, 306 insertions(+), 98 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
index 58d0ef1..a15e411 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
@@ -70,10 +70,11 @@ package org.apache.royale.jewel.beads.controllers
model = _strand.getBeadByType(IBeadModel) as DateChooserModel;
var view:DateChooserView = value.getBeadByType(IBeadView) as DateChooserView;
- view.prevMonthButton.addEventListener(MouseEvent.CLICK, prevMonthClickHandler);
- view.nextMonthButton.addEventListener(MouseEvent.CLICK, nextMonthClickHandler);
+ view.previousButton.addEventListener(MouseEvent.CLICK, previousButtonClickHandler);
+ view.nextButton.addEventListener(MouseEvent.CLICK, nextButtonClickHandler);
+ view.viewSelector.addEventListener(MouseEvent.CLICK, viewSelectorClickHandler);
- IEventDispatcher(view.daysTable).addEventListener(Event.CHANGE, tableHandler);
+ IEventDispatcher(view.table).addEventListener(Event.CHANGE, tableHandler);
}
private var model:DateChooserModel;
@@ -87,7 +88,7 @@ package org.apache.royale.jewel.beads.controllers
/**
* @private
*/
- private function prevMonthClickHandler(event:MouseEvent):void
+ private function previousButtonClickHandler(event:MouseEvent):void
{
event.preventDefault();
@@ -105,7 +106,7 @@ package org.apache.royale.jewel.beads.controllers
/**
* @private
*/
- private function nextMonthClickHandler(event:MouseEvent):void
+ private function nextButtonClickHandler(event:MouseEvent):void
{
event.preventDefault();
@@ -119,6 +120,15 @@ package org.apache.royale.jewel.beads.controllers
model.displayedMonth = month;
model.displayedYear = year;
}
-
+
+ /**
+ * @private
+ */
+ private function viewSelectorClickHandler(event:MouseEvent):void
+ {
+ event.preventDefault();
+
+ model.viewState = model.viewState == 0 ? 1 : model.viewState == 1 ? 2 : 0;
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
index 392aed1..2663115 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
@@ -60,11 +60,36 @@ package org.apache.royale.jewel.beads.models
private var _dayNames:Array = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
private var _monthNames:Array = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
- private var _days:Array;
private var _displayedYear:Number;
private var _displayedMonth:Number;
private var _firstDayOfWeek:Number = 0;
private var _selectedDate:Date;
+ private var _viewState:int = 0;
+
+ private var _days:Array = new Array(42);
+ private var _years:Array = new Array(24);
+ private var _months:Array = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
+
+ /**
+ * 0 - days (calendar view): Select a day in a month calendar view, can navigate by months
+ * 1 - years (year view): Select a year from a list of years, can navigate by group of years
+ * 2 - months (months view): Select a month from the list of all months, there is no navigation
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function get viewState():int
+ {
+ return _viewState;
+ }
+ public function set viewState(value:int):void
+ {
+ _viewState = value;
+ updateCalendar();
+ dispatchEvent( new Event("viewStateChanged") );
+ }
/**
* An array of strings used to name the days of the week with Sunday being the
@@ -178,6 +203,30 @@ package org.apache.royale.jewel.beads.models
dispatchEvent( new Event("daysChanged") );
}
}
+
+ public function get years():Array
+ {
+ return _years;
+ }
+ public function set years(value:Array):void
+ {
+ if (value != _years) {
+ _years = value;
+ dispatchEvent( new Event("yearsChanged") );
+ }
+ }
+
+ public function get months():Array
+ {
+ return _months;
+ }
+ public function set months(value:Array):void
+ {
+ if (value != _months) {
+ _months = value;
+ dispatchEvent( new Event("monthsChanged") );
+ }
+ }
/**
* The currently selected date or null if no date has been selected.
@@ -220,20 +269,41 @@ package org.apache.royale.jewel.beads.models
* @private
*/
private function updateCalendar():void
- {
- var firstDay:Date = new Date(displayedYear, displayedMonth, 1);
-
- _days = new Array(42);
-
- // skip to the first day and renumber to the last day of the month
- var i:int = firstDay.getDay() - firstDayOfWeek;
- var dayNumber:int = 1;
- var numDays:Number = numberOfDaysInMonth(displayedMonth, displayedYear);
-
- while(dayNumber <= numDays)
+ {
+ var i:int;
+ if(viewState == 0)
{
- _days[i++] = new Date(displayedYear, displayedMonth, dayNumber++);
- }
+ var firstDay:Date = new Date(displayedYear, displayedMonth, 1);
+ // skip to the first day and renumber to the last day of the month
+ i = firstDay.getDay() - firstDayOfWeek;
+ var dayNumber:int = 1;
+ var numDays:Number = numberOfDaysInMonth(displayedMonth, displayedYear);
+
+ while(dayNumber <= numDays)
+ {
+ _days[i++] = new Date(displayedYear, displayedMonth, dayNumber++);
+ }
+ } else if(viewState == 1)
+ {
+ i = 0;
+ var yearNumber:int = new Date().getFullYear();
+ // trace("yearNumber",yearNumber)
+ var numYears:Number = 24;
+ while(i < numYears)
+ {
+ // trace(i," - ",(yearNumber + i));
+ _years[i++] = new Date(yearNumber + i, 0, 1);
+ }
+ } else
+ {
+ i = 0;
+ var monthNumber:int = new Date().getMonth();
+ var numMonths:Number = 12;
+ while(i < numMonths)
+ {
+ _months[i++] = new Date(displayedYear, monthNumber++, 1);
+ }
+ }
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
index 2f0eda8..2558f37 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
@@ -69,6 +69,8 @@ package org.apache.royale.jewel.beads.views
model = loadBeadFromValuesManager(IBeadModel, "iBeadModel", _strand) as DateChooserModel;
+ model.addEventListener("viewStateChanged", handleModelChange);//viewStateModelChange);
+
model.addEventListener("firstDayOfWeekChanged", handleModelChange);
model.addEventListener("dayNamesChanged", handleModelChange);
model.addEventListener("displayedMonthChanged", handleModelChange);
@@ -88,7 +90,7 @@ package org.apache.royale.jewel.beads.views
return _strand as UIBase;
}
- private var _monthLabel:Button;
+ private var _viewSelector:Button;
/**
* The button to display month and year
* and select from a list of years
@@ -98,51 +100,51 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get monthLabel():Button
+ public function get viewSelector():Button
{
- return _monthLabel;
+ return _viewSelector;
}
- private var _prevMonthButton:Button;
+ private var _previousButton:Button;
/**
- * The button that causes the previous month to be displayed by the DateChooser.
+ * The button that causes the previous month or year to be displayed by the DateChooser.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get prevMonthButton():Button
+ public function get previousButton():Button
{
- return _prevMonthButton;
+ return _previousButton;
}
- private var _nextMonthButton:Button;
+ private var _nextButton:Button;
/**
- * The button that causes the next month to be displayed by the DateChooser.
+ * The button that causes the next month or year to be displayed by the DateChooser.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get nextMonthButton():Button
+ public function get nextButton():Button
{
- return _nextMonthButton;
+ return _nextButton;
}
- private var _daysTable:DateChooserTable;
+ private var _table:DateChooserTable;
/**
- * The DateChooserTable of days to display
+ * The DateChooserTable of days or years to display
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get daysTable():DateChooserTable
+ public function get table():DateChooserTable
{
- return _daysTable;
+ return _table;
}
/**
@@ -151,30 +153,27 @@ package org.apache.royale.jewel.beads.views
private function createChildren():void
{
// HEADER BUTTONS
- _monthLabel = new Button();
- _monthLabel.className = "monthLabel";
+ _viewSelector = new Button();
+ _viewSelector.className = "viewSelector";
- _prevMonthButton = new Button();
- _prevMonthButton.text = "<";
- _prevMonthButton.className = "prevMonthButton";
+ _previousButton = new Button();
+ _previousButton.text = "<";
+ _previousButton.className = "previousButton";
- _nextMonthButton = new Button();
- _nextMonthButton.text = ">";
- _nextMonthButton.className = "nextMonthButton";
-
- // DAYS
- createColumns();
+ _nextButton = new Button();
+ _nextButton.text = ">";
+ _nextButton.className = "nextButton";
- _daysTable = new DateChooserTable();
+ _table = new DateChooserTable();
COMPILE::SWF {
- _daysTable.percentWidth = 100;
+ _table.percentWidth = 100;
}
- getHost().addElement(_daysTable, false);
- // var controller:TableCellSelectionMouseController = _daysTable.getBeadByType(IBeadController) as TableCellSelectionMouseController;
- // _daysTable.removeBead(controller);
- // _daysTable.addBead(new DateChooserTableCellSelectionMouseController());
+ getHost().addElement(_table, false);
+ // var controller:TableCellSelectionMouseController = _table.getBeadByType(IBeadController) as TableCellSelectionMouseController;
+ // _table.removeBead(controller);
+ // _table.addBead(new DateChooserTableCellSelectionMouseController());
- IEventDispatcher(_daysTable).dispatchEvent( new Event("itemsCreated") );
+ IEventDispatcher(_table).dispatchEvent( new Event("itemsCreated") );
model.addEventListener("selectedDateChanged", selectionChangeHandler);
createButtonsRow();
@@ -184,36 +183,82 @@ package org.apache.royale.jewel.beads.views
private function createButtonsRow():void
{
- var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView;
+ var view:TableView = _table.getBeadByType(IBeadView) as TableView;
buttonsRow = new TableRow();
var tableHeader:TableHeaderCell = new TableHeaderCell();
tableHeader.className = "buttonsRow";
- tableHeader.addElement(_monthLabel);
+ tableHeader.addElement(_viewSelector);
tableHeader.expandColumns = 5;
buttonsRow.addElement(tableHeader);
tableHeader= new TableHeaderCell();
tableHeader.className = "buttonsRow";
- tableHeader.addElement(_prevMonthButton);
+ tableHeader.addElement(_previousButton);
buttonsRow.addElement(tableHeader);
tableHeader= new TableHeaderCell();
tableHeader.className = "buttonsRow";
- tableHeader.addElement(_nextMonthButton);
+ tableHeader.addElement(_nextButton);
buttonsRow.addElement(tableHeader);
}
+ // cycle days array for offsetting when change firstDayOfWeek
+ private function cycleArray(array:Array, index:Number, n:Number):Number
+ {
+ return ((index + n) % array.length + array.length) % array.length;
+ }
+
+ /**
+ * @private
+ */
+ private function updateDisplay():void
+ {
+ viewSelectorDisplay();
+
+ createColumns(); // do this only if change view state from 0 to 1-2 or viceversa
+
+ daysDisplay();
+
+ fillTable();
+
+ selectCurrentDate();
+ }
+
+ private function viewSelectorDisplay():void
+ {
+ if(model.viewState == 0)
+ {
+ // display "FEB 2019"
+ _viewSelector.text = model.monthNames[model.displayedMonth] + " " + String(model.displayedYear);
+ } else if(model.viewState == 1)
+ {
+ // display "2016-2039"
+ _viewSelector.text = String(model.displayedYear - 10) + "-" + String(model.displayedYear + 10);
+ } else
+ {
+ // display "2017"
+ _viewSelector.text = String(model.displayedYear);
+ }
+ }
+
private var columns:Array;
- private var dayNamesInit:Boolean;
+ private var refreshColumns:Boolean;
+ public const NUM_COLS_DAYS:int = 7;
+ public const NUM_COLS_YEARS_OR_MONTHS:int = 4;
+ /**
+ * Create 7 columns for calendar view (viewState = 0)
+ * or 4 columns for years or months view (viewState = 1 or 2)
+ */
public function createColumns():void
{
- if(!dayNamesInit)
+ var numCols:int = model.viewState == 0 ? NUM_COLS_DAYS : NUM_COLS_YEARS_OR_MONTHS;
+ if(!refreshColumns)
{
columns = [];
var dateItemRenderer:ClassFactory = new ClassFactory(DateItemRenderer);
- for (var i:int = 0; i < 7; i++)
+ for (var i:int = 0; i < numCols; i++)
{
var column:TableColumn = new TableColumn();
column.dataField = "d"+i;
@@ -221,50 +266,105 @@ package org.apache.royale.jewel.beads.views
column.itemRenderer = dateItemRenderer;
columns.push(column);
}
-
- dayNamesInit = true;
+ //refreshColumns = true;
}
}
- // cycle days array for offsetting when change firstDayOfWeek
- private function cycleArray(array:Array, index:Number, n:Number):Number
- {
- return ((index + n) % array.length + array.length) % array.length;
- }
/**
- * @private
+ * Only display days if viewState is calendar view (== 0)
*/
- private function updateDisplay():void
+ private function daysDisplay():void
{
- _monthLabel.text = model.monthNames[model.displayedMonth] + " " + String(model.displayedYear);
-
- var len:int = columns.length;
- for(var index:int = 0; index < len; index++)
+ var index:int, column:TableColumn;
+ if(model.viewState == 0)
{
- var column:TableColumn = columns[index];
- column.columnLabelAlign = "center";
- column.label = model.dayNames[cycleArray(model.dayNames, index, model.firstDayOfWeek)];
+ for(index = 0; index < NUM_COLS_DAYS; index++)
+ {
+ column = columns[index];
+ column.columnLabelAlign = "center";
+ column.label = model.dayNames[cycleArray(model.dayNames, index, model.firstDayOfWeek)];
+ }
+ _table.columns = columns;
+ } else
+ { // viewState == 1 or 2
+ for(index = 0; index < NUM_COLS_YEARS_OR_MONTHS; index++)
+ {
+ column = columns[index];
+ // column.columnLabelAlign = "center";
+ column.label = null; // all column labels == null means hide header
+ }
+ _table.columns = columns;
}
+ }
- _daysTable.columns = columns;
-
- var currrentMonth:Array = [];
- var dayIndex:int = 0;
- for(var i:int = 0; i < model.days.length/7; i++)
+ /**
+ * Only display days if viewState is calendar view (== 0)
+ */
+ private function fillTable():void
+ {
+ var i:int, j:int;
+ if(model.viewState == 0)
{
- currrentMonth[i] = {};
- for(var j:int = 0; j < columns.length; j++)
+ // fill table content with all current month days
+ var currrentMonth:Array = [];
+ var dayIndex:int = 0;
+ for(i = 0; i < model.days.length/NUM_COLS_DAYS; i++)
+ {
+ currrentMonth[i] = {};
+ for(j = 0; j < columns.length; j++)
+ {
+ currrentMonth[i]["d"+j] = model.days[dayIndex];
+ dayIndex++;
+ }
+ }
+ _table.dataProvider = new ArrayList(currrentMonth);
+ } else if(model.viewState == 1) {
+ trace("model.years",model.years);
+ var currrentYearGroup:Array = [];
+ var yearIndex:int = 0;
+ for(i = 0; i < model.years.length/NUM_COLS_YEARS_OR_MONTHS; i++)
+ {
+ currrentYearGroup[i] = {};
+ for(j = 0; j < columns.length; j++)
+ {
+ trace(yearIndex, model.years[yearIndex]);
+ currrentYearGroup[i]["d"+j] = model.years[yearIndex];
+ yearIndex++;
+ }
+ }
+ _table.dataProvider = new ArrayList(currrentYearGroup);
+ } else {
+ var currrentYear:Array = [];
+ var monthIndex:int = 0;
+ for(i = 0; i < model.months.length/NUM_COLS_YEARS_OR_MONTHS; i++)
{
- currrentMonth[i]["d"+j] = model.days[dayIndex];
- dayIndex++;
+ trace("model.months",model.months);
+ currrentYear[i] = {};
+ for(j = 0; j < columns.length; j++)
+ {
+ trace(monthIndex, model.months[monthIndex]);
+ currrentYear[i]["d"+j] = model.months[monthIndex];
+ monthIndex++;
+ }
}
+ _table.dataProvider = new ArrayList(currrentYear);
}
- _daysTable.dataProvider = new ArrayList(currrentMonth);
-
- var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView;
+
+ // first row with nav buttons
+ var view:TableView = _table.getBeadByType(IBeadView) as TableView;
view.thead.addElementAt(buttonsRow, 0, false);
-
- _daysTable.selectedIndex = model.getIndexForSelectedDate();
+ }
+
+ private function selectCurrentDate():void
+ {
+ if(model.viewState == 0)
+ {
+ _table.selectedIndex = model.getIndexForSelectedDate();
+ } else if(model.viewState == 1) {
+
+ } else {
+
+ }
}
/**
@@ -285,5 +385,21 @@ package org.apache.royale.jewel.beads.views
{
updateDisplay();
}
+
+ /**
+ * @private
+ */
+ // private function viewStateModelChange(event:Event):void
+ // {
+ // changeDisplay();
+ // }
+
+ /**
+ * @private
+ */
+ // private function changeDisplay():void
+ // {
+
+ // }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
index a37635e..b119b2c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
@@ -239,7 +239,7 @@ package org.apache.royale.jewel.beads.views
var host:IPopUpHost = UIUtils.findPopUpHost(getHost()) as IPopUpHost;
host.popUpParent.addElement(_popUp);
// viewBead.popUp is DateChooser that fills 100% of browser window-> We want Table inside
- daysTable = (popUp.view as DateChooserView).daysTable;
+ table = (popUp.view as DateChooserView).table;
// rq = requestAnimationFrame(prepareForPopUp); // not work in Chrome/Firefox, while works in Safari, IE11, setInterval/Timer as well doesn't work right in Firefox
setTimeout(prepareForPopUp, 300);
@@ -298,7 +298,7 @@ package org.apache.royale.jewel.beads.views
}
}
- private var daysTable:Table;
+ private var table:Table;
/**
* When set to "auto" this resize handler monitors the width of the app window
* and switch between fixed and float modes.
@@ -323,14 +323,14 @@ package org.apache.royale.jewel.beads.views
if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
{
var origin:Point = new Point(0, _button.y + _button.height - top);
- var relocated:Point = positionInsideBoundingClientRect(_strand, daysTable, origin);
- daysTable.x = relocated.x;
- daysTable.y = relocated.y;
+ var relocated:Point = positionInsideBoundingClientRect(_strand, table, origin);
+ table.x = relocated.x;
+ table.y = relocated.y;
}
else
{
- daysTable.positioner.style.left = '50%';
- daysTable.positioner.style.top = 'calc(100% - 10px)';
+ table.positioner.style.left = '50%';
+ table.positioner.style.top = 'calc(100% - 10px)';
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
index 8a3b587..a974395 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
@@ -63,8 +63,20 @@ package org.apache.royale.jewel.itemRenderers
{
super.data = value;
+ //itemRendererParent.parent is DateChooser
+ var viewState:int = (itemRendererParent.parent.model as DateChooserModel).viewState;
+
if (value[labelField] is Date) {
- text = String( (value[labelField] as Date).getDate() );
+ if(viewState == 0)
+ {
+ text = String( (value[labelField] as Date).getDate());
+ } else if(viewState == 1)
+ {
+ text = String( (value[labelField] as Date).getFullYear());
+ } else {
+ var monthNames:Array = (itemRendererParent.parent.model as DateChooserModel).monthNames;
+ text = String( (value[labelField] as Date).getMonth());
+ }
COMPILE::SWF {
mouseEnabled = true;