alert dialog not showing the text in flex 4

Question

Hi,

I am using Flex 4 and running into some problems displaying a simple alert box. The alert box shows up, but the text seems to be the same color as the background. I know the text is there because if I mouse over in the alert box window to roughly where the text would be, I can see the cursor change. And when I double click and copy-paste into notepad, I can see the message. But the message, the button text, the message box title don't show up.

The relevant code in my project is as follows

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark" layout="absolute"
initialize="{initialiseFlex()}"  backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]"
xmlns:ns2="keyboard.*" xmlns:ns1="com.adobe.flex.extras.controls.*" 
minHeight="864"  minWidth="1024" verticalScrollPolicy="off" width="1024">

<mx:Script>
            <![CDATA[
                    import mx.binding.utils.BindingUtils;
                    import flash.net.sendToURL;
                    import mx.utils.URLUtil;
                    import mx.managers.IBrowserManager;
                    import mx.managers.BrowserManager;
                    import mx.controls.Alert;

            ]]>
    </mx:Script> 

    <mx:Style>
            Alert {
                    titleStyleName: "alertTitle";
                    message-style-name: "alertMessage";
                    buttonStyleName: "alertButton";
                    background-color: #ffffff;
                    header-colors : #F4800E, #F4800E;
                    border-color : #F4800E;
                    corner-radius :6;
                    font-anti-alias-type:advanced;
            }
            .alertMessage {
                    fontSize: 20;
                    color: black;

            }
    </mx:Style>

<mx:Button click="Alert.show('From inside mxml')" 
enabled="false" x="580" y="440" label="Sign Out" id="btnSignOut" fontSize="24" 
labelPlacement="right" color="#F4800E" />

I have tried various things such as removing all the style information (the alert box shows up as bluish box, but again the text is the same color and hence invisible). I have removed all the backgroundgradientcolos and alphas from the application tag. etc. etc. I have changed the ".alertMessage" to "alertMessage" in the style part. But no matter what, the message text, title and button text in the alert box is always invisible. I know the text is there, as I said, because I can mouseover the alert box and see the cursor change, and then double click and copy/paste the text.

I have a suspicion that this is related to another problem I am having in the same project described here http://stackoverflow.com/questions/3544369/autocomplete-in-flex-4-0-not-displaying-items-in-dropdown-list

Both of these controls seem to have text that is invisible, as if the text color is set the same as the background. I have tried to look for other style files, theme files or something in the project that would be responsible for setting these colors. But couldn't find any. The project is relatively simple with one mxml, 3 ".as" files, one of which has validation logic and the other one has a wait anmiation. The third one has business logic code, but nothing to do with colors or themes. The other controls in the project - text boxes, buttons, datagridsl, panels all work fine. Its the autocomplete box and the alert box that seem to not want to display text that is there.

Any ideas or hints of what might be the cause of the problem?

Answer 1

I think the background and the text color are white for your Alert.

try

Alert 
{

       color: #000000;

       titleStyleName: "alertTitle";
       message-style-name: "alertMessage";
       buttonStyleName: "alertButton";
       background-color: #ffffff;
       header-colors : #F4800E, #F4800E;
       border-color : #F4800E;
       corner-radius :6;
       font-anti-alias-type:advanced;
}

Answer 2

Ok, turns out the project was a Flex 3 project that was imported into Flex 4. It works where it does and breaks down where it doesn't. I created a simple Flex 4 project with an alert box and it worked. I slowly moved all my code across to this project and it worked. It gave me a warning about the styles tag about not being able to use or something like that. I just removed all of the style tags and it worked fine. It doesn't look the same, so I have to fiddle with it a bit more, but at least the text showed up. So something to do with the themes and the Flashbuilder compiler using them at compile time.

All I have to say is what a crappy tool. If the import didn't work, it should have failed completely ages ago. I searched and searched for any projects files or code files that were related to css or styles or themes. But clearly it was using something that was independent of my project to control some tiny part(s) of my project. The parameters of controls in my project were essentially dependent on some environmental/ide factors. What a pain to debug.

Thanks for the help though guys.

Answer 3

Thanks a lot for such a question, your answer was also very helpful - it showed a way to dig. After Nearly 8 hours of digging I've managed to find one more solution for that problem.

This "invisible" text seems to be a problem of incorrect theme migration (Halo -> Spark).

1) This problem can be avoided if you are NOT using "-compatibility-version=3.0" argument (or equal "Use Flex 3 compatibility mode" flag in Flex Builder).

2) There may be some errors in your Flex 3 project regarding styles, and they are fixed by changing default project theme to "Halo" in "Project->Properties->Flex Theme".

Answer 4

I just wanted to say THANK YOU ALL !!!!