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.
Related
I have a very general question and have prepared a simple test case.
When using BasicLayout (i.e. absolute positioning) - what is the best approach to place a Flex component in the center of the application?
In the test case below I'm using x="{width/2}" but this gives me at least 2 problems:
How do I account for the component dimensions (the ProgressBar in the test case)?
Is the binding {width/2} a good idea to use? Wouldn't it send unnecessary DATA_CHANGE events in some cases?
And finally I wonder, how this all applies to full screen applications using StageScaleMode.SHOW_ALL - because currently my application is aligned to the top-left in the full screen mode and there is a white dead zone on the right of it. (Which is at least a change from pure Flash/AS3 behaviour, where the full screen content is displayed in the center of the screen and 2 dead zones on the left and right).
<?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"
width="700" height="525"
backgroundColor="#CCFFCC"
initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL">
<fx:Script>
<![CDATA[
private function fullScreen(event:MouseEvent):void {
stage.displayState =
stage.displayState == StageDisplayState.NORMAL ?
StageDisplayState.FULL_SCREEN :
StageDisplayState.NORMAL;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="connected" />
</s:states>
<s:CheckBox right="10" bottom="10"
label="Full screen"
click="fullScreen(event)" />
<mx:ProgressBar indeterminate="true"
x="{width/2}" y="{height/2}"
label="Connecting..." labelPlacement="center"
includeIn="normal" />
</s:Application>
Way easier than that: just use horizontalCenter and verticalCenter properties of UIComponent. When used inside a BasicLayout the component will always be centered. Like this:
<mx:ProgressBar indeterminate="true"
horizontalCenter="0" verticalCenter="0"
label="Connecting..." labelPlacement="center" />
If you give these properties a value other than '0' the component will be offset from the middle by the amount of pixels you specify as a value. (e.g. horizontalCenter="50" will offset the component 50 pixels to the right of the center of the parent component)
That white space is probably due to your usage of systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL. Just remove that line. Why are you doing that anyway?
edit
Just noticed you're using a fixed 'width' and 'height' on your Application: you'll have to make those '100%' if you want your app to really fill the screen. This is another possible cause for that white space.
To get your application centered (rather than left/right aligned) when using systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL, set systemManager.stage.align to the empty string - i.e.:
// in your Application creationComplete handler
systemManager.stage.scaleMode = StageScaleMode.SHOW_ALL;
systemManager.stage.align = "";
I typically do 2 things,
I place objects inside VGroups/HGroups with alignment, I also use relative widths eg percentages.
Think like in the old days of using HTML tables. It works very well especially if your canvas is resized allot.
All of my canvases have to be resizeable as I like to only write my apps once, for pc, mobile etc, so I just make everything scalable by default.
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.
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!
I'm working with flex, but actionscript ideas are just as good.
The flex <s:Application> tag has height="100%" width="100%" so the swf fits the browser as the browser gets resized.
My problem is that I have a <s:Label> that I need to position based on the real/current size of the browser.
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="?" y=">" />
</s:Application>
I heard it's possible to use Application.application.width; but I get a compile error, that it doesn't know what that is.
Any ideas how to do this. I'm trying to get the current size of the swf in the browser, as the browser resizes.
As far as I can tell the following should work. Application.application simply is the same as this provided you are in the base application. The binding should allow the size to change after initialization.
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="{width}" y="" />
</s:Application>
Edit : I just checked and it does work. To put your Label in the middle of the stage you simply have to put it like that
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="{width/2}" y="{height/2}" />
</s:Application>
you could only know stage size when element is added inside stage, you could try a eventdelegate like this
app.addEventListener(Event.ADDED_TO_STAGE,init);
private function init(evt:Event):void{
trace(stage.stageWidth);
trace(stage.stageHeight);
}
Call a javascript function on browser resize. From there get the reference to the swf, and call the AS function to resize the label. Pass the browser width/height.
See example here
UPDATE: Correction: ExternalInterface goes AS to JS.
It's not completely clear what you are trying to do. x and y are positional elements, width and height are size elements. If you are positioning the label you should probably use top, left, right and bottom rather than x and y if you want it to size as the parent control sizes.
If you want the label centered you can use horizontalCenter and verticalCenter.
If you put it inside a layout control like a panel or a canvas you can just set its left and right to 0 and have the parent canvas size.
If your label is always in a different place depending on the size, you can override updateDisplayList to set the position. That holds whether you put it inside a layout control or not.
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.