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/08/06 22:02:07 UTC
[royale-asjs] branch develop updated: integrating navigation
buttons in the datechooser table
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 e3d0b54 integrating navigation buttons in the datechooser table
e3d0b54 is described below
commit e3d0b54202681359114d67d85175b4077f40c305
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Aug 7 00:02:03 2018 +0200
integrating navigation buttons in the datechooser table
---
.../projects/Jewel/src/main/resources/defaults.css | 7 +
.../controllers/DateChooserMouseController.as | 11 +-
.../itemRenderers/TableMapperForArrayListData.as | 25 ++-
.../royale/jewel/beads/views/DateChooserView.as | 171 +++++++++------------
.../royale/jewel/beads/views/DateFieldView.as | 4 +-
.../apache/royale/jewel/beads/views/TableView.as | 8 +-
.../src/main/sass/components/_datechooser.sass | 27 +---
.../Jewel/src/main/sass/components/_datefield.sass | 3 +
.../JewelTheme/src/main/resources/defaults.css | 5 +
.../main/sass/components-primary/_datechooser.sass | 10 +-
10 files changed, 120 insertions(+), 151 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index f4ee9d5..1ee8388 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -246,6 +246,9 @@ j|ControlBar {
IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
}
}
+.jewel.datechooser .jewel.table .jewel.tableheader.buttonsRow {
+ padding: 0px;
+}
.jewel.datechooser .jewel.table td {
padding: 0px;
}
@@ -265,6 +268,10 @@ j|DateChooserTable {
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer");
}
+.dateChooserPopUp {
+ position: absolute;
+}
+
j|DateField {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView");
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
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 3d5e3ad..b62ec8a 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
@@ -18,17 +18,16 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.controllers
{
- import org.apache.royale.jewel.beads.views.DateChooserView;
- import org.apache.royale.jewel.beads.models.DateChooserModel;
- import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable;
-
import org.apache.royale.core.IBeadController;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBeadView;
import org.apache.royale.core.IStrand;
import org.apache.royale.events.Event;
- import org.apache.royale.events.MouseEvent;
import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.jewel.beads.models.DateChooserModel;
+ import org.apache.royale.jewel.beads.views.DateChooserView;
+ import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable;
/**
* The DateChooserMouseController class is responsible for listening to
@@ -74,7 +73,7 @@ package org.apache.royale.jewel.beads.controllers
view.prevMonthButton.addEventListener("click", prevMonthClickHandler);
view.nextMonthButton.addEventListener("click", nextMonthClickHandler);
- IEventDispatcher(view.dayList).addEventListener("change", tableHandler);
+ IEventDispatcher(view.daysTable).addEventListener("change", tableHandler);
}
private var model:DateChooserModel;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as
index 7bf9002..284256b 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as
@@ -18,19 +18,14 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.itemRenderers
{
- import org.apache.royale.jewel.supportClasses.table.TableColumn;
- import org.apache.royale.jewel.beads.models.TableModel;
- import org.apache.royale.jewel.supportClasses.table.THead;
- import org.apache.royale.jewel.supportClasses.table.TBody;
- import org.apache.royale.jewel.supportClasses.table.TFoot;
- import org.apache.royale.jewel.beads.views.TableView;
-
import org.apache.royale.collections.ArrayList;
- import org.apache.royale.core.IItemRendererParent;
import org.apache.royale.core.IBead;
- import org.apache.royale.core.IChild;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IDataProviderItemRendererMapper;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.core.IItemRendererParent;
import org.apache.royale.core.IStrand;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
@@ -39,10 +34,13 @@ package org.apache.royale.jewel.beads.itemRenderers
import org.apache.royale.jewel.TableCell;
import org.apache.royale.jewel.TableHeader;
import org.apache.royale.jewel.TableRow;
+ import org.apache.royale.jewel.beads.models.TableModel;
+ import org.apache.royale.jewel.beads.views.TableView;
import org.apache.royale.jewel.itemRenderers.TableItemRenderer;
- import org.apache.royale.core.IDataProviderItemRendererMapper;
- import org.apache.royale.core.IItemRendererClassFactory;
- import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.jewel.supportClasses.table.TBody;
+ import org.apache.royale.jewel.supportClasses.table.THead;
+ import org.apache.royale.jewel.supportClasses.table.TableColumn;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
public class TableMapperForArrayListData implements IBead, IDataProviderItemRendererMapper
{
@@ -140,7 +138,8 @@ package org.apache.royale.jewel.beads.itemRenderers
}
if (createHeaderRow) {
- thead = new THead();
+ view.thead = new THead();
+ thead = view.thead;
headerRow = new TableRow();
for(c=0; c < model.columns.length; c++)
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 683e027..f592604 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
@@ -18,26 +18,26 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.views
{
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.core.ClassFactory;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBeadView;
import org.apache.royale.core.IStrand;
- // import org.apache.royale.core.SimpleCSSStylesWithFlex;
import org.apache.royale.core.UIBase;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.jewel.Group;
- import org.apache.royale.jewel.beads.models.DateChooserModel;
+ import org.apache.royale.html.beads.GroupView;
import org.apache.royale.jewel.Button;
+ import org.apache.royale.jewel.Group;
import org.apache.royale.jewel.Table;
+ import org.apache.royale.jewel.TableRow;
+ import org.apache.royale.jewel.TableHeader;
+ import org.apache.royale.jewel.beads.models.DateChooserModel;
+ import org.apache.royale.jewel.beads.views.TableView;
+ import org.apache.royale.jewel.itemRenderers.DateItemRenderer;
import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable;
- // import org.apache.royale.jewel.supportClasses.datechooser.DateChooserHeader;
- import org.apache.royale.utils.loadBeadFromValuesManager;
- import org.apache.royale.html.beads.GroupView;
- import org.apache.royale.collections.ArrayList;
import org.apache.royale.jewel.supportClasses.table.TableColumn;
- import org.apache.royale.jewel.itemRenderers.DateItemRenderer;
- import org.apache.royale.core.ClassFactory;
- // import org.apache.royale.html.beads.layouts.HorizontalFlexLayout;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
/**
* The DateChooserView class is a view bead for the DateChooser.
@@ -80,10 +80,6 @@ package org.apache.royale.jewel.beads.views
private var model:DateChooserModel;
- private var monthButtonsContainer:Group;
- private var monthLabel:Button;
- // private var dayNamesContainer:DateChooserHeader;
-
/**
* @royaleignorecoercion org.apache.royale.core.UIBase
*/
@@ -92,6 +88,21 @@ package org.apache.royale.jewel.beads.views
return _strand as UIBase;
}
+ private var _monthLabel:Button;
+ /**
+ * The button to display month and year
+ * and select from a list of years
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get monthLabel():Button
+ {
+ return _monthLabel;
+ }
+
private var _prevMonthButton:Button;
/**
* The button that causes the previous month to be displayed by the DateChooser.
@@ -120,117 +131,72 @@ package org.apache.royale.jewel.beads.views
return _nextMonthButton;
}
- private var _dayTable:DateChooserTable;
+ private var _daysTable:DateChooserTable;
/**
- * The List of days to display
+ * The Table of days to display
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public function get dayList():Table
+ public function get daysTable():Table
{
- return _dayTable;
+ return _daysTable;
}
- // private const controlHeight:int = 26;
- // private const commonButtonWidth:int = 40;
-
/**
* @private
*/
private function createChildren():void
{
// HEADER BUTTONS
-
- monthButtonsContainer = new Group();
-
- monthLabel = new Button();
- monthLabel.text = "Month Here";
- monthButtonsContainer.addElement(monthLabel);
+ _monthLabel = new Button();
+ _monthLabel.text = "Month Here";
_prevMonthButton = new Button();
_prevMonthButton.text = "<";
- monthButtonsContainer.addElement(_prevMonthButton);
_nextMonthButton = new Button();
_nextMonthButton.text = ">";
- monthButtonsContainer.addElement(_nextMonthButton);
-
- getHost().addElement(monthButtonsContainer, false);
-
- // DAY NAMES
-
- // dayNamesContainer = new DateChooserHeader();
- // //dayNamesContainer.id = "dateChooserDayNames";
- // COMPILE::SWF {
- // dayNamesContainer.percentWidth = 100;
- // }
-
- // getHost().addElement(dayNamesContainer, false);
// DAYS
createColumns();
- _dayTable = new DateChooserTable();
+
+ _daysTable = new DateChooserTable();
COMPILE::SWF {
- _dayTable.percentWidth = 100;
+ _daysTable.percentWidth = 100;
}
- getHost().addElement(_dayTable, false);
+ getHost().addElement(_daysTable, false);
- IEventDispatcher(_dayTable).dispatchEvent( new Event("itemsCreated") );
+ IEventDispatcher(_daysTable).dispatchEvent( new Event("itemsCreated") );
model.addEventListener("selectedDateChanged", selectionChangeHandler);
- // monthButtonsContainer.id = "dateChooserMonthButtons";
- // monthButtonsContainer.addBead(new HorizontalFlexLayout());
- // monthButtonsContainer.height = controlHeight;
- // monthButtonsContainer.style = new SimpleCSSStylesWithFlex();
- // monthButtonsContainer.style.flexGrow = 0;
- // COMPILE::JS {
- // monthButtonsContainer.element.style["flex-grow"] = "0";
- // }
- // _prevMonthButton.width = commonButtonWidth;
- // if (_prevMonthButton.style == null) {
- // _prevMonthButton.style = new SimpleCSSStylesWithFlex();
- // }
- // _prevMonthButton.style.flexGrow = 0;
- // COMPILE::JS {
- // _prevMonthButton.element.style["flex-grow"] = "0";
- // }
-
- // if (monthLabel.style == null) {
- // monthLabel.style = new SimpleCSSStylesWithFlex();
- // }
- // monthLabel.style.flexGrow = 1;
- // COMPILE::JS {
- // monthLabel.element.style["flex-grow"] = "1";
- // }
-
- // _nextMonthButton.width = commonButtonWidth;
- // if (_nextMonthButton.style == null) {
- // _nextMonthButton.style = new SimpleCSSStylesWithFlex();
- // }
- // COMPILE::JS {
- // _nextMonthButton.element.style["flex-grow"] = "0";
- // }
- //_nextMonthButton.style.flexGrow = 0;
-
- // dayNamesContainer.className = "DateChooserHeader";
- // dayNamesContainer.height = controlHeight;
- // dayNamesContainer.style = new SimpleCSSStylesWithFlex();
- // dayNamesContainer.style.flexGrow = 0;
- // COMPILE::JS {
- // dayNamesContainer.element.style["flex-grow"] = "0";
- // dayNamesContainer.element.style["align-items"] = "center";
- // }
+ createButtonsRow();
+ }
+
+ private var buttonsRow:TableRow;
+
+ private function createButtonsRow():void
+ {
+ var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView;
+ buttonsRow = new TableRow();
+
+ var tableHeader:TableHeader = new TableHeader();
+ tableHeader.className = "buttonsRow";
+ tableHeader.addElement(_monthLabel);
+ tableHeader.expandColumns = 5;
+ buttonsRow.addElement(tableHeader);
+
+ tableHeader= new TableHeader();
+ tableHeader.className = "buttonsRow";
+ tableHeader.addElement(_prevMonthButton);
+ buttonsRow.addElement(tableHeader);
- // _dayTable.className = "DateChooserList";
- // _dayTable.id = "dateChooserList";
- // _dayTable.style = new SimpleCSSStylesWithFlex();
- // _dayTable.style.flexGrow = 1;
- // COMPILE::JS {
- // _dayTable.element.style["flex-grow"] = "1";
- // }
+ tableHeader= new TableHeader();
+ tableHeader.className = "buttonsRow";
+ tableHeader.addElement(_nextMonthButton);
+ buttonsRow.addElement(tableHeader);
}
private var columns:Array;
@@ -260,8 +226,7 @@ package org.apache.royale.jewel.beads.views
*/
private function updateDisplay():void
{
- monthLabel.text = model.monthNames[model.displayedMonth] + " " +
- String(model.displayedYear);
+ _monthLabel.text = model.monthNames[model.displayedMonth] + " " + String(model.displayedYear);
var len:int = columns.length;
for(var index:int = 0; index < len; index++)
@@ -270,7 +235,8 @@ package org.apache.royale.jewel.beads.views
column.label = model.dayNames[index];
}
- _dayTable.columns = columns;
+ _daysTable.columns = columns;
+
var currrentMonth:Array = [];
var dayIndex:int = 0;
@@ -283,11 +249,14 @@ package org.apache.royale.jewel.beads.views
dayIndex++;
}
}
- trace("currrentMonth: " + currrentMonth);
- _dayTable.dataProvider = new ArrayList(currrentMonth);
- _dayTable.dispatchEvent( new Event("tableComplete") );
+ _daysTable.dataProvider = new ArrayList(currrentMonth);
+ _daysTable.dispatchEvent( new Event("tableComplete") );
- _dayTable.selectedIndex = model.getIndexForSelectedDate();
+ _daysTable.selectedIndex = model.getIndexForSelectedDate();
+
+ var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView;
+ view.thead.addElementAt(buttonsRow, 0, false);
+
}
/**
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 a3b4575..6f44261 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
@@ -216,9 +216,7 @@ package org.apache.royale.jewel.beads.views
var p3:Point = PointUtils.globalToLocal(p2, host);
_popUp.x = p3.x;
_popUp.y = p3.y;
- COMPILE::JS {
- _popUp.element.style.position = "absolute";
- }
+ _popUp.className = "dateChooserPopUp";
host.popUpParent.addElement(_popUp);
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
index bd57dd6..c079aff 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
@@ -62,12 +62,18 @@ package org.apache.royale.jewel.beads.views
createChildren();
}
- // private var thead:THead;
+ /**
+ * This os created in the mapper
+ * @royalesuppresspublicvarwarning
+ */
+ public var thead:THead;
/**
* @royalesuppresspublicvarwarning
*/
public var tbody:TBody;
+
+
// private var tfoot:TFoot;
/**
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index 9ea1676..80eaed0 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -25,8 +25,13 @@
.jewel.table
+ thead
+
th
+
+ .jewel.tableheader.buttonsRow
+ padding: 0px
tbody
tr
@@ -42,29 +47,7 @@ j|DateChooser
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateChooserView")
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalFlowLayout")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController")
- // width: 280px
- // height: 240px
j|DateChooserTable
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer")
-// j|DateChooserHeader
-// IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DayNameItemRenderer")
-// IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
- // height: 20px
- // border-style: solid
- // border-color: #000000
- // border-width: 1px
- // background-color: #FFFFFF
-
-// j|DateChooserList
- // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForArrayData")
- // IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
- // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer")
- // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalFlowLayout")
- // width: 280px
- // height: 240px
- // border-style: solid
- // border-color: #000000
- // border-width: 1px
- // background-color: #FFFFFF
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
index 467c5ef..5e50bf7 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
@@ -22,6 +22,9 @@
// DateField variables
.jewel.datefield
+
+.dateChooserPopUp
+ position: absolute
j|DateField
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 30b016f..2a5858f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -242,6 +242,11 @@ j|Card {
border: none;
box-shadow: none;
}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: white;
+ border: none;
+ box-shadow: none;
+}
.jewel.datechooser .jewel.table th {
background: white;
box-shadow: none;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
index dcb34b5..98b8e4f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -25,16 +25,16 @@
background: lighten($default-color, 20%)
width: 330px
- // .jewel.button
- // , .jewel.list
- // background: white
- // border: none
- // box-shadow: none
.jewel.table
background: lighten($default-color, 20%)
border: none
box-shadow: none
+
+ .jewel.button
+ background: white
+ border: none
+ box-shadow: none
th
@if $flat