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 d2e9876 Jewel ImageButton and example in JewelExample
d2e9876 is described below
commit d2e987655f0840610673e0b82f5e3aaa87136ab6
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Sep 11 18:24:54 2018 +0200
Jewel ImageButton and example in JewelExample
---
.../src/main/resources/assets/royale_spheres.png | Bin 0 -> 64660 bytes
.../src/main/royale/ImagePlayGround.mxml | 64 +++++++++++++
.../JewelExample/src/main/royale/MainContent.mxml | 3 +-
.../src/main/royale/models/MainNavigationModel.as | 10 +-
.../projects/Jewel/src/main/resources/defaults.css | 9 ++
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../main/royale/org/apache/royale/jewel/Image.as | 30 +-----
.../royale/org/apache/royale/jewel/ImageButton.as | 104 +++++++++++++++++++++
.../Jewel/src/main/sass/components/_image.sass | 36 +++++++
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
10 files changed, 222 insertions(+), 36 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/resources/assets/royale_spheres.png
b/examples/royale/JewelExample/src/main/resources/assets/royale_spheres.png
new file mode 100644
index 0000000..f579008
Binary files /dev/null and
b/examples/royale/JewelExample/src/main/resources/assets/royale_spheres.png
differ
diff --git a/examples/royale/JewelExample/src/main/royale/ImagePlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/ImagePlayGround.mxml
new file mode 100644
index 0000000..c578f8d
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/ImagePlayGround.mxml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:js="library://ns.apache.org/royale/basic">
+
+ <fx:Script>
+ <![CDATA[
+ private function imageClick(event:MouseEvent):void {
+ imageResult.text = "image clicked!";
+ }
+
+ private function
imageButtonClick(event:MouseEvent):void {
+ imageButtonResult.text = "image button clicked!";
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel Image"/>
+
+ <j:Image id="image"
src="assets/royale_spheres.png" click="imageClick(event)"/>
+ <j:Label id="imageResult" text="Image is an img
tag in html"/>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1"
tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H4 text="Jewel ImageButton"/>
+
+ <j:ImageButton id="imageButton"
src="assets/royale_spheres.png" click="imageButtonClick(event)"/>
+ <j:Label id="imageButtonResult" text="Image is
an input type='image' tag in html"/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index ca43e9e..4398472 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -62,7 +62,7 @@ limitations under the License.
<j:ResponsiveDrawer auto="true"/>
</j:beads>
<j:DrawerHeader>
- <j:Image src="assets/apache-royale-jewel-logo-white.svg"
height="140" click="goToHome()"/>
+ <j:ImageButton src="assets/apache-royale-jewel-logo-white.svg"
height="140" click="goToHome()"/>
</j:DrawerHeader>
<j:DrawerContent>
<j:Navigation change="changeHandler(event)"
className="navIconLinkItemRenderer">
@@ -117,6 +117,7 @@ limitations under the License.
<local:WelcomeSection id="welcome_panel" isActive="true"/>
<local:AlertPlayGround id="alert_panel"/>
<local:ButtonPlayGround id="button_panel"/>
+ <local:ImagePlayGround id="image_panel"/>
<local:NumericStepperPlayGround id="numericstepper_panel"/>
<local:DateComponentsPlayGround id="datecomponents_panel"/>
<local:ComboBoxPlayGround id="combobox_panel"/>
diff --git
a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
index 1f80a24..41b2627 100644
--- a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
@@ -27,6 +27,7 @@ package models
private var _controlsDrawerNavigation:ArrayList = new ArrayList([
new NavigationLinkVO("Alert", "alert_panel",
MaterialIconType.WEB_ASSET),
new NavigationLinkVO("Button", "button_panel",
MaterialIconType.CROP_7_5),
+ new NavigationLinkVO("Images", "image_panel",
MaterialIconType.IMAGE),
new NavigationLinkVO("NumericStepper", "numericstepper_panel",
MaterialIconType.UNFOLD_MORE),
new NavigationLinkVO("Date Components", "datecomponents_panel",
MaterialIconType.DATE_RANGE),
new NavigationLinkVO("ComboBox", "combobox_panel",
MaterialIconType.CREDIT_CARD),
@@ -40,12 +41,10 @@ package models
new NavigationLinkVO("TextInput", "textinput_panel",
MaterialIconType.TEXT_FIELDS),
new NavigationLinkVO("Forms & Validation",
"form_validation_panel", MaterialIconType.ASSIGNMENT_TURNED_IN),
new NavigationLinkVO("DropDownList", "dropdownlist_panel",
MaterialIconType.CREDIT_CARD),
+ new NavigationLinkVO("Snackbar", "snackbar_panel",
MaterialIconType.VIDEO_LABEL)
// new NavigationLinkVO("Menu", "menus_panel"),
- // new NavigationLinkVO("Loading", "loading_panel"),
- // new NavigationLinkVO("Snackbar", "snackbar_panel"),
- new NavigationLinkVO("Snackbar", "snackbar_panel",
MaterialIconType.VIDEO_LABEL)
- // new NavigationLinkVO("Tables", "tables_panel"),
+ // new NavigationLinkVO("Loading", "loading_panel")
]);
public function get controlsDrawerNavigation():ArrayList
@@ -58,8 +57,7 @@ package models
new NavigationLinkVO("Grid", "grid_panel", "grid_on"),
new NavigationLinkVO("Tables", "tables_panel", "view_quilt")
- // new NavigationLinkVO("Tabs", "tabs_panel"),
- // new NavigationLinkVO("Snackbar", "snackbar_panel"),
+ // new NavigationLinkVO("Tabs", "tabs_panel")
]);
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 71af42a..f474e5d 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -666,6 +666,15 @@ j|DropDownList {
font-size: 48px;
}
+.jewel.imagebutton {
+ border-style: none;
+ padding: 0px;
+}
+
+j|ImageButton {
+ IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.ImageModel");
+}
+
.jewel.item, .jewel.navigationlink {
display: flex;
min-height: 34px;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 0f66818..152f5ca 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -43,6 +43,7 @@
<component id="Button" class="org.apache.royale.jewel.Button"/>
<component id="IconButton" class="org.apache.royale.jewel.IconButton"/>
<component id="ToggleButton" class="org.apache.royale.jewel.ToggleButton"/>
+ <component id="ImageButton" class="org.apache.royale.jewel.ImageButton"/>
<component id="Label" class="org.apache.royale.jewel.Label"/>
<component id="TextInput" class="org.apache.royale.jewel.TextInput"/>
<component id="IconTextInput"
class="org.apache.royale.jewel.IconTextInput"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Image.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Image.as
index c7c6496..ebd02b4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Image.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Image.as
@@ -28,7 +28,7 @@ package org.apache.royale.jewel
}
/**
- * Load Images.
+ * Load Images. For button images use ImageButton
*
* @toplevel
* @langversion 3.0
@@ -77,33 +77,5 @@ package org.apache.royale.jewel
{
(element as HTMLImageElement).src = binaryDataAsString;
}
-
-
- COMPILE::JS
- override public function addEventListener(type:String,
handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object =
null):void
- {
- super.addEventListener(type, handler, opt_capture,
opt_handlerScope);
- if(type == MouseEvent.CLICK || type ==
MouseEvent.MOUSE_DOWN || type == MouseEvent.ROLL_OVER ||
- type == MouseEvent.MOUSE_UP || type ==
MouseEvent.MOUSE_MOVE || type == MouseEvent.MOUSE_OVER ||
- type == MouseEvent.ROLL_OUT || type ==
MouseEvent.MOUSE_OUT ||
- type == MouseEvent.DOUBLE_CLICK || type
== MouseEvent.WHEEL)
- {
- addClass("cursor-pointer");
- }
- }
-
- COMPILE::JS
- override public function removeEventListener(type:String,
handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object =
null):void
- {
- super.removeEventListener(type, handler, opt_capture,
opt_handlerScope);
- if(type == MouseEvent.CLICK || type ==
MouseEvent.MOUSE_DOWN || type == MouseEvent.ROLL_OVER ||
- type == MouseEvent.MOUSE_UP || type ==
MouseEvent.MOUSE_MOVE || type == MouseEvent.MOUSE_OVER ||
- type == MouseEvent.ROLL_OUT || type ==
MouseEvent.MOUSE_OUT ||
- type == MouseEvent.DOUBLE_CLICK || type
== MouseEvent.WHEEL)
- {
- removeClass("cursor-pointer");
- }
-
- }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ImageButton.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ImageButton.as
new file mode 100644
index 0000000..31501ac
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ImageButton.as
@@ -0,0 +1,104 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel
+{
+ import org.apache.royale.core.SimpleCSSStyles;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.models.ImageModel;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The ImageButton class presents an image as a button.
+ * In html is an input type="image", this shows the hand pointer cursor
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class ImageButton extends Button
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function ImageButton()
+ {
+ super();
+ typeNames = "jewel imagebutton";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, 'input');
+ element.setAttribute('type', 'image');
+ positioner = element;
+ return element;
+ }
+
+ [Bindable("srcChanged")]
+ /**
+ * Sets the image for the button. This is a URL.
+ * TODO: figure out how to set the source in the style, rather
than using
+ * backgroundImage behind the scenes.
+ * @royaleignorecoercion org.apache.royale.html.beads.models.ImageModel
+ */
+ public function get src():String
+ {
+ return ImageModel(model).url;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.html.beads.models.ImageModel
+ */
+ public function set src(url:String):void
+ {
+ ImageModel(model).url = url;
+ COMPILE::SWF
+ {
+ if (!style)
+ style = new SimpleCSSStyles();
+ style.backgroundImage = url;
+ }
+
+ COMPILE::JS
+ {
+ if (url)
+ {
+ (element as HTMLInputElement).src = url;
+ }
+ }
+
+ dispatchEvent(new Event("srcChanged"));
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_image.sass
b/frameworks/projects/Jewel/src/main/sass/components/_image.sass
new file mode 100644
index 0000000..800789f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_image.sass
@@ -0,0 +1,36 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel ImageButton
+
+// ImageButton variables
+.jewel
+ &.imagebutton
+ border-style: none
+ padding: 0px
+
+ &:hover, &:active
+
+
+j|ImageButton
+ IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.ImageModel")
+
+// @media -royale-swf
+// j|ImageButton
+// IBeadView:
ClassReference("org.apache.royale.jewel.beads.ImageButtonView")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass
b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 02e6df9..f261276 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -35,6 +35,7 @@
@import "components/drawer"
@import "components/dropdownlist"
@import "components/icons"
+@import "components/image"
@import "components/itemRenderer"
@import "components/label"
@import "components/layout"
