Keep the Panel styling, switch ApplicationControlBar to ControlBar in
the MXML with no styling applied to it.

The styling may not work for an ApplicationControlBar because of the
way you are using it. Maybe it's not meant to be used in a Panel like
that.

Juan
scalenine.com

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="448"
height="294"> 
        <mx:Panel width="422" height="257" layout="absolute"
title="Login" horizontalCenter="0" verticalCenter="-3.5"> 
                <mx:Image x="10" y="29" source="assets/images/lock.jpg"/> 
                <mx:Form x="111" y="58"> 
                        <mx:FormItem label="User Name" required="true"> 
                                <mx:TextInput/> 
                        </mx:FormItem> 
                        <mx:FormItem label="Password" required="true"> 
                                <mx:TextInput/> 
                        </mx:FormItem> 
                </mx:Form> 
                <mx:Text x="111" y="17" text="Please login for access
to the Digital Publishing System, or register to join." width="272"
height="35"/>

                <mx:ControlBar x="100" y="143" height="50"> 
                        <mx:HBox width="50%" horizontalGap="8"> 
                                <mx:Button id="btnRegister"
label="Register" click="parentDocument.currentState='Register'"/>

                        </mx:HBox> 
                        <mx:HBox width="50%" horizontalGap="8"
horizontalAlign="right"> 
                                <mx:Button id="btnLogin" label="Login"
click="parentDocument.currentState='Main'"/> 
                        </mx:HBox> 
                </mx:ControlBar>             
        </mx:Panel> 
</mx:Canvas>

--- In flexcoders@yahoogroups.com, "David Terry" <[EMAIL PROTECTED]> wrote:
>
> Hi Guys,
> 
> I'm not sure if I'm doing something wrong or if I've found a bug.
> 
> I have a MXML Component (Login Screen) that contains an
> 'ApplicationControlBar' within a 'Panel'.
> 
> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="448"
> height="294">
>       <mx:Panel width="422" height="257" layout="absolute"
> title="Login" horizontalCenter="0" verticalCenter="-3.5">
>               <mx:Image x="10" y="29"
> source="assets/images/lock.jpg"/>
>               <mx:Form x="111" y="58">
>                       <mx:FormItem label="User Name" required="true">
>                               <mx:TextInput/>
>                       </mx:FormItem>
>                       <mx:FormItem label="Password" required="true">
>                               <mx:TextInput/>
>                       </mx:FormItem>
>               </mx:Form>
>               <mx:Text x="111" y="17" text="Please login for access to
> the Digital Publishing System, or register to join." width="272"
> height="35"/>
>               <mx:ApplicationControlBar x="100" y="143" height="50">
>                       <mx:HBox width="50%" horizontalGap="8">
>                               <mx:Button id="btnRegister"
> label="Register" click="parentDocument.currentState='Register'"/>
>                       </mx:HBox>
>                       <mx:HBox width="50%" horizontalGap="8"
> horizontalAlign="right">
>                               <mx:Button id="btnLogin" label="Login"
> click="parentDocument.currentState='Main'"/>
>                       </mx:HBox>
>               </mx:ApplicationControlBar>             
>       </mx:Panel>
> </mx:Canvas>
> 
> If I use a global style for the 'ApplicationControlBar' and the
> 'Panel'...
> 
> ApplicationControlBar {
>    cornerRadius: 14;
>    dropShadowEnabled: false;
>    borderStyle: none;
>    fillColors: #e7e7e7, #d9d9d9;
> }
> 
> Panel { 
>    cornerRadius: 14;
>    headerHeight: 40;
>    dropShadowEnabled: true;
>    shadowDistance: 0;
>    roundedBottomCorners: true;
>    textAlign: left;
>    borderThicknessLeft: 0;
>    borderThicknessRight: 0;
>    borderThicknessTop: 0;
>    borderThicknessBottom: 0;
>    headerColors: #e7e7e7, #d9d9d9;
>    footerColors: #e7e7e7, #d9d9d9;
>    titleStyleName: "myTitleStyle";
> } 
> 
> The bar looks correct, but if I remove the 'ApplicationControlBar'
> global style and change to a custom style (notice the styles are the
> exactly same)...
> 
> .myAppBar {
>    cornerRadius: 14;
>    dropShadowEnabled: false;
>    borderStyle: none;
>    fillColors: #e7e7e7, #d9d9d9;
> }
> 
> And add the styleName="myAppBar" tag to the 'ApplicationControlBar' the
> display looks off.
> 
> Also...  Why does the global style override a custom style.  What I mean
> is.  Why can't I have both a global style and a custom style in the same
> application?  I would think if you set a global style for the
> 'ApplicationControlBar' it would use that style UNLESS you have a
> styleName defined.
> 
> Where am I going wrong?
> 
> Enclosed is a screenshot.
>  <<style.jpg>> 
> 
> ~David T.
>


Reply via email to