i'd add icon , close button tabnavigator in flex 4 can't find examples online (all flex 3).
<mx:tabnavigator id="firstviewstack" width="100%" height="100%" clipcontent="true"> <s:navigatorcontent label="first tab" > <s:group width="100%" /> </s:navigatorcontent> </mx:tabnavigator>
zomgwth?!?!?! took way long figure out. how set default tab skin:
mx|tab { skin:classreference("mx.skins.spark.tabskin"); } you can copy skin own project , make modifications needed:
here examples. modifies tabs in tabnavigators:
mx|tab { skin:classreference("myskins.mytabskin"); } to skin 1 tabnavigator:
<mx:tabnavigator id="tabbarnavigator" stylename="mytabnavigator"> <s:navigatorcontent label="first tab" > <s:group width="100%" /> </s:navigatorcontent> <s:navigatorcontent label="second tab"> <s:group height="100%" width="100%" /> </s:navigatorcontent> </mx:tabnavigator> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace utils "com.flexcapacitor.utils.*"; @namespace mx "library://ns.adobe.com/flex/mx"; .mytabnavigator { tabstylename: "mytabs"; } .mytabs { skin:classreference("myskins.mytabskin"); } </fx:style> this works flex 4.6 , spark theme.
update 2:
here more notable styles:
.mytabs { skin:classreference("skins.solidfilltabskin"); fillalpha:1; borderalpha:1; cornerradius:0; /*color:#ff0000; chromecolor: #00ff00; textrollovercolor: #0000ff; textselectedcolor: #00ff00;*/ textfieldclass: classreference("mx.core.uiftetextfield"); /* default mx.core.uitextfield*/ } the textselectedcolor never fires. there never selected text color. also, text moved down when tab selected!
so below new skin text doesn't move down. you'll need set text , fill colors in skin if don't want use defaults although can use chromecolor set fill color. skin supports cornerradius , borderalpha,
<?xml version="1.0" encoding="utf-8"?> <!-- apache license 2.0. --> <!--- spark skin class tabs of mx tabnavigator container. how use: specific tabnavigator: .mytabnavigator { tabstylename: "mytabs"; } .mytabs { skin:classreference("myskins.mytabskin"); } applied tabs in tabnavigators: mx|tab { skin:classreference("com.flexcapacitor.skins.solidfilltabnavigatorbuttonskin"); fillalpha:1; borderalpha:1; cornerradius:0; /*color:#ff0000; chromecolor: #00ff00; textrollovercolor: #0000ff; textselectedcolor: #00ff00;*/ textfieldclass: classreference("mx.core.uiftetextfield"); /* default mx.core.uitextfield*/ } @see mx.containers.tabnavigator @langversion 3.0 @playerversion flash 10 @playerversion air 1.5 @productversion flex 4 --> <s:sparkskin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minwidth="21" minheight="21" alpha.disabledstates="0.5"> <fx:script> <![cdata[ import mx.controls.button; import mx.core.iuitextfield; import mx.core.mx_internal; use namespace mx_internal; private var cornerradius:number = 0; /** * @private */ override protected function initializationcomplete():void { usechromecolor = true; super.initializationcomplete(); } /** * copied tabbarbuttonskin.mxml * @private * cornerradius style specified tabbar, not button itself. * * rather bind corner radius properties of s:rect's in markup * below hostcomponent.owner.getstyle("cornerradius"), reset them here, * each time change in value of style detected. note each * corner radius property explicitly initialized default value of * style; initial value of private cornerradius property. */ private function updatecornerradius():void { var cr:number = getstyle("cornerradius"); if (cornerradius != cr) { cornerradius = cr; fill.topleftradiusx = cornerradius; fill.toprightradiusx = cornerradius; } } /** * copied tabbarbuttonskin.mxml * @private * function creates path data used bordertop , selectedhighlight. */ private function createpathdata(isborder:boolean):string { var left:number = 0; var right:number = width; var top:number = 0.5; var bottom:number = height; var a:number = cornerradius * 0.292893218813453; var s:number = cornerradius * 0.585786437626905; // if path highlight, // draw vertical part of selected tab highlight that's rendered // alpha=0.07. s:path configured include left , // right edges of s:rect, along top left,right rounded corners. // otherwise, draw full path. var path:string = ""; path += "m " + left + " " + bottom; path += " l " + left + " " + (top + cornerradius); path += " q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a); path += " q " + (left + s) + " " + top + " " + (left + cornerradius) + " " + top; if (isborder) path += " l " + (right - cornerradius) + " " + top; else path += " m " + (right - cornerradius) + " " + top; path += " q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a); path += " q " + right + " " + (top + s) + " " + right + " " + (top + cornerradius); path += " l " + right + " " + bottom; return path; } /** * copied tabbarbuttonskin.mxml * @private * bordertop s:path s:rect bottom edge left out. * given rounded corners per cornerradius style, result * inverted u specified width, height, , cornerradius. * * circular arcs drawn 2 curves per flash.display.graphics.graphicsutil. */ private function updatebordertop(width:number, height:number):void { // generate path data , lay out. path not being layout default basiclayout of skin // since excluded layout. var path:string = createpathdata(true); bordertop.data = path; bordertop.setlayoutboundssize(width, height, false); bordertop.setlayoutboundsposition(0, 0, false); } /** * @private */ override protected function updatedisplaylist(unscaledwidth:number, unscaledheight:number) : void { updatecornerradius(); updatebordertop(unscaledwidth, unscaledheight); var button:button = owner button;// button var textfield:iuitextfield = button.gettextfield(); var label:string = button.label; // if want use own text field hide other 1 here if (textfield) { //textfield.includeinlayout = false; textfield.visible = false; } if (labeldisplay) { labeldisplay.text = label; } var borderalpha:number = button.getstyle("borderalpha"); if (!isnan(borderalpha)) { bordertop.alpha = borderalpha; if (linealongthebottom) { linealongthebottom.alpha = borderalpha; } } var fillalpha:number = button.getstyle("fillalpha"); if (!isnan(fillalpha)) { fillcolor.alpha = fillalpha; } var fillcolorvalue:number = button.getstyle("fillcolor"); if (!isnan(fillcolorvalue)) { //fillcolor.color = fillcolorvalue; } super.updatedisplaylist(unscaledwidth, unscaledheight); } ]]> </fx:script> <!-- states --> <s:states> <s:state name="up" /> <s:state name="over" /> <s:state name="down" /> <s:state name="disabled" stategroups="disabledstates"/> <s:state name="selectedup" stategroups="selectedstates" /> <s:state name="selectedover" stategroups="selectedstates" /> <s:state name="selecteddown" stategroups="selectedstates" /> <s:state name="selecteddisabled" stategroups="disabledstates, selectedstates" /> </s:states> <!-- layer 1: fill --> <s:rect id="fill" left="1" right="1" top="1" bottom="0" > <s:fill> <s:solidcolor id="fillcolor" color="0xffffff" color.selectedstates="0xeceeee" color.over="0xeceeee" alpha="1" /> <!-- <s:lineargradient rotation="90"> <s:gradiententry color="0xe4e4e4" color.over="0xcacaca" color.selectedstates="0xffffff" alpha="1" /> <s:gradiententry color="0xa1a1a1" color.over="0x878787" color.selectedstates="0xe4e4e4" alpha="1" /> </s:lineargradient>--> </s:fill> </s:rect> <!-- layer 4: border - unselected --> <s:line id="linealongthebottom" left="0" right="0" bottom="0" excludefrom="selectedstates" > <s:stroke> <s:solidcolorstroke color="0x696969" alpha="1" /> </s:stroke> </s:line> <!--- set includeinlayout="false" regenerate path data , lay out path in updatedisplaylist() override , don't want affect measurement. @private --> <s:path id="bordertop" left="0" right="0" top="0" bottom="0" includeinlayout="false"> <s:stroke> <s:lineargradientstroke rotation="90" weight="1"> <s:gradiententry color="0x000000" alpha="0.5625" alpha.down="0.6375" alpha.selectedstates="0.6375" /> <s:gradiententry color="0x000000" alpha="0.75" alpha.down="0.85" alpha.selectedstates="0.85" /> </s:lineargradientstroke> </s:stroke> </s:path> <!-- layer 8: text --> <!--- @copy spark.components.supportclasses.buttonbase#labeldisplay --> <s:label id="labeldisplay" visible="true" textalign="center" verticalalign="middle" maxdisplayedlines="1" horizontalcenter="0" verticalcenter="2" left="10" right="10" top="2" bottom="2"> </s:label> </s:sparkskin> 
Comments
Post a Comment