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 cefe81b making firstDayOfWeek work, and provide an example of a
DateChooser and DateField configured for Spanish to test changing defaults in
Jewel Example
cefe81b is described below
commit cefe81b8aa581c105212a4657052212aa376887b
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Mon Aug 20 17:44:28 2018 +0200
making firstDayOfWeek work, and provide an example of a DateChooser and
DateField configured for Spanish to test changing defaults in Jewel Example
---
.../src/main/royale/DateComponentsPlayGround.mxml | 116 ++++++++++++++++-----
.../main/royale/org/apache/royale/core/UIBase.as | 12 +++
.../royale/jewel/beads/models/DateChooserModel.as | 3 +-
.../royale/jewel/beads/views/DateChooserView.as | 7 +-
.../JewelTheme/src/main/resources/defaults.css | 2 +-
.../main/sass/components-primary/_datefield.sass | 3 +-
6 files changed, 112 insertions(+), 31 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
index 2d4beb9..b5ad0d5 100644
--- a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
@@ -24,48 +24,110 @@ limitations under the License.
<fx:Script>
<![CDATA[
- private function dateChooserChanged():void
+ import org.apache.royale.core.IFormatBead;
+ import
org.apache.royale.html.accessories.DateFormatDDMMYYYY;
+
+ private function dateChooserDefaultChanged():void
+ {
+ dateChooserDefaultSelectedDate.html =
"<strong>DateChooser selected date:</strong> " +
dateChooserDefault.selectedDate;
+ dateFieldDefault.selectedDate =
dateChooserDefault.selectedDate;
+ }
+
+ private function dateFieldDefaultChanged():void
{
- dateChooserSelectedDate.html =
"<strong>DateChooser selected date:</strong> " + dateChooser.selectedDate;
- dateField.selectedDate =
dateChooser.selectedDate;
+ dateFieldDefaultSelectedDate.html =
"<strong>DateField selected date:</strong> " + dateFieldDefault.selectedDate;
+ dateChooserDefault.selectedDate =
dateFieldDefault.selectedDate;
}
- private function dateFieldChanged():void
+ private function dateFieldToToday():void
+ {
+ dateFieldDefault.selectedDate = new Date();
+ }
+
+ // -- DateChooser Spanish
+
+ private function dateChooserESChanged():void
{
- dateFieldSelectedDate.html = "<strong>DateField
selected date:</strong> " + dateField.selectedDate;
- dateChooser.selectedDate =
dateField.selectedDate;
+ dateChooserESSelectedDate.html =
"<strong>DateChooser fecha seleccionada:</strong> " +
dateChooserES.selectedDate;
+ dateFieldES.selectedDate =
dateChooserES.selectedDate;
+ }
+
+ private function dateFieldESChanged():void
+ {
+ dateFieldESSelectedDate.html =
"<strong>DateField fecha seleccionada:</strong> " + dateFieldES.selectedDate;
+ dateChooserES.selectedDate =
dateFieldES.selectedDate;
}
- private function toToday():void
+ private function dateFieldESToToday():void
+ {
+ dateFieldES.selectedDate = new Date();
+ }
+
+ private function configDateChooserToES():void
{
- dateChooser.selectedDate = new Date();
+ dateChooserES.model.dayNames =
['D','L','M','X','J','V','S'];
+ dateChooserES.model.firstDayOfWeek = 1;
}
- private function dateChooserInit():void
+
+ private function configDateFieldToES():void
{
- dateChooser.model.firstDayOfWeek = 1;
- dateChooser.model.dayNames =
['S','M','T','W','T','F','S'];
+
//dateFieldES.removeBead(dateFieldES.getBeadByType(IFormatBead));
+ dateFieldES.addBead(new DateFormatDDMMYYYY());
+
+ dateFieldES.model.dayNames =
['D','L','M','X','J','V','S'];
+ dateFieldES.model.firstDayOfWeek = 1;
}
]]>
</fx:Script>
- <j:beads>
- <j:HorizontalCenteredLayout gap="3"/>
- </j:beads>
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateChooser (Default)"/>
+ <j:DateChooser id="dateChooserDefault"
change="dateChooserDefaultChanged()"/>
+ <j:Label id="dateChooserDefaultSelectedDate"
multiline="true" html="<strong>DateChooser selected date:</strong> "
width="275"/>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateField (Default)"/>
- <j:Card>
- <html:H3 text="Jewel DateChooser"/>
- <j:DateChooser id="dateChooser" change="dateChooserChanged()"
initComplete="dateChooserInit()"/>
- <j:Label id="dateChooserSelectedDate" multiline="true"
html="<strong>DateChooser selected date:</strong> " width="275"/>
- </j:Card>
+ <j:HGroup gap="3">
+ <j:DateField id="dateFieldDefault"
change="dateFieldDefaultChanged()"/>
+ <j:Button text="Select today"
click="dateFieldToToday()" emphasis="primary"/>
+ </j:HGroup>
+ <j:Label id="dateFieldDefaultSelectedDate"
multiline="true" html="<strong>DateField selected date:</strong> "/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
- <j:Card width="400">
- <html:H3 text="Jewel DateField"/>
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateChooser (Spanish)"/>
+ <j:DateChooser id="dateChooserES"
change="dateChooserESChanged()" initComplete="configDateChooserToES()"/>
+ <j:Label id="dateChooserESSelectedDate"
multiline="true" html="<strong>DateChooser fecha seleccionada:</strong> "
width="275"/>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateField (Spanish)"/>
- <j:HGroup gap="3">
- <j:DateField id="dateField"
change="dateFieldChanged()"/>
- <j:Button text="Today!" click="toToday()"
emphasis="primary"/>
- </j:HGroup>
- <j:Label id="dateFieldSelectedDate" multiline="true"
html="<strong>DateField selected date:</strong> "/>
- </j:Card>
+ <j:HGroup gap="3">
+ <j:DateField id="dateFieldES"
change="dateFieldESChanged()" beadsAdded="configDateFieldToES()"/>
+ <j:Button text="¡Selecciona Hoy!"
click="dateFieldESToToday()" emphasis="primary"/>
+ </j:HGroup>
+ <j:Label id="dateFieldESSelectedDate"
multiline="true" html="<strong>DateField fecha seleccionada:</strong> "/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
</j:SectionContent>
diff --git
a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as
b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as
index 5863904..492e33f 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as
@@ -160,6 +160,18 @@ package org.apache.royale.core
[Event(name="doubleClick", type="org.apache.royale.events.MouseEvent")]
/**
+ * Set a different class for doubleClick events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ [Event(name="beadsAdded", type="org.apache.royale.events.Event")]
+
+ /**
* The UIBase class is the base class for most composite user interface
* components. For the Flash Player, Buttons and Text controls may
* have a different base class and therefore may not extend UIBase.
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 b9219bd..92b34ba 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
@@ -162,6 +162,7 @@ package org.apache.royale.jewel.beads.models
{
if (value != _firstDayOfWeek) {
_firstDayOfWeek = value;
+ updateCalendar();
dispatchEvent( new
Event("firstDayOfWeekChanged") );
}
}
@@ -225,7 +226,7 @@ package org.apache.royale.jewel.beads.models
_days = new Array(42);
// skip to the first day and renumber to the last day of the month
- var i:int = firstDay.getDay();
+ var i:int = firstDay.getDay() - firstDayOfWeek;
var dayNumber:int = 1;
var numDays:Number = numberOfDaysInMonth(displayedMonth,
displayedYear);
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 1344f0c..908a3ce 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
@@ -227,6 +227,11 @@ package org.apache.royale.jewel.beads.views
}
}
+ // 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
*/
@@ -239,7 +244,7 @@ package org.apache.royale.jewel.beads.views
{
var column:TableColumn = columns[index];
column.columnLabelAlign = "center";
- column.label = model.dayNames[index];
+ column.label =
model.dayNames[cycleArray(model.dayNames, index, model.firstDayOfWeek)];
}
_daysTable.columns = columns;
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 29a0f88..87b97c4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -292,7 +292,7 @@ j|Card {
}
.jewel.datefield .jewel.textinput input {
- width: 8rem;
+ width: 8em;
background: linear-gradient(white, #f3f3f3);
border-radius: 0.25rem 0px 0px 0.25rem;
}
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
index cbe8e4a..64b8686 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
@@ -20,13 +20,14 @@
// Jewel DateField
// DateField variables
+$datefield-input-width: 8em
$datefield-border-radius: $border-radius
.jewel.datefield
.jewel.textinput
input
- width: 8rem
+ width: $datefield-input-width
@if $flat
background: $default-color
border: 0px solid
