Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
New Developer
jzou
Posts: 60
Registered: ‎12-21-2008
My Device: Not Specified

General question about using burrito and flex for UI

Hi all

 

I just went through the example Flex for BBP in 90 mins and I found it easy to follow but difficult to understand. I am trying to see how the program is run, in my previous app with Flash AS, I can always easily pin point what part of code displays, what part of code handles processing. But with this example I find it very difficult to follow its programing logic. Below is the code for EmployeeDetails section of the example. and my questions

 

 

<?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="Employee Details">
	
	
	<fx:Script>
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			import spark.events.IndexChangeEvent;
			
			[Bindable] protected var actions:ArrayCollection;
			[Embed("assets/sms.png")]
			private var smsIcon:Class;
			
			[Embed("assets/phone.png")]
			private var phoneIcon:Class;
			
			[Embed("assets/mail.png")]
			private var mailIcon:Class;
			
			
			override public function set data(value:Object):void
			{
				super.data = value;
				actions = new ArrayCollection();
				
				if (data.officePhone)
				{
					actions.addItem({type: "tel", name: "Call office", 
						details: data.officePhone, icon:phoneIcon});
				}
				if (data.cellPhone)
				{
					actions.addItem({type: "tel", name: "Call mobile", 
						details: data.cellPhone, icon:phoneIcon});
					actions.addItem({type: "sms", name: "SMS", 
						details: data.cellPhone, icon:smsIcon});
				}
				if (data.email)
				{
					actions.addItem({type: "mailto", name: "Email", 
						details: data.email, icon:mailIcon});
				}
				if (data.manager)
				{
					actions.addItem({type: "employee", name: "View manager", 
						details: data.manager.firstName + " " + data.manager.lastName, employee: data.manager});
				}
			}
			
			protected function list_changeHandler(event:IndexChangeEvent):void
			{
				var action:Object = list.selectedItem;
				switch (action.type)
				{
					case "tel":
						navigateToURL(new URLRequest("tel:"+action.details));
						break;
					
					case "sms":
						navigateToURL(new URLRequest("sms:"+action.details));
						break;
					
					case "mailto":
						navigateToURL(new URLRequest("mailto:"+action.details));
						break;
					
					case "employee":
						navigator.pushView(EmployeeDetails, action.employee);
						break;
					
				}					
			}
			
			
			
			
			
		]]>
	</fx:Script>
	
	
	<s:HGroup verticalAlign = "middle" gap = "12">
		<s:Image source="assets/pics/{data.picture}"/>
		<s:VGroup>
			<s:Label text = "{data.firstName} {data.lastName}"/>
			<s:Label text = "{data.title}"/>
			<s:Label text = "{data.department}"/>
			<s:Label text = "{data.city}"/>
		</s:VGroup>
	</s:HGroup>
	
	
	<s:List id="list" dataProvider="{actions}" 
			top="160" left="0" right="0" bottom="0"
			change="list_changeHandler(event)">
		<s:itemRenderer>
			<fx:Component>
				<s:MobileIconItemRenderer
					paddingTop="8" paddingBottom="8" verticalGap="6"
					labelField="name" 
					messageField="details" 
					decoratorClass="{data.icon}"/>
			</fx:Component>
		</s:itemRenderer>
	</s:List>
	
	
</s:View>

 

 

1. why MXML? 

 

2. the <s:View...> in the first line, what does the s mean?

 

3. The stuff inside fx:smileyfrustrated:cript isn't too bad, it is just pretty much regular AS code. Function set data, tries to look at each data (contact) and decide what fields they should have. 

 

And Function list_changHandler is just a bunch of short cuts.

 

4. The next section of the code gets confusing, because since they get parsed, so I think that means they get executed in C talk, right? And I am trying to see who calls on what, and I get the s:HGroup stuff displays an employee's information, and s:List somehow calls list_changeHandler so if you click on the SMS icon, it tries to do stuff. What I don't get is inside the s:List, this stuff

 

 

<s:itemRenderer>
			<fx:Component>
				<s:MobileIconItemRenderer
					paddingTop="8" paddingBottom="8" verticalGap="6"
					labelField="name" 
					messageField="details" 
					decoratorClass="{data.icon}"/>
			</fx:Component>
		</s:itemRenderer>

 how does it know how many icons to render or in which order? 

 

If anyone has any resources on this subject, please point me there, thanks!

 

Right now I am trying to convert this app into a contact management app, so I am trying to implement the option of adding a contact, I already got the button to goto a new page, but I am trying to include text input fields, so I would use AS to layout the text input fields in fx:script section, and then call on the SQL (another part of the example) database to add a contact, am I approaching this the right way?

 

 

 

 
Please use plain text.
Developer
UberschallSamsara
Posts: 930
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: General question about using burrito and flex for UI

[ Edited ]

MXML is a convenience language; instantiating MXML components generally saves you typing when you want to customize lots of properties of a component.  MXML gets translated to AS3 for compilation.

 

The <s: notation is XML namespace notation, in this case for Spark components.  If it's confusing, do a web search for a tutorial on XML namespaces, but in a nutshell, if two component libraries both have a "Button" component, the way you specify which library's Button you want is to prefix it with a namespace.

 

Edit: Some resources:

 

http://www.adobe.com/devnet/flex.html

 

http://www.adobe.com/devnet/flex/videotraining.html

 

http://www.amazon.com/Flash-Builder-Bible-David-Gassner/dp/0470488956/ref=sr_1_1?ie=UTF8&s=books&qid...

 

Safari online can be a cost effective way to read tech books, especially if you only need any particular book just for one project and likely won't use it again:

 

http://my.safaribooksonline.com/

 

and if you live in a major metro area or close to a university don't forget their libraries as a cost effective way to get an overview of lots of technologies.  They may not be completely up to date but that's only a problem if you really need the latest book.  

 

 

Please use plain text.