PDA

View Full Version : open component / mxml file + button click


ljonny18
10-30-2006, 09:30 AM
Hi

I am really struggling with my Flex application… I have looked on the internet and through the “macromedia flex” book itself, but am not having any joy understanding / finding a solution to my problem….

I have put posts up on this forum and others but again have had no joy, I think it is because I am new to flex and am having difficulties explaining my problem and relating my query to a flex application rather than a website style application (which is what I am most familiar working with) etc……

Anyway, enough of the ramble, I will try and explain again…

I have a Flex application containing different MXML files acting as different “pages” within my application.. e.g. :

mainApp.mxml
homepage.mxml
viewRecords.mxml
contactPage.mxml
etc…………….

my mainApp.mxml file is my main application file and shows / embeds the homepage.mxml file as the default “component”.
Within my homepage.mxml file I have buttons (mx:button) labelled “view records” and “cotact us” etc…..

1)when I click a button I want to show the relevant .mxml file (navigate to it) – so e.g. when the contact button is clicked I want to navigate to, and show the contact.mxml file within the application so I assume I need some sort of “click” event on the button, but I cant work out what!

<mx:button id=”contactButton” label=”contact us” click=”show contact.mxml…….”/>

2)additionally (in the case of the “view records” button) I want to also pass a variable (ID) as it changes across on the button click

NOTE the ID is got and set from a dataGrid and saved as a bindable variable, so is already available and is ready in the application – I just need to pass it across into the viewRecords.mxml file


If anyone could help, or offer any suggestions – it would be most appreciated.

Thanks,
Jon.

meddlingwithfir
11-02-2006, 06:59 PM
I believe this is normally done through event handling.

So in your mainApp.mxml, you would have an event listener. Then within your other MXML files, you would use the dispatchEvent() function to send data back to mainApp.mxml.

There's a published example out there on how to do this:

"Your First Flex Application with a ColdFusion Backend"
http://www.asfusion.com/articles/

The bundled code:
http://www.asfusion.com/apps/mytodolist/srcview/mytodolist_cfdj.zip

Hope this helps.

CDHBookingEdge
11-03-2006, 09:09 PM
Johnny I understand your troubles to an extent. But maybe what you want to do is to take a step back a bit and ask yourself what you really want to do. Here's what I mean.

You said: I have a Flex application containing different MXML files acting as different “pages” within my application.. e.g. :

mainApp.mxml
homepage.mxml
viewRecords.mxml
contactPage.mxml
etc…………….

my mainApp.mxml file is my main application file and shows / embeds the homepage.mxml file as the default “component”.
Within my homepage.mxml file I have buttons (mx:button) labelled “view records” and “cotact us” etc…..


Now mainapp is really not a page, it's a container, it's mx:Application. Right?
So the application(mainapp) starts up and the homepage comes up, presenting the buttons you mentioned. Am I right so far?

So then, let's say that the user clicks on the button "contact us". Do you want the "whole" home page to be replaced with your contactpage? Or do you want to have a dialog of sorts brought up? What do you expect/wish for when the user clicks on that button?

If, as I'm thinking, you want the contact "page" to be brought up in place of the homepage then maybe you want to look at ViewStacks.

Or, maybe you want to use tabs, and have one tab be a contact tab. Or you could just bring up a dialog that holds the contact page infomation. Or you could use the Accordion and have it show the options.

The concept at least as I've been able to determine it as far as Flex and RIAs is try to do what the desktop applications do.

The question is, "What do you really want to do?"

How would you like it to react? If you want it to react like the other seemingly preexistent website you had going, then maybe, and this is a thought, viewstacks are what you want.

Now looking further of what you said (quote put in here) 1)when I click a button I want to show the relevant .mxml file (navigate to it) – so e.g. when the contact button is clicked I want to navigate to, and show the contact.mxml file within the application so I assume I need some sort of “click” event on the button, but I cant work out what!

<mx:button id=”contactButton” label=”contact us” click=”show contact.mxml…….”/>

2)additionally (in the case of the “view records” button) I want to also pass a variable (ID) as it changes across on the button click

NOTE the ID is got and set from a dataGrid and saved as a bindable variable, so is already available and is ready in the application – I just need to pass it across into the viewRecords.mxml file


As far as #1, yes, click="showContactPage()" and then as mentioned before you make the contact page to be ...esssentially whatever you want. What happens when you click that button now? If it's nothing then put up an Alert. And then you know it's being reacted to. Then take that function and fill it out to what you want it to do.

Now in regrards to #2, the View Records Button, how is this ID getting passed in? Maybe it doesn't need to be passed in, but used as a global of some sort, I mean where does this ID come from? And what is the object that provides it?

For that matter where did the DataGrid come into play? I mean follow me here, please. From my understanding and your explanatiion this is what I understand. The user is on the homepage, they have two buttons, "Contact Us" and "View Records" Now, I assume that you have someplace on the home page that provides the ID spoken of. Am I right in assuming this? I'll assume that I am.

So then the user clicks the button, and another view is brought up, showing the information pertaining to that dataset specified by the ID you previously mentioned. (Again if you're worried about the ID not being passed in correctly, or not at all, then put in an alert or a trace or run it thru debug and assure yourself that the data is being "delivered" and that it is corrrect.)

If you look at the post I sent you a few days ago where I spoke as far as the TitleWindow and the PopupWindow you will see some similar concepts. The idea is to pass information to an object. You have an object, the "Records View" let's call it. You need to pass information to it so that it can filter the records available in the "database" base on the ID. Am I right there? If I am then it may take a bit more "work" than the contactpage, but it is doable and not without strife.


If you'd like me to try to assist you on this maybe I can, I have a feeling that I might be able to and we might both be able to learn from it. If that is so shoot me an e-mail at CDHBookingEdge(you knowwhere it's at) dot yahoo.com

L8r,
Christopher

CDHBookingEdge
11-04-2006, 03:34 PM
Below is an example of what I was talking about using the accordion. See if this makes sense for you.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;

private function OnViewChange() :void
{
if (accordion.selectedIndex == 1)
{
if (fldID.text.length == 0)
{
Alert.show("User ID has not been filled in.");
this.accordion.selectedIndex = 0;
}
else
{
Alert.show("Ok I'm in the Data View and I know my ID is " + this.fldID.text);
}
}
}
]]>
</mx:Script>
<mx:Panel title="Accordion Container Example"
height="90%" width="90%"
paddingTop="10" paddingLeft="10"
paddingRight="10" paddingBottom="10" layout="absolute">

<mx:Accordion id="accordion"
width="100%" height="100%" x="10" y="10"
change="OnViewChange();">
<!-- Define each panel using a VBox container. -->
<mx:VBox id="welcomeView" label="Welcome!" height="207" width="384">
<mx:Text text="Welcome to our Website. Please enter your ID before proceeding." fontFamily="Arial" fontSize="14" height="45" width="374" fontWeight="bold" textAlign="center"/>
<mx:Form backgroundColor="#ffffff">
<mx:FormItem label="User ID:">
<mx:TextInput id="fldID" editable="true" enabled="true"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>

<mx:VBox id="dataView" label="View Data" height="210" width="381">
<mx:DataGrid width="376" height="197">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>

<mx:VBox id="contactView" label="Contact Us" width="385" height="206">
<mx:Text text="How to contact us" width="379" height="201"/>
</mx:VBox>
</mx:Accordion>

</mx:Panel>

</mx:Application>


If we look at what's happening you can see that we've got the accordion set up to have a a VBox for each page/view. And you'll see that the text box in the first page holds the ID you spoke of..and in the ViewChange function you can see that it's easily accessible no matter which page/view you are on.

Does that look like something that would help? Or am I missing the point. My theory is that if you have the ID accessible you can then relatively easily do the filtering and databinding and therefore display of the grid.

The same kinda thing could be done using a tabs metaphor and other such things. The general concept is, at least as I see it, seperating out what you call pages and I call views into subcontainers, that are in an overall navigational container. So really just as Bill Gates says "What am I going to buy today?" and Microsoft say "Where do you want to go today?" we as Flex programmers say "What do we want to do today?" and the go for it. :cool: Or more exactly "What do we want to enable our users to do?" and then just as stated before, go for it.

I hope this helps and if you need anymore help just gimme a holler. I put my modified e-mail on the post before this.

Christopher

ljonny18
11-05-2006, 08:18 PM
Hi Christopher… my name is Jonny, I just read the post you left me on the “actioScript.org” forum – and I really appreciate you offering to help me like this.

As I said, I am new to Flex and therefore lack knowledge of its capabilities etc and hence struggle in areas – especially trying to explain my problems in the correct context / wording….

I don’t think what I am trying to do is very complicated; I guess I am trying too hard to explain it / get around it.

What you assumed in your post about what I mean was mostly correct… let me try to explain myself better:

Basically (for example)

I have my main application file (main.mxml) – acting as the “container” - with a viewStack containing the additional mxml files / components within my application (homepage, contactPage and viewRecords…..) with the homepage being the 1st / default page that loads :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mi="components.*">

<mx:ApplicationControlBar id="appBar_apc">
<mx:LinkBar dataProvider="viewStack_vs"/>
</mx:ApplicationControlBar>

<mx:ViewStack id="viewStack_vs" resizeToContent="true">
<mi:homePage id="home_page" label="Homepage"/>
<mi:contactPage id="contact_page" label="Contact"/>
<mi:viewRecords id="view_records" visible="false"/>
</mx:ViewStack>

</mx:Application>

Etc………….

The homepage consists of a dataGrid with buttons below it. The dataGrid is populated using a webService (retrieving data and acting as the dataGrids dataProvider).
One of the entities of the dataProvider is a (unique) ID field. The dataGrid has a “change” function so when it is changed (i.e. a row is selected / clicked) a “bindable” variable (selectedID) is set to the ID of the selected row of the dataGrid.

The buttons below the dataGrid are disabled by default (enabled=”false”) until a row of the dataGrid is selected, in which they are thus enabled.

One of the buttons is labled “View Record” and when clicked I want to take the ID of the selected row of the dataGrid (in this case the variable “selectedID”) and pass it across to the “viewRecords.mxml” component which I additionally want to display – replacing the homepage in the view (viewStack) etc…..


Currently on the button click I am calling a function which then changes the viewStack to display the “viewRecords.mxml” component:

Public function viewRecord()
{
var selectedID = dataGridName.selectedItem.ID;
parentDocument. viewStack_vs.selectedIndex=2;
}

<mx:button label=”view record” click=” viewRecord()”/>


I don’t know if I am doing this in the best way (best practice) but when the button is clicked the “viewRecords.mxml” component is dosplayerd correctly and as expected….

But,
When (every time the button is clicked and) the “viewRecords.mxml” component is shown / selected I want it to run a function that takes the ID and calls another webService to retrieve the data of the selected ID etc…. e.g.

Public function getDataFromSelectedID()
{
wsData.getDataFromWSFunctiont.send(selectedID);
}

As I want to run this function every time the button is clicked and the “viewRecords.mxml” is loaded I guess I need to use some sort of event… i.e. dispatch an event on the button click and listen for it in the “viewRecords.mxml” and when it is recognised run the function and load the page with the relevent data etc…..
but I am not sure how to do this, and this is where I am both currently stuck and confused…..


I hope you can understand a bit more of what I am trying to do, and if you can help / advise me it would be much appreciated.

Hope to hear from you soon,

Cheers,
Jon.

CDHBookingEdge
11-06-2006, 11:17 AM
Ok so you have the ID in homepage.mxml and you need viewrecords.mxml to know about it. Am I right there?
And the bringing up of your viewrecords.mxml is handled thru a button right?

Here's a thought or two I had. Looking at your code for you main application MXML file it looks like this right?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mi="components.*">

<mx:ApplicationControlBar id="appBar_apc">
<mx:LinkBar dataProvider="viewStack_vs"/>
</mx:ApplicationControlBar>

<mx:ViewStack id="viewStack_vs" resizeToContent="true">
<mi:homePage id="home_page" label="Homepage"/>
<mi:contactPage id="contact_page" label="Contact"/>
<mi:viewRecords id="view_records" visible="false"/>
</mx:ViewStack>

</mx:Application>


So this makes me ask one question and have one idea that will simplify things hopefully.

The question is. If you have a link bar why do you need the buttons you mention on the other MXML to navigate things? Isn't that your navigational control of choice you're providing to the user?

So if that's so then why don't you try this.
1) In ViewRecords have a string var as well same thing.
public var nameID : String;
2) In the LinkBar code that handles the tabIndexChanged event. Check the selected Index and if it's 2 (the ViewRecords) then just put in code that sets the aforementioned var. Something like this:
if (selectedIndex == 2)
{
view_records.nameID = dataGridName.selectedItem.ID;
}

that way you have it right there for you..it's just being passed from one view to the other. Wouldn't that work?

And if you do need these buttons for navigation, then my first feeling is that you should put them on the main applications viewstack.

Hope that helps, I also replied to your e-mail as well,
Christopher