A couple of years ago I started working on a Flex 4 powered social networking application called Xuland.

It was a web-based app that had the look and feel of Facebook with geo-location abilities (based on IP). Essentially, you could change the on-screen map to any location in the world (or it would discover your current location) and you could read or post comments to that area. It was a nice idea…but ultimately didn’t work.

During creation, Apple and Adobe had their infamous falling out and the world moved to a mobile stage. Now Flash on mobile has been deprecated by Adobe and Flex itself has been accepted into Apache’s incubation process. It seems that the days of considering Flex for general public consumption as a web-based application were gone.

I opted to pick up the pieces of Xuland and re-assemble them into an AIR-powered mobile application with a different objective: find a way to make it easier for folks to make friends.

Facebook and Twitter are great vehicles for announcing your current status to your family, friends, fans or followers. But they do little to strike new connections between people.

Xuland attempts to place more importance on a person’s profile. It is through the profile that you can find common similarities in passions, occupations, religion and so forth. Xuland allows you to ask anonymous questions, request that folks “guess” your age or other personal attributes. Xuland tries to ease the connection-making process to allow new friendships to strike without odd winks, pokes, virtual gifts or other gimmicks.

Using Flex 4.6′s mobile enhancements and Adobe AIR, I adapted the previous web-based application to a mobile-based friending app that is now live on the Android Market:

https://market.android.com/details?id=air.com.xuland

The iOS version (using the same code-based) has been submitted to Apple and is currently waiting review. I had to fabricate some test data and accounts to ease the review process and will remove those soon.

Any feedback on the app in general, the concept, appearance or performance is appreciated of course. I rely on the Flex community and have done so for years. Recommendations or questions are welcome!

I’ll post another article once the iOS version has made its way to the Apple App Store. Until then, happy Xulanding!

I’m sure this will come in handy for anyone out there looking for the iOS chevron to duplicate in their Flex 4.5+ mobile AIR apps

This is what I’ll be using in my social-friending app Xuland…feel free to copy and modify to your taste…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	height="100%"
	width="20">
 
	<s:Path verticalCenter="0"
		scaleX="2"
		scaleY="2">
		<s:data>
			M 2 0 L 7 5 L 2 10 L 0 9 L 4 5 L 0 1 z
		</s:data>
 
		<s:fill>
			<s:SolidColor color="#666666" />
		</s:fill>
	</s:Path>
</s:Group>

Here’s an example…ignore the test messages

In building the mobile dating app Xuland, one of its key features will be the ability to add many profile photos. Your admirers can tap each photo from a list, see the larger version and vote on whether they like it or not.

The thing is, because buttons are typically over-sized on mobile devices to make them fat-finger friendly, it leave little room on the screen for many of them. You could utilize the off-screen menu option on Android but iOS devices lack this seemingly basic feature. Instead you could design your app to have contextual popup menus appear when holding or pressing down on an icon, button or other object on the screen.

Unfortunately, the current version of Flex (4.5) doesn’t support a long-touch or long-click event from what I can see, but it was easy enough to simulate one using a timer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

private var timer:Timer;
private var confirmPopup:ConfirmPopup;
 
private function onTouchBegin():void
{
	timer=new Timer( 1000 );
	timer.addEventListener( TimerEvent.TIMER, onTimerComplete );
	timer.start();
}
 
private function onTimerComplete( event:TimerEvent ):void
{
	timer.stop();
	confirmPopup=ConfirmPopup.open( "delete photo?" );
	confirmPopup.addEventListener( ConfirmPopup.CONFIRMED, onDeletePhotoConfirmed );
}
 
private function onDeletePhotoConfirmed( event:Event ):void
{
	confirmPopup.close();
 
	//put additional photo deletion logic here
}
 
public function onTouchEnd():void
{
	timer.removeEventListener( TimerEvent.TIMER, onTimerComplete );
	timer.stop();
}

And the MXML…

1
2
3
4
5
6

<s:Image id="image"
	source="{ xyzSource }"
	touchBegin="onTouchBegin()"
	touchEnd="onTouchEnd()"
	mouseDown="onTouchBegin()"
	mouseUp="onTouchEnd()" />

Essentially what happens here is that once the user touches a photo, the timer activates and starts ticking. If the user at any time during the timeout period takes his finger off the photo, the timer is stopped, otherwise when the timer reaches is preset delay, it opens a confirmation popup prompting the user to take some action.

Here’s the results:

After recently diving into Flex 4.5.1 and starting several mobile AIR-based projects, I ran into an issue with the Google Maps SDK when testing under iOS devices.

Long story short, it didn’t work.

The Google Maps Flash API works great under Android when the mobile project is deployed as an AIR-based application, but when compiled through the PFI (Packager for iPhone) bundled into AIR 2.7 it simply doesn’t ever load.

After a little investigation, the most likely cause was the fact that the Google Maps Flex API attempts to load external SWF’s at runtime from the Google map servers, which is strictly forbidden by Apple’s terms of service thus rendering this functionality completely disabled.

This functionality works fine under Android devices and was actually a pleasure to use, however without iOS, the joy of working with Adobe’s new Flex 4.5.1 SDK quickly subsides and is replaced by frustration.

There are workarounds for iOS, namely through the usage of the JavaScript-based Google Maps SDK and Flex 4.5′s own StageWebView class which can display external HTML content over the Flash content.

Unfortunately, Flex cannot interact with StageWebView content making it very difficult for some apps to function normally as they would in a normal Flash-based SWF rendered through the browser. My own application, Xuland, which depends heavily on the Google Maps SDK required many changes before I could test it’s mobile-version on my iPad.

I can get by with StageWebView, but I prefer a Map object that Flex can interact with directly, apply markers, dynamically zoom or geolocate, etc without having to re-load a URL from my external web-server.

Just today, MapQuest has released a Flex-version of it’s Flash Maps API which supposedly works well under both iOS and Android. I haven’t tested this but I will later tonight for sure

For everyone else, here’s a link to MapQuest’s Developer Reference page and API:

MapQuest Developer Network:
http://developer.mapquest.com/web/products/beta

MapQuest Flash Map Mobile API:
http://developer.mapquest.com/content/as3/v7/7.0.2_MQ_MOBILE_B1/documentation/devref/index.html

Follow me on Twitter for more Adobe Flex & AIR Mobile news and announcements.

“We’re excited to announce that Flash Player 10.3 is now available for Android, Linux, MacOS, and Windows. Flash Player 10.3 improves stability, enhances security and user privacy protection, and provides new desktop video and audio capabilities for enterprises and developers.

On the device side, with the rollout of Android 3.1 users of Honeycomb tablets like the Motorola XOOM will experience performance improvements introduced in Flash Player 10.2.”

http://blogs.adobe.com/flashplayer/

Good job Adobe…keep it going!

After a lengthy hiatus due to holidays and vacation, I returned to working on my experimental Flex 4 & Swiz social-networking site, Xuland, by adding the Twitter-like ability to follow people.

Only available to logged-in users, the “following” tab allows you to view comments by people that aren’t necessarily in the location shown on the map. There is also a new “followers” tab which allows you to view comments by people that are following YOU.

Although I am still ironing out small bugs here and there, the functionality works rather well. Give it a whirl and let me know what you think!

For my experimental Flex4-powered social networking application Xuland, I wanted to display local news specifically tailored to fit the location that was currently displayed on the map.

A service call to obtain a local newsfeed was easy enough, but I wanted each news title to appear underneath the Xuland map as a link. Using the default Flex LinkButton resulted in something close to what I wanted. Clicking each link opened up the local news story in a separate browser window or tab, however if the title of the news story was longer than the width I had allotted for the LinkButton, the resulting title was cut off:

I needed the LinkButton to essentially wrap without truncating the title. Figuring out how to do so was not easy but after a little digging and a little experimenting, here’s the resulting code.

First, we need to create a non-truncating UITextField that will serve as our textField component within the LinkButton class. The only purpose of this custom UITextField class is to override the truncateToFit Boolean so that it always returns false:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package
{
	import mx.core.UITextField;
 
	public class NonTruncatingUITextField extends UITextField
	{
		public function NonTruncatingUITextField ()
		{
			super();
		}
 
		override public function truncateToFit(s:String = null):Boolean
		{
			return false;
		}
	}
}

Next, we need to utilize that new UITextField class in a customized version of our LinkButton. We’ll extend LinkButton and call it WrappingLinkButton. The primary purpose of this class is to override createChildren and set the textField component property to point to our new NonTruncatingUITextField class.

We’ll also override updateDisplayList to change the y-index of our textField so that it appears higher on the button. At this point, we also need to increase the height of the button to fit our newly wrapped textField. You’ll notice I added a little more logic to underline the text when you mouseOver and to zero out the leading (space between characters):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

package
{
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
 
	import mx.controls.LinkButton;
	import mx.core.UITextField;
 
	public class WrappingLinkButton extends LinkButton
	{
		private var m_textFormat:TextFormat;
 
		public function WrappingLinkButton()
		{
			super();
			addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
			addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
 
			m_textFormat = new TextFormat();
			m_textFormat.leading = 0;
		}
 
		private function onMouseOver( event:MouseEvent ):void
		{
			setStyle( "textDecoration", "underline" );
		}
 
		private function onMouseOut( event:MouseEvent ):void
		{
			setStyle( "textDecoration", "none" );
		}
 
		override protected function createChildren():void
		{
			super.createChildren();
 
			textField = new NonTruncatingUITextField();
			textField.styleName = this;
			textField.multiline = true;
			textField.wordWrap = true;
			textField.autoSize = TextFieldAutoSize.LEFT;
			addChild(DisplayObject(textField));
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			textField.y = (this.height - textField.height ) >> 1;
			height = textField.height + getStyle("paddingTop") + getStyle("paddingBottom");
			textField.setTextFormat( m_textFormat );
		}
	}
}

Now we just need to drop the component into our view. I use mine within a custom ItemRenderer component that serves as the item renderer for a DataGroup component that lists my news items vertically:

1
2
3
4
5
6
7

<component:WrappingLinkButton
          width="245"
          label="{ m_news.title }" 
          textAlign="left"
          paddingBottom="0" paddingTop="0"
          paddingLeft="0" paddingRight="0"
          click="onClick()"/>

My click handler simply calls navigateToURL to send our user to the story of their choice. And this is our resulting newsfeed in Xuland:

Hope this helps others out there looking to create their own wrapping LinkButtons (or Buttons).

To read more about Xuland, visit my other blog post regarding this application.

Erich

Mission: Add a Facebook “like” button to my experimental Flex social networking site Xuland.

I initially thought, “Boy this must be a piece of cake. Surely thousands of other developers have already figured this out!”. Boy was I wrong.

The best example I could find on this specific topic was http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/. Spend a good half hour digesting the contents of that blog posting and you’ll be ready to scratch the idea altogether.

I wanted a simple implementation that I could knock out in less than an hour. I figured why not just use an iframe!

Here’s the steps:

First, go to http://developers.facebook.com/docs/reference/plugins/like

Fill out the form to get your special iframe code

Next, open up your Flex application’s HTML wrapper (e.g. index.template.html) in FlexBuilder

Copy and paste the iframe code (from above) into the HTML template. I put mine right under the <div id=”flashContent”> section.

1
2
3
4
5
6
7
8
9

<div id="flashContent" style="z-index:-1">
  ...
</div>
 
<iframe 
     src="<< insert your custom facebook like URL here >>" 
     scrolling="no" frameborder="0" 
     style="border:none; overflow:hidden; width:100px; height:21px; z-index:99; position: absolute; top: 0px; left: 100;" 
     allowTransparency="true"></iframe>

Notice the iframe style declaration. Make sure z-index=99, then you can use CSS to position your like button exactly where you want it.

Also notice the flashContent div style declaration. Set its z-index = -1.

In the SWFObject section, add a param for “wmode”. Set it to “transparent”.

1
2
3
4
5
6
7

var params = {};
params.wmode = "transparent";
swfobject.embedSWF(
  "${swf}.swf", "flashContent", 
  "${width}", "${height}", 
  swfVersionStr, xiSwfUrlStr, 
  flashvars, params, attributes);

In the body tag, set the z-index=0

1

<body style="position:relative;left:0px;top:0px;z-index:0;">

That’s it!

The result should look something like this:

Good luck with your implementation!

To read more about Xuland, visit my other blog post regarding this application.

Erich

Truth is, I’m not sure if this is the technically the world’s “first” Flex-based social networking application, but I can say that I haven’t see anything else like it in Flex – so there’s a good chance it is. Nevertheless, hopefully the title was enough to grab some attention

I came up with the idea for Xuland a year ago. At the time I simply wanted to come up with a project that would allow me to dive into the Flex 4 Beta and try out some new frameworks (other than Cairngorm). I chose Swiz for its “brutal simplicity” and I was immediately impressed.

I present this first to the greater Flex community as I’m really interested in feedback at this stage of its development. Does it make sense? Does it load fast?

My biggest concern: determining whether Flash was the right platform for a site like this. Honestly, I don’t see why not. Flex is a great framework. Flash is a great multimedia platform. Add a little social networking features and you could have the makings of something great.

I wasn’t able to attend MAX this year although I did enter Xuland into the 2010 MAX Awards. There were several other amazing sites that Adobe chose over Xuland and I don’t blame them. There truly is some fantastic talent out there and I feel blessed to even be remotely part of this group.

To put it simply, Xuland is a social network centered on location, rather than a friend’s list.

It started off as a way to get to know your neighbors…the people that are most likely *not* on your friend’s list. I’ve always thought Facebook was a great way to re-connect with old friends and family (not “old family”, sorry Mom) but you wouldn’t necessarily meet new people on Facebook. I remember back in the days of MySpace when random strangers would friend each other…some folks had thousands of “friends”. It was always so bizarre to me. I’m not sure if that same trend has crossed over into Facebook since its advent of fan-pages but still sites like these didn’t feel like the appropriate place to establish new friends.

A better opportunity arose through Yelp. Yelp centers itself on geography. You can see reviews of the restaurant down the street which is fantastic but it was difficult to carry on a conversation with past reviewers. Sure there’s message boards, but it would be nice to carry on a real-time conversation with someone in your same town that you did not already have a past relationship with (i.e. “on your friend’s list”).

Xuland eventually morphed into a FLASH-ier alternative to Craigslist, complete with a commenting & rating engine, Google map that pools postings into the comment stream based on location and selected radius, a built-in ad & local event submittal system and there’s even a simple image editor. No, this isn’t your father’s Craigslist.

I’m going to add a lot more, including extending the project to include mobile. What I’ve done so far took a lot of work (spare time with a family, mind you) but I’m happy to keep chugging forward as long as the site finds some real use out there.

What I really hope is to prove that Adobe Flash & Flex can be used for much more than dashboard and charting widgets or for unseen back-office intranet apps.

I had a lot of fun exploring Flex 4′s new skinning architecture, the Swiz inversion-of-control framework, the cloud technology that I’m using to host Xuland and many other bits and pieces of knowledge I had to find to assemble this all together.

I don’t think the site is ready for global public consumption quite yet. There’s a lot of little details I need to iron out but it works for the most part. I invite anyone reading to try it out and let me know what you think!

http://www.xuland.com The map should geolocate to your general area, but it won’t be exact. If it’s off, drag the map around and set your new default location (you’ll have to login). You can also (change) the map to anywhere else in the world which is nice. Talk to folks in Munich, or Paris. Change the map zoom, too. As the radius changes, so does the number of viewable comments. The red dot in the middle essentially shows the center of the map around which it pools comments.

Login with your Facebook or other social networking accounts, or create your own Xuland account via the registration form. Try posting a comment, attach an image, or real estate posting. There are many categories similar to what you’d find on any classified ads website. You can also post a local event (I got a little tired of getting invited on Facebook to events that were in other cities!).

I’ll post more on this blog and on Xuland’s own Tumblr blog. It’s getting a little difficult juggling all of this so bear with me if I seem a little slow, otherwise thanks so much for reading and trying out Xuland.

I ran into an issue today I didn’t immediately have an answer for.

I added an overlay to the map of my Xuland flex-based social networking tool which resembled a radar (concentric circles, tinted slightly green):

Before adding the radar overlay, I could drag the map as normal, however after adding the overlay atop the visible map area, the map no longer responded to mouse drag events.

Before writing a lot of code to catch and re-dispatch mouse events from the overlay to the map, I admit I felt a little silly after discovering a simple property that just needed to get added to my overlay:

1
2
3
4

<map:RadarOverlay
	id="radar"
	buttonMode="true" useHandCursor="true"
	mouseEnabled="false"/>

As the API mentions: “Specifies whether this object receives mouse messages. The default value is true, which means that by default any InteractiveObject instance that is on the display list receives mouse events. If mouseEnabled is set to false, the instance does not receive any mouse events. Any children of this instance on the display list are not affected. ”

And it worked perfectly!

With the Xuland Flex-based social networking application I’ve been working on for the past eight months, I decided to switch things up on the back-end, most notably in the services layer where I’ve been using ColdFusion 9 for my data-access objects.

ColdFusion has been a perfect fit for Flex since I had used the software quite extensively for much of my programming career. However, as I prepare Xuland for go-live (August 13th – which also coincides with the Adobe MAX Awards deadline for entry date), I realized that without a license for the software I would be restricted to shared hosting services – a solution that would not work in the long-run, especially if Xuland were to suddenly gain popularity.

As I considered dedicated or “cloud” hosting, I would have to either buy an $8,000 ColdFusion license (umm, no) or switch to an alternative. BlueDragon piqued my interest, but it unfortunately does not yet support AMF. Without the ability to remote, my application would launch already dead in the water.

Another alternative, completely unknown to me before today, is Railo (pronounced “Rhylo” after a fictitious alien dog in Star Trek).

“Railo is a free, open-source alternative for ColdFusion application development.” It currently supports the AMF3 format (whereas in the last version it only supported AMF0) and comes shipped with its own application server and servlet engine (Caucho Resin). In fact, the Express versions can be downloaded, configured for Flex and launched within minutes. The best part is it’s completely FREE.

I’ve since switched from ColdFusion to Railo and with hardly any tweaking, Xuland was running against Railo executing the same CFC’s I had already written for ColdFusion 9. After starting the Railo service locally the first time, it automatically created the necessary Flex remoting-config and services-config XML files needed in the WEB-INF directory. Remoting worked perfectly, and I dare say it seems a bit faster (I have not run any benchmarks quite yet, however).

If you’re looking for a solution similar to this, definitely consider Railo as it works as well as ColdFusion without the sheer cost.

My little Flex 4, Swiz and ColdFusion powered social networking experiment, Xuland, now has a Facebook “fan” page for anyone that’s uses that site (eh…what’s that site again…”facebook??”):

http://www.facebook.com/pages/Xuland/302813766356

I’ll periodically post updates (generally non-technical), screenshots and whatever else I can to keep anyone interested up-to-date. I think it’s a brilliant idea for a site, the design/UI is easy & clean and I think everyone’s going to like it.

A lot.