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/09/19 17:11:04 UTC
[royale-asjs] branch develop updated: Jewel TabBar and
TabBarContent working but still needs styling
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 d091dea Jewel TabBar and TabBarContent working but still needs styling
d091dea is described below
commit d091dea4dc33af0faf9e95a85e8b852ad4981505
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Sep 19 19:10:55 2018 +0200
Jewel TabBar and TabBarContent working but still needs styling
---
.../src/main/resources/jewel-example-styles.css | 4 ++
.../src/main/royale/TabBarPlayGround.mxml | 29 +++++++++----
.../itemRenderers/TabBarIconItemRenderer.mxml | 47 ++++++++++++++++++++++
.../projects/Jewel/src/main/resources/defaults.css | 7 ++++
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../apache/royale/jewel/ApplicationMainContent.as | 2 +-
...{ApplicationMainContent.as => TabBarContent.as} | 40 +++---------------
.../Jewel/src/main/sass/components/_tabbar.sass | 7 ++++
8 files changed, 95 insertions(+), 42 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index 5b748ed..3165eeb 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -45,6 +45,10 @@
{
IItemRenderer: ClassReference("itemRenderers.NavigationIconLinkItemRenderer");
}
+.tabBarIconItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.TabBarIconItemRenderer");
+}
.navIconLinkItemRenderer .fonticon
{
diff --git a/examples/royale/JewelExample/src/main/royale/TabBarPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TabBarPlayGround.mxml
index 61a5531..7e8a2c3 100644
--- a/examples/royale/JewelExample/src/main/royale/TabBarPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TabBarPlayGround.mxml
@@ -29,15 +29,15 @@ limitations under the License.
private function changeHandler(event:Event):void
{
- // var item:TabBarButtonVO = (event.target as TabBar).selectedItem as TabBarButtonVO;
- //main.showContent(item.href);
+ var item:TabBarButtonVO = (event.target as TabBar).selectedItem as TabBarButtonVO;
+ tabcontent.showContent(item.href);
}
private var _tabBarNavigation:ArrayList = new ArrayList([
- new TabBarButtonVO("Tab1", "#", null),
- new TabBarButtonVO("Tab2", "#", null),
- new TabBarButtonVO("Tab3", "#", null),
- new TabBarButtonVO("Tab4", "#", null)
+ new TabBarButtonVO("Tab1", "tab1", null),
+ new TabBarButtonVO("Tab2", "tab2", null),
+ new TabBarButtonVO("Tab3", "tab3", null),
+ new TabBarButtonVO("Tab4", "tab4", null)
]);
public function get tabBarNavigation():ArrayList
@@ -58,13 +58,28 @@ limitations under the License.
<j:Card>
<html:H3 text="Jewel TabBar"/>
- <j:TabBar id="tabbar">
+ <j:TabBar id="tabbar" className="tabBarIconItemRenderer" change="changeHandler(event)">
<j:beads>
<js:ConstantBinding
sourcePropertyName="tabBarNavigation"
destinationPropertyName="dataProvider"/>
</j:beads>
</j:TabBar>
+ <j:TabBarContent id="tabcontent">
+ <j:SectionContent id="tab1" isActive="true">
+ <j:Label text="Tab 1"/>
+ </j:SectionContent>
+ <j:SectionContent id="tab2">
+ <j:Label text="Tab 2"/>
+ </j:SectionContent>
+ <j:SectionContent id="tab3">
+ <j:Label text="Tab 3"/>
+ </j:SectionContent>
+ <j:SectionContent id="tab4">
+ <j:Label text="Tab 4"/>
+ </j:SectionContent>
+ </j:TabBarContent>
+
</j:Card>
</j:GridCell>
diff --git a/examples/royale/JewelExample/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml b/examples/royale/JewelExample/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
new file mode 100644
index 0000000..08d4a37
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
@@ -0,0 +1,47 @@
+<?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:TabBarButtonItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns="http://www.w3.org/1999/xhtml">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.TabBarButtonVO;
+
+ [Bindable("dataChange")]
+ public function get tabButton():TabBarButtonVO
+ {
+ return data as TabBarButtonVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+
+ <js:FontIcon text="{tabButton.icon}" material="true" visible="{tabButton.icon != null}"/>
+
+ <html:Span text="{tabButton.label}"/>
+
+</j:TabBarButtonItemRenderer>
+
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 35a34c5..2b96265 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3271,6 +3271,13 @@ j|TabBarButtonItemRenderer {
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
}
+j|TabBarContent {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+
.jewel.simpletable {
position: relative;
white-space: nowrap;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b3f0ad2..9a7e53a 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -79,6 +79,7 @@
<component id="TabBar" class="org.apache.royale.jewel.TabBar"/>
<component id="TabBarButtonItemRenderer" class="org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer"/>
+ <component id="TabBarContent" class="org.apache.royale.jewel.TabBarContent"/>
<component id="Navigation" class="org.apache.royale.jewel.Navigation"/>
<component id="NavigationLinkItemRenderer" class="org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
index fe70e1c..21c47a0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
@@ -122,7 +122,7 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- return addElementToWrapper(this,'main');
+ return addElementToWrapper(this, 'main');
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBarContent.as
similarity index 71%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBarContent.as
index fe70e1c..10166b2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBarContent.as
@@ -36,7 +36,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class ApplicationMainContent extends Container
+ public class TabBarContent extends Container
{
/**
* constructor.
@@ -46,40 +46,11 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function ApplicationMainContent()
+ public function TabBarContent()
{
super();
- typeNames = "jewel main";
- }
-
- private var _hasTopAppBar:Boolean;
-
- /**
- * a boolean flag to indicate if the container needs to make some room
- * for a TopAppBar so content doesn't be hide
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get hasTopAppBar():Boolean
- {
- return _hasTopAppBar;
- }
-
- public function set hasTopAppBar(value:Boolean):void
- {
- if (_hasTopAppBar != value)
- {
- _hasTopAppBar = value;
-
- COMPILE::JS
- {
- toggleClass("has-topappbar", _hasTopAppBar);
- }
- }
+ typeNames = "jewel tabbarcontent";
}
/**
@@ -94,6 +65,7 @@ package org.apache.royale.jewel
*/
public function showContent(id:String):void
{
+ trace("TabBarContent.showContent: " + id)
try
{
for (var i:int = 0; i < numElements; i++)
@@ -112,7 +84,7 @@ package org.apache.royale.jewel
}
catch (error:Error)
{
- throw new Error ("One or more content in ApplicationMainContent is not implementing IActivable interface.");
+ throw new Error ("One or more content in TabBarContent is not implementing IActivable interface.");
}
}
@@ -122,7 +94,7 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- return addElementToWrapper(this,'main');
+ return addElementToWrapper(this, 'div');
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index dd02c19..1d40605 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -48,3 +48,10 @@ $tabbarbutton-padding: 0.68em 1.12em !default
j|TabBarButtonItemRenderer
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
+
+
+j|TabBarContent
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
\ No newline at end of file