Thursday, May 31, 2012

Rules for Mobile Usability in RIAs

We've been working with making our web apps mobile friendly and have come across a few rule-of-thumb type rules that can be applied to an application user interface at design time to help that process:

  1. All hover interactions need to be on elements with only that action.  The design cannot have a button with both click and hover events as mobile devices wont trigger the hover event.  On mobile devices the hover event needs to be a click thus conflicting with the other click event.
  2. All external, modal iframes need to be new browser windows/tabs.  iframes wont scroll on certain mobile devise, which you could get around by sizing the container unless it's a modal or you don't have control over the code on the iframe.
  3. All PDFs need to be a new browser window/tab.  Some devices do not support document download and if the document is in a confined container the user will not be able to scroll.
I'm sure there will be more rules like this as I get into more complex mobile web development but for the time being this covers the majority of any mobile friendly conversion.

Sunday, September 05, 2010

Jobs Available in IBM Interactive

Check it out, IBM is hiring!

IBM Global Business Services helps top-tier clients solve their most complex business and technical issues. As a Application Manage Services consultant, you will deliver innovative business consulting, business process design, systems integration, and application design and management to leading commercial and public sector organizations in 17 industries worldwide. With access to resources that only a global leader can provide, as a consultant you will learn valuable skills, gain access to a vast and diverse network of talented professionals, and enjoy unparalleled career, training, and educational opportunities. To be an official applicant to IBM, you must submit a resume and online application. Resumes submitted remain active for six months.

IBM Interactive, a growing interactive design practice within one of the world's largest and most respected technology companies, seeks enthusiastic, creative, and experienced Rich Media Architect for high profile projects for high traffic web sites. The Rich Media Architect is responsible for developing highly creative and professional applications in Adobe Creative Suite in ActionScript 3, and must also have the ability to integrate that application via traditional web technologies like JavaScript and HTML.



More information about Jobs at IBM: http://bit.ly/afmVlw

Sunday, November 15, 2009

Twitter's new Retweet feature (BETA)


Twitter has added a new feature. I'm not sure if this is just the ability to identify a retweet with an icon or if it goes further than that by giving us back a portion of our precious character count when retweeting. I guess we'll see. If it's the former I'm not sure it's an added benefit to me. The latter absolutely is.

Thursday, November 12, 2009

SWFAddress 2.4 and SWFObject 2.2 Static with Flex 3

SWFAddress 2.4 is fairly new and most people who want to implement SWFObject under it seem to like the dynamic version so I had a little bit of trouble finding good info on these specific versions. The general info did seem to work out all right but it would have been nice to have seen a more specific example, so here it is:

There are plenty of examples implementing either one of SWFObject or SWFAddress alone but together there are a few issues to be aware of.


<script type="text/javascript" src="assets/js/swfobject.js"></script>
<script type="text/javascript" src="assets/js/swfaddress.js"></script>
<script type="text/javascript">
function outputStatus(e)
{
alert("e.success = " + e.success +"\ne.id = "+ e.id +"\ne.ref = "+ e.ref);
}
swfobject.registerObject("${application}", "9.0.0", "assets/swf/expressInstall.swf", outputStatus);
</script>

<div>
<object id="${application}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}">
<param name="movie" value="${swf}.swf" />
<param name="bgcolor" value="${bgcolor}" />
<param name="flashVars" value="test=true&test2=false" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>


The main thing to keep in mind here is the order in which the JavaScript is invoked.
  1. The script reference to SWFObject first
  2. then SWFaddress
  3. finally the method call to registerObject
If you use the code above and implement the Flex code correctly (you can use the sample SWF that comes with the SWFAddress download to test) You will have successfully merged SWFAddress and SWFObject with a static implementation for your Flex application!

Thursday, April 02, 2009

Loading a Flex SWF from a Flash SWF

Using either pure ActionScript or the Flash IDE, there is a trick to loading a SWF generated from a Flex Application from within a Flash/AS SWF. When loading a Flash SWF any developer can use the following code:


var loader:Loader = new Loader();
var request:URLRequest = new URLRequest("http://www.anyurl.com/test.swf");

loader.load(request);
addChild(loader);

If the test.swf has public functions (i.e. public function hello(name:String):String) you could call them like so:

loader.content.hello("Phillip");

Or you could cast the content and use it as an object like so:

var testObject:TestObject = TestObject(loader.content);

This works as long as the SWF was generated from the Flash SDK. The Flex SDK wraps the application in a SystemManager. Since the SystemManager handles (pre)loading the application we cannot guarantee that at load time of the SWF that the application has been instantiated. The good news is that the SystemManager's application property does not get assigned until the application is instantiated so we can setup a timer and test the application property until the application is ready.

WARNING: Blog code has been copied, pasted, and modified. It may not work as is but the approach still stands.

private var loader:Loader = new Loader();
private var timer:Timer = new Timer(10);

public function init():void
{

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderCompleteHandler);
timer.addEventListener(TimerEvent.TIMER, checkTimerHandler);

loader.load(request)
}

private function onLoaderCompleteHandler(event:Event):void
{
trace("Application - onLoaderCompleteHandler");
timer.start();
}

private function checkTimerHandler(event:TimerEvent):void
{
trace("Application - checkTimerHandler");
var flexSWF:* = loader.content;
if(flexSWF != null && flexSWF.application != null)
{
timer.stop();
flexApplication = flexSWF.application;
}
}

There are a few other things I'd like to try but this works.

Tuesday, March 31, 2009

Making an Array out of XML with E4X

Today one of my colleagues asked me how to make an array out of attributes from nodes in an XML object in ActionScript 3. After some discussion and searching on E4x he found the solution in many places across the web. The key is the following line of code:

xml.nodelist.@attribute.toXMLString().split("\n")

The split string function does exactly as you might think; takes a string and splits it on every occurrence of the provided parameter and returns those bits in an array. As if split wasn't self explanatory enough there's toXMLString(). Prior to that we have xml.nodelist.@attribute which returns a XML set of nodes of the attributes.

XML:

<xml>
   <trunk>
      <leaf attr="1">
      <leaf attr="2">
      <leaf attr="3">
   </trunk>
</xml>

ActionScript:

var temp:Array = xml.trunk.leaf.@attr.toXMLString().split("\n");

temp = {1, 2, 3};

Seems like a bit of a hack but pretty cool.

Wednesday, March 18, 2009

IBM in talks to purchase Sun

IBM is in talks to buy Sun Microsystems as early as the end of this week. Current information puts IBM's bid over Sun's market cap at $6.5B.

http://online.wsj.com/article/SB123735970806267921.html

I'm interested to know how this could impact the RIA world as we know it. IBM currently has it's hand in the Dojo toolkit as well as a recent acquisition of ILOG and their Adobe Flex data visualizations, Elixir.

Research done by Gartner (MarketScope for AJAX Technology and RIA Platforms) and popular opinion shows, Adobe Flash/Flex as the front runner with Microsoft Silverlight and others in a positive position and Sun's JavaFX positioned showing promise.

Side note: RIAs are more important than they have been in the past; illustrated when Forrester published information on RIAs going mainstream as a first-Class application development option (Inquiry Spotlight: Rich Internet Applications, Q3 2008). There's more of a focus on AJAX libraries and platforms as well as Browser plug-ins as suitable technologies for web applications. If the technology is more suitable the question then becomes how costly is it to develop? Take into consideration the efficiency gained from tooling, the efficiency developing the technology, and availability of developers for each platform and go from there.