Flex 4 skin component runtime

hi
Is possible with flex4 change skin component at runtime with jpg,png,gif image ?
Firefox Extention by Jimmy Ruska, Translation from Google Translate, (C) Google.
Function to click individual words is from Answers.com Extension.
Online Education should be free.

flex 4 was build with design in mind ?????????
I think this is an importat question , any reply from adobe ?

Similar Messages

First Flex Project - Skinning Component?

I am working on my first flex project for the college that I work for. We are making a large touch screen into a display for all of the awards that we have given out over the years and taking the old plaques off the walls.
I want to iterate over a list of names and years that the awards were given so that each instance of the award looks like it is on it's own little plate. I'm just imitating the plaques that were on the wall that had a big discription and name of the plaque on one plate and all the winners of the award on their own little plates beneath it.
Is this what I would a component skin for? I'm sorry if this is to much of a newbie question.

Very cool indeed.
I added it to my ChikaraDev directory of rich internet
applications:
ChikaraDev
Directory of Rich Internet Applications
It could use a progress bar though. The screen where it will
appear is blank till it loads. But very nice use of Flex!

Flex 4 skin question

I am looking into Flex SDK skins and see a reference to hostComponent. What is it exactly for?

The hostComponent attribute is a reference to the component instance that the skin is currently attached to. It is a convenient way to access properties or methods from the component.
In general, you want to push data from the component to the skin. However, on occasion, you need to pull information from the component to the skin and hostComponent provides a way to do that.

Flex SDK and AIR runtime version in mobile

Hi, guys.
I'm trying to make my first Flex mobile app.
I'm a little confused about the relationship between Flex SDK and AIR runtime versions for mobile development.
In the "Developing Mobile Applications with ADOBE FLEX 4.6 and ADOBE FLASH BUILDER 4.6" pdf document, it says:
"AIR requirements
Flex mobile projects and ActionScript mobile projects require AIR 2.6 or a higher version. You can run mobile projects on physical devices that support AIR 2.6 or a higher version of AIR.
You can install AIR 2.6 or a higher version only on supported Android devices that run Android 2.2 or a higher version. For the complete list of supported Android devices, see Certified Devices. Also, review the minimum system requirements to run Adobe AIR on Android devices at Mobile System Requirements.
Note: If you do not have a device that supports AIR 2.6 or a higher version of AIR, you can use Flash Builder to launch and debug mobile applications on the desktop."
So, I go and check the Certified devices in http://www.adobe.com/devnet-apps/flashruntimes/certified-devices.html and find that the minimun FLASH PLAYER version accepted by ALL devices is FP 10.1
1. Does this mean that if I want to release an app to target ALL mobile devices, then I can only use Flex 4.5?
2. Do support for Flash Player mean the same than support for Adobe AIR? Or the application will prompt the user to install whatever version of the AIR runtime and all of them would be supported by the device, even in the FLASH PLAYER support is for a lesser version?
Thanks!

Thanks for your help, Flex harUI,
The first impression that comes to mind is that FP version is indeed only for the web browser plugin. Then, why does the official Flex 4.6 mobile development documentation have a link to that page that only speaks about the supported FP version in mobiles under the title "AIR requirements"??
This makes it way too confusing.
Do you know whether there is something like an equivalent matrix/list of mobile devices with their supported AIR runtime versions? I went a great deal in trying to keep my original app under 400kb... I didn't know that in the end it would end up weighing 9.5Mb... :S
Thanks again,

How to use Flex mx.charts component in flash project?

Can anyone enlighten me on how I can use the Flex mx.charts component in my Flash Project? I am using Flash Professional CS4
Are there any tutourials on the subject.
Thanks in advance.

http://www.designscripting.com/2011/03/filtering-flex-chart-data-by-consuming-xml-data/
http://www.roseindia.net/tutorial/flex/flex4/components/chartactionscript.html
Or otherwise you can use the below link to use the fusioncharts components
http://www.fusioncharts.com/

Some help needed for installation of rich client component runtime demo

i have dwnld the demo and also read the Instructions
And while installing it asks jre/java path and my jdk is intalled in this path C:/Program Files/Java/jdk1.6.0_27/bin/
And i have typed the same path with java.exe at the last but it its says Insert a valid path.
How can i give the correct path.
And the another question is that, i have jDeveloper 11g 11.1.1.5.0 installed with Weblogic Server, does the installation package also contains WLS or only the war file?

Hi Shay,
the file i downloaded was over 900MB. So i want to know that it contained WLS also or the war file was so big as i have WLS installed. And the compressed archive had two folders named Disk 1 and Disk 2 and the Disk 1 had an exe file and when i run the file a command prompt like windows opens. At this point the path is asked.
So to directly download the war file i searched google and i got a link to this page
http://jdevadf.oracle.com/adf-richclient-demo/docs/release.html#Download
where these file were found
SHERMAN rcf-dvt-demo.war
SHERMAN adf-faces-demo.ear
But i couldn't download these files. or may be they were not available.
The 900MB file i downloaded is from this link:
http://www.oracle.com/technetwork/developer-tools/adf/documentation/adf-faces-rc-demo-083799.html
"Installing the ADF Faces Component Demo
Download the ADF Faces rich client component runtime demo web archive (WAR) file and store it on the local file system (e.g. c:\rcf-dvt-demo.war). Once Oracle WebLogic Server 10.3 is installed and started, open the WebLogic administration console in a browser window. To access the WLS console, type "http://localhost:7001/console" into the browser address field, assuming that Oracle WebLogic is installed on the local machine with the default port configured at 7001."
And it forwarded to this page:
http://www.oracle.com/technetwork/developer-tools/adf/downloads/index.html
As i had jDeveloper 11g 11.1.1.5.0, i downloaded the right version.
So can you provide the war/ear file directly?

Flex based PickList component?

Anyone know of a Flex based PickList component? Cant find one
myself and want to be sure that I'm not just missing it before I
make my own.

quote:
Originally posted by:
Sreenivas R
What exactly you are looking for? Flex has comboBox and List
components. So I am unable to understand the exact requirement you
have.
Looking for an all in one pick list object with the required
UI objects to move selections between lists. Easy enough to do with
the existing tools, but was just wondering if there was anything
better floating around out there.

Flex 4 custom component with children inserted directly into view stack

I give up. Hopefully I am just missing something easy, but I feel like I am pulling teeth trying to get this to work. All I want is a custom 'wizard' component whose children are placed within a ViewStack and beneath the ViewStack there is a next and back button. Here are some code excerpts to illustrate my approach:
WizardGroup.as:
[SkinPart(required="true")]
public var nextBt:Button = new Button();
[SkinPart(required="true")]
public var backBt:Button = new Button();
[SkinPart(required="true")]
public var stack:ViewStackSpark = new ViewStackSpark();
WizardGroupSkin.mxml:
<s:VGroup width="100%" height="100%"
          paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
     <container:ViewStackSpark id="stack" width="100%" height="100%">
          <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"/>
     </container:ViewStackSpark>
     <s:HGroup horizontalAlign="right" width="100%">
          <s:Button id="nextBt" label="Next" enabled="{hostComponent.permitNext}" enabled.last="false"/>
          <s:Button id="backBt" label="Back" enabled="{hostComponent.permitBack}" enabled.first="false"/>
     </s:HGroup>
</s:VGroup>
While this comes very close to working, the major problem is that the children of the WizardGroup component are not added as children of the viewstack. Instead, they are added as children of the contentGroup. So the viewstack will always only have one child: contentGroup.
I also tried the approach of binding the contents of the view stack to the children of contentGroup, but with Spark containers, there is no way to access an array of children or array of elements (ie, there is no contentGroup.getChildren() or contentGroup.getElements()). Finally, I tried making the id of the ViewStackSpark "contentGroup" but since the ViewStackSpark inherits from BorderContainer, Flex complains at runtime that it can't cast the BorderContainer to Group.
Help would be greatly appreciated.
Thanks everyone.
Josh

I finally figured it out. The trick is to set the default property of the WizardGroup to a public member array I am calling "content"
[DefaultProperty("content")]
public class WizardGroup extends TitleWindow
    [SkinPart(required="true")]
    public var nextBt:Button = new Button();
    [SkinPart(required="true")]
    public var backBt:Button = new Button();
    [Bindable]
    public var content:Array;
And then within the skin, bind the content of the viewstack to the hostComponent's content array:
        <s:VGroup width="100%" height="100%"
                  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
            <container:ViewStackSpark id="stack" width="100%" height="100%" content="{hostComponent.content}"/>
            <s:HGroup horizontalAlign="right" width="100%">
                <s:Button id="nextBt" label="Next" enabled="{hostComponent.permitNext}" enabled.last="false"/>
                <s:Button id="backBt" label="Back" enabled="{hostComponent.permitBack}" enabled.first="false"/>
            </s:HGroup>
        </s:VGroup>

SDK component Runtime.apk is out of date export captive build for Kindle Fire

Hello
Kindle fire only supports AIR 2.7 and I'm trying to export a build release in Flash Builder 4.7 with the AIR runtime included (captive build). Whenever I build I get the following error:
SDK component at air/android/device/Runtime.apk is out of date
I tried running the updater and it said I'm up to date. I did download the SDK and put it in my home folder but I can't seem to change the SDK reference in the preferences.
(I had another java out of memory error including my ANE file but I turned it off just to get a build out. Not the focus of this discussion)
It would be nice if flash builder just let me reference my freshly downloaded SDK but instead I have to sift through their document structure guessing where I should be updating the Runtime.apk that SHOULD be up to date already.
I have had to go in to the package itself and modify the ini files and over-write the adb files from the fresh download of the SDK before.
I'm guessing there is a way to update the Runtime.apk but i have so many bin executables spread all of my computer it's hard to tell what flash builder wants!!!
There is always one problem after another developing with Flash Builder ... Please help.

Just be sure you've downloaded the correct AIR 3.6 SDK specific to Flash Builder! On this page: http://www.adobe.com/devnet/air/air-sdk-download.html in small print is this note:
Note : Flex users will need to download the original AIR SDK without the new compiler. Mac Windows.
Be sure to install the appropriate sdk if you're using Flex in your mobile project. Otherwise the main download will work with ActionScript only projects in Flash Builder 4.7
Can you confirm you installed the correct SDK? Also with ANEs, it's important to identify what version of AIR the ANE supports.
If you still run into trouble with your current configuration, try building a new mobile project and export release build with captive runtime and see if it compiles correctly. If it does, then it's going to be a problem with your current project, and I'd look at how the ANE is packaged. See if there's documentation on how to include the ANE, etc. If you still can't compile a blank mobile project, then your AIR installation is incorrect.
iBrent

Flex 4 Skinning and Control Resizing

Hello, all
I have recently taken a deep dive into skinning Flex components. All in all, I'm very happy with the improvements that have been made and feel that it is a significant step in the right direction towards encouraging uniqueness among Flex applications in the enterprise.
I have a solid handle on skinning with Flex 4 and how to leverage it but what I don't understand revolves around resizing skinned components. As an example, let's assume I open up Photoshop and navigate to Scripts==>New Flex Skin... and then chose the ComboBox component to skin. Let's then say that I update each of the four states of this control to look differently. Lastly, I then export the skin from Photoshop and import it into Flash Builder 4 and apply my new style to a combo box I've dropped on my canvas. Everything appears well - until I resize the component. This causes the skin the ComboBox is using to visually stretch (as would be expected with the visual representation of a control being a static, embedded image).
My question is as follows:
- Is there any good way to properly handle control resizing with custom skins such that the skins don't appear stretched?
I'm hoping there is something I am missing here. I am aware that, as an alternative to importing a custom skin image, you can use the vector art capabilities of FXG in an MXML file to do the skinning there but I'd really like to avoid having to code a custom skin when I could leverage a tool such as Illustrator or Photoshop to make it look exactly how I want.

Hi,
You could use Nine slice scaling of embedded assets. Search for that in this page
http://livedocs.adobe.com/flex/3/html/help.html?content=embed_4.html#186094
Do let me know if that solves your problem.
Nishad

After Flash Catalyst discontinued - What Workflow Designer / Developper to use? and how skin compone

Hi,
Now that Flash Catalyst is discontinued before being totally usable,
I used Flash Catalyst for skinning components and prototyping design of App.
So i wonder how experienced people do that without Flash Catalyst?
And more im asking to Adobe the same questions. What do you propose to do now what Flash catalyst helped to do until now?
how do you skin components?
how do you work with designers to get their App Pages designs?
in a word, what is the WorkFlow?
Thanks

I couldn't agree more with you that developers need a solid WYSIWYG tool, and Catalyst was Adobe's closest rival to Blend. It had much more potential than the amount of attention it received. Adobe was very foolish pulling the plug on it, not to mention all their other recent decisions related to the Flash Platform.
My point was that with all of the importing and exporting capabilities of Illustrator, Photoshop, Flash Professional, and especially Fireworks, you already have all of the capabilities of Flash Catalyst, at least in regards to making creative assets available to the Flex framework. That was the sole purpose of Catalyst- to bridge the gap between Adobe's design applications and Flex. If you weren't concerned with Flex, Flash Catalyst would be of no use, even if it were still in development. Exporting a Catalyst project to Flash Professional or HTML was never on it's roadmap, although I'm sure I'm not the first person who thought of those possibilities.
Catalyst, simply put, was the FXG editor which Flash Builder's design mode was not. For example, you could not draw a rectangle using Builder's design mode. With Catalyst CS5.5, it allowed you to directly assign FXG assets to MXML skins for ten of the nineteen Spark components which use the MXML skin architecture. This was a huge limitition, and espeically obvious with the new roundtripping feature, because using any of the non-supported components could easily break the connection between Builder & Catalyst. Honestly, myself and many of the Adobe engineers I talked to on the Flash Builder team, still do not understand why Catalyst wasn't merged into Flash Builder in the first place.
Perhaps it's not as useful out of context, but I compiled a presentation a few months ago for my Adobe user group, titled "Creative & Production Harmony": https://acrobat.com/#d=jNyu*qRjpF68tbl*8lCiTw&x=s
Basically what it outlined, was when to use Catalyst, and when you are better off exporting straight from the other design apps. My conclusion, was that you're generally better off designing your assets in the app you're comfortable with. That IS your WYSIWYG editor, to the precision of 1px. It was also a future proof answer since Catalyst was discontinued and many of the other Flex related workflows have evaporated. The main loss behind discontinuing Catalyst, were its states, timeline, and visual editing of FXG less commonly preserved when exporting from the other apps.
A workflow example for a project I recently used Catalyst with, http://disneycruiseadventure.com/ was to open the PSD provided inside of Photoshop, launch Catalyst, draw a shape (or copy/paste in a vector smart object from Illustrator), and use it's properties panel to match the Photoshop layer styles. This basically the climax of the day, because the rest of it was all spent manually editing code in Builder (and often fixing a lot of the crap code Catalyst spit out). For advanced use of graphics, we relied heavily on the Flex Component Kit, which basically lets you work with any MovieClip inside of Flex or even insert Flex components into a Flash Professional container. The integration between Flex & Flash Pro is most commonly overlooked, which is sad because it still offers the very most design freedom for Flex and has been around long before Catalyst.
In my personal project, my workflow heavily involves Fireworks. It's exporting capabilities are unparralled by any of the other Adobe design apps. You can design with the 1px precision you are after, and almost always preserve that precision after exporting to Flex 3, FXG, and even CSS. Speaking of CSS, now you can export to CSS3 and jQuery mobile themes using Fireworks. If I had a choice between Fireworks and Catalyst, I would take Fireworks without any question. If you're looking for another workflow, consider the idea of taking HTML/CSS exported by Fireworks and opening it inside of Adobe Edge for adding animation and interactivity. Then do your final editing with Dreamweaver, or skip the Edge step if you don't need it.

Skin & Component Relation

Lets assume we have a single skin and multiple components applying that skin. In this case, does flex create a seperate skin for each component or single skin and multiple references to the components? I am asking that because I will have buttons using the same skin but each button will be assigned a different icon in the skin file. I am considering to embed all icons in the skin file and assign them based on the hostcomponent ids in the skin file but i dont want to accidentally repeat the creation of all icon instances for each button.

Each component has its own skin instance.

Flex SkinnableContainer skin access Group inside contentGroup

I have skin class in which I defined a Group inside my contentGroup:
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="475" minHeight="0">
    <s:layout>
                                  <s:HorizontalLayout paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" gap="2" />
                        </s:layout>
    <s:Group id="group_nav_custom_comp_hgroup_prevnext" left="0" right="0" top="0" bottom="0" minWidth="100" minHeight="0">
                                  <s:layout>
                                            <s:HorizontalLayout paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" gap="5" />
                                  </s:layout>
                                       <s:Button label="Test Button"/>
                        </s:Group>
</s:Group>
Now, in my CustomComponent that extends the skin class above I am trying to access the "group_nav_custom_comp_hgroup_prevnext" (which is the child group inside the contentGroup) so I can add elements to it at runtime:
public class GroupNavCustomContainer extends SkinnableContainer
                        private var m_group_prev_next:Group = null;
                        private var m_bAdded_btns:Boolean = true;
                        private var _prevbtn:UIComponent = null;
                        public function GroupNavCustomContainer()
                                  super();
                                  setStyle("skinClass", GroupNavCustomSkin);
                        public function set prevBtn(ui_comp_prev:UIComponent):void
                            if(m_group_prev_next)
                                            _prevbtn = ui_comp_prev;
                                            m_bAdded_btns = true;
                                            invalidateProperties();
                        override protected function partAdded(partName:String, instance:Object):void
                                  trace("In partAdded");
                                  if(partName == "contentGroup")
                                            var group:Group = instance as Group;
                                            var visualElem:IVisualElement = group.getElementAt(0);
                                            m_group_prev_next = visualElem as Group;
                                  super.partAdded(partName, instance);
                        override protected function commitProperties():void
                                  super.commitProperties();
                                  if (m_bAdded_btns)
                                            m_bAdded_btns = false;
                                            m_group_prev_next.addElement(_prevbtn);
The result is my: group_nav_custom_comp_hgroup_prevnext is just not showing up at all, evidenced by the fact that the button present in it at compile time is not visible. Anyone know how to get it to show up?    - thx in advance -Mike

Based on Nikos tip, I rearranged my code and added 'group_nav_custom_comp_hgroup_prevnext' as a SkinPart, so now I have access to it, in other functions of the class, but still I do not see the button inside that nested group showing up.
@ drkstr_1 : Are you saying I cannot have a group inside my contentGroup? if so if then how can I have a group appear right next to it? --- do I have to add it programmatically in the parent component -- but doesn't that defeat the purpose of the skin?
thx - Mike
package com.viiv.digi.views.navigation
          import mx.core.IVisualElement;
          import mx.core.UIComponent;
          import skins.GroupNavCustomSkin;
          import spark.components.Group;
          import spark.components.SkinnableContainer;
          public class GroupNavCustomContainer extends SkinnableContainer
                    private var m_group_prev_next:Group = null;
                    private var m_bAdded_btns:Boolean = false;
                    private var _prevbtn:UIComponent = null;
                    [SkinPart(required="true")]
                    public var group_nav_custom_comp_hgroup_prevnext:Group;
                    public function GroupNavCustomContainer()
                              super();
                              setStyle("skinClass", GroupNavCustomSkin);
                    public function set prevBtn(ui_comp_prev:UIComponent):void
                        _prevbtn = ui_comp_prev;
                              m_bAdded_btns = true;
                              invalidateProperties();
                    public function get prevBtn():UIComponent
                              return _prevbtn;
                    override protected function partAdded(partName:String, instance:Object):void
trace("In partAdded");
                              super.partAdded(partName, instance);
                    override protected function commitProperties():void
                              super.commitProperties();
                              if (m_bAdded_btns)
                                        m_bAdded_btns = false;
                                        group_nav_custom_comp_hgroup_prevnext.addElement(_prevbtn);

Using Flex 2 for dynamic creation of a Flex 2 application at runtime

We're looking to replace our existing end-user development
environment and believe Flex 2 may be able to satisfy our
requirements. However, without spending a month trialing the
product I thought some existing user(s) could suggest (based on
personal experience) whether we'd be straining Flex 2 in expecting
it to be able to provide dynamic runtine generation and execution
of an application based on the meta-data associated with each
component. The generation of each component includes automatic form
and code generation, with end-user tailoring facilities to maintain
the meta-data (tabs, fields (visibility, location, business rules,
actions, validation etc.), display format, drill-down, work-flow
etc.), for use in the next instantiation of each conponent.

I know of at least one of our customers (not sure if I can
say which) is doing this. They use Flex to compose MXML files and
then send that to a server. The server than compiles that into a
SWF.
So it is possible, just a lot of work.

How to create spark skins using fxg vector graphics&how to switch b/w spark skins at runtime/via XML

Hi,
I want to create a number of Spark Skins using some vector images that I have with me. I can obtain the vector images in FXG format-- but what I am looking for is some way to quickly create multiple skins for various UI elements like buttons, menus, radio button, checkboxes, etc -- not by converting the fxg->mxml but by using fxg files directly (after including them in the skins project in Flash Builder 4.6). Since I want to create many such skins (atleast 8-10) what is the fastest way of accomplishing this?
Also, once I create multiple Spark Skins, how do I switch from one skin to another, in a running app? -- something like a template switcher, where the user viewing the flex app chooses a color, and the spark skin is immediately changed to the skin of that color (I would have already created the skin...). And can I store this skin template value in an XML? So that the end user can simply change this param in XML to change the design of the flex app?
Arvind.

Follow-up:
Out of pure wishful thinking I decided I would just see what happened if I pretended 'exportFXG' was already a part of JSFL. Based on the signature of 'exportPNG', i tried the following lines:
var success = fl.getDocumentDOM().exportFXG("file:///C:/mySymbol.fxg");
fl.trace("success:"+success); // output: success:true
It worked! Fantastic! I'm not sure if exportFXG is considered still in "beta" and therefore intentionally excluded from the docs, or if it was just an oversight. But at least it gives us something to experiment with.

Flex 4 skin component runtime

Similar Messages

Maybe you are looking for