Flex PopUp Null Object Module - apache-flex

I'm doing a flex program, but i'm having some trouble when calling a pop up from my module. These are the codes:
The function that calls the popUp.
[Bindable] private var popUp : newMemberPopUp;
private function btnNewClickHandler(event:MouseEvent):void {
popUp = newMemberPopUp(PopUpManager.createPopUp(this, newMemberPopUp, true));
}
The popUp mxml
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="350" height="250"
title="Dados Cadastrais">
<fx:Declarations>
</fx:Declarations>
<s:VGroup width="100%">
<mx:Form width="100%">
<mx:FormItem label="Nome">
<mx:TextInput id="nameTextInput"/>
</mx:FormItem>
<mx:FormItem label="Telefone">
<mx:TextInput id="phoneTextInput"/>
</mx:FormItem>
<mx:FormItem label="Email">
<mx:TextInput id="emailTextInput"/>
</mx:FormItem>
<mx:FormItem label="Data de Nascimento">
<mx:DateField/>
</mx:FormItem>
<mx:FormItem label="Data de Cadastro">
<mx:DateField/>
</mx:FormItem>
</mx:Form>
<s:HGroup paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<s:Button label="Gravar"/>
<s:Button label="Cancelar"/>
</s:HGroup>
</s:VGroup>
</s:TitleWindow>
The error i'm getting is this one:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.managers::PopUpManagerImpl/http://www.adobe.com/2006/flex/mx/internal::createModalWindow()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:682]
at mx.managers::PopUpManagerImpl/addPopUp()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:397]
at mx.managers::PopUpManagerImpl/createPopUp()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:236]
at mx.managers::PopUpManager$/createPopUp()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\PopUpManager.as:139]
at view::Members/btnNewClickHandler()[E:\MyFlexWorkspace\CTCA\src\model\Members.as:29]
at view::Members/__btnNew_click()[E:\MyFlexWorkspace\CTCA\src\view\Members.mxml:39]
If i call the pop up from the application it works fine, but if i call it from the module i have this error.

Make sure you include PopupManager in your top level application. Here is a fairly detailed writeup that talks about a similar issue:
http://blog.flexicious.com/post/Modules-Ultimate-Styles-Popups-and-CheckBoxes-29.aspx

Related

Flex 4: tabIndex is not working inside form

tabIndex is not working properly in the below flex code.
mx:AddChild tag is used to add Login.mxml in index.mxml as shown below:
index.mxml
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:login="com.states.login.*"
initialize="init()"
pageTitle="Demo" >
<mx:Script>
<![CDATA[
public function init():void {
Application.application.currentState = 'initState';
}
]]>
</mx:Script>
<mx:states>
<mx:State name="initState">
<mx:AddChild relativeTo="{MainCanvas}" position="lastChild">
<login:Login id="Login"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:VBox>
<mx:Canvas width="100%" height="100%" id="MainCanvas">
</mx:Canvas>
</mx:VBox>
</mx:Application>
Login.mxml
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" >
...
<mx:Form>
<mx:FormItem label="Username:">
<mx:TextInput id="username" tabEnabled="true" tabIndex="1"/>
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="password" displayAsPassword="true" tabEnabled="true" tabIndex="2"/>
</mx:FormItem>
</mx:Form>
...
Tabbing is working when focus is outside the form in browser. But does not work when focus is inside the TextInput control.
The issue was resolved after doing below 2 changes:
Move the code in Login.mxml into index.mxml and removed AddChild method.
year is set to 2006 in xmlns:mx and xmlns:fx namespaces. (Not sure if this was the issue)
How to resolve the tabbing issue without removing AddChild method.

Why I get "Error #1069: Property softKeyboardRect not found on flash.display.Stage and there is no default value." when I add a DateField component?

I am trying to add a DateField component to my flex application but when I click on it I get this runtime error:
[Fault] exception, information=ReferenceError: Error #1069: Property softKeyboardRect not found on flash.display.Stage and there is no default value.
It works ok if I do in a simple application and I add the DateField on it but it does not work when I add it on another application.
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
color="#333333"
creationComplete="init()">
.... action script code.....
<fx:Declarations>
.............
</fx:Declarations>
<mx:Panel id="MainPanel" title="MyApp" height="1000" width="1100" layout="horizontal" verticalScrollPolicy="auto" >
<mx:HBox id="HBoxHeader" >
<mx:DateField id="StartDate">
</mx:DateField>
</mx:HBox>
<mx:VBox id = "VBoxGroupHeader_LB" height="950" width="250" verticalScrollPolicy="on" visible="true" horizontalAlign="center">
<mx:Label id="groupLable_LB" text="GROUPS" />
<mx:LinkBar id="linkBarGroup" direction="vertical" horizontalAlign="center" itemClick="getMembers(String(event.label))"/>
</mx:VBox>
<mx:VBox id = "VBoxMembersHeader_LB" height="950" width="250" verticalScrollPolicy="on" visible="true" horizontalAlign="center">
<mx:Label id="memberLabel_LB" text="MEMBERS" />
<mx:LinkBar id="linkBarMember" direction="vertical" horizontalAlign="center" itemClick="getMemberTypes('stats.' + activeGroup + '.' + String(event.label))"/>
</mx:VBox>
<mx:VBox id = "VBoxGraphs" height="950" width="580" verticalScrollPolicy="on" visible="true">
</mx:VBox>
</mx:Panel>
Any idea of what might cause this problem?
Thanks
you are targeting older flash player, if you are using SDK 4.6 you need at least flash player 11.1.

Why do children of my popup panel appear outside of the panel

I am using the flex 4 popup manager to popup a panel, but the children of the panel are not staying inside the panel. But when i close the popup the children are being removed.
Like this: (sorry i can't post pics)
----------
l________l
l l
..... please enterl
l--------1
Anybody know why? Here's my code:
var forgotPopup:Panel = PopUpManager.createPopUp(this, forgottenForm, true) as Panel;
PopUpManager.centerPopUp(forgotPopup);
And here's what i'm popping up:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form horizontalCenter="0" verticalCenter="0">
<mx:FormHeading label="Please enter your e-mail address and your login details will be e-mailed to you"/>
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
Any help on this would be brilliant, thanks.
Try to use the following:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form left="10" right="10" top="10" bottom="10">
<mx:FormHeading label="Please enter your e-mail address and your login details will be e-mailed to you"/>
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
If you need to have header word wrapped you should reject standard FormHeading and replace it with Label:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="218" height="168" skinClass="PanelSkin" title="Reset Details">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
// Handle the close button and Cancel button.
private function handleCloseEvent():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Form left="10" right="10" top="10" bottom="10">
<s:Label width="100%" text="Please enter your e-mail address and your login details will be e-mailed to you" fontWeight="bold" />
<mx:FormItem label="E-mail">
<s:TextInput id="userInput" x="78" y="49"/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<s:Button id="okButton" label="Submit" skinClass="ButtonSkin" />
<s:Button id="cancelButton" label="Cancel" skinClass="ButtonSkin"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
But the best way is to switch to Spark Form which is available since Flex 4.5.
Please Avoid X and Y position
this might also cause the Objects Positions.

Navigate to a new view upon click using flex

friends.
I'm developing a flex mobile app. I've declared a Titlewindow which contains the alert message following the example of "TourdeFlex". And I failed to navigate to a new View after clicking YES button.
<fx:Script>
<![CDATA[
protected function some_handler():void
{
(new AlertMsg()).open(this,false);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="AlertMsg">
<s:SkinnablePopUpContainer x="70" y="300">
<s:TitleWindow title="MSG" close="close()">
<s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
<s:Label text="Some Alert MSG"/>
<s:HGroup>
<s:Button label="YES" click="{outerDocument.navigator.pushView(myNewView)}"/>
<s:Button label="No" click="close()"/>
</s:HGroup>
</s:VGroup>
</s:TitleWindow>
</s:SkinnablePopUpContainer>
</fx:Component>
</fx:Declarations>
This code can be successfully compiled but it was wrong during runtime:Error #1009: Cannot access a property or method of a null object reference.
How can I handle this kind of problem.
outerDocument is null. Try owner:
click="(owner as spark.components.View).navigator.pushView(myNewView)"

How to display images from FileReferenceList?

I have a FileReferenceList from which I'd like to display images in a DataGrid; currently I'm getting the following error: Only one download, upload, load or save operation can be active at a time on each FileReference. Following is my code; anyone know how to resolve the error I'm getting? Thanks.
Here is my DataGrid:
<s:Panel>
<mx:DataGrid id="imageGrid" width="100%" height="100%" dataProvider="{imageFiles}">
<mx:columns>
<mx:DataGridColumn itemRenderer="renderers.GridImgRenderer" headerText="Image"/>
<mx:DataGridColumn dataField="name" headerText="Image Name"/>
<mx:DataGridColumn dataField="size" headerText="Image Size"/>
</mx:columns>
</mx:DataGrid>
<s:controlBarContent>
<s:Button id="browse" label="Browse" click="browseHandler(event)"/>
<s:Button id="upload" label="Upload"/>
</s:controlBarContent>
<s:controlBarLayout>
<s:HorizontalLayout horizontalAlign="center" paddingBottom="5" paddingTop="5"/>
</s:controlBarLayout>
</s:Panel>
Here's my renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" creationComplete="init()">
<fx:Script>
<![CDATA[
private function init():void
{
data.addEventListener(Event.COMPLETE, function(event:Event):void
{
imagePreview.source = event.target.data;
});
data.load();
}
]]>
</fx:Script>
<mx:Image id="imagePreview" width="200" maintainAspectRatio="true" scaleContent="true"/>
</s:MXDataGridItemRenderer>
Try this It May help You.
http://blog.snowflax.com/multiple-image-browse-using-filereferencelist-in-flex/
Well for starters, your renderer is wrong. You'll run into problems when they are recycled.
To answer your main question, you are probably running into the security issue around file access and user initiated events.
Its a thorny issue and I suggest reading the documentation on it!

Resources