From b5aebb9d441f77d9b40d60602b3ca44d437e7fab Mon Sep 17 00:00:00 2001 From: Bryan Hughes Date: Tue, 14 Feb 2012 15:29:09 -0800 Subject: [PATCH 1/4] [TIMOB-7234] Updated the docs to reflect the current state of the API. --- apidoc/Titanium/UI/TabGroup.yml | 56 +++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/apidoc/Titanium/UI/TabGroup.yml b/apidoc/Titanium/UI/TabGroup.yml index da052078eb1..55676418a29 100644 --- a/apidoc/Titanium/UI/TabGroup.yml +++ b/apidoc/Titanium/UI/TabGroup.yml @@ -22,13 +22,13 @@ description: | On iOS, tabs can be removed, and the user may (optionally) be allowed to reorder tabs. - On iOS, it is - also possible to add tabs by updating the [tabs](Titanium.UI.TabGroup.tabs) property, - and to switch active tabs by setting the [active](Titanium.UI.Tab.active) - property on one of the tabs to `true`. Since these mechanisms are platform-specific, - it is recommended that you use `addTab` and `setActiveTab` instead. + On iOS and Mobile Web, it is also possible to add tabs by updating the + [tabs](Titanium.UI.TabGroup.tabs) property, and to switch active tabs by setting + the [active](Titanium.UI.Tab.active) property on one of the tabs to `true`. Since + these mechanisms are platform-specific, it is recommended that you use `addTab` + and `setActiveTab` instead. - If you use the iOS-specific mechanisms, it is possible to add multiple active tabs + If you use the iOS/Mobile Web-specific mechanisms, it is possible to add multiple active tabs to a tab group. In this case, the result of which tab is initially selected is undefined. extends: Titanium.UI.View @@ -123,3 +123,47 @@ properties: type: Number platforms: [android] availabilty: creation + - name: tabsBackgroundColor + summary: The default background color for tabs. If [backgroundColor](Titanium.UI.Tab.backgroundColor) is explicitly set on an individual tab, that value takes precidence. + type: String + - name: tabsBackgroundImage + summary: The default background image for tabs. If [backgroundImage](Titanium.UI.Tab.backgroundImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "2.0" + - name: tabsBackgroundDisabledColor + summary: The default background disabled color for tabs. If [backgroundDisabledColor](Titanium.UI.Tab.backgroundDisabledColor) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "2.0" + - name: tabsBackgroundDisabledImage + summary: The default background disabled image for tabs. If [backgroundDisabledImage](Titanium.UI.Tab.backgroundDisabledImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "2.0" + - name: tabsBackgroundFocusedColor + summary: The default background focused color for tabs. If [backgroundFocusedColor](Titanium.UI.Tab.backgroundFocusedColor) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "2.0" + - name: tabsBackgroundFocusedImage + summary: The default background focused image for tabs. If [backgroundFocusedImage](Titanium.UI.Tab.backgroundFocusedImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "2.0" + - name: tabsBackgroundSelectedColor + summary: The default background selected color for tabs. If [backgroundSelectedColor](Titanium.UI.Tab.backgroundSelectedColor) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "2.0" + - name: tabsBackgroundSelectedImage + summary: The default background selected image for tabs. If [backgroundSelectedImage](Titanium.UI.Tab.backgroundSelectedImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "2.0" + - name: tabDividerColor + summary: The color of the divider between tabs + type: String + since: "2.0" + platforms: [android, mobileweb] + - name: tabDividerWidth + summary: The width of the divider between tabs. + description: | + This width is relative to the tabgroup's parent. Can be either a float value or + a dimension string (for example, '50%' or 'auto'). + type: [Number,String] + since: "2.0" + platforms: [android, mobileweb] From c645d5457a786c78258b64e453e61ff24c14cbba Mon Sep 17 00:00:00 2001 From: Bryan Hughes Date: Wed, 15 Feb 2012 12:56:34 -0800 Subject: [PATCH 2/4] [TIMOB-7234] Preliminary work. --- mobileweb/themes/common.css | 14 --- mobileweb/titanium/Ti/UI/TabGroup.js | 139 +++++++++++++++++++++++++- mobileweb/titanium/Ti/_/UI/Element.js | 34 +++++-- 3 files changed, 162 insertions(+), 25 deletions(-) diff --git a/mobileweb/themes/common.css b/mobileweb/themes/common.css index 1b9f4f21448..599d157e63d 100644 --- a/mobileweb/themes/common.css +++ b/mobileweb/themes/common.css @@ -231,20 +231,6 @@ textarea { to(#666)); } -.TiUITab { - background-color: silver; - border: solid 1px black; -} -.TiUITab:active { - background-color: gray; -} -.TiUITab.TiActiveTab { - background-color: white; -} -.TiUITab.TiActiveTab:active { - background-color: gray; -} - .TiMediaVideoPlayer video { left: 0; position: absolute; diff --git a/mobileweb/titanium/Ti/UI/TabGroup.js b/mobileweb/titanium/Ti/UI/TabGroup.js index 7d5062f3148..7b2dfa56adc 100644 --- a/mobileweb/titanium/Ti/UI/TabGroup.js +++ b/mobileweb/titanium/Ti/UI/TabGroup.js @@ -35,6 +35,9 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl tab._tabGroup = this; this._tabBarContainer.add(tab); this._setTabBarWidths(tabs); + + // Update the background on the tab + this._updateTabBackground(tab); // Set the active tab if there are currently no tabs tabs.length == 1 && (this.properties.activeTab = tab); @@ -63,12 +66,13 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl if (prev) { prev.active = false; - css.remove(prev.domNode, "TiActiveTab"); + prev._selected = false; + prev._doBackground(); this._tabContentContainer.remove(prev["window"]); } - css.add(tab.domNode, "TiActiveTab"); tab.active = true; + tab._selected = true; this._activeTab = tab; this._tabContentContainer.add(tab["window"]); @@ -86,6 +90,28 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl tabs[i]._tabWidth = tabWidth; } }, + + _updateTabBackground: function(tab) { + if (tab.active) { + tab._defaultBackgroundColor = this.tabsBackgroundSelectedColor; + tab._defaultBackgroundImage = this.tabsBackgroundSelectedImage; + } else { + tab._defaultBackgroundColor = this.tabsBackgroundColor; + tab._defaultBackgroundImage = this.tabsBackgroundImage; + } + tab._defaultBackgroundSelectedColor = "grey"; + tab._defaultBackgroundDisabledColor = this.tabsBackgroundDisabledColor; + tab._defaultBackgroundDisabledImage = this.tabsBackgroundDisabledImage; + tab._defaultBackgroundFocusedColor = this.tabsBackgroundFocusedColor; + tab._defaultBackgroundFocusedImage = this.tabsBackgroundFocusedImage; + }, + + _updateTabsBackground: function() { + var tabs = this.tabs; + for (var i = 0; i < tabs.length; i++) { + this._updateTabBackground(tabs[i]); + } + }, _defaultWidth: "100%", @@ -127,6 +153,115 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl } } + return value; + }, + post: function() { + this._updateTabsBackground(); + } + }, + + tabsBackgroundColor: { + post: function(value) { + this._updateTabsBackground(); + }, + value: "white" + }, + + tabsBackgroundImage: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundImage" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundImage" is not implemented yet.'); + return value; + } + }, + + tabsBackgroundDisabledColor: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledColor" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledColor" is not implemented yet.'); + return value; + } + }, + + tabsBackgroundDisabledImage: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledImage" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledImage" is not implemented yet.'); + return value; + } + }, + + tabsBackgroundFocusedColor: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedColor" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedColor" is not implemented yet.'); + return value; + } + }, + + tabsBackgroundFocusedImage: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedImage" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedImage" is not implemented yet.'); + return value; + } + }, + + tabsBackgroundSelectedColor: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedColor" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedColor" is not implemented yet.'); + return value; + } + }, + + tabsBackgroundSelectedImage: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedImage" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedImage" is not implemented yet.'); + return value; + } + }, + + tabDividerColor: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabDividerColor" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabDividerColor" is not implemented yet.'); + return value; + } + }, + + tabDividerWidth: { + get: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabDividerWidth" is not implemented yet.'); + return value; + }, + set: function(value) { + console.debug('Property "Titanium.UI.TabGroup#.tabDividerWidth" is not implemented yet.'); return value; } } diff --git a/mobileweb/titanium/Ti/_/UI/Element.js b/mobileweb/titanium/Ti/_/UI/Element.js index 49d2e312ab8..c4f29b0d316 100644 --- a/mobileweb/titanium/Ti/_/UI/Element.js +++ b/mobileweb/titanium/Ti/_/UI/Element.js @@ -443,28 +443,44 @@ define( _handleTouchEvent: function(type, e) { this.enabled && this.fireEvent(type, e); }, + + _defaultBackgroundColor: undef, + + _defaultBackgroundImage: undef, + + _defaultBackgroundDisabledColor: undef, + + _defaultBackgroundDisabledImage: undef, + + _defaultBackgroundFocusedColor: undef, + + _defaultBackgroundFocusedImage: undef, + + _defaultBackgroundSelectedColor: undef, + + _defaultBackgroundSelectedImage: undef, _doBackground: function(evt) { var evt = evt || {}, m = (evt.type || "").match(/mouse(over|out)/), node = this._focus.node, - bi = this.backgroundImage || "none", - bc = this.backgroundColor; + bi = this.backgroundImage || this._defaultBackgroundImage || "none", + bc = this.backgroundColor || this._defaultBackgroundColor; - if (this._touching) { - bc = this.backgroundSelectedColor || bc; - bi = this.backgroundSelectedImage || bi; + if (this._touching || this._selected) { + bc = this.backgroundSelectedColor || this._defaultBackgroundSelectedColor || bc; + bi = this.backgroundSelectedImage || this._defaultBackgroundSelectedImage || bi; } m && (this._over = m[1] === "over"); if (!this._touching && this.focusable && this._over) { - bc = this.backgroundFocusedColor || bc; - bi = this.backgroundFocusedImage || bi; + bc = this.backgroundFocusedColor || this._defaultBackgroundFocusedColor || bc; + bi = this.backgroundFocusedImage || this._defaultBackgroundFocusedImage || bi; } if (!this.enabled) { - bc = this.backgroundDisabledColor || bc; - bi = this.backgroundDisabledImage || bi; + bc = this.backgroundDisabledColor || this._defaultBackgroundDisabledColor || bc; + bi = this.backgroundDisabledImage || this._defaultBackgroundDisabledImage || bi; } setStyle(node, { From 0a3168b05be5cc180693afbef4fd7ebd5400bfd3 Mon Sep 17 00:00:00 2001 From: Bryan Hughes Date: Wed, 15 Feb 2012 17:46:20 -0800 Subject: [PATCH 3/4] [TIMOB-7234] Implemented support for tabsBackground*, activeTabBackground*, and tabHeight --- apidoc/Titanium/UI/TabGroup.yml | 8 ++ mobileweb/titanium/Ti/UI/TabGroup.js | 181 ++++++++++++-------------- mobileweb/titanium/Ti/_/UI/Element.js | 2 +- 3 files changed, 89 insertions(+), 102 deletions(-) diff --git a/apidoc/Titanium/UI/TabGroup.yml b/apidoc/Titanium/UI/TabGroup.yml index 55676418a29..021e8937e59 100644 --- a/apidoc/Titanium/UI/TabGroup.yml +++ b/apidoc/Titanium/UI/TabGroup.yml @@ -167,3 +167,11 @@ properties: type: [Number,String] since: "2.0" platforms: [android, mobileweb] + - name: tabHeight + summary: The height of the tabs. + description: | + This height is relative to the tabgroup's parent. Can be either a float value or + a dimension string (for example, '50%' or 'auto'). + type: [Number,String] + since: "2.0" + platforms: [mobileweb] diff --git a/mobileweb/titanium/Ti/UI/TabGroup.js b/mobileweb/titanium/Ti/UI/TabGroup.js index 7b2dfa56adc..4f86ad3277d 100644 --- a/mobileweb/titanium/Ti/UI/TabGroup.js +++ b/mobileweb/titanium/Ti/UI/TabGroup.js @@ -1,25 +1,30 @@ -define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(declare, css, SuperView, UI) { +define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], function(declare, css, SuperView, UI, lang) { - var is = require.is; + var is = require.is, + postUpdateTabsBackground = { + post: "_updateTabsBackground" + }; return declare("Ti.UI.TabGroup", SuperView, { constructor: function(args){ + + this.layout = "vertical"; + // Create the tab bar this.add(this._tabBarContainer = UI.createView({ - width: "100%", - height: "10%", - layout: "horizontal", - top: 0, - left: 0 + left: 0, + right: 0, + layout: "horizontal" })); + this.tabHeight = "10%"; // Create the tab window container this.add(this._tabContentContainer = UI.createView({ - width: "100%", - height: "90%", left: 0, - top: "10%" + right: 0, + top: 0, + bottom: 0 })); this.tabs = []; @@ -66,14 +71,11 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl if (prev) { prev.active = false; - prev._selected = false; prev._doBackground(); this._tabContentContainer.remove(prev["window"]); } tab.active = true; - tab._selected = true; - this._activeTab = tab; this._tabContentContainer.add(tab["window"]); this._state = { @@ -82,6 +84,7 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl previousTab: prev, tab: tab }; + this._updateTabsBackground(); }, _setTabBarWidths: function(tabs) { @@ -92,18 +95,16 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl }, _updateTabBackground: function(tab) { - if (tab.active) { - tab._defaultBackgroundColor = this.tabsBackgroundSelectedColor; - tab._defaultBackgroundImage = this.tabsBackgroundSelectedImage; - } else { - tab._defaultBackgroundColor = this.tabsBackgroundColor; - tab._defaultBackgroundImage = this.tabsBackgroundImage; - } - tab._defaultBackgroundSelectedColor = "grey"; - tab._defaultBackgroundDisabledColor = this.tabsBackgroundDisabledColor; - tab._defaultBackgroundDisabledImage = this.tabsBackgroundDisabledImage; - tab._defaultBackgroundFocusedColor = this.tabsBackgroundFocusedColor; - tab._defaultBackgroundFocusedImage = this.tabsBackgroundFocusedImage; + var prefix = tab.active ? "activeTab" : "tabs"; + tab._defaultBackgroundColor = this[prefix + "BackgroundColor"]; + tab._defaultBackgroundImage = this[prefix + "BackgroundImage"]; + tab._defaultBackgroundFocusedColor = this[prefix + "BackgroundFocusedColor"]; + tab._defaultBackgroundFocusedImage = this[prefix + "BackgroundFocusedImage"]; + tab._defaultBackgroundDisabledColor = this[prefix + "BackgroundDisabledColor"]; + tab._defaultBackgroundDisabledImage = this[prefix + "BackgroundDisabledImage"]; + tab._defaultBackgroundSelectedColor = this[prefix + "BackgroundSelectedColor"]; + tab._defaultBackgroundSelectedImage = this[prefix + "BackgroundSelectedImage"]; + tab._doBackground(); }, _updateTabsBackground: function() { @@ -121,14 +122,15 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl activeTab: { set: function(value) { if (is(value, "Number")) { - if (!value in this.tabs) { - return; - } value = this.tabs[value]; } - - this._activateTab(value); + if (!value in this.tabs) { + return; + } return value; + }, + post: function(value) { + lang.isDef(value) && this._activateTab(value); } }, @@ -155,95 +157,65 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl return value; }, - post: function() { - this._updateTabsBackground(); - } + post: "_updateTabsBackground" }, - tabsBackgroundColor: { - post: function(value) { - this._updateTabsBackground(); - }, - value: "white" + activeTabBackgroundColor: { + post: "_updateTabsBackground", + value: "#fff" }, - tabsBackgroundImage: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundImage" is not implemented yet.'); - return value; - }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundImage" is not implemented yet.'); - return value; - } + activeTabBackgroundImage: postUpdateTabsBackground, + + activeTabBackgroundDisabledColor: { + post: "_updateTabsBackground", + value: "#888" }, - tabsBackgroundDisabledColor: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledColor" is not implemented yet.'); - return value; - }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledColor" is not implemented yet.'); - return value; - } + activeTabBackgroundDisabledImage: postUpdateTabsBackground, + + activeTabBackgroundFocusedColor: { + post: "_updateTabsBackground", + value: "#ccc" }, - tabsBackgroundDisabledImage: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledImage" is not implemented yet.'); - return value; - }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundDisabledImage" is not implemented yet.'); - return value; - } + activeTabBackgroundFocusedImage: postUpdateTabsBackground, + + activeTabBackgroundSelectedColor: { + post: "_updateTabsBackground", + value: "#ddd" }, - tabsBackgroundFocusedColor: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedColor" is not implemented yet.'); - return value; - }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedColor" is not implemented yet.'); - return value; - } + activeTabBackgroundSelectedImage: postUpdateTabsBackground, + + tabsBackgroundColor: { + post: "_updateTabsBackground", + value: "#aaa" }, - tabsBackgroundFocusedImage: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedImage" is not implemented yet.'); - return value; - }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundFocusedImage" is not implemented yet.'); - return value; - } + tabsBackgroundImage: postUpdateTabsBackground, + + tabsBackgroundDisabledColor: { + post: "_updateTabsBackground", + value: "#666" }, - tabsBackgroundSelectedColor: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedColor" is not implemented yet.'); - return value; - }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedColor" is not implemented yet.'); - return value; - } + tabsBackgroundDisabledImage: postUpdateTabsBackground, + + tabsBackgroundFocusedColor: { + post: "_updateTabsBackground", + value: "#ccc" }, - tabsBackgroundSelectedImage: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedImage" is not implemented yet.'); - return value; - }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabsBackgroundSelectedImage" is not implemented yet.'); - return value; - } + tabsBackgroundFocusedImage: postUpdateTabsBackground, + + tabsBackgroundSelectedColor: { + post: "_updateTabsBackground", + value: "#ddd" }, + tabsBackgroundSelectedImage: postUpdateTabsBackground, + tabDividerColor: { get: function(value) { console.debug('Property "Titanium.UI.TabGroup#.tabDividerColor" is not implemented yet.'); @@ -264,6 +236,13 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI"], function(decl console.debug('Property "Titanium.UI.TabGroup#.tabDividerWidth" is not implemented yet.'); return value; } + }, + + tabHeight: { + set: function(value) { + this._tabBarContainer.height = value; + return value; + } } } }); diff --git a/mobileweb/titanium/Ti/_/UI/Element.js b/mobileweb/titanium/Ti/_/UI/Element.js index c4f29b0d316..edd884f7f95 100644 --- a/mobileweb/titanium/Ti/_/UI/Element.js +++ b/mobileweb/titanium/Ti/_/UI/Element.js @@ -467,7 +467,7 @@ define( bi = this.backgroundImage || this._defaultBackgroundImage || "none", bc = this.backgroundColor || this._defaultBackgroundColor; - if (this._touching || this._selected) { + if (this._touching) { bc = this.backgroundSelectedColor || this._defaultBackgroundSelectedColor || bc; bi = this.backgroundSelectedImage || this._defaultBackgroundSelectedImage || bi; } From f63c33aa6b66085d20df8cacdfb60af1e2356e1c Mon Sep 17 00:00:00 2001 From: Bryan Hughes Date: Thu, 16 Feb 2012 11:44:20 -0800 Subject: [PATCH 4/4] [TIMOB-7234] Finished tab group props and methods, updated docs. --- apidoc/Titanium/UI/TabGroup.yml | 68 ++++++++++++++++--- mobileweb/titanium/Ti/UI/TabGroup.js | 97 +++++++++++++++++----------- 2 files changed, 117 insertions(+), 48 deletions(-) diff --git a/apidoc/Titanium/UI/TabGroup.yml b/apidoc/Titanium/UI/TabGroup.yml index 021e8937e59..fcaac2326b4 100644 --- a/apidoc/Titanium/UI/TabGroup.yml +++ b/apidoc/Titanium/UI/TabGroup.yml @@ -126,38 +126,86 @@ properties: - name: tabsBackgroundColor summary: The default background color for tabs. If [backgroundColor](Titanium.UI.Tab.backgroundColor) is explicitly set on an individual tab, that value takes precidence. type: String + platforms: [android, mobileweb] - name: tabsBackgroundImage summary: The default background image for tabs. If [backgroundImage](Titanium.UI.Tab.backgroundImage) is explicitly set on an individual tab, that value takes precidence. type: String - since: "2.0" + since: "1.9.0" + platforms: [android, mobileweb] - name: tabsBackgroundDisabledColor summary: The default background disabled color for tabs. If [backgroundDisabledColor](Titanium.UI.Tab.backgroundDisabledColor) is explicitly set on an individual tab, that value takes precidence. type: String - since: "2.0" + since: "1.9.0" + platforms: [android, mobileweb] - name: tabsBackgroundDisabledImage summary: The default background disabled image for tabs. If [backgroundDisabledImage](Titanium.UI.Tab.backgroundDisabledImage) is explicitly set on an individual tab, that value takes precidence. type: String - since: "2.0" + since: "1.9.0" + platforms: [android, mobileweb] - name: tabsBackgroundFocusedColor summary: The default background focused color for tabs. If [backgroundFocusedColor](Titanium.UI.Tab.backgroundFocusedColor) is explicitly set on an individual tab, that value takes precidence. type: String - since: "2.0" + since: "1.9.0" + platforms: [android, mobileweb] - name: tabsBackgroundFocusedImage summary: The default background focused image for tabs. If [backgroundFocusedImage](Titanium.UI.Tab.backgroundFocusedImage) is explicitly set on an individual tab, that value takes precidence. type: String - since: "2.0" + since: "1.9.0" + platforms: [android, mobileweb] - name: tabsBackgroundSelectedColor summary: The default background selected color for tabs. If [backgroundSelectedColor](Titanium.UI.Tab.backgroundSelectedColor) is explicitly set on an individual tab, that value takes precidence. type: String - since: "2.0" + since: "1.9.0" + platforms: [android, mobileweb] - name: tabsBackgroundSelectedImage summary: The default background selected image for tabs. If [backgroundSelectedImage](Titanium.UI.Tab.backgroundSelectedImage) is explicitly set on an individual tab, that value takes precidence. type: String - since: "2.0" + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundColor + summary: The default background color for the active tab. If [backgroundColor](Titanium.UI.Tab.backgroundColor) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundImage + summary: The default background image for the active tab. If [backgroundImage](Titanium.UI.Tab.backgroundImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundDisabledColor + summary: The default background disabled color for the active tab. If [backgroundDisabledColor](Titanium.UI.Tab.backgroundDisabledColor) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundDisabledImage + summary: The default background disabled image for the active tab. If [backgroundDisabledImage](Titanium.UI.Tab.backgroundDisabledImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundFocusedColor + summary: The default background focused color for the active tab. If [backgroundFocusedColor](Titanium.UI.Tab.backgroundFocusedColor) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundFocusedImage + summary: The default background focused image for the active tab. If [backgroundFocusedImage](Titanium.UI.Tab.backgroundFocusedImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundSelectedColor + summary: The default background selected color for the active tab. If [backgroundSelectedColor](Titanium.UI.Tab.backgroundSelectedColor) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] + - name: activeTabBackgroundSelectedImage + summary: The default background selected image for the active tab. If [backgroundSelectedImage](Titanium.UI.Tab.backgroundSelectedImage) is explicitly set on an individual tab, that value takes precidence. + type: String + since: "1.9.0" + platforms: [android, mobileweb] - name: tabDividerColor summary: The color of the divider between tabs type: String - since: "2.0" + since: "1.9.0" platforms: [android, mobileweb] - name: tabDividerWidth summary: The width of the divider between tabs. @@ -165,7 +213,7 @@ properties: This width is relative to the tabgroup's parent. Can be either a float value or a dimension string (for example, '50%' or 'auto'). type: [Number,String] - since: "2.0" + since: "1.9.0" platforms: [android, mobileweb] - name: tabHeight summary: The height of the tabs. @@ -173,5 +221,5 @@ properties: This height is relative to the tabgroup's parent. Can be either a float value or a dimension string (for example, '50%' or 'auto'). type: [Number,String] - since: "2.0" + since: "1.9.0" platforms: [mobileweb] diff --git a/mobileweb/titanium/Ti/UI/TabGroup.js b/mobileweb/titanium/Ti/UI/TabGroup.js index 4f86ad3277d..be97ab23bb0 100644 --- a/mobileweb/titanium/Ti/UI/TabGroup.js +++ b/mobileweb/titanium/Ti/UI/TabGroup.js @@ -1,4 +1,4 @@ -define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], function(declare, css, SuperView, UI, lang) { +define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI/View", "Ti/UI", "Ti/_/lang"], function(declare, css, SuperView, View, UI, lang) { var is = require.is, postUpdateTabsBackground = { @@ -11,8 +11,24 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], this.layout = "vertical"; + // Create the tabBarContainer class + var self = this; + var TabBarContainer = declare("Ti._.UI.TabGroup.TabBarContainer", View, { + _doLayout: function(originX, originY, parentWidth, parentHeight, centerHDefault, centerVDefault) { + var tabs = self.tabs, + numTabs = tabs.length, + tabWidth = Math.floor((parentWidth - (numTabs - 1) * self.tabDividerWidth) / numTabs); + for (var i = 0; i < numTabs - 1; i++) { + tabs[i]._tabWidth = tabWidth; + } + // Make the last tab consume the remaining space. Fractional widths look really bad in tabs. + tabs[i]._tabWidth = parentWidth - (numTabs - 1) * self.tabDividerWidth - tabWidth * (numTabs - 1); + View.prototype._doLayout.apply(this,arguments); + } + }); + // Create the tab bar - this.add(this._tabBarContainer = UI.createView({ + this.add(this._tabBarContainer = new TabBarContainer({ left: 0, right: 0, layout: "horizontal" @@ -33,19 +49,24 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], addTab: function(tab) { // Initialize the tabs, if necessary this.tabs = this.tabs || []; - - // Add the tab to the list and tab bar + + // Add the tab to the list var tabs = this.tabs; tabs.push(tab); tab._tabGroup = this; + + // Set the active tab if there are currently no tabs, otherwise add a divider + if (tabs.length === 1) { + this.properties.activeTab = tab; + } else { + this._tabBarContainer.add(this._createTabDivider()); + } + + // Add the tab to the UI this._tabBarContainer.add(tab); - this._setTabBarWidths(tabs); // Update the background on the tab this._updateTabBackground(tab); - - // Set the active tab if there are currently no tabs - tabs.length == 1 && (this.properties.activeTab = tab); }, removeTab: function(tab) { @@ -58,12 +79,19 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], // Remove the tab from the tab bar and recalculate the tab sizes this._tabBarContainer.remove(tab); - this._setTabBarWidths(tabs); // Update the active tab, if necessary tab === this._activeTab && this._activateTab(tabs[0]); } }, + + _createTabDivider: function() { + return Ti.UI.createView({ + width: this.tabDividerWidth, + height: "100%", + backgroundColor: this.tabDividerColor + }); + }, _activateTab: function(tab) { var tabs = this.tabs, @@ -72,12 +100,12 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], if (prev) { prev.active = false; prev._doBackground(); - this._tabContentContainer.remove(prev["window"]); + prev["window"] && this._tabContentContainer.remove(prev["window"]); } tab.active = true; this._activeTab = tab; - this._tabContentContainer.add(tab["window"]); + tab["window"] && this._tabContentContainer.add(tab["window"]); this._state = { index: tabs.indexOf(tab), previousIndex: prev ? tabs.indexOf(prev) : -1, @@ -86,13 +114,6 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], }; this._updateTabsBackground(); }, - - _setTabBarWidths: function(tabs) { - var tabWidth = (100 / tabs.length) + "%"; - for (var i in tabs) { - tabs[i]._tabWidth = tabWidth; - } - }, _updateTabBackground: function(tab) { var prefix = tab.active ? "activeTab" : "tabs"; @@ -113,6 +134,15 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], this._updateTabBackground(tabs[i]); } }, + + _updateDividers: function(){ + var tabs = this._tabBarContainer.children; + for(var i = 1; i < tabs.length; i += 2) { + var tab = tabs[i]; + tab.width = this.tabDividerWidth; + tab.backgroundColor = this.tabDividerColor; + } + }, _defaultWidth: "100%", @@ -135,7 +165,7 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], }, tabs: { - set: function(value, oldValue) { + set: function(value) { var i, tabBarContainer = this._tabBarContainer; @@ -143,16 +173,15 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], return; } - for (i in oldValue) { - tabBarContainer.remove(oldValue[i]); - } + tabBarContainer._removeAllChildren(); if (value.length) { - this._setTabBarWidths(value); this._activateTab(value[0]); - for (i in value) { + for (i = 0; i < value.length - 1; i++) { tabBarContainer.add(value[i]); + tabBarContainer.add(this._createTabDivider()); } + tabBarContainer.add(value[value.length - 1]); // No trailing divider } return value; @@ -217,25 +246,17 @@ define(["Ti/_/declare", "Ti/_/css", "Ti/_/UI/SuperView", "Ti/UI", "Ti/_/lang"], tabsBackgroundSelectedImage: postUpdateTabsBackground, tabDividerColor: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabDividerColor" is not implemented yet.'); - return value; + post: function() { + this._updateDividers(); }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabDividerColor" is not implemented yet.'); - return value; - } + value: "#555" }, tabDividerWidth: { - get: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabDividerWidth" is not implemented yet.'); - return value; + post: function() { + this._updateDividers(); }, - set: function(value) { - console.debug('Property "Titanium.UI.TabGroup#.tabDividerWidth" is not implemented yet.'); - return value; - } + value: 1 }, tabHeight: {