Flex Mobile Development – Callout Component Sample (with source)

October 17, 2011By 61 Comments

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!

Filed in: Flash Builder 4.5Flex 4.5Flex 4.5/MobileFlex 4.6Flex MobileMobile Development Tags:

About the Author ()

Comments (61)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Cool Stuff with the Flash Platform - 10/24/2011 | Remote Synthesis | October 24, 2011
  1. Devin says:

    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 :(

  2. Edgar says:

    Is it possible to use this in a regular Flex Mobile applications in Flash builder or does it somehow specific to “Tablet” applications?

  3. 420 Colorado says:

    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?

  4. Marc Pelland says:

    These are looking great ! can’t wait for the update to come through.

  5. chrisz says:

    Whow. Nice!!!

    Thats the right way Adobe! :

  6. Tink says:

    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

  7. Phil Heinz says:

    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

    • Phil Heinz says:

      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

  8. Jason Graham says:

    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?

  9. Antonio says:

    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

    • Antonio says:

      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.

  10. Andy says:

    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

      • Andy says:

        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

  11. Josh says:

    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):

      <?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="Inline Callout with Skin"  xmlns:components="components.*"
      		viewActivate="view1_viewActivateHandler(event)" viewDeactivate="callout.close()">
      	<fx:Script>
      		<![CDATA[
      			import spark.events.ViewNavigatorEvent;
      			protected var callout:Callout1;
      			protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
      			{
      				callout=new Callout1();
      				trace("Data "+data);
      				callout.myData=data as String;
      			}
      		]]>
      	</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">
      				<fx:Declarations>
      	<fx:String id="myData"/>
      </fx:Declarations>
      				<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="{myData}" 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>
      

      Hope that makes sense :)
      Holly

  12. Josh says:

    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, ????);
    }

  13. Jeremy says:

    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!

  14. Jeremy says:

    Ignore the above, I’m an idiot.

    Calling openDropDown() on the second button will cause it to open.

  15. Gunnar Karlsson says:

    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

  16. David Hogg says:

    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!

  17. Jon in Virginia says:

    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?

  18. Jon in Virginia says:

    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.

  19. Don Kerr says:

    Thanks Holly! This was very helpful.

    AppreciateYa

    Don

  20. Nanban says:

    Hey Adobe than massu meethi eallam thoosu..Ai html unakku adobe vaikran kolli..ea tantanakka ea tatakunakka !!!!!

  21. Jimmy30 says:

    Hi Holly, I need a control like a tooltip in table device, do you know if I can use Callout control?

  22. Sam says:

    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

  23. bbenguo says:

    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:

  24. Raja says:

    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.

  25. Raja says:

    Can any one help me please? How to resolve the multiname reference error of JASON in Flex 4.6.

    Thanks,
    Raja

  26. William says:

    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

  27. William says:

    Thanks, Holly, I would greatly appreciate it.

    Kind regards,

    William

  28. Andy says:

    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

  29. Jared says:

    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

  30. teocr says:

    Hello. Can these components be used in a regular Flex 4.6 web application?

    Thank you!

  31. Tahir Alvi says:

    Holy you always clear my concept with your post. This is another one.

    Wonderful Post

  32. Ridvan Aliu says:

    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;

  33. Kim Jensen says:

    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?

  34. Kaleel says:

    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.

  35. Flasher says:

    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?

  36. CincyPlanet says:

    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!

  37. Carlos says:

    Hi I have the same problem text from text input’s disapears when using calloutbuttons

  38. CincyPlanet says:

    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

  39. Tom says:

    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

  40. Javier Oliva says:

    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:

  41. max jones says:

    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.

  42. Mihai says:

    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 :)

  43. Kent says:

    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.

  44. Simadri says:

    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

  45. Simadri says:

    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

  46. Fatehi says:

    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

  47. Marcio says:

    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.

  48. Koman Diabate says:

    Holly Schinsky,

    I came across your site and tutorials, just wanted to thank you for all the work you put in developing these tutorials. It really make learning flex so pleasant and fun. Really don’t know how to thank you enough.
    You’re an angel.

    Sorry I put the wrong name in the previous comment.

Leave a Reply