How would I include an MXML file inline another MXML file? - apache-flex

I would like to include an MXML file in my MXML file in the same way you can include an external file in AS3 using the include directive. Using the include directive brings the code from the external file into the original file at compile time placing it in the same scope.
For example,
Application.mxml:
<Application>
<source="external.mxml"/>
</Application>
External.mxml:
<Styles/>
<Declarations>
<Object id="test"/>
</Declarations>
I need to keep this code/mxml/xml in the external file in scope with the original. Do not ask me why I want to do this.
Another example. Here is my current code (simplified) all in 1 mxml file:
...
File1.mxml
<Button click="clickHandler()"/>
<Script>
public function clickHandler():void {
}
</Script>
...
Here is what I want:
...
File1.mxml
<Group>
<source="File2.mxml"/>
<Button click="clickHandler()"/>
<Group>
File2.mxml
<Script>
public function clickHandler():void {
trace(this); // File1.mxml
}
</Script>
...
I want to split my code out into a separate file...
~~ Update ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Though NOT what I was asking for using a "code behind" scheme achieves partial credit to breaking the code out of the view. So I create a MXML file, MyGroup.mxml or MyGroup.as and that extends Group that contains the clickHandler code.
The problem with this method is that I am then locked to the class type I'm extending, hardcoding the view. So for example I would have to extend Group if the MXML class I want to split into separate files is a Group.
I've worked on projects where this was done and it is not good. People start setting styles and visual aspects or group / view specific properties in the code behind class and later if or when we need to change it or the layout it we have end up with all these dependencies to the container. It becomes a mess. Plus, using Code Behind you can't reuse it (reuse in the way include styles.as is reused). So this is not a solution but thought I'd mention it.
Here is a code behind example,
MyGroupBehind.mxml:
<Group>
<Script>
public function clickHandler():void {
trace(this); // File1.mxml
}
</Script>
</Group>
MyGroupAhead.mxml:
<MyGroupBehind>
<Button click="clickHandler()"/>
</MyGroupBehind>

MXML is converted into a class by the compiler, so there is no way to do what you are asking.
Personally, I think that is a good thing. Breaking things up into separate files does not equal "more organized". In fact I would say it achieves the exact opposite effect. You would do better to focus on a proper component structure, IMHO.

Just start typing the name of your custom component, then press Ctrl+Space. Code completion will populate a list of possible things you might want to add, including the name of your component. Use the down arrow to select your component's name, then press enter. Code completion will set up the namespace and start the tag for your component. If you go to the end of the line and type "/>" (no quotes), voila! you will have an inline tag that represents your custom MXML component.

First of all, any external mxml should be a valid XML. Now, as long as you have a valid MXML file, you simply add it by its name like below:
<Application>
<external:External/>
</Application>
Where 'external' is the namespace for your External.mxml file.

Say my MXML file is called Example in the views folder. Simply call it within the parent MXML file you want this to be in
e.g.
<views:Example/>

Related

How can i refer to an external function in an actionscript file - Flashbuilder

I hava a problem with flashbuilder:
I have a list with an itemrenderer that renders an image that (should be) draggable.
the rendered image refers to a function that is declared in an actionscript file: dragDrop.as in the folder AS.
the list:
<s:List id="imageList" width="139" height="438"
dataProvider="{xmlListColl}"
itemRenderer="itemRenderer.ImageRenderer"
dragEnabled="true">
</s:List>
the itemrenderer renders this image and refers to the function doDrag:
<mx:Image width="100" height="70" maintainAspectRatio="true"
MouseDownEffect="AS.dragDrop.doDrag(event)"
source="{data.#thumbnailImage}"/>
the function in dragDrop.as:
public function doDrag(event:MouseEvent):void
{
var img:mx.controls.Image = event.currentTarget as mx.controls.Image;
var dragImg:mx.controls.Image = new mx.controls.Image();
dragImg.source = img.source;
var dsource:DragSource = new DragSource();
dsource.addData(img, 'img');
DragManager.doDrag(img, dsource, event, dragImg);
}
but it seems the function is never called...
also parentdocument and outerdocument don't seem to work (if i put the function in the document where the itemrenderer is called)
Please Help!
There's a few issues here, but ultimately, you're not seeing a reference to that method, which means your dragDrop.as file is not including.
Here are a few suggestions:
Replace MouseDownEffect with mouseDown. Instead of causing an effect to occur, you're now listening for the "MouseEvent.MOUSE_DOWN" event to fire. Differences between effects and responding to events are described here and, to quote, "Behaviors let you add animation and motion to your application when some user or programmatic action occurs, where a behavior is a combination of a trigger paired with an effect. A trigger is an action, such as a mouse click on a component ... An effect is a visible or audible change to the target component that occurs over a period of time, measured in milliseconds."
Make sure you're including your dragDrop.as file. Flex 3 vs. Flex 4 handle script tags differently. If you're not including or importing your code, then of course it won't fire.
include vs import is a good question. You can "include" code that's a definition of methods, instances, constants, etc. But you would "import" defined classes for use. Since your method is a public function, does it live within a class? Or is it meant to just live in the script file, in which case you should remove the accessor "public"
If you're looking to implement Drag-and-Drop, I highly recommend NOT re-inventing the wheel and checking out what Adobe has already implemented for components, including dragEnabled='true' and dragMoveEnabled='true'. Check them out here: http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_4.html
http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_1.html
Here is an example of a Flex 3 script tag:
<mx:Script source="AS/dragDrop.as"/>
Here is an example of a Flex 4 script tag:
<fx:Script source="AS/dragDrop.as"/>
This is an link to the documentation on how to include directly into a <fx:Script> tag the code you'd like: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf61c8a-7ff4.html

Is it possible to embed a Flex Assets Class in a CSS declaration?

I have an SWC which includes a number of Assets for my project. Within this SWC is also a static AS file which contains Class declarations for each image in the library.
For example, the SWF contains these images:
/assets/foo/bar/img1.jpg
/assets/foo/bar/img2.jpg
And it includes an AS file which is like this:
[Embed(source="/assets/foo/bar/img1.jpg")]
public static const IMG_1:Class;
[Embed(source="/assets/foo/bar/img2.jpg")]
public static const IMG_2:Class;
I would like to create a CSS declaration which uses these two images, but I don't want to embed the full path. Is it possible to do something like this?
<mx:Style>
.mySampleStyle {
upIcon: Assets.IMG_1;
downIcon: Assets.IMG_2;
}
</mx:Style>
At the moment, this particular syntax is invalid -- I'm getting compile errors for the "." character in the style declaration.
Is there another way of doing this without embedding the path (e.g. upIcon: Embed(source="/assets/foo/bar/img1.jpg")) in the CSS?
As stated here in order to reference class member of type Class using ClassReference in CSS, you should used "_" instead of "." in the fully qualified name of the field you want to use.
In your example,
<mx:Style>
.mySampleStyle {
upIcon: ClassReference("Assets_IMG_1");
downIcon: ClassReference("Assets_IMG_2");
}
should works.

address a Flex checkbox in a component

I have a checkbox in a component:
<s:CheckBox id="myCB_1" />
In my main.mxml I need to test for the state of the checkbox. I originally had all my code in main.mxml, but it was getting really long, and I thought that it was better practice to break my code into components. Also, I have other projects where the same concept will apply, so I really want to figure this out.
I have the following function :
private function checkAlarms(currentTime:Date):void
{
if (!breakfastAlarmSounded)
{
if ((currentTime.hours > breakfastTime.hours) || ((currentTime.hours == breakfastTime.hours) && (currentTime.minutes >= breakfastTime.minutes)))
{
if (myCB_1.selected)
{
playBreakfastAudioAlarm();
}
if (myCB_2.selected)
{
playBreakfastVisualAlarm();
}
breakfastAlarmSounded = true;
}
}
...
simply addressing the component, as in:
myComponent.myCB_1.selected
doesn't work. Someone mentioned that I need to create a variable in my component that refers to the id (myCB_1) of checkbox, but I don't really understand or know how to do that, and they didn't elaborate.
How do I test for the status of the CheckBox "myCB_1" in the component from within my main.mxml?
many thanks,
Mark
(newbie)
With very little information, I'm going to suspect you originally had the CheckBox included in main.mxml and moved it to a custom component. If so, you need to address the CheckBox's ID via the custom component's ID. Something like this (from main.mxml):
if(yourComponentsID.myCB_1.selected)
{
...
}
If this isn't the case, please edit your post and give us more detail.
EDIT
You said you created a new custom component and moved the CheckBox into it. Great, that's a helpful start :) When you included your new component in your main.mxml file, it should look something like this:
<component:YourNewComponent />
Of course, however you named it (and whichever namespace is used to reference it) will be different from my example, but the principle should still apply. In main.mxml, you need to give your custom component a unique ID string so you can reference it within main:
<component:YourNewComponent id="myComponent" />
From here on, you should be able to reference the component, and any public elements within it: myComponent.myCB_1.
It would be useful to provide more details about the context in which you're using this script. Nonetheless I'm going to throw out some information that may help.
In order for the script to access the component, it has to be within the scope of the component. Usually that means one of the following:
You have a <script> tag in the MXML, with code in it that references components within the same MXML file.
You have a <script source='external.as'/> tag in the MXML, where external.as is referencing components in the MXML file.
You are creating the component in your script and you have a definition for the component within ActionScript (ex. var myCB_1:CheckBox; is within the class definition).
If the script and the component aren't within the same scope then they can't see one another.
You need to refer to the checkbox through the component. Lets say that you use your component in your main like this:
<local:MyComponent id="myComponent" />
In your script, you want to refer to it:
if(myComponent.myCB_1.selected) { // do something }
Strangely enough, it works. I was getting a getting an 1119 error (Description 1119: Access of possibly undefined property myCB_1 through a reference with static type Class.) when I refer to the component with dot notation (myComponent.myCB_1.selected) and an 1120 error (Description 1120: Access of undefined property myCB_1) when not addressing it via myComponent.
With these errors I never thought to try running the thing. Long story short - it runs with or without addressing the component (???) go figure!
thanks for all the input and would love to hear any other comments.
MCE

Where does code within Script tags go in the resulting AS class?

I was wondering what happens to the code contained in an <mx:Script> tag. If I define a function tehre, it just becomes a member function of the generated class. But I noticed that it seems OK for the compiler if I just write some (static) method calls there (specifically, I call Font.registerFont()). It works fine, but I feel kind of guilty for doing this, because I have no idea what's really happening and when the code gets executed.
MXML is formally an ActionScript generation language. So, the Flex compiler will translate all MXML into ActionScript.
If you wan to see what happens; add the 'keep-generated-actionscript' argument to the compiler and then you can look at the generated ActionSCript code.
http://livedocs.adobe.com/flex/3/html/compilers_14.html#157203
Beyond that; I don't really understand your question. Why would static methods make you feel guilty?
Following the advice of www.Flextras.com's answer, I kept the generated Actionscript classes and had a look. The code inside <mx:Script> tags is simply put in the class body as-is. Knowing that, I could dig into the Flex livedocs and came across the following paragraph in the section about class definitions:
ActionScript 3.0 allows you to include not only definitions in a class body, but also statements. Statements that are inside a class body, but outside a method definition, are executed exactly once--when the class definition is first encountered and the associated class object is created.
So, putting statements inside a <Script> tag in an MXML file is equivalent to putting code in a static block in a Java class definition.

static/private child component in mxml?

Are there any way to declare a child component in mxml which is private/protected or even static?
Sure we can do this inside a script tag, but are there any other way?
Ashier suggests using the "Exclude" metadata tag, but Maskit offers its limitations and suggests alternative solutions:
http://blog.ashier.com/2008/03/25/hiding-properties-in-flex-components/
http://smaskit.blogspot.com/2008/07/making-mxml-subcomponent-private.html
In the strict meaning of these terms, no you can't do that using mxml. The second link posted by Luis contains some workarounds for private/protected behavior.
I found a solution to the static question. I wanted a quick memo pad that could be accessed anywhere in the mobile app, without one instance overwriting edits left open in a different screen.
I created a memo pad mxml control, and then placed it inside a declarations section in the top level application mxml. In each view that I wanted the memo to appear in, I added:
import mx.core.FlexGlobals;
import components.QuickMemo;
private var memo:QuickMemo;
In the view creation complete:
memo = FlexGlobals.topLevelApplication.memo;
In the viewActivation code, I added:
memo.visible = false;
addElement(memo);
In the viewDeactivation code, I included:
removeElement(memo);
The net effect is that only one instance of the memo exists at any time, and that one instance opens in whatever state it existed in the last view it appeared in.

Resources