i am amateur in flex, and started my final year project in flex to learn it, i am stuck in place where i have to create rows of drop down lists when the user pressed add more, eg: like the ones in mail attachments
i think i have found a way to generate rows, i am not even sure whether it is a correct way, may be there are easy ways..if so please let me know
this is how i generate the rows:
<mx:states>
<mx:State name="newRow">
<mx:AddChild relativeTo="{cityDropdown}">
<s:DropDownList id="newbutton" creationComplete="hotelDropdown_creationCompleteHandler(event)" labelField="Name">
<s:AsyncListView list="{getAllHotelResult.lastResult}"/>
</s:DropDownList>
</mx:AddChild>
</mx:State>
</mx:states>
now when i generate more rows the dropdownlist ids will conflict, so i want to know a way to generate ids, i think i cant even call a function in there :(
please help...deadline is near :(
It just happens that I created something very similar recently, but using ComboBoxes rather than DropDownList - where the user can click Add More and a new ComboBox will slide down on a new row (right click the demo on my site to View Source - link below).
Maybe you can get some inspiration from that.
To auto increment the id names, you going to have to do some AS3 coding. Each time a button is created, its name will become "whaterver" + i (with i as an int incrementing each time)
http://bbishop.org/blog/?p=448
i don't understand about the state you used, but to do multi dynamic generated view, i choose to use "Event Bubbling" strategy and let the control without id.
wrap your controls into one component than make the event bubble from the component. than add listener on the parent of the control. thats all.
//in your custom control
dispatchEvent(new Event("myCustomEvent", true));
//in the parent control
parentComponent.addEventListener("myCustomEvent", myEventHandler);
Related
Hi, I have been working on a Flex Mobile application using Flash Builder 4.6.
I have 2 mxml 'views' in my project. In one mxml file, i have a function that grabs xml data.
In my other mxml file, I have a refresh button that when depressed is suppsosed to call the function in the first mxml file in order to once again grab the xml data.
I dont know how to call that function from outside the mxml file it is housed in.
I appreciate any help given. Thank you!
[UPDATE #2]*
I thought I should share some more details about my issue.
It is a reddit client mobile app. It fetches the feeds, etc.
In my main view called RedditReaderHomeView.mxml, I am using a splitViewNavigator spark component to house two other views like so:
RedditReaderHomeView.mxml
<s:SplitViewNavigator width="100%" height="100%" id="splitViewNavigator" autoHideFirstViewNavigator="true">
<s:ViewNavigator id="redditList" firstView="views.subredditList" width="300" height="100%"/>
<s:ViewNavigator id="redditFeed" firstView="views.redditFeed" width="100%" height="100%">
<s:actionContent.landscape>
<s:Button id="refreshButtonlLandscape" icon="#Embed('assets/refresh160.png')" click="refreshRSS()" />
</s:actionContent.landscape>
<s:actionContent.portrait>
<s:Button id="refreshButton" icon="#Embed('assets/refresh160.png')" />
<s:Button id="navigatorButton" label="Search" click="splitViewNavigator.showFirstViewNavigatorInPopUp(navigatorButton)" />
</s:actionContent.portrait>
</s:ViewNavigator>
</s:SplitViewNavigator>
As you can see in the code above, in my main view I have a button with the id "refreshButton." When I click this button, I want the reddit data to refresh. In other words I want to call a function to refresh the data, that is housed in the view, 'redditFeed'.
This is the function which is in a separate view named 'redditFeed.mxml', that I want to call using the refresh button in the main view shown above.
redditFeed.mxml
protected function myList_creationCompleteHandler(url:String):void
{
getRedditFeedResult.token = redditFeedGrabber.getRedditFeed(url);
getRedditFeedResult.addEventListener(ResultEvent.RESULT,busyOff);
}
I hope this helped clear out confusion as to what I was trying to do. Im assuming that the solution is quite simple, but alas, I am a novice programmer and new to Flex, so Im learning the ropes. Any help is appreciated. Thank you!
IF you have an instance of the view, then just do:
myViewInstance.myPublicFunction();
In MXML, the id element of the MXML tag is used to reference the view in ActionScript. Since you didnt' describe your architecture; it is unclear how one view can call the other.
If the view that needs to trigger the call is a parent of the view that has the function to make the call, then you could use the approach described above.
If the view that need to trigger the call is a child of the view that has the function to make the call, then you should dispatch an event from the "child" which the parent can listen to. In the event handler you would trigger the call.
If the view that needs to trigger and the view that has the function to make the call are both children of the same parent; then you should dispatch an event from the "Trigger" view, listen for it in the parent, and then use that event listener to make the call (Using similar code to what I explained above).
If you have a more complicated architecture of these two views; then you should look into some method to encapsulate the "remote call" functionality, such as into a service class. Many frameworks offer approaches to share that service class and/or results across multiple classes. ( MXML Files are classes).
There are two ways you can do this without getting into bad architecture by having the child view explicitly know about its parent:
Your child view can generate an event, which the parent is listening for. The parent will then call the function
The child view can have a public property of type Function. The parent view passes a reference to that function by setting the variable. The child view then calls the function (after checking to make sure it is not null).
By "refresh" I am completely disposing it and then introducing it again in the application (without closing the application itself - that is). Other than than I think the question is self-explanatory.
Example:
Say I have a component named myComponent. I add that component to the application using MXMl in the standard way <components:myComponent id="myID" />. Say that when a user clicks a button (the button may be in another state), the component with id myID should be garbage-collected and a new instance of it added to the application.
How do I go about doing that? If there are multiple solutions which one is the optimal performance-wise?
I am new to Flash and Flex so excuse me if any incorrect terminology were used.
Remove all the event listeners from the old component; whatever they are using the removeEventListener method:
myButton.removeEventListener(someEvent, someEventHandlerMethod);
Then all variables that refer to the component should be set to null. If created in an MXML file, like this:
<s:Button id="myButton" />
Then all you have to do is set that value to null:
myButton = null;
Once there are no references to the component, it can safely become eligible for garbage collection.
If you want to re-created, then just re-created it. You'll have to re-create it in ActionScript, but the code isn't hard. Conceptually something like this:
myButton = new myButton();
myButton.properties = propertyValues;
myButton.addEventListener(someEvent, someEventHandlerMethod);
parentContainer.addChildAt(myButton, whateverPositionYouWantToADdTheComponentAt);
I'm not sure I see the benefit of doing this. I suspect it'll be much more efficient to tweak the existing button instance in the way you need to as opposed to destroying it and trying to replace it with the exact same thing.
I am new to flex, actionscript and flash builder (having to do an upgrade to an existing project).
One of the problems I seem to have is that the Autocomplete component that seems to be part of flex extras is not displaying the list of items in the dropdown list. Basically, I get a list of blank items. I know they are there and they are the right items because as soon as I click on one, I get the right text in the combobox.
my Code in the mxml looks something like this
<mx:FormItem label="Company:" width="750" fontSize="20" horizontalAlign="right" color="#000000" required="true">
<ns1:AutoComplete enabled="true" labelField="CompanyName" textAlign="left" dropdownWidth="450" id="txtCompany" width="450" />
</mx:FormItem>
In the actionscript when the form loads, as part of the initialization a webservice call is made and the results from that call are set as the dataprovider for the above AutoComplete box like so
public function handleGetCompanyResult(event:ResultEvent):void{
txtCompany.dataProvider = event.result;
}
As I said, when I type a letter in the text box, I see a dropdownlist with a scroll bar on the left but it looks empty. When I click on one of the items, I see the associated company name in the text box. When I set a breakpoint the event.result is an ArrayCollection of proxyObjects.
I tried to change it and put some dummy data like so
public function handleGetCompanyResult(event:ResultEvent):void{
var companyList:ArrayCollection = ArrayCollection(event.result);
var displayCompanyList:ArrayCollection = new ArrayCollection();
displayCompanyList.addItem({CompanyName:"Test1"});
displayCompanyList.addItem({CompanyName:"Test2"});
displayCompanyList.addItem({CompanyName:"Test3"});
txtCompany.dataProvider = displayCompanyList;
}
Again, when I type "T" in the text box I see a dropdown list with 3 empty items. Clicking on the third item puts "Test3" in the textbox. But the items themselves are not visible.
It almost as if its a font/foreground color thing, but I've played around with some of those settings too with no success.
Any help would be much appreciated.
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.
Is it possible to control the properties of 'advancedgridcolumns' in 'advanceddatagrid' mxml tag. For e.g. suppose the grid data provider has 3 different fields. Out of these 3 fields, one field is 'to_be_decided'. This field should not be displayed initially. Only the remaining 2 columns should be displayed (visible true) and the third column (one with data field as 'to_be_decided', visible flag will be false here ) should be hidden. It will be visible when some event like a button click or something is fired.
We can do this in action script coding by accessing individual columns of grid and taking appropriate actions. But will it be possible to do so in mxml? Is there some default property in grid that can be used here ?
In mxml I can not access them individually in the grid (under tag) and hence I can not set the visible attributes individually for each of them. To add them one by one in 'columns' tags I would be required to know the data field in array collection and that I dont know. Only data field known is 'to_be_decided', rest two fields will vary time to time. Therefore even if I addd this one gridcolumn in 'columns' tag what about the other two?
Something like this :
<mx:columns>
<mx:AdvancedDataGridColumns dataField='to_be_decided' visible=false>
<!-- How to add other 2 columns here ? -->
</mx:columns>
Any suggestions/ideas in this regard?
If I failed to make myself clear please let me know I will try to reframe my question.
Thanks in advance.
You could try
<mx:columns>
<mx:Repeater id="rp" dataProvider="{yourArrayCollection}">
<mx:AdvancedDataGridColumns dataField="{rp.currentItem.fieldName}" visible="{rp.currentItem.show}">
</mx:Repeater>
</mx:columns>
where your dataProvider (yourArrayCollection) is an ArrayCollection of objects with properties "fieldName" (String) and "show" (Boolean).
I am trying to set one bindable variable to be bound to another. Essentially I want to create an alias. I would give up, but this seems like something that would be good to know.
essentially, I want changes in model.configView to be reflected in view, so that things bound to view.... behave the same as things bound to model.configView... in this example [Bindable]
var view = model.configView;
...
<mx:Label text="{view.lblThisLabel.name}" />
at the moment it does not, and I am getting errors that say "unable to bind to property 'lblThisLabel' on class 'Object' (class is not an IEventDispatcher)"
Not quite enough code here to really say what's going on, however you have made view bindable and that does not automatically mean that all of view's children are bindable. You'll have to go into view and make lblThisLabel bindable too.
Also it is hard for the rest of us to know how it works in your head. Perhaps you should describe that too.
Moreover, I think that even if, with your actual code, view changes should be detected, view won't be updated if assigned model.configView property is not bindable as well...