I am trying to make an mobile flex application that has tab order enabled. I am trying the following simple app and I am not getting any functionality from the tab key both in an emulator and on an actual device.
TabOrderTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.TabTest"/>
TabTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="TabTest">
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:TextInput tabIndex="1" />
<s:TextInput tabIndex="2" />
<s:Button label="Submit" tabIndex="3"/>
</s:View>
Why does the tab key not work?
Edit I'm currently targeting Android devices.
Turns out that Flex 4 mobile defaults to stageText, which provides some great features, but unfortunately breaks functionality like being able to be disabled and tab order. To gain tab orders in a mobile application, you must set the skin to the mobile one with the following:
skinClass="spark.skins.mobile.TextInputSkin"
Related
I need to use the mobile debug mode but every time I run the debug mode. The flex installed a app on my phone and then my phone show up "the application has stopped." messeage. The flex jump out form the debug mode and I cannot even open the installed app. The application dont even have dataservice attach to it or any UIobject on it expect the basic one. Any reason??
My code is very simple
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
<s:ViewNavigator label="Bidding" width="100%" height="100%" firstView="views.BiddingView"/>
<s:ViewNavigator label="Reuse" width="100%" height="100%" firstView="views.ReuseView"/>
<s:ViewNavigator label="Account" width="100%" height="100%" firstView="views.AccountView"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:TabbedViewNavigatorApplication>
just like this.
the code of the view is like this all three of them.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Account">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:View>
And I am using Flex 4.6 and This app is developed for Android.
Doing a Flex 4.6 mobile app I am trying to add an asset .png file to be displayed as the background to the application across all the different views and orientations. Has anyone worked out a way to do this yet?
Any help would be appreciated :)
I've been in this hole and I know the way out.
You'll need to create a skin class for your application. It doesn't have to be too complex here's what my file (appSkin.mxml) looks like.
<?xml version="1.0" encoding="utf-8"?><s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[HostComponent("spark.components.View")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<s:BitmapImage source="#Embed('assets/bg.png')" width="100%" height="100%" />
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
<!-- SkinParts
name=contentGroup, type=spark.components.Group, required=false
-->
Then you'll need to declare that file as your application's skinClass in your application's opening tag…
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="320"
creationComplete="creationCompleteHandler()" xmlns:views="views.*" skinClass="skins.appSkin">
Then you'll have to do one final step. Each of your View components are carrying an opaque background layer so in each of them you'll want to explicitly set that backgroundAlpha value to 0.
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Start" backgroundAlpha="0">
And that should accomplish your mission of maintaining a common background image for your application across multiple views.
Try something like this:
<s:View>
<fx:Script>
[Embed(source="myImage.gif")]
public var myImage :Class;
</fx:Script>
<s:Image source="myImage" width="100%" height="100%"/>
</s:View>
Info about Embedding images in Flex
However, I don't expect perfect results. A PNG is a pre-rendered bitmap. Most likely it will not look right across all views and orientations [and resolutions] because elements of the PNG may be skewed, stretched, or compressed, with it is resized on the fly; for example when switching from portrait to landscape.
My code is as follwos;
1, ) Both the label and the button are overlapping. and how can i fix that ? (I know that the layout is set to absolute by default, but when i removed the minWidth="955" minHeight="600" and included layout="horizontal" i got the following error)
Description Resource Path Location Type
Initializer for 'layout': values of type spark.layouts.supportClasses.LayoutBase cannot be represented in text. HelloFlex.mxml /HelloFlex/src line 4 Flex Problem
2.) May i know what the tags mean xmlns:fx xmlns:s xmlns:mx and at which instances i should be using them ?
3.) In FLex Builder 4.6, in the design mode can i Drag-and-drop components to design the user interface ?
<?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" minWidth="955" minHeight="600" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Label text="Hello World"/>
<mx:Button label="Click"/>
</s:Application>
Below code may help you: -
<?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" minWidth="955" minHeight="600"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"/>
</s:layout>
<mx:Label text="Hello World"/>
<mx:Button label="Click"/>
</s:Application>
Another workaround is to open the file template inside of Flash Builder and remove the ${wizard_attributes} tag it also stops embedding layout="absolute".
You can get there via Flash Builder Preferences -> Flash Builder -> File Templates -> MXML -> MXML Web Application and then click edit to remove the attribute.
From this page… https://cwiki.apache.org/confluence/display/FLEX/Adobe+Flash+Builder+'New+Project'+Bug
It might be worth noting the other workaround on this wiki page… if you close flash builder and change the line in flex-sdk-description.xml file that says 4.10.0 to 4.9.0
This bug stops manifesting.
How can I set up the LabelItemRenderer or use any other item renderer that wouldn't truncate the overflowing text but would word wrap it?
UPDATE:
This blog post solved it:
http://flexponential.com/2011/08/21/adding-multiline-text-support-to-labelitemrenderer/
What version of the SDK are you using? You can just make a custom renderer and use a label in it and it'll work, use ItemRenderer as the base class
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer width="100%"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label text="{data}"
width="100%"/>
</s:ItemRenderer>
Try this:
<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:Panel id="pnl">
<s:RichEditableText id="richEdTxt"
width="200"
maxChars="100" />
</s:Panel>
</s:Application>
Now set heightInLines="1":
<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:Panel id="pnl">
<s:RichEditableText id="richEdTxt"
width="200"
maxChars="100"
heightInLines="1" />
</s:Panel>
</s:Application>
See the problem when you fill up the RichEditableText with characters? Keep typing the word hello until you cross outside of the first visible area of the RichEditableText. things get weird. Try it out. Anyone have any ideas how to prevent the weirdness? (the text starts jumping up and down)
This is a bug that appears to have been fixed in a later SDK - but I can't seem to find the JIRA ticket for it.