FLEX Progess Bar

[samsonkiran]

Hi

I have an requirement that i need to display the progress bar while the data is getting retrieved/stored in the DB. I am able to get the progressbar. but when i dispaly the progress bar, the application should be disabled so the user will not change any field values. I tried

Application.application.enabled=false.

When i use this the application is getting disabled but even the progress bar is not appearing on the top layer. Please let me know how do i get the progress bar on top of the application.

And one more query related to progress bar. I am creating a progressBar in actionscript before my httpService.send() method. I need to set this progressBar.visible to false when i get the response back. How do i do this?

Any help is really appreciated. This is very urgent

Thanks

[Mondan]

I would just make all the field inputs disabled, if you havent already tried this. As for setting the progressbars visibility to false, i would assume that whatever data you are recieving/storing would through out some form of 'complete' event so i would try catching that and in the handler for it just set the value to false.

Hope this helps.

[DjKermit]

You can show progress bar in popup via PopupManager with modal parameter set to true. This will disable any actions in your app under that popup.

[Peter Cowling]

You can show progress bar in popup via PopupManager with modal parameter set to true. This will disable any actions in your app under that popup.

Yep, I would advocate that approach.

As an aside, I think it is the case that the modal true will prevent further user interaction, but not that it acts in the true modal sense i.e. systemManager is still open for business.

[charlesshoults]

Does the PopupManager appear similar to the Alert box, where everything behind it kind of fades out or does everything retain their colors while being non-accessible?

I started out with progress bars and forms simply as elements on the page and set everything behind it to disabled, but I really didn't like the look or having to handle the enabled=true / enabled=false for each item. In the end, I handled it using states. Create a state where the progress bar is visible and set it up so that it's impossible to leave that state by clicking on anything. When the action, for which the progress bar is intended, is complete, you tell the system currentState=whatever, the progress bar goes away and everything returns to normal.

[samsonkiran]

Hi everyone

Thank you all for your valuable inputs.

I could not use the idea of popupmanager because my customer do not like the popup.

As charlesshoults mentioned, even i do not like the idea of setting enabled=true/false. charlesshoults, is it possible for you give me a sample code. Because i am new to FLEX and i am just learning and doing myself.

This is very urgent. Any help is appreciated.

Thanks

[DjKermit]

Does the PopupManager appear similar to the Alert box, where everything behind it kind of fades out or does everything retain their colors while being non-accessible?


It behaves exactly like Alert only if "modal" is set to true.

[charlesshoults]

It's been a few days since I've been on here because I just moved but I'll try to describe what I did for states in my login panel. I have 30+ states in my application and with that many, it gets complicated very quickly.

When you start a flex application, you have a base home state and little else. Lets say you have a base window and you want a panel that you can turn on and off at will and your default state will be with the panel hidden. You could use actionscript to say panel.visible=true and code for it or you could create the panel and set it's default parameter to visible="false", then create a new state named whatever you want. Near the top of your code, you'll see something like the following:

<mx:states>
<mx:State name="Home">
<mx:SetProperty target="{aboutPanel}" name="visible" value="true"/>
</mx:State>
<mx:State name="menu0">
<mx:SetProperty target="{btn0}" name="alpha" value="1.0"/><mx:SetProperty target="{btn0Line}" name="alpha" value="1.0"/>
<mx:SetProperty target="{navList}" name="dataProvider" value="{gridSource.startedList}"/>
</mx:State>
</mx:states>

My "Home" state, has a login window visible, while in every other state, the panel is hidden. The next thing to do is tell the system how to get from one place to another. For every button that allows my users to get from one place to another, I have this: click="clk='whatever'; setStates()" In reality, I have everything stored in ArrayCollections and I reference the title of whatever they click on and set clk equal to that. It then runs a function in an external actionscript file and processes based on clk. clk tells you where you want to go but it also does a check to see where you are by checking the CurrentState. A small part of that is shown here:

var t:String = MessageBoard.currState;
switch(MessageBoard.clk) {
case "menu0" : switch(t){
case "Home" : MessageBoard.tgtState="Home"; break;
case "menu0" : MessageBoard.tgtState="menu0"; break;
case "menu1" : MessageBoard.tgtState="menu0"; break;
case "menu2" : MessageBoard.tgtState="menu0"; break;
case "menu3" : MessageBoard.tgtState="menu0"; break;
case "showMessenger1" : MessageBoard.tgtState="showMessenger0"; break;
case "showMessenger2" : MessageBoard.tgtState="showMessenger0"; break;
case "showMessenger3" : MessageBoard.tgtState="showMessenger0"; break;
case "mapEditPane" : MessageBoard.tgtState="menu0"; break;
case "mapEditPaneIM" : MessageBoard.tgtState="showMessenger0"; break;
case "mechLab" : MessageBoard.tgtState="menu0"; break;
case "mechLabIM" : MessageBoard.tgtState="showMessenger0"; break;
} break;
}

My code might look a little odd but what I do is call the function which returns a value and sets the current state, so I have to account for every possibility, even if the state stays the same.

Back to examples, if you have a Home state with your basic application and a Progress state that shows the bar as visible, you code in whatever conditions needed to trigger the progress bar, then say currentState=Progress; From that point, you're application continues doing it's thing and when the conditions for which the progress bar are concluded, you say currentState=Home.

If you have a dozen states, you decide which states should be accessible from which other states and include lines in your code to allow for the transition. If you want to display the progress bar and disable everything until the code completes, you would create a switch for clk and a case statement for each state. For each of those, you point it back to Progress. It sets the state and you have told it that if the current state is Progress, clicking on button X takes you right back to Progress. You don't have to worry about whether a control is set to visible=true or false or enabled=true or false.

Once you have the states in place, you can add transitions if you want. You could have the progress bar fade in or out, slide from the top or from the side or even appear small, then zoom in.