alert dialog not showing the text in flex 4

Question

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 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 had the same problem and the answer of Wiseman worked for me. I noticed that que compiler option "Use Flash Text Engine in MX components" must be enabled too.

Answer 5

I was having the same issue after embedding Arial font family into my app. Suddenly Alerts and all other Flex component texts (like tooltips) we're empty. Took me a while to find this after trying all kind of not-so-elegant solutions.

I didn't even have "Use compatibility mode" enabled. Everything worked again after checking "Use Flash Text Engine in MX components". Never would have tried that.

From what I can tell the Alert and rest of Flex components are now using the embedded font to display texts which was the intended purpose. I'm guessing this has something to do with the new Text Layout Framework they used for Flex4 combined with embedded fonts.

Answer 6

I had that problem. Javier Alvarez solution worked for me - But the problem itself only happened when I used Right-To-Left lay