Im creating a person search interface in Adobe Flex / Actionscript where we have an image for each person and a bit of text. Im looking to implement some like this:
HorizontalList Interface
OR
Carousel Interface
Both of these packages are unfortunately only for desktop Flex, I was wondering if anyone knew mobile flex (particularly Blackberry Playbook) alternatives?
Thanks
Phil
If you're using the standard s:List, you can change its layout property to a HorizontalLayout instance.
Basically, something like this:
<s:List>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
Maybe you could use a TileList instead. This is a horizontal list that automatically uses the next row if the page is full. You can fill it with data by using the DataProvider tag.
Here is an example:
<mx:TileList id="tileList" borderStyle="none" paddingBottom="0"
paddingTop="5" paddingLeft="5" paddingRight="5" itemClick="onClickHandler(event)"
dataProvider="{yourArrayList}" itemRenderer="renderer.WidgetRenderer" />
The class widgetrenderer creates my imageButtons (so normal images can be used too). These buttons are made of the data in my arraylist that can be approached by data.(the item in the arraylist his properties) If you need the clicked item you can use the id of your tilelist and choose for selected item.
In this example:
var object:Object = tileList.selectedItem;
I don't know if you understand my explanation, if not feel free to ask.
I hope this could help you.
There is a perfect example of this in tour de flex that uses a custom layout with the postLayoutTransform properties to build the 3d effect.
I don't know how to link to the specific example, but if you go here just click on Other Components -> Layouts -> Carousel
Cheers!
Horizontal List should work fine on mobile!
Related
First off here is the portion of .mxml that I am working with.
<s:Scroller id="scroller">
<s:VGroup id="vGrp" >
<mx:Form id="form"/>
</s:VGroup>
</s:Scroller>
I need the form to auto scroll based on the focused FormItem child that has focus. I have looked at this and tried this method. The issue that I am having is that my form is dynamically populated with FormItems. The example that I liked looks to only take into account that focusing will only happen to children of the VGroup. For me this is not the case and implementing the functions laid out in the linked website did not work for me (even after I did try to modify it to my particular case I was unable to get the scrolling to work properly). Any help would be much appreciated.
I'm using a custom item renderer for an AreaChart:
<mx:AreaChart id="numParticipants" left="10" right="10" top="10"
bottom="10" color="#8D8D8D"
dataProvider="{UsersModel.graphData.data_points.point}" dataTipMode="multiple"
dataTipRenderer="tooltip.ChartTooltip" fontSize="9" mouseSensitivity="10"
seriesFilters="[]" showDataTips="true" >
inside it's data set:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="180" height="42">
<mx:Style source="css/style.css"/>
<mx:Script>
<![CDATA[
import models.UsersModel;
import mx.charts.HitData;
import mx.formatters.DateFormatter;
override public function set data(value:Object):void
{
I'm displaying my text.
However, I want the balloon to be exactly above the data point.
I tried to change the (x,y) coordinates but it doesn't seem to change.
How can I move this balloon around to a desired location?
I'm afraid that using your own custom location is not something within the scope of the datatip (I know, stupid right?). It's meant to be used just as a set and forget it kind of this.
If you want, you can create your own custom data tips by simply using the popup manager when you hover over your data. You'll have a lot more flexibility in a lot of other aspects as well, but of course, this means more code for you to create and test.
EDIT:
Another thing came to mind, and that would be to extend the chart itself which controls the datatips and adding your own functionality of where/how to move the datatip. I found this post on how to change the behavior of line charts.
Just stumbled on a solution, so I'm posting for future generations.
Simply override the move function of the tool tip renderer:
override public function move(x:Number, y:Number):void
{
super.move(x+10, y+10); // just sample
}
HTH
Probably the quickest (but not necesarily a good practice) is to use a UIComponent as the base Class for your dataTipRenderer (UIComponent doesn't measure or lay out anything). Measure and lay out everything in updateDisplayList, and move everything up and to the left within the UIComponent until it is where you want it relative to the data point. Leave your measure() method empty (so the measured size is 0, 0), and Flex will put the top left corner of the UIComponent (that you've moved things to be above and to the left of) above your data point.
How do I set the individual button sizes in a Spark ButtonBar? It used to be something like:
<mx:ButtonBar id="myButtonBar" buttonHeight="12" buttonWidth="250" >
I get an error when I try to do the same in Spark:
Cannot resolve attribute 'buttonHeight' for component type spark.components.ButtonBar
I don't want to create a separate skin...just something that will work inline if possible
Just set its layout.
<s:ButtonBar id="myButtonBar">
<s:layout>
<s:HorizontalLayout variableColumnWidth="false" gap="0" columnWidth="250"/>
</s:layout>
</s:ButtonBar>
Many things are just different in Spark :)
I see two different ways to approach this.
Create a custom skin class and set the Button Width that way. You'll have to review the existing ButtonBar Skin to figure out specifics.
Extend the button class to set he new button width and use that class to create new factories for the button related skin parts
You could also roll back to the Flex 3 ButtonBar and use the buttonWidth style. Some things are just easier in Halo.
I am using the AutoComplete component in my Flex website. Everything is fine, but there is one issue.
If i type something in the text area, and the items that are searched are alot, i want to increase the height of the dropdown box. I am unable to figure that out.
below is the code to my autocomplete
<auto:AutoComplete borderStyle="none" id="txt_global_search"
textAlign="left" prompt="Search Content"
dataProvider="{global_search_list}"
allowEditingNewValues="true" allowMultipleSelection="true" allowNewValues="true"
backspaceAction="remove"
labelField="label"
width="200" height="23" right="400" top="1"
autoSelectEnabled="false"
matchType="anyPart"
keyUp="{event.keyCode == Keyboard.ENTER?openItemWindow():searchChange()}"
dropDownItemRenderer="{new ClassFactory(indexCloud.index_cloud_global_search_item_renderer)}" />
Regards
Zeeshan
Which AutoComplete are you using?
With the Flextras AutoComplete ( http://www.flextras.com/?event=ProductHome&ProductID=10 ); you can extend the height of the drop down box by specifying the rowcount property. The Flex ComboBox works similarly.
It is possible your the component you're using offers similar functionality.
What is the best way to create applications in Flex/AIR,
which look and feel the same irrespective of the screen
resolution?
When creating the layout in your flex application, you can achieve a consistent screen resolution independent look and feel from using relative scaling.
This is much akin to creating a liquid layout with HTML.
For example, to create a simple two column application— left navigation and content— you only need two containers, one predefined and one left to scale indefinitely.
As follows:
<mx:HBox width="225">
<mx:Button label="Menu 1"/>
<mx:Button label="Menu 2"/>
<mx:Button label="Menu 3"/>
</mx:HBox>
<mx:HBox width="100%">
Any content here will flow fluidly across the entire screen regardless of window size/screen resolution.
</mx:HBox>
Using the above basics you can create a application layout that forms to any screen.
However, sometimes you need to create a more elaborate layout scheme with many interchanging components resizing dynamically to fit the window.
For this you can do Absolute Positioning.
override the components updateDisplayList() function and create your own sizing/positioning rules.
This of course requires you to be within a Canvas container or have the main Application container set to absolute layout.
A simple example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
//find out how big we are
var stageWidth:int = this.width;
//center the box in the middle of the page.
centeredBox.x = stageWidth - (centeredBox/2);
}
</mx:Script>
<mx:HBox id="centeredBox" width="500"/>
</mx:Application>
By overriding updateDisplayList() you can create endless ways to better dynamically position and size your components to better use the screen realestate.
You can create a application with height and width respective to the container so that way all components will aling themself properly at all screen resolutions.
We typically create a MainFrame.mxml which acts as our primary component and has layout relative scaling as mentioned by the others. Then we create the AIR app which just embeds that one MainFrame.mxml and another Flex app that embeds it as well. This way we can keep the entire app within MainFrame and not worry about if it is in Flex or Air. This being said you will need to make sure you do not use any AIR specific or Flex specific calls that do not translate to the other.