This is what's happening:
I have a Tabnavigator with the following tab:
<s:NavigatorContent width="100%" height="100%" label="Add a logo" includeIn="loggedin">
<components:LogoSearch />
</s:NavigatorContent>
When I change the state to "loggedin" with following code:
protected function Login_getStateHandler(event:Event):void
{
this.currentState = "loggedin";
}
the navigatorContent shows but not the component "LogoSearch", in design view however it does show when I switch states.
There are no states defined in "LogoSearch" and should show...?
When I include the tabnavigator in "normal" aswell as "loggedin", then change the state to "loggedin", the component "LogoSearch" shows. When I only show the tabnavigator in "loggedin", change the state to "loggedin", the component "LogoSearch" doesn't show.
Any idea why this is happening? I'm no pro in flex at all so feel free to point me on my mistake. Thanks.
Tried working with invalidateDisplayList() and invalidateProperties() as suggested by Tianzhen Lin. Still nothing showing.
<s:NavigatorContent width="100%" height="100%" label="Add a logo" includeIn="loggedin" id="AddLogoTab" >
<s:Label text="test" id="test" />
</s:NavigatorContent>
And :
protected function Login_getStateRegisterHandler(event:Event):void
{
this.currentState = "register";
test.invalidateDisplayList();
test.invalidateProperties();
test.validateNow();
AddLogoTab.invalidateDisplayList();
AddLogoTab.invalidateProperties();
AddLogoTab.validateNow();
}
Whatever I do, the content of the NavigatorContent won't show after statechange.
To narrow down the problems you have, you may start by eliminating includeIn="loggedin" in your code, this would at least ensure that your component is showing properly.
Next, I would put a breakpoint at your Login_getStateHandler function, and see if it is ever called. If not, then it is somewhere in your wiring that the handler is not called. You may post more code here to get help.
Related
In my application i am using a borderContainer which contains two or more panels.All these panels are resizable.
My problem is while resizing a panel if it touches the panel next to it i have to stop resizing automatically.
I used hittestObject and able to catch the hitting point but i dont know how to stop resize event.
Please help me.
I haven't tested this code but you can try. :). Basically I have to use the preventDefault method whenever I need to stop the execution of the default behavior of that specific method.
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.events.ResizeEvent;
//Your other codes here
public function panel_resizeHandler(event:ResizeEvent):void
{
var isTouched:Boolean = firstPanel.hitTestObject(secondPanel);
if(isTouched)
{
event.preventDefault();
}
}
]]>
</mx:Script>
<mx:Panel id="firstPanel" resize="panel_resizeHandler(event)>
<!-- Panel contents here-->
</mx:Panel>
<mx:Panel id="secondPanel" ">
<!--Panel Contents Here -->
</mx:Panel>
First of all I wanted to thank in advance to everyone that reads this post.
I'm having a problem when adding a child to a VBox component. Is it not the same thing?:
List Item:
<mx:Script>
<![CDATA[
public function addChildren():void {
var f:FaqItem=new FaqItem();
f.id="newUsersAssistance";
this.cont.addChild(f);
}
]]>
</mx:Script>
<mx:VBox id="cont" width="100%" borderThickness="0" verticalGap="0"/>
and:
<mx:VBox id="cont" width="100%" borderThickness="0" verticalGap="0">
<view:FaqItem id="newUsersAssistance" />
</mx:VBox>
I am injecting two properties (question and answer) to the FaqItem component from an auxiliar file (using BabelFX) that depends on the id of the FaqItem, but it is only working when I choose the second option. If I use the first option, I get a child but with the text in question and answer fields is empty. I need to use the first option.
Is there anything I am doing wrong?
Thanks again for everything
Kind Regards
i don't think you will be able use the id property of the dynamically added component to do Injection. I suggest you keep some bindable variables to bind the value to the dynamic FaqItem.
i've got a pretty straightforward thing: a datagrid which renders some items. clicking on an item would bring up a popup editor (as the item has lots of properties and may not be edited right in the datagrid).
the popup contains just a form and a [Bindable] reference to the item it edits (which is passed from itemClick handler of the datagrid). form's default values are taken by binding to corresponding item properties with {} notion, while form values are bound back to the item using mx:Binding tags.
and now the problem. when the popup is brought up for the first time, everything is fine. however, when after being closed the popup is brought up again by clicking on the same item, the browser hangs (afaik because of change watchers being endlessly fired resulting in stackoverflow or something similar).
we have same behaviour in Safari, IE and Chrome, so i guess it's not to do with something browser-related. removing either [Bindable] from the item reference in the popup or mx:Binding tags from editors suppresses the problem, but of course the editing no longer works.
i'm banging my head against the wall for several days already, but still can't make it work. does it ring a bell to someone, what can be wrong in here (what can be damn easier that this)?
here's the code of the popup:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Details"
showCloseButton="true" close="PopUpManager.removePopUp(this);" creationComplete="PopUpManager.centerPopUp(this)">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import my.Detail;
[Bindable] private var _documentDetail:Detail;
public function set documentDetail(value:Detail):void {
this._documentDetail = value;
}
public function set readOnly(value:Boolean):void {
if (value) {
this.currentState = "read-only";
}
}
]]>
</mx:Script>
<mx:states>
<mx:State name="read-only">
<mx:SetProperty target="{startDate}" name="enabled" value="false"/>
<mx:SetProperty target="{comments}" name="enabled" value="false"/>
</mx:State>
</mx:states>
<!--
<mx:Binding source="this.startDate.selectedDate" destination="_documentDetail.startDate"/>
<mx:Binding source="this.comments.text" destination="_documentDetail.comment"/>
-->
<mx:VBox width="100%" height="100%">
<mx:FormItem label="{resourceManager.getString('eRequestAppli','startdate')}:" labelWidth="160" width="100%">
<mx:DateField id="startDate" width="100%" selectedDate="{_documentDetail.startDate}" formatString="{resourceManager.getString('eRequestAppli', 'dateformat')}" editable="false"/>
</mx:FormItem>
<mx:FormItem label="{resourceManager.getString('eRequestAppli','comments')}:" labelWidth="160" width="100%" height="79">
<mx:TextArea id="comments" width="100%" height="100%" text="{_documentDetail.comment}" editable="false"/>
</mx:FormItem>
</mx:VBox>
</mx:TitleWindow>
here's how i call it:
private function show(detail:Detail, readOnly:Boolean=false):void {
var popup:fxc_ProposalDetail =
fxc_ProposalDetail(PopUpManager.createPopUp(UIComponent(Application.application), fxc_ProposalDetail, true));
popup.documentDetail = detail;
popup.readOnly = readOnly;
}
Thanks for posting the code. Now I might be able to help.
Where are you handling the close event of the popup? Besure to use something like this:
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
Besides that it appears your problem has to do with the following:
Because a module is loaded into a child domain, it owns class definitions that are not in the main application’s domain. For example, the first module to load the PopUpManager class becomes the owner of the PopUpManager class for the entire application because it registers the manager with the SingletonManager. If another module later tries to use the PopUpManager, Adobe ® Flash® Player throws an exception.
The solution is to ensure that managers such as PopUpManager and any other shared services are defined by the main application (or loaded late into the shell’s application domain). When you promote one of those classes to the shell, the class can then be used by all modules. Typically, this is done by adding the following to a script block:
import mx.managers.PopUpManager;
private var popUpManager:PopUpManager;
The module that first uses the component owns that component’s class definition in its domain. As a result, if another module tries to use a component that has already been used by another module, its definition will not match the existing definition. To avoid a mismatch of component definitions, create an instance of the component in the main application. The result is that the definition of the component is owned by the main application and can be used by modules in any child domain.
see: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-799a.html
for a better understanding of modules.
as suggested before, reusing the popup instead of creating a new one each time seems to have solved the issue.
I need some help with sending info from a component. I'm not sure how to proceed.
I'm using Alex Uhlmann's flip card class (Distortion Effects). I've got a card that has 3 faces. When the user clicks the button, it fires a change event, and in the main application, the change event calls a function, flipTo, that flips the card. The component is below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="500"
height="400">
<mx:Metadata>
[Event("change", type="mx.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Bindable]
public var backCaption:String;
]]>
</mx:Script>
<mx:Text id="myAnswer" htmlText="{backCaption}" width="100%" />
<mx:ControlBar height="40" width="100%" >
<mx:Button
x="20" y="400"
label="Flip"
click="dispatchEvent( new Event( Event.CHANGE ) );" />
</mx:ControlBar>
</mx:Panel>
The main application looks like:
<mx:Canvas id="homeStack" >
<mx:ViewStack id="flipViewStack2" x="200" y="150" >
<sides:FlipFace
id="frontFace2"
title="Newport"
change="flipTo(frontFace2, backFace2, DistortionConstants.LEFT, DistortionConstants.RIGHT);" />
<sides:FlipReverse
id="backFace2"
title="Newport: Answer"
change="flipTo(backFace2, anotherFace2, DistortionConstants.LEFT, DistortionConstants.LEFT);" />
<sides:FlipAnotherSide
id="anotherFace2"
title="Other Stuff"
change="flipTo(anotherFace2, frontFace2, DistortionConstants.RIGHT, DistortionConstants.LEFT);"/>
</mx:ViewStack>
</mx:Canvas>
<mx:Canvas id="OtherStack" >
(more code)
</mx:Canvas>
The flipTo function in the main application takes 4 parameters: the starting side, the ending side, and then two parameters that determine the direction of the flip.
Everything works great. If I hit the button, I can flip through all of the sides. But, I'd like to add a comboBox, so that the user can flip directly to the side that they want instead of having to cycle through all of the sides. (This is important as I plan to add more sides).
In the main application, please note that the sides have the number 2 in their ids. For example, frontFace2. I've got multiple sets of cards each with a different number, frontFace3, frontFace4, etc. The number determines which data is pulled from the database. (I've simplified the code for brevity).
How can I add a comboBox in the component that causes the card to flip to the selected side?
Do I need a custom event? (Unfortunately, I don't know anything about custom events). Is there a way to have the comboBox set a public variable and then somehow access that variable in the main application and call flipTo with the comboBox's chosen side? Other possibilities?
Any suggestions?
Thank you.
-Laxmidi
oh, yeah, you will need a custom event.
the custom event is your inheritance to the Event class which on it you can load more data, params, views and more.
in your case, things are a bit more simple but you will need to see what "face" the user selected and flip to it.
steps
1. create a custom event (inherit from event)
2. add a var to the event class that's called face
3. when the user selects the value from the combo, fill the face var with value and dispatch the event
4. listen to the event in the application level and then flipTo the relevant face.
I have a function that restores all of the default settings of my application. This process can take a bit of time, so I would like to implement a "Please wait..." modal popup to let the user know that everything is alright and the program hasn't frozen. Once the function completes its task, I'd like for it to remove the message, and resume normal behavior.
alt text http://www.freeimagehosting.net/uploads/c5906da30c.jpg
On start:
var waitingpopup:TitleWindow = new TitleWindow()
waitingpopup.title = "Please Wait ..."
PopupManager.addPopup(waitingpopup, this, true)
On complete:
PopupManager.removePopup(waitingpopup)
As long as you don't need to convey anything to the user other than "the app is still running", I think a more elegant method would be to just change the cursor:
mx.managers.CursorManager.setBusyCursor()
//do stuff
mx.managers.CursorManager.removeBusyCursor()
The cursor will change to a clock with spinning hands. I'm not sure if there's a way to override this with your own animation, but it's simple and doesn't require you to design your own window.
You can use the PopUpManager to create a Modal PopUp with an animated spinner. The Alert component does this. You can always reference the Alert source code to see how it works.
For those arriving late to this question, Adobe released a Throbber in 4.5:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1283019
http://fusiongrokker.com/post/using-the-flex-4-5-busyindicator
http://flexdevtips.blogspot.com/2011/05/simple-animating-preloader-and.html
For example, run the following from the fusiongrokker link above:
private function busyOn():void
{
throbberId.visible = true;
}
private function busyOff():void
{
throbberId.visible = false;
}
]]>
</fx:Script>
<s:VGroup width="100%"
paddingLeft="10"
paddingRight="10"
paddingTop="10"
paddingBottom="10">
<s:BusyIndicator
id="throbberId"
visible="false"
rotationInterval="{rotationInterval}" />
<s:Button
id="start"
click="busyOn()"
width="100%"
height="50"
label="start" />
<s:Button
id="stop"
click="busyOff()"
width="100%"
height="50"
label="stop" />
</s:VGroup>