1////////////////////////////////////////////////////////////////////////////////
2//
3//  ADOBE SYSTEMS INCORPORATED
4//  Copyright 2003-2006 Adobe Systems Incorporated
5//  All Rights Reserved.
6//
7//  NOTICE: Adobe permits you to use, modify, and distribute this file
8//  in accordance with the terms of the license agreement accompanying it.
9//
10////////////////////////////////////////////////////////////////////////////////
11
12package haloclassic
13{
14
15import mx.core.EdgeMetrics;
16import mx.skins.Border;
17import mx.styles.StyleManager;
18import mx.utils.ColorUtil;
19
20/**
21 *  The skin for all the states of a Tab in a TabNavigator or TabBar.
22 */
23public class TabSkin extends Border
24{
25	include "../mx/core/Version.as";
26
27	//--------------------------------------------------------------------------
28	//
29	//  Class variables
30	//
31	//--------------------------------------------------------------------------
32
33	/**
34	 *  @private
35	 */
36	private static var cache:Object = {};
37
38	//--------------------------------------------------------------------------
39	//
40	//  Class methods
41	//
42	//--------------------------------------------------------------------------
43
44	/**
45	 *  @private
46	 *  Several colors used for drawing are calculated from the base colors
47	 *  of the component (themeColor, borderColor and fillColors).
48	 *  Since these calculations can be a bit expensive,
49	 *  we calculate once per color set and cache the results.
50	 */
51	private static function calcDerivedStyles(themeColor:uint,
52											  borderColor:uint,
53											  falseFillColor0:uint,
54											  falseFillColor1:uint,
55											  fillColor0:uint,
56											  fillColor1:uint):Object
57	{
58		var key:String = HaloColors.getCacheKey(themeColor, borderColor,
59												falseFillColor0,
60												falseFillColor1,
61												fillColor0, fillColor1);
62
63		if (!cache[key])
64		{
65			var o:Object = cache[key] = {};
66
67			// Cross-component styles.
68			HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1);
69
70			// Tab-specific styles.
71			o.borderColorDrk1 =
72				ColorUtil.adjustBrightness2(borderColor, -30);
73			o.falseBevelHighlight =
74				ColorUtil.adjustBrightness2(falseFillColor0, 60);
75			o.falseFillColorBright1 =
76				ColorUtil.adjustBrightness(falseFillColor0, 15);
77			o.falseFillColorBright2 =
78				ColorUtil.adjustBrightness(falseFillColor1, 15);
79		}
80
81		return cache[key];
82	}
83
84	//--------------------------------------------------------------------------
85	//
86	//  Constructor
87	//
88	//--------------------------------------------------------------------------
89
90	/**
91	 *  Constructor.
92	 */
93	public function TabSkin()
94	{
95		super();
96	}
97
98	//--------------------------------------------------------------------------
99	//
100	//  Overridden properties
101	//
102	//--------------------------------------------------------------------------
103
104	//----------------------------------
105	//  borderMetrics
106	//----------------------------------
107
108	/**
109	 *  @private
110	 *  Storage for the borderMetrics property.
111	 */
112	private var _borderMetrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);
113
114	/**
115	 *  @private
116	 *  Internal object that contains the thickness of each edge
117	 *  of the border
118	 */
119	override public function get borderMetrics():EdgeMetrics
120	{
121		return _borderMetrics;
122	}
123
124	//----------------------------------
125	//  measuredWidth
126	//----------------------------------
127
128	/**
129	 *  @private
130	 */
131	override public function get measuredWidth():Number
132	{
133		return 50;
134	}
135
136	//----------------------------------
137	//  measuredHeight
138	//----------------------------------
139
140	/**
141	 *  @private
142	 */
143	override public function get measuredHeight():Number
144	{
145		return 22;
146	}
147
148	//--------------------------------------------------------------------------
149	//
150	//  Overridden methods
151	//
152	//--------------------------------------------------------------------------
153
154	/**
155	 *  @private
156	 */
157	override protected function updateDisplayList(w:Number, h:Number):void
158	{
159		super.updateDisplayList(w, h);
160
161		// User-defined styles.
162		var bevel:Boolean = getStyle("bevel");
163		var borderColor:uint = getStyle("borderColor");
164		var cornerRadius:Number = getStyle("cornerRadius");
165		var fillColors:Array /* of Number */ = getStyle("fillColors");
166		StyleManager.getColorNames(fillColors);
167		var themeColor:uint = getStyle("themeColor");
168
169		// Placehold styles stub
170		// themeColor = 0x80FF4D; // new halo green color
171		var falseFillColors:Array = []; /* of Number*/ // added style prop
172		falseFillColors[0] = fillColors[0];	// 0xE6EEEE; // default halo fill color for false tab
173		falseFillColors[1] = fillColors[1];	// 0xFFFFFF;
174
175		fillColors = getStyle("selectedFillColors");
176		if (!fillColors)
177		{
178			fillColors = []; // So we don't clobber the original...
179			fillColors[0] = ColorUtil.adjustBrightness2(themeColor, 65); // default style for halo
180			fillColors[1] = 0xFFFFFF; // default tab navigator background
181		}
182
183		// Derivative styles.
184		var derStyles:Object = calcDerivedStyles(themeColor, borderColor,
185												 falseFillColors[0],
186												 falseFillColors[1],
187												 fillColors[0], fillColors[1]);
188
189		var cornerRadius2:Number = Math.max(cornerRadius - 2, 0);
190
191		graphics.clear();
192
193		switch (name)
194		{
195			case "upSkin":
196			{
197				if (bevel)
198				{
199					// outer edge
200					drawRoundRect(
201						0, 0, w, h - 1,
202						{ tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 },
203						[ derStyles.borderColorDrk1, borderColor ], 1,
204						verticalGradientMatrix(0, 0, w, h));
205
206					// highlight edge
207					drawRoundRect(
208						1, 1, w - 2, h - 2,
209						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
210						derStyles.falseBevelHighlight, 1);
211
212					// tab fill
213					drawRoundRect(
214						1, 2, w - 2, h - 3,
215						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
216						[ falseFillColors[0], falseFillColors[1] ], 1,
217						verticalGradientMatrix(0, 2, w - 2, h - 3));
218				}
219				else
220				{
221					// outer edge
222					drawRoundRect(
223						0, 0, w, h - 1,
224						{ tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 },
225						borderColor, 1);
226
227					// tab fill
228					drawRoundRect(
229						1, 1, w - 2, h - 2,
230						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
231						[ falseFillColors[0], falseFillColors[1] ], 1,
232						verticalGradientMatrix(0, 2, w - 2, h - 6));
233				}
234
235				// tab bottom line
236				drawRoundRect(
237					0, h - 1, w, 1, 0,
238					borderColor, 1);
239
240				// tab shadow
241				drawRoundRect(
242					0, h - 2, w, 1, 0,
243					0x000000, 0.10);
244
245				// tab shadow
246				drawRoundRect(
247					0, h - 3, w, 1, 0,
248					0x000000, 0.05);
249
250				break;
251			}
252
253			case "overSkin":
254			{
255				if (bevel)
256				{
257					// outer edge
258					drawRoundRect(
259						0, 0, w, h - 1,
260						{ tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 },
261						[ derStyles.themeColDrk1, derStyles.themeColDrk2 ], 1,
262						verticalGradientMatrix(0, 0, w, h - 6));
263
264					// highlight edge
265					drawRoundRect(
266						1, 1, w - 2, h - 2,
267						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
268						derStyles.falseBevelHighlight, 1);
269
270					// tab fill
271					drawRoundRect(
272						1, 2, w - 2, h - 3,
273						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
274						[ derStyles.falseFillColorBright1,
275						  derStyles.falseFillColorBright2 ], 1,
276						verticalGradientMatrix(2, 2, w - 2, h - 2));
277				}
278				else
279				{
280					// outer edge
281					drawRoundRect(
282						0, 0, w, h - 1,
283						{ tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 },
284						derStyles.themeColDrk2, 1);
285
286					// tab fill
287					drawRoundRect(
288						1, 1, w - 2, h - 2,
289						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
290						[ derStyles.falseFillColorBright1,
291						  derStyles.falseFillColorBright2 ], 1,
292						verticalGradientMatrix(2, 2, w - 2, h - 2));
293				}
294
295				// tab bottom line
296				drawRoundRect(
297					0, h - 1, w, 1, 0,
298					borderColor, 1);
299
300				// tab shadow
301				drawRoundRect(
302					0, h - 2, w, 1, 0,
303					0x000000, 0.10);
304
305				// tab shadow
306				drawRoundRect(
307					0, h - 3, w, 1, 0,
308					0x000000, 0.05);
309
310				break;
311			}
312
313			case "disabledSkin":
314			{
315				if (bevel)
316				{
317					// outer edge
318					drawRoundRect(
319						0, 0, w, h - 1,
320						{ tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 },
321						[ derStyles.borderColorDrk1, borderColor ], 1,
322						verticalGradientMatrix(0, 0, w, h - 6));
323
324					// highlight edge
325					drawRoundRect(
326						1, 1, w - 2, h - 2,
327						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
328						fillColors[1], 1);
329
330					// tab fill
331					drawRoundRect(
332						1, 2, w - 2, h - 3,
333						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
334						[ fillColors[0], fillColors[1] ], 1,
335						verticalGradientMatrix(0, 2, w - 2, h - 2));
336				}
337				else
338				{
339					// outer edge
340					drawRoundRect(
341						0, 0, w, h - 1,
342						{ tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 },
343						borderColor, 1);
344
345					// tab fill
346					drawRoundRect(
347						1, 1, w - 2, h - 2,
348						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
349					    [ fillColors[0], fillColors[1] ], 1,
350						verticalGradientMatrix(0, 2, w - 2, h - 2));
351				}
352
353				// tab bottom line
354				drawRoundRect(
355					0, h - 1, w, 1, 0,
356					borderColor, 1);
357
358				// tab shadow
359				drawRoundRect(
360					0, h - 2, w, 1, 0,
361					0x000000, 0.10);
362
363				// tab shadow
364				drawRoundRect(
365					0, h - 3, w, 1, 0,
366					0x000000, 0.05);
367
368				break;
369			}
370
371			case "downSkin":
372			case "selectedUpSkin":
373			case "selectedDownSkin":
374			case "selectedOverSkin":
375			case "selectedDisabledSkin":
376			{
377				// outer edge back
378				drawRoundRect(
379					0, 0, w, h - 1,
380					{ tl: cornerRadius, tr: cornerRadius, bl: 0, br: 0 },
381					[ derStyles.borderColorDrk1, borderColor ], 1,
382					verticalGradientMatrix(0, 0, w, h - 2));
383
384				if (bevel)
385				{
386					// highlight edge color
387					drawRoundRect(
388						1, 1, w - 2, h - 2,
389						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
390						derStyles.bevelHighlight1, 1);
391
392					// tab fill color
393					drawRoundRect(
394						1, 2, w - 2, h - 3,
395						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
396						[ fillColors[0], fillColors[1] ], 1,
397						verticalGradientMatrix(0, 2, w - 2, h / 2));
398				}
399				else
400				{
401					// tab fill color
402					drawRoundRect(
403						1, 1, w - 2, h - 2,
404						{ tl: cornerRadius2, tr: cornerRadius2, bl: 0, br: 0 },
405						[ fillColors[0], fillColors[1] ], 1,
406						verticalGradientMatrix(0, 2, w - 2, h - 2));
407				}
408
409				// tab bottom line
410				drawRoundRect(
411					1, h - 1, w - 2, 1, 0,
412					fillColors[1], 1);
413
414				break;
415			}
416		}
417	}
418}
419
420}
421