I am creating an iPhone/iPad app using flex 4.5. I am pushing a view(consists of around 10 text inputs) to my view navigator and its taking too long. I tried using property destructionPolicy="never" but that is not going to help as it only works when popping to previous views and not pushView().
This is what my view looks like:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009">
<s:Scroller id="scroller" width="100%" height="100%" horizontalScrollPolicy="off">
<s:HGroup id="idHgroup" width="100%">
<s:Form id="idForm" >
<s:FormItem label="label 1">
<s:TextInput id="amount" />
</s:FormItem>
<s:FormItem /> * 10
</s:Form>
</s:HGroup>
</s:Scroller>
</s:View>
Any ideas how I can optimize this view?
Related
I know I have done this before but every time I work with scrollers and group it doesn't work for me and kills my 2 days.
<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
<s:Group clipAndEnableScrolling="true">...... ..... </s:Group></s:Scroller>
This is what I have. I have components inside my group with is more than enough to bring scrollers even on a big monitor. But I am not getting any scrollbars.
Kindly tell me what is that I am doing wrong here. because everytime I fix it and I struggle for the next time.
Thanks.
Try with this
Your scroller parent container need to set non-percentage height/width.
<s:BorderContainer width="120" height="100" backgroundColor="#FFFFFF">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
clipAndEnableScrolling="true" />
</s:layout>
<s:Button label="button (1)" />
<s:Button label="button (2)" />
<s:Button label="button (3)" />
<s:Button label="button (4)" />
<s:Button label="button (5)" />
<s:Button label="button (6)" />
</s:Group>
</s:Scroller>
</s:BorderContainer>
Thank you for all your responses. After setting the minHeight it now works. I am able to achieve the scrollbars as expected (make it look like browser's scroll bar). Below is the code snippet
<s:Scroller width="100%" maxHeight="{this.height}">
<s:VGroup width="100%" minHeight="1000" height="100%" paddingLeft="40" paddingRight="40" paddingTop="0" >
..</s:VGroup></s:Scroller>
Kindly let me know if there is a better approach.
The Same code given by "Raja Jaganathan" itself will work with small modification on scroll parent height and width
Capabilities.screenResolutionX, Capabilities.screenResolutionY will give you the browser width and height respectively.
I have two tilelists in my mxml application. The items (image and a label) get rendered by an itemrenderer. The functionality I want to achieve: drag image from tilelist #1 and drop it on tilelist #2 (and then a httpservice with sql query will be launched).
How would I tackle this problem? (high level info would suffice).
The main issue I have is that I don't know how to call methods from the main to my itemrenderer. I would like to code the d&d functionality within the renderer but I have no clue how to access watchlist #2 from within the renderer.
Relevant code in main.mxml:
<s:Panel id="panel" width="100%" height="100%" title="Watchlist">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="20"
paddingRight="20" paddingTop="5"/>
</s:layout>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your watched movies"/>
<mx:TileList id="myWatchedList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360"/>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your to watch movies"/>
<mx:TileList id="myToWatchList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360" />
</s:Panel>
The itemrenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
borderVisible="false" horizontalAlign="center" verticalAlign="middle"
xmlns:components="components.*">
<mx:Image source="{data.poster_url}" />
<mx:Label text="{data.movie_title}" height="20" />
</mx:VBox>
You can access methods outside of your item renderer using the outerDocument object. Make sure they are (scope)public methods.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.edu.html
Alternative solution might be to use spark lists instead (with a TileLayout) - then you can easily use drag+drop between lists: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7cfd.html
..and launch service in response to 'drop' event (event will have reference to dropped image)
I'm trying to create a custom view (one that is not 100% listview, for example), mix and matching images and labels.
One issue is that when the label overflows greater than the screen height, the rest just gets off. I had assumed scrolling or touch-drag scrolling would be automatically enabled? How do you enable the touch-drag scrolling that happens naturally in list view?
I wrap all the visual elements of my View inside a Scroller - this will solve that problem
<s:Scroller id="scroller" left="10" right="10" top="10" bottom="10" >
<s:VGroup paddingTop="3" paddingLeft="5" paddingRight="5" paddingBottom="3" horizontalAlign="center">
<s:HGroup horizontalAlign="right" width="100%">
<s:Image scaleMode="letterbox" source="#Embed('images/small_background.GIF')"/>
</s:HGroup>
<s:TextInput id="txtUsername" prompt="Enter user name..." fontFamily="Arial"/>
<s:TextInput id="txtPassword" prompt="Enter password..." fontFamily="Arial"
displayAsPassword="true" />
<s:Button />
<s:Button />
</s:VGroup>
</s:Scroller>
Im very new to Adobe Flex/Actionscript and am trying to create a person search application. So far I have my results showing as a horizontal list, but Id like to include an image above each name as my wonderful paint skills show:
/* listOfPeople is a list of arrays with a["name"] a["sex"] a["dob"] and
a["image"] which is just a URI to the image */
<s:List width="100%" height="100%" id="results" dataProvider="{listOfPeople}" change="clickPerson(event)">
<s:itemRenderer>
<fx:Component>
<s:MobileIconItemRenderer
iconField="{data.image}"
iconHeight="100" iconWidth="100"
label="{data.name} - {data.sex}"
messageField="dob"/>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:HorizontalLayout paddingBottom="100" gap="6" paddingTop="100" paddingLeft="0"
paddingRight="0"
requestedColumnCount="-1"
variableColumnWidth="true"
verticalAlign="bottom"
/>
</s:layout>
</s:List>
Any ideas? The iconField doesn't seem to show at all... even when using the full path with correct backslashes
Cheers
Phil
EDIT:
The image displays fine on the PersonDetails screen, when the person is clicked upon:
<s:HGroup verticalAlign="middle" gap="12" paddingTop="10" paddingLeft="10">
<s:Image source="{data.image}" height="170" width="170"/>
<s:VGroup>
<s:Label text="{data.name}"/>
<s:Label text="{data.dOB}"/>
<s:Label text="{data.sex}"/>
<s:Label text="{data.birthplace}"/>
<s:Label text="{data.colour} {data.ethnicity}"/>
<s:Label text="{data.height}"/>
</s:VGroup>
</s:HGroup>
I think MobileIconItemRenderer displays all elements in a horizontal layout. If you want to display an image on top of the text, you have to create your own renderer or extends MobileIconItemRender and change the way it layouts its elements
In flex UI, my <mx:list> can not be shown completely because of other component shelterring (for example: the refresh button shelter part of it ). How can I make the <mx:list> in front of all other UI component.
This is my code:
<s:HGroup verticalAlign="middle">
<s:Label text="Choose Log File"/>
<mx:ComboBox id ="logFileChooseCombo" dataProvider="{fileNameList}" width="150" color="0x000000"
close="changeLogFilesHandler(event);"/>
<mx:Spacer width="320" />
<s:Label text="Filter or HighLight:" />
<mx:ComboBox id ="filterChooseCombo" dataProvider="{filterOrHighlight}" width="150" color="0x000000"/>
<s:VGroup height="25">
<s:TextInput id="logContentInput" change="filterLogContent()"
enabled="true"
focusIn="clearMyTextInput()"
text="Filter/HightLight"
width="250" height="26"/>
**<mx:List id="searchMsgList"** x="65" y="35" width="200" height="200" fontSize="12"
change="itemChangEvent(event);" />
</s:VGroup>
</s:HGroup>
</mx:Canvas>
<s:HGroup verticalAlign="middle">
<s:Label text="Filter By Log Level:"/>
<mx:ComboBox id ="logLevelCombo" dataProvider="{logLevelsInt}" width="150" color="0x000000"
close="changeLogLevelHandler(event);"/>
<s:CheckBox id="showStack" click="showStackTrace(event)" selected="false"/>
<s:Label text="show stackTraces"/>
<mx:Spacer width="550" />
<s:Button id="test" label="refresh2">
</s:Button>
</s:HGroup>
You have a lot going on, with a mix of nested layouts and a mix of Halo and Spark containers. I'm not sure what layout you're trying to create.
That said, take a look at the swapChildren method. Something like this should work:
this.swapChildren(refresh2, searchMsgList);
But it will most likely hide your refresh button, which seems less than ideal.
A few things strike me:
Inside your first VGroup you have x and y values specified. I thought those values were ignored inide VGroups, which automatically position your children in a vertical line.
I see an closing </mx:Canvas> tag, but not an opening canvas tag. It is unusual to me to use a canvas among all the HGroups and VGroups.