• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6615
  • Last Modified:

flex panel header glassy

if you look at:
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

The panels have some nice "GLASSY" effects on the top !
How can I reach this effect ?
I downloaded the source code but cannot extract the right snippet to get this effect on my panel !
0
yarek
Asked:
yarek
  • 4
  • 2
1 Solution
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
Right Click on the file explorer and click view source.

or directly go to this link

http://examples.adobe.com/flex2/consulting/styleexplorer/srcview/index.html

Download the source code and click the css folder in it.

it has a glassPanel style which use a SWF to render that style.

.glassPanel {
    backgroundSize: "100%";
    backgroundImage: Embed(source="/assets/header.swf#glassHeader");
    paddingTop: 7;
    paddingLeft: 10;
}

use the same where ever you want to apply :)


0
 
yarekAuthor Commented:
Not good, sorry...I have already done this with no success !
I have applied this style to the panel but it does not change anything
If I do apply this style to the borderstyle, then the panel changes and display the glassy effect on WHOLE panel instead of the header.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="styles.css">
</mx:Style>
	<mx:Panel x="135" y="198" width="250" height="200" layout="absolute" styleName="glassPanel">
	</mx:Panel>
 
</mx:Application>

Open in new window

0
 
julianopolitoCommented:
look at panelView.mxml you will see this:

<mx:VBox height="100%" width="405" styleName="glassPods" paddingLeft="10" paddingRight="10"  >
       
        <head:GlassHeaders headerTitle="STYLE CONTROLS"/>

Then open the GlassHeaders.mxml

you will see:

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
        styleName="glassPanel" width="100%" >
<mx:Script>
    <![CDATA[
        [Bindable]
        public var headerTitle:String;
    ]]>
</mx:Script>
    <mx:Label text="{headerTitle}" styleName="glassLabels" />
</mx:Box>

0
Live webcast with Pinal Dave

Pinal Dave will teach you tricks to help identify the real root cause of database problems rather than red herrings. Attendees will learn scripts that they can use in their environment to immediately figure out their performance Blame Shifters and fix them quickly.

 
julianopolitoCommented:
continung (I pressed submit too fast......): it is not a panel actually, but a mix of vbox+ custom hbox+image(swf). I'll simplify and send you the example code
0
 
yarekAuthor Commented:
Great.. witing for final solution...
0
 
julianopolitoCommented:
Here it goes. You need to downlod the source from the flex explorer and use the assets folder for this example to work. The glassy header effect is actually a movieclip inside header.swf.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Style>
		.glassPods {
		    borderStyle: applicationControlBar;
		    fillColors: #FFFFFF, #FFFFFF;
		    fillAlphas: 0, 0.25;
		    highlightAlphas: 0, 0;
		    backgroundColor: #ffffff;
		    backgroundAlpha: .2;
		    borderThickness: 0;
		    dropShadowEnabled: true;
		    cornerRadius: 8;
		    paddingRight: 0;
		    paddingLeft: 0;
		    paddingTop: 0;
		    paddingBottom: 0;
		    horizontalScrollBarStyleName: fseVerticalScrollBar;
		    verticalScrollBarStyleName: fseVerticalScrollBar;
		}
		.glassPanel {
		    backgroundSize: "100%";
		    backgroundImage: Embed(source="/assets/header.swf#glassHeader");
		    paddingTop: 7;
		    paddingLeft: 10;
		}
		.glassLabels {
		    color: #FFFFFF;
		    fontSize: 12;
		    fontWeight: bold;
		    paddingLeft: 0;
		    paddingTop: 0;
		    fontFamily: Myriad;
		}
 
 
	</mx:Style>
	 <mx:VBox height="100%" width="405" styleName="glassPods" paddingLeft="10" paddingRight="10"  >
        
        <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" 
        	styleName="glassPanel" width="100%" >
 
    		<mx:Label text="My Title" styleName="glassLabels" />
		</mx:Box>
	 </mx:VBox>
	
	
</mx:Application>

Open in new window

0
 
julianopolitoCommented:
So look above and you will see: VBox is the "Panel". The header portion of this custom panel is actually the Box that uses the "glassPanel" style (the one containing the header swf) and the label.
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now