Template Component in Flex 4
I need to use a component several times, in various states of my application.
This component has to be dynamic is the same structure, but will change somewhat from one state to another of my application.
I heard that using the template will facilitate my life!
Does anyone know how to do this?
Can you give me an example of the use of Template in Flex 4?
hugs
I need to use a component several times, in various states of my application.
This component has to be dynamic is the same structure, but will change somewhat from one state to another of my application.
I heard that using the template will facilitate my life!
Does anyone know how to do this?
Can you give me an example of the use of Template in Flex 4?
hugs
Similar Messages
-
Custom template component with Spark ?
Hi there, everyday's got its own (silly?) question :
I'm trying to develop a new component I've called "Drawer", made of a handle (button) and two skinnable containers displayed when the drawer is "opened" and hidden when it is closed.
So here is my AS class:
package nova.style
import flash.events.MouseEvent;
import spark.components.Button;
import spark.components.SkinnableContainer;
import spark.components.supportClasses.SkinnableComponent;
[SkinState("closed")]
[SkinState("opened")]
public class Drawer extends SkinnableComponent
// Define skin parts
[SkinPart(required="true")]
public var handle:Button;
[SkinPart(required="true")]
public var track:SkinnableContainer;
[SkinPart(required="true")]
public var drawerContent:SkinnableContainer;
// Define component data
[Bindable]
public var drawerLabel:String;
[Bindable]
public var isOpen:Boolean=false;
[Bindable]
public var handleX:Number=500;
public function Drawer()
super();
isOpen = false;
override protected function getCurrentSkinState():String {
if (isOpen) {
return "opened";
} else {
return "closed";
override protected function partAdded(partName:String, instance:Object):void
super.partAdded(partName,instance);
if( instance == handle)
handle.addEventListener(MouseEvent.CLICK,handle_clickHandler);
override protected function partRemoved(partName:String, instance:Object):void
super.partRemoved(partName,instance);
if( instance == handle)
handle.removeEventListener(MouseEvent.CLICK,handle_clickHandler);
private function handle_clickHandler(event:MouseEvent):void {
isOpen=!isOpen;
invalidateSkinState();
and the associated skin :
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:states>
<s:State name="closed"/>
<s:State name="opened"/>
</s:states>
<!-- host component -->
<fx:Metadata>
[HostComponent("nova.style.Drawer")]
</fx:Metadata>
<s:layout>
<s:BasicLayout />
</s:layout>
<s:VGroup width="100%" height="100%" gap="-1">
<s:Group includeIn="opened" width="100%" height="100%">
<s:SkinnableContainer id="drawerContent" width="100%" height="100%">
</s:SkinnableContainer>
<s:SkinnableContainer id="track" x="{hostComponent.handleX}" width="{handle.width}">
</s:SkinnableContainer>
</s:Group>
<s:Button id="handle" label="{hostComponent.drawerLabel}" x="{hostComponent.handleX}" skinClass="nova.style.skins.DrawerHandleSkin"/>
</s:VGroup>
</s:VGroup>
</s:SparkSkin>
I have defined my drawerContent and track parts as SkinnableContainer be cause I want them to be able to hold child elements that the user of my component would specify later on. Actually, I was hoping that I could instanciate my drawer's content in this way :
<nova:Drawer isOpen="true" drawerLabel="Alarms" skinClass="nova.style.DrawerSkin" handleX="100" width="100%">
<nova:drawerContent>
<s:Panel>
<s:Button label="drawer content button"></s:Button>
</s:Panel>
</nova:drawerContent>
<nova:track>
<s:Panel>
<s:Button label="track button">
</s:Button>
</s:Panel>
</nova:track>
</nova:Drawer>
Unfortunately, neither of the inner buttons are showing at runtime. I guess I've missed a point in my skin class to indicate that my skinnablecontainers can have a content, but I can't find out what.
Any clue much appreciated !
Thanks
MattHey Matt,
I took a look at your skinnable approach, and you're pretty close. You're just missing the part where the properties get pushed in to the skin parts. For instance, in a button, we have a skin part, called labelDisplay, and a property called label. When someone sets the label property, you need to push that in to the labelDisplay skin part. If you were to look at the label setter in Button, you'd see something like:
if (labelDisplay)
labelDisplay.text = label;
For your component, you need a track skin part, and then a trackContent property. When the trackContent gets set, you'd push that in to the track skin part. This is similar to what we do in Panel with controlBarContent and controlBarGroup. Here's some code snippets from Panel to get you started (I modified the code a bit to make it easier to understand):
// controlBarGroup
[SkinPart(required="false")]
* The skin part that defines the appearance of the
* control bar area of the container.
* By default, the PanelSkin class defines the control bar area to appear at the bottom
* of the content area of the Panel container with a grey background.
* @see spark.skins.spark.PanelSkin
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
public var controlBarGroup:Group;
// controlBarContent
[ArrayElementType("mx.core.IVisualElement")]
* The set of components to include in the control bar area of the
* Panel container.
* The location and appearance of the control bar area of the Panel container
* is determined by the spark.skins.spark.PanelSkin class.
* By default, the PanelSkin class defines the control bar area to appear at the bottom
* of the content area of the Panel container with a grey background.
* Create a custom skin to change the default appearance of the control bar.
* @default null
* @see spark.skins.spark.PanelSkin
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
public function get controlBarContent():Array
if (controlBarGroup)
return controlBarGroup.getMXMLContent();
else
return _controlBarContent;
* @private
public function set controlBarContent(value:Array):void
if (controlBarGroup)
controlBarGroup.mxmlContent = value;
_controlBarContent = value;
* @private
override protected function partAdded(partName:String, instance:Object):void
super.partAdded(partName, instance);
if (instance == controlBarGroup)
if (_controlBarContent !== undefined)
controlBarGroup.mxmlContent = _controlBarContent
* @private
override protected function partRemoved(partName:String, instance:Object):void
super.partRemoved(partName, instance);
if (instance == controlBarGroup)
_controlBarContent = controlBarGroup.getMXMLContent();
controlBarGroup.mxmlContent = null;
As I said, I modified the code snippet a bit to make it easier to understand, but that should get you started.
As per the template component pattern, that stuff should still work, but I think you'd be better off following this new pattern which splits it up in tot he SkinnableComponent and the Skin.
-Ryan -
How to set multiple styles on a single component in flex ?
Hi ,
I would like to know how to set multiple styles on a single component in flex.
Can anyone give me an example as to how to set multiple styles for a single component ?
Thanks ,
Regards,
AjanthaHi tuliptaurus,
You can setStyleName property for chnaging the external css dynamically by using the setStyle() method ...
btn.setStyle("styleName","blendButtonSkinOther");
You can change the external css by using the styleaName property with setStyle method..the line in blue..where blendButtonSkinOther is another css class..
blendButtonSkin {
fontFamily: Arial;
fontSize: 11;
color: #F1F1F1;
textRollOverColor: #F1F1F1;
textSelectedColor: #F1F1F1;
horizontal-align:center;
width:150;
height:30;
cornerRadius:5;
upSkin:ClassReference('assets.skins.BlendButtonSkin');
downSkin:ClassReference('assets.skins.BlendButtonSkin');
overSkin:ClassReference('assets.skins.BlendButtonSkin');
disabledSkin:ClassReference('assets.skins.BlendButtonSkin');
selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');
selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');
selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');
blendButtonSkinOther {
fontFamily: Arial;
fontSize: 11;
color: #F1F1F1;
textRollOverColor: #F1F1F1;
textSelectedColor: #F1F1F1;
horizontal-align:center;
width:150;
height:30;
cornerRadius:5;
upSkin:ClassReference('assets.skins.BlendButtonSkin');
downSkin:ClassReference('assets.skins.BlendButtonSkin');
overSkin:ClassReference('assets.skins.BlendButtonSkin');
disabledSkin:ClassReference('assets.skins.BlendButtonSkin');
selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');
selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');
selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');
Thanks,
Bhasker Chari -
Is it possible to call a function in a parent component from a child component in Flex 3?
This is probably a very basic question but have been wondering this for a while.
I need to call a function located in a parent component and make the call from its child component in Flex 3. Is there a way to access functions in a parent component from the child component? I know I can dispatch an event in the child and add a listener in the parent to call the function, but just wanted to know if could also directly call a parent function from a child (similar to how you can call a function in the main mxml file using Application.application). ThanksThere are no performance issues, but it is ok if you are using the child component in only one class. Suppose if you want to use the same component as a child to some bunch of parents then i would do like the following
public interface IParentImplementation{
function callParentMethod();
and the parent class should implement this 'IParentImplementation'
usually like the following line
public class parentClass extends Canvas implements IParentImplementation{
public function callParentMethod():void{
//code
in the child you should do something like this.
(this.parent as IParentImplementation).callParentMethod();
Here using the Interfaces, we re decoupling the parent and the child
If this post answers your question or helps, please mark it as such. -
Are there any known issues with the <mx:Tree component in Flex 4?
We have upgraded from Flex 3 builder to Flex 4 builder. Everything works except any where we have used a tree component the data is no longer showing. Has there been a change in how to populate the Tree component? We populate the tree by setting the dataProvider with an ArrayCollection.@travr,
I'm not aware of any big known issues in mx:Tree between Flex 3.x and Flex 4.x. What problems are you seeing, and can you reproduce the issue with a simple test case (if so, please post the simple test case here and we can take a look).
This works in Flex 3.5:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ApplicationControlBar dock="true">
<mx:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />
</mx:ApplicationControlBar>
<mx:Tree id="tr" labelField="name" width="200" x="20" y="20">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Object name="1. One">
<mx:children>
<mx:Object name="1.1 One" />
<mx:Object name="1.2 Two" />
</mx:children>
</mx:Object>
<mx:Object name="2. Two">
<mx:children>
<mx:Object name="2.1 One" />
</mx:children>
</mx:Object>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:Tree>
</mx:Application>
And this seems to work in Flex 4.5/Hero beta:
<?xml version="1.0" encoding="utf-8"?>
<s: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">
<s:controlBarContent>
<s:Button id="sdkVer" initialize="sdkVer.label = mx_internal::VERSION;" click="System.setClipboard(sdkVer.label);" />
</s:controlBarContent>
<mx:Tree id="tr" labelField="name" width="200" x="20" y="20">
<mx:dataProvider>
<s:ArrayCollection>
<fx:Object name="1. One">
<fx:children>
<fx:Object name="1.1 One" />
<fx:Object name="1.2 Two" />
</fx:children>
</fx:Object>
<fx:Object name="2. Two">
<fx:children>
<fx:Object name="2.1 One" />
</fx:children>
</fx:Object>
</s:ArrayCollection>
</mx:dataProvider>
</mx:Tree>
</s:Application>
Peter -
Is there any component in flex to show/edit digital maps, lattitude, longitude etc?
Is there any component in flex to show/edit digital maps, lattitude, longitude etc?
If I do this then I will have my video player in fullscreen disappear for a moment and then reappear out of fullscreen, and I want it not to disappear, but to just jump to the other state fully resized and repositioned with no glitching in between states.
Than you will need to implement your own solution which meets your specific design goals. That's the nature of the beast my friend.
As far as I know dynimic skin parts have another meaning - creating more than one instance at runtime. Also I've read just now (again) partAdded and partRemoved are called on component initialization and skin change. So basicly if I change the skin, it makes sense to remove the eventListeners from the old skin parts. But still, I've read on many places that if an object has event listeners attached to it it will Not be GC unless they are weak, so it will be stuck in memory forever.
So looking at the VideoPlayer and it's skin parts, I'm not seeing any event listener being removed when I remove the instance I have of the VideoPlayer. Why is that? Why the component does not remove it's skin parts event listeners?
Are you changing skins? If so, I bet the parts would be removed as expected. The partRemoved method is not being called because it's not needed. If you remove the parent component, than any reference encapuslated within that component are removed as well.Fire up the profiler if you don't believe me.
I'm interested in the skin parts and states relation. With includeIn and excludeFrom you define in which states the component is added to or removed from as a child (element). So If I have a skin part which is required=true and I have 2 states from one of which it is excluded... whouldn't that result in a runtime error since the part is not there but it is required?
I'm pretty sure that it only checks if the instance exists, and does not care if it has been created and added to the display list. I do not really know for certain though. This could easily be answered with a simple test. -
My doubt is how can we bring or embed ActiveX visual component in Flex UI(inside an SWF)
Regards
Aravind MohandasI didn't think you could.
I understood that ActiveX controls do not run as browser plugins and are therefore outside of the Browser security sandbox. Flex is a browser plugin and is locked into the browser's security sandbox.
Depending upon what the ActiveX controld oes you could convert it to Flex. -
how to implement book component in flex
"tausif d" <[email protected]> wrote in
message
news:g6jkhl$pf0$[email protected]..
> how to implement book component in flex
http://www.quietlyscheming.com/blog/components/flexbook/ -
How to use FC to make a sub-component for Flex
Most of the examples and tutorials I've seen so far assume you are creating the app itself in FC.
However, what I need to do is create a custom component that will be a "screen" in a large Flex app, like a page in a Wizard.
So if I was doing this without FC, I'd make a new mxml component in Flex, e.g. "WizardStep.mxml" and then in the main app,
<mx:ViewStack>
<h:WizardStep id="one" label="Step One" />
<h:WizardStep id="two" label="Step Two" />
</mx:ViewStack>
For example, assuming I have set up the namespace "h" to like "com.handycam.*"
How would I accomplish this scenario if "WizardStep" is what I have been building in FC?Thanks for your answer!
Unfortunately it still doesn't work.
In FC I used the file menu item "publish as swf" ( or however it's called in English -
I'm also struggling with the -unwanted- German workspace terms). This generated
the deploy-to-web and run-local folders. In Flex3, I imported haupt.swf (=main.swf)
from the run-local folder.
When I use the imported file in the Image tag with the
loadForCompatibily attribute set to "true",the application compiles,
opens the IE, the remaining LinkBar buttons are not affected - they
show/run the Flash Pro .swfs and their controls,
but the attempt to access the .swf in question produces:
VerifyError: Error #1053: Illegal override of z in mx.core.UIComponent.
at flash.display::MovieClip/nextFrame()
at mx.managers::SystemManager/deferredNextFrame()[C:\autobuild\3.2.0\frameworks\projects\fra mework\src\mx\managers\SystemManager.as:319]
at mx.managers::SystemManager/preloader_initProgressHandler()[C:\autobuild\3.2.0\frameworks\ projects\framework\src\mx\managers\SystemManager.as:2945]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/timerHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\ src\mx\preloaders\Preloader.as:398]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
The alternative approach:
<mx:SWFLoader x="3" y="35" width="970" height="425" loadForCompatibility="true" source="insets/haupt.swf"/>
produces:
VerifyError: Error #1014: Class flash.text.engine::TextLine could not be found.
at global$init()
If I code the SWFLoader tag as:
<mx:SWFLoader x="3" y="35" width="970" height="425" loadForCompatibility="true" source="
@Embed(source='insets/Haupt.swf')"/>
I get the same errors as I did for the Image tag approach.
Hope this helps. -
hi,
How to design templates using adobe flex, is there anything
like apache velocity which can be used in flex application, or any
other method, which can be used for designing various templates .
KumarParikshit...
Thank you for your reply. I have managed to do some tinkering with the file I want to manipulate. Now, "Swiping" is not the correct term.
However, in this example I created there is an automatic transition in the background image that goes up. See this link: http://10.0.100.3:33333/Preview/ua-template-1/index.html
I would like this image to be stationary. Where do I look to change this?
thx,
matt -
Custom component in Flex 4.0 to change the label position on top of its children
Need to show the label on top of its children by changing position of the FormItems lablel through custom component in Flex 4.0
Hi,
Thanks much for following up. Yes, my itemrenderer is defined inline and I did reference the dataprovider's group id via "outerDocument". As a matter of fact, I think I simply copied/pasted the code. The only significant difference I can see is yours is defined directly inside an Application tag whileas mine is under a VGroup:
<s:VGroup>//this is the top tag
<s:DataGroup>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:ArrayList id="listDP">
<fx:String>Age 21-30</fx:String>
<fx:String>Age 31-40</fx:String>
</s:ArrayList>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer autoDrawBackground="false">
<s:RadioButton label="{data}" groupName="{outerDocument.rbGroup}"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:VGroup>
Any ideas?
Geng -
Using Jumpeye Component in Flex
Hi,
has anyone successfully used Jumpeye's Drop Down Tree Menu
Component V3 in Flex 3? It's a great component to use in flash, the
submenus open and close on rollover/rollout (something I have not
been able to acheive with the Flex menubar). I used the flex
component kit to export the Jumpeye component from flash and
imported the swc into flex builder (I also imported the relevant
classes etc, inc faking an instance of mx.core.UIComponent(as per a
document I found on afcomponent's site). It works great on a simple
level (i.e. using defaults) but fails when I try to set any style
properties (these are done via an xml file with tags predefined by
Jumpeye in the component shim). I'm pretty new to Flex and am
obviously doing something very wrong, however, Jumpeye were not
able to help me as their focus is flash, although they commented
that clients of theirs have used the component successfully within
Flex.
Any help would be greatly appreciated.
Julie>>You will need to put a little code here to better
understand, but as a guess, you might not have wrapped the
MovieClip in a UIComponent before adding it to the Flex display
list.
No. If the symbol in Flash was converted to a Flex Component,
this step is already taken care of.
Follow the example by Peter Ent to check if you have setup
the symbol in Flash correctly.
http://weblogs.macromedia.com/pent/archives/2007/04/example_of_the.html -
How to get the id of jsf Template Component
Dear All,
I have a page template with adding attribute like pageName, companyId. Then I Page Fragment that use that page template.
In this jsff page I fill the pageName and companyId.
My question is How can I get the value of these attribute (pageName and companyId) from backing bean or application module ??
Thanks .Hi,
starting from a component in the page fragment, you call getParent() until you hit an instance of RichPageTemplate. This then is the view template you are looking for.
http://docs.oracle.com/cd/E23943_01/apirefs.1111/e10684/oracle/adf/view/rich/component/rich/fragment/RichPageTemplate.html
AA call to get attributes should return a HashMap of attributes so you can check for the two attribute keys you are interested in
Frank -
After creating a MovieClips symbol in flash CS3 and
converting it to flex component, I succeeded in exporting it
to SWC and included it in the flex mxml file. However, when I
run the applications, the MovieClips failed to display. Did anyone
have similar experiences?>>You will need to put a little code here to better
understand, but as a guess, you might not have wrapped the
MovieClip in a UIComponent before adding it to the Flex display
list.
No. If the symbol in Flash was converted to a Flex Component,
this step is already taken care of.
Follow the example by Peter Ent to check if you have setup
the symbol in Flash correctly.
http://weblogs.macromedia.com/pent/archives/2007/04/example_of_the.html -
Speech bubble like component in flex
I need to use a speech bubble like component in my flex project.Due to timing constraints i am not position to invest my time in creating a component like that from scratch.Anyone knows any flex speech bubble component which is free to use?
Here are some things to check:
1) -use-network=true Project - Properties - Flex Compiler - Additional compiler arguments, add -use-network=true
2) Verify that the relative paths to the video files are correct on the server.
3) Could be a timing issue. If the video is not streaming and its not loaded yet, black screen could be the result.
If this post answers your question or helps, please mark it as such.
Maybe you are looking for
-
I purchased a song on my iPhone and synced my iPhone to my MAC iTunes. The song used to play on my iPhone. Now it won't. I have tried taking it off and putting it back on, but that has not worked. I tried reauthorizing, but the computer tells me
-
Help! I've written an application that isn't working exactly like I think it should. The program is supposed to compare two files. If there is a string in file one that is not in file two, then it is supposed to write that string to a third file. To
-
I have 2 accounts and want to delete/remove one. How do I do this?
I have 2 accounts and want to delete/remove one. How do I do this?
-
Hi Friends We currently load data into essbase through FDM. After the data is loaded we are running the Essbase calc manually which we want to automate. Can some one please help me with the script which can be incorporated within FDM which will call
-
Mavericks slow and buggy, Mavericks slow and buggy
Since updating to Mavericks, my imac performance is appalling! My apps struggle to start. ITunes keeps crashing. My system is 3.2GHZ intel core i3 4gb memory 13333 MHz DDR3