Trials and tribulations of software development…
Flash Builder 4.6 and Flex 4.6 are currently in pre-release and this is the first of a series of posts highlighting the new features with sample code. Most of the new Flex 4.6 components were created for tablet application development where more screen real estate is available to work with.
The first component I’ll highlight in this series is the new Spark Callout component. The Callout is used to define a pop-up container for your mobile application where you may want to show actions to take, accept input or simply display some information. You can use any of the current UI components supported for mobile within a Callout, including even a mobile ViewNavigator. The component features an arrow that points to the owner of the Callout (the component that called open() on it). If you’ve done any Objective-C programming for iPad, you may know this as the Popover component.
Here’s an example of it in use in a tablet application Christophe and I will be working with at RIA Unleashed in Boston next week:
I created a sample tabbed application that I’m making available here so you can check out some different ways to use Callout‘s in your applications. I also included some explanatory text below. It’s nothing fancy but should be useful in your mobile application development!
Expanding Callout initially
In the first tab of the sample code I show an example of opening the callout from the CalloutButton on creationComplete, in case there’s informational text you want to have immediately available. Here’s a screenshot:
Here’s the code snippet for the above:
<s:CalloutButton id="cb2" icon="{addIcon}" verticalPosition="after" creationComplete="cb2.openDropDown()">
<s:calloutContent>
<s:BorderContainer backgroundColor="blue" color="0xFFFFFF" borderWeight="2" width="280" height="150" cornerRadius="5">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="5"/>
</s:layout>
<s:HGroup verticalAlign="middle" horizontalAlign="left">
<s:Image source="@Embed(source='help.png')" id="helpIcon"/>
<s:Label text="Getting Started"/>
</s:HGroup>
<s:TextArea text="Tap this button to get started adding buddies to your buddy list immediately." color="0x000000" width="100%"
skinClass="spark.skins.mobile.TextAreaSkin" editable="false"/>
</s:BorderContainer>
</s:calloutContent>
</s:CalloutButton>
Positioning the Callout
There are two properties to position the Callout component relative to it’s owner, horizontalPosition and verticalPosition. You can leave the defaults of auto by not setting them at all and the position be set based on the aspect ratio of the screen (portrait or landscape) for the Callout to fit with minimal owner overlap and screen bounds adjustments. Besides auto, you can manually set the horizontal and vertical position to before, start, middle, end, and after as desired.
Tab 3 in the sample application shows how setting the different positions will affect the Callout, try out the different settings in the SpinnerList controls (also new to 4.6):
Closing the Callout
When using the CalloutButton, clicking outside of the Callout container will always close it, since it’s non-modal. Otherwise, you need to call the closeDropDown() method to close it though, as shown in the code snippet from the sample:
<fx:Script>
<![CDATA[
import spark.events.ViewNavigatorEvent;
protected function button1_clickHandler(event:MouseEvent):void
{
trace(event.target.label + " clicked! " + cb.isPopUp);
cb.closeDropDown();
}
]]>
</fx:Script>
<s:CalloutButton id="cb" label="Action Callout" verticalPosition="after" calloutDestructionPolicy="never">
<!-- layout the callout content here -->
<s:calloutLayout>
<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" gap="5"/>
</s:calloutLayout>
<s:calloutContent>
<s:Button label="Search" width="{btn.width}" click="button1_clickHandler(event)"/>
<s:Button label="Followers" width="{btn.width}" click="button1_clickHandler(event)"/>
<s:Button label="Following" width="{btn.width}" click="button1_clickHandler(event)"/>
<s:Button id="btn" label="Direct Messages" click="button1_clickHandler(event)"/>
</s:calloutContent>
</s:CalloutButton>
This screenshot from Tab 1 shows the above code with the expanded Callout container:
When using the Callout component itself (rather than the CalloutButton), you can call a close() method to close the Callout and listen for the event to get the data from the selection. See the next section on passing data for a code snippet. The list calls the close() method of the callout passing the selectedItem.
NOTE: In my sample code I added code to close the Callout programmatically upon viewDeactivate so it would close when a different tab is selected.
Passing Data from Callout
Since the Callout component extends SkinnablePopUpContainer, we can use the close() method to pass back data setting the commit property to true in the first parameter and the data to pass back in the second parameter.
Here’s the source code for MyCallout.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Callout xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:ArrayCollection id="ac">
<fx:String>Boston, MA</fx:String>
<fx:String>Chicago, IL</fx:String>
<fx:String>Honolulu, HI</fx:String>
<fx:String>New York, NY</fx:String>
<fx:String>San Francisco, CA</fx:String>
<fx:String>San Jose, CA</fx:String>
<fx:String>Washington, DC</fx:String>
</s:ArrayCollection>
</fx:Declarations>
<s:VGroup paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center">
<s:List id="list" dataProvider="{ac}" width="240" change="close(true, list.selectedItem)"/>
</s:VGroup>
</s:Callout>
Then we can listen for the close event on the callout that uses it and get the data back to use as desired, such as:
<components:MyCalloutComp id="callout" height="300" close="location.text=event.data" verticalPosition="after"/>
The result is that the location text is populated with the selected list item from the Callout:
Skinning
The Callout component extends from SkinnablePopUpContainer and is therefore skinnable. Take a look at the CalloutSkin.as file in your Flex 4.6 SDK for starters. Mine is located on my Mac at: /Applications/Adobe Flash Builder 4.6/sdks/4.6.0/frameworks/projects/mobiletheme/src/spark/skins/mobile. The last tab in the sample code shows some changes to the Callout skin by using a custom skin. You could even customize the arrow further by looking into the CalloutArrow.as code, which is what is currently used by the skin for drawing the arrow. CalloutArrow actually extends UIComponent so you have a lot of flexibility to customizing your arrow if desired. In my simple example, I showed how you could change the width and height of the arrow in the skin as well as the frame and border width etc to create a different look (keep in mind I am clearly no designer, just giving you some options to play with 
)!!
Here’s the code for the custom Callout skin:
package skins
{
import mx.core.DPIClassification;
import spark.skins.mobile.CalloutSkin;
import spark.skins.mobile.supportClasses.CalloutArrow;
public class MyCalloutSkin extends CalloutSkin
{
public function MyCalloutSkin()
{
switch (applicationDPI)
{
// add in other cases for 240 and 320 DPI above if needed
// right now most tablets are 160
case DPIClassification.DPI_160:
{
backgroundCornerRadius = 8;
frameThickness = 8;
arrowWidth = 82; //default is 52 at 160 DPI
arrowHeight = 46; // default is 26 at 160 DPI
borderColor=0xAA0D0A;
borderThickness=5;
frameThickness=9;
contentCornerRadius = 40;
break;
}
}
}
}
}
The Tab 4 View class code is shown below with the custom skin applied. You can also see that it uses an inline Callout component rather than a separate MXML file:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Inline Callout with Skin" xmlns:components="components.*"
viewActivate="view1_viewActivateHandler(event)" viewDeactivate="callout.close()">
<fx:Script>
<![CDATA[
import components.MyCalloutComp;
import spark.events.ViewNavigatorEvent;
protected var callout:Callout1;
protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
{
callout=new Callout1();
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="Callout1">
<s:Callout xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" skinClass="skins.MyCalloutSkin" verticalPosition="after">
<s:VGroup paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center">
<s:Label text="My Story" fontWeight="bold" fontSize="30" color="0xAA0D0A"/>
<s:TextArea text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan felis ac tortor aliquam iaculis. Phasellus hendrerit viverra enim, sit amet scelerisque lectus dictum at. Aenean sodales nisi sed leo congue et porttitor ligula vehicula.
Pellentesque turpis massa, suscipit vel fermentum quis, dignissim sed ipsum. Nulla aliquet libero adipiscing risus lobortis eleifend quis at velit. Duis at leo urna.
Praesent facilisis faucibus neque, ut ullamcorper lacus gravida a. Donec vel iaculis sapien." skinClass="spark.skins.mobile.TextAreaSkin" width="90%" editable="false"/>
</s:VGroup>
</s:Callout>
</fx:Component>
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingTop="40" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="15"
horizontalAlign="center"/>
</s:layout>
<s:TextArea skinClass="spark.skins.mobile.TextAreaSkin" width="90%"
text="You can specify a Callout component inline rather than in separate MXML as shown in this sample. You can also apply a custom skin since the Callout
component extends the SkinnablePopUpContainer class. Click the story icon below to invoke a skinned callout."/>
<s:Image id="img" source="@Embed(source='text48.png')" click="callout.open(img)"/>
</s:View>
Download the source for the sample tabbed application HERE.
Check out this article to find about more features available in Flash Builder 4.6/Flex 4.6 and sign up for the prerelease today if you haven’t already!
Holly Schinsky is a Developer Evangelist at Adobe Systems, Inc.
Disclaimer: This blog contains my personal thoughts and not those of my employer.
Much like the BusyCursor, this could be usefull in non-mobile/tablet apps. But I’m also assuming (just like the BusyCursor) this will exist in the separate mobile swc not easily accessable to desktop apps
sehr gut…. danke
Hi Devin! You may already know this, but one solution to using these components in your regular Flex or desktop app is to just link in the mobilecomponents.swc from the SDK to your Library Path in the project Properties | Flex Build Path screen… Thanks! Holly
Is it possible to use this in a regular Flex Mobile applications in Flash builder or does it somehow specific to “Tablet” applications?
Hi Edgar! You can use it in regular Flex mobile applications if you would like, nothing is checking tablet only. Thanks! Holly
Dev girl how long does it take to get accepted into the flex 4.6 prerelease I registered about five days ago and have heard nothing?
Hi there, I’m looking into this for you, it shouldn’t take that long. I’ll get back to you shortly, thanks! Holly
These are looking great ! can’t wait for the update to come through.
Whow. Nice!!!
Thats the right way Adobe! :
Please link to a live example and enable view source. This is much easier for users that downloading an FXP to have a quick look through the code.
CallComponent.mxml looks like your creating a mobile DropDownList, real shame adobe didn’t add a SpinnerDropDownList & SpinnerComboBox IMO.
Hi Tink! Noted, I will see if I can provide something easier to reference code-wise
.
And yes, I was using that example as one way you could implement a drop down list of sorts. There are also those SpinnerList components like shown on the CalloutPosition tab, but do you mean something to take up less space for better use on phones?
Thanks for the feedback!
Holly
Hi Holly! What a great example. Thank you!
When I use a list inside a CalloutButton’s callout, the callout closes when I select a list entry or even scroll the list. Is there a way to stop this behavior?
Best,
Phil
Holly, more info on this: It seems to have to do with using a CalloutButton from inside a CalloutButton.
Touching anywhere within the second callout that’s not on a component I think is telling the first callout to close. If I click inside a textinput or checkbox in the second callout it stays. But touching the list or anywhere outside a component closes both callouts.
I’m probably missing something. I hope this is clear.
Best,
Phil
[...] of Holly Schinsky and new Flex 4.6 components, she features the new Flex mobile Callout component in this discussion and sample application, with source [...]
Holly do I need to implement a custom skin for the Callout to get what you and Christophe have above where you have a title and an actionbar type control in the top part of the callout window?
Hi Holly, great example. But i have a question, i need to show the “text” value of the selected item on a list, but store de value of the selected item. It seems that the callout return value, event.data, only give me the first of them. There is any way to get the both values?
Thanks
Sorry Holly, on a databinded list the return object, event.data, contains all the fields of the datatable. The problem is when the list is filled with an array. I need the selectedindex value.
Hi Holly,
Thanks for this, lots of useful insights as always, and 4.6 is awesome! One thing I dont see in 4.6 is an updated Alert Box, e.g. for displaying prior to deleting records etc.
Do you know if there is a new updated accepted method to open an alert popup in 4.6?
kind regards,
Andy
Thanks Andy! No you’d still just need to use a SkinnablePopUpContainer. It’s probably easiest to just create a custom one that you can reuse in all your mobile projects, that’s what I do
. Thanks!! Holly
Hi Holly,
thanks. I followed your blog post on creating a skinnablepopup, and Im almost there now. Just one thing – whats the best method to achieve a greyed out background when the popup is loaded?
thanks a lot
Andy
Hey Holly – all of your posts have been pretty informative!
Ive got a small dilemma where I cant seem to get a string variable from data pushed to a new navigator screen to show as scrollable in a Callout.
should I be using Scroller, RichEditableText? but how do I display the variable when I wrap those tags?
Hi Josh, you could pass in data to your view (either via the pushView or setting firstViewData on the navigator for instance), then you can display it in a TextArea within your Callout and if you leave the default skin it should scroll for you. (In my example I had to set it to get around a bug, but you would leave that off and just use TextArea with your data.) You could include a variable in your Callout component to hold the String and then set it on your Callout component within your View on viewActivate with binding syntax.
For instance, here’s an inline Callout component example within a View (sorry about the formatting):
Hope that makes sense
Holly
Hey Holly thanks for the reply, to get around the scrolling I passed the variable as list.selectedItem and then I binded the objects of the variable, displayed it as RichEditableText even though its frowned upon mobile, but it not selectable or editable so it should be ok, and surrounded it with scroller tags
If I was doing gesture swypes to pass data to the same component I intend to simply just pop() on the left swypes and pushView(component, data) for the right swypes
for the data, given that it is a list.selectedItem passed to component2 from component1 by pushView(component2, list.selectedItem); how would I push the next item in that list from component2 to component3? is that even possible if the list was not global?
In – component1
protected function list_changeHandler(event:IndexChangeEvent):void
{
var demoObject:Object = list.dataProvider.getItemAt(event.newIndex);
navigator.pushView(component2, list.selectedItem);
}
In – component2
private function handleSwipe(event:TransformGestureEvent):void
{
// Swipe was to the right
if (event.offsetX == 1 ) {
navigator.pushView(component3, ????);
}
Hi Holly,
Do you know how one might open a second Callout by clicking a Callout button inside a first Callout? I’ve tried dispatching the MOUSE_DOWN event to the second Callout button. It doesn’t open the Callout, but for some reason when I mouse over the Callout button it does (even without clicking).
Jumping from one Callout to another would be a great feature. Any idea how to make it happen?
Thanks!
Ignore the above, I’m an idiot.
Calling openDropDown() on the second button will cause it to open.
Hi Holly,
I want to change the color of the Callout border & arrow and nothing else, how do I do it? Is there a chromeColor property I can set in CSS like for the actionBar or do I really need to create a new skin? In your skinning example you add another red border outside the default border but how do I change just the default border color and keep everything else the same? Grateful for any advise on this./Gunnar
Hi Holly,
I have been having problems with TextArea’s within the callouts not getting resized correctly based on the amount of text.
I tried using the example you posted above for Josh (inline callout – although I made mine a separate component). It works fine unless the text spans more than two lines.
Any tips on why I can’t seem to create a generic but reliable callout container to display text?
Thanks!
I was able to make a sample callout app and deploy it to an iPad 1. However the callouts from a text field do not appear to function. It looks like the callout works from a button, but not in the text field. Am I missing something?
UPDATE: I was able to get the inline callout to work with a button, but using the component method with a text input field did not work on the device.
However, I tried to deploy to a Samsung Galaxy tab and both the component method and the inline method worked. Still when I clicked into the text field and got the list of cities when the callout closed the selected text flashed on then disappeared from the text field.
Is anyone else experiencing such behavior in a device (not the test debug). All works well running on the desktop as a device just not in the device itself.
Thanks Holly! This was very helpful.
AppreciateYa
Don
Hey Adobe than massu meethi eallam thoosu..Ai html unakku adobe vaikran kolli..ea tantanakka ea tatakunakka !!!!!
Hi Holly, I need a control like a tooltip in table device, do you know if I can use Callout control?
Hi Holly,
All your posts are really helpful. i am daily reader of your posts.Can you help me regarding how to display data grid in mobile application? I want to display data in tabular format. Thanks in advance
there is a puzzle in my program, when operate in the application runs on android 2.3 as below, the text in textinpu was disappered.
1.click button to open popup
2.focuse in the textinput
3.click the calloutbutton
4.click outside of callout
5.the text in textinput was disppered
can somebody tell me why? thanks.
example:
Hi, i have successfully installed FB 4.6 and I’m getting compilation errors—
Can not resolve a multiname reference unambiguously. JSON (from /Applications/Adobe Flash Builder 4.6/sdks/4.6.0/frameworks/libs/air/airglobal.swc(JSON, Walker)) and com.adobe.serialization.json:JSON don’t know how to solve this. Can any one help me?
Thanks,
Raja.
Can any one help me please? How to resolve the multiname reference error of JASON in Flex 4.6.
Thanks,
Raja
Holly,
I am getting some really buggy activity with the TextInput on the second and third tabs when pushed to different android devices (everything works fine in the emulator)…the ones that are populated with the callout selection. Most of the time, the TextInput will go blank unless the callout is called up. As soon as it closes, away goes the text in the input field. It even goes blank as soon as the view is instantiated; I can see the text getting set and then it flashes off.
Any ideas?
Hi William, I hadn’t seen this when I originally wrote the sample and tested it on an android device but will try it again and let you know if I can see what’s going on, thanks! Holly
Thanks, Holly, I would greatly appreciate it.
Kind regards,
William
Hi Holly,
Great article, many thanks for this. I have a query that I hope you can help me with. The situation I have is as follows:
I have a button that opens a Callout with a basic View Navigator.
Within the Callout are 3 buttons.
Clicking each button opens a new View within the Callout, and takes the user to a list object. These three Views are basic view components, and are accessed by calling navigator.push(SubPage1) etc. So far, so good…!
On selection of an item in one of those lists, I simply want to close the Callout and then send the selectedItem back to the main view… but I cant figure out how to close the Callout! A simple close() doesn’t do it, as the lists are in View objects not in the Callout itself. I hope that makes sense?!
Ive tried all sorts of combinations of close, this.close, etc nothing seems to work, but Im sure Im missing something obvious…
Hope you can offer some insight!
best wishes as always,
Andy
Hi Holly,
I as wondering if there us a way to use the callout component in a pure AS3 application? When I try to use it I get this error ” Error: No class registered for interface mx.managers::IPopUpManager’.”
I googled the error to hope to find a solution but nothing I found helped.
Thanks,
Jared
Hello. Can these components be used in a regular Flex 4.6 web application?
Thank you!
Holy you always clear my concept with your post. This is another one.
Wonderful Post
Awesome
Thanks Tahir!!
Here is if someone wants the ActionScript version of this:
var holdCalloutBTNs:Array = new Array();
var browseCamera:Button = new Button();
browseCamera.width = 220;
browseCamera.label = “Browse Camera”;
browseCamera.addEventListener(MouseEvent.CLICK, onBrowsePicture);
var takePicture:Button = new Button();
takePicture.width = 220;
takePicture.label = “Take Picture”;
takePicture.addEventListener(MouseEvent.CLICK, onTakePicture);
var vLayout:VerticalLayout = new VerticalLayout();
vLayout.paddingTop = 10;
vLayout.paddingRight = 10;
vLayout.paddingBottom = 10;
vLayout.paddingLeft = 10;
vLayout.horizontalAlign = “center”;
vLayout.gap = 5;
holdCalloutBTNs = new Array(browseCamera, takePicture);
cardImgCalloutBTN = new CalloutButton();
cardImgCalloutBTN.percentWidth = 100;
cardImgCalloutBTN.percentHeight = 100;
cardImgCalloutBTN.label = “Change Image”;
cardImgCalloutBTN.verticalPosition = “after”;
cardImgCalloutBTN.calloutDestructionPolicy = “never”;
cardImgCalloutBTN.calloutLayout = vLayout;
cardImgCalloutBTN.calloutContent = holdCalloutBTNs;
Thanks Holly.
I have a list and when I open the CalloutButton in the list_changeHandler it always point to the first record in the list. Is there a way to open it on the selected item?
Hi
I am new to Flex,
I trying to display HTML formatted Tamil Rss Feed in RichEditableText
Font is not rendering properly , i breaking my head for the past 2 weeks.
Code below
Plz HElp.
HI
The list in Callout component at the 2nd tab view doesn’t work properly for me, items outside viewport could be selected. Has anyone got same problem?
I just wanted to say thanks for this article. I used it in my app for a local high school which is now in the apple and android markets. You can check it out by searching for New Richmond High School.
Thanks again!
Hi I have the same problem text from text input’s disapears when using calloutbuttons
I am using the callout as a popup to show more information from a list on a mobile device, is it possible to get the arrow to point at the list item even though the callout takes up most the screen, like setting the callout button to the list items position?
Thanks
Hi Holly,
Love your blogs.
I’m using a callout in a mobile flex app. We can return values from callout. How about passing values to callout?
The callout component is defined in a separate mxml file and I’d like to pass a variable to it before opening the callout.
Basically, my callout contains a slider with numbers from 1 to 100. I would really like to set the max value of the slider as I open the callout.
Please help,
Thanks,
Tom
I have found a solution to fix the problem of the scroller of the list inside the CalloutButton, now you can keep the position over the list:
Was just using the call out feature in my application took me ages to figure it out but i got there. I want to know how to use the call out feature as in the top first images and make the text selectable like a button but not having the button skin and or that obvious as a button.
and also how do I create a launcher icon as in the app icon to select when in stalled on a device using the flash builder.
Hey, I have this problem with a Callout on a SplitViewNavigator. If i’m in portrait mode with the callOut opened and switch to landscape mode, the TextInputs from my app don’t work anymore. It’s like they don’t get activated back. is this a known issue of the SplitViewNav or am i doing something wrong? Thank you
How do you guys deal with the back button in Android? The event fires on the view not the callout so the callout doesn’t close. I’m using the callout as a component called from a button. I can handle it on the form but it needs to be handled in the component.
Hi Holly,
i have a requirement to embed a VIEW inside a callout and in that view I have to consume a web service to display data .
But as soon as the view is loaded the application stops responding.
Plz suggest how to call a webservice in a callout.
thanks.
simadri
Hi Holly,
The the issue with web service in callout has been resolved.
Called the service in a view and included it in callout by creating its object.
Thanks,
Simadri
The list in Callout component at the 2nd tab view doesn’t work properly , items outside viewport couldn’t be selected. Is there a fix for it or I’m missing something.
Thanks
Fatehi
Hello,Holly.
I’am developer brazilian in Java & Flex
and two projects in FlexMobile.
I need help.
I need one component or extend the class textinput for
field with mask in run-time
example:
field data
field currency
Any idea ?
Thank you.