We have often thought this about many apps that litter the app store that could easily have been done in HTML 5. With a target of the iPhone there is a lot of support and it’s often hard to tell if something is a native app or a web app (pie guy is a great example). In many ways it’s a better idea to do this, as you can then use the same “app” on any device, the BBC mobile news site is a great example, and I’m unsure what valuable extras they could add by creating a native app…

The problem is, the onus is on the developers to tell the iPhone specific things, that can make such a diference. Some are quite complex and would require lots of work, but others are really simple, such as default zoom, and if the toolbar is required (The BBC mobile site always opens slightly too zoomed in!). These are done by simply adding meta tags to the head of your HTML. We then suddenly realised that you could do this using a JavaScript bookmarklet, the same way Drew did way back for changing the home screen icon.

Obviously we quickly created one and it works a treat. Basically you click the bookmarklet on a site of your choice, and when it loads it won’t open in normal Safari and won’t show you an address bar. This is great for apps like Gmail, Google Tasks, Latitude, BBC news, etc etc

Step by step

1. First drag this link to your safari bookmark bar. Convert to WebApp
2. Sync your iPhone (with bookmark sync turned on)
3. Browse to a website you want to make a web clip of through Safari on your iPhone
4. Open your bookmarks and tap the one you just added to bookmark bar (nothing will appear to happen)
5. Then tap the + at the bottom of the screen
6. Select, “Add to Home Screen” and give it a sensible name.

You can see here the diference between the BBC sport website with and without using the bookmarklet:

Default

Saved as WebApp

Enjoy!

UPDATE It seems standard links on the first page open in Safari :( Still works well for Google web apps!

In order to fix this, all you need to do is make sure the folder/package with your files is added to the ‘runnable application files’ in the Flex Applications tab of projects properties. If there are already added, just try adding again and it should resolve the issue.

Thanks to Jason San Jose for pointing this out to me!

UPDATE: The latest RC for Flash Builder 4 now supports plugins again. I have updated the links to include the Eclipse plugin URL for each plugin.

This post is as much a reminder to me for future builds as it is for anyone else sick of having to manually look up where to down load the most common plugins every time they update. Start by downloading all the plug in files:

ANT

To get ANT installed you need to download and install JDT for eclipse.

Manual install: http://download.eclipse.org/eclipse/downloads/drops/R-3.5.1-200909170800/index.php

Eclipse update URL:

http://download.eclipse.org/releases/galileo/

Flex Formatter

Once you have used Flex Formatter you will never look back. It automatically formats your code, making you look like you have spent lots of time lining everything up. You can download the plugin files here http://sourceforge.net/projects/flexformatter/

Eclipse update URL:

http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite

subclipse

Subclipse is a must for anyone using SVN in their projects. It stops you running into a lot of problems, like turning up .svn files in search results. You can get it here
http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240

Eclipse update URL:

http://subclipse.tigris.org/update_1.6.x

For the manual install, once you have downloaded and unzipped these files copy the content of their plugin folder to the plugin folder in your Flash Builder 4 directory. You may also want to copy the features folder content to the features folder in the Flash Builder 4 folder too.

Once done restart Flash Builder and everything should be working.

Also be sure to check out SourceMate (currently in Beta).

You can find out what the problem is with your system by holding down the sync button then tapping the eject button. Each time you press it, you get a number, represented by flashing lights (video example). I got 0022, which is apparently is an error form the GPU over heating. This was what I expected as the system kept freezing and displaying some odd stuff before the RROD appeared. There is a huge list of error codes and their descriptions here.

It seems the RROD are displayed when the system detects an error, and locks it down to stop it working. The only way you seem to be able to reset it, is to overhead the system. This can be done by the “towl trick” or better yet jamming the fans. Lots of examples of these can again be found on YouTube.

This didn’t work for me, so I did some more research for my error code 0022 and found this solution by xx_mimic_xx

There is a very simple fix to this issue and I am not sure why it is not being talked about. I will have to make a video and post it for everyone to see, but in short, you need to overheat the GPU while keeping the CPU cool.
Now, if you do not know what you are doing, I would wait until I make a video about it. However, if you are comfortable taking your Xbox apart then it is simple.
You will need to disaseble the box all of the way down to removing the top cover and exposing the board. You do not need to remove the DVD or the fan, however you will need to take off the plastic piece that vents the fan air into the heat sinks. After you get that far, take the fan out of the case. DO NOT UNPLUG IT, as you will need it. Just pull it out of its holding spot. Next, you will want to move the DVD drive off to the side, away from the GPU heat sink, but leave it plugged in. Then set the fan on top of the CPU heat sink, the taller one, so that it does not overheat. Then turn your system on and let it RROD, then leave it on for about 10-15 min. What this will do is overheat the GPU and reflow the solder underneath it. After 10-15 min, turn your system off, let it cool, put it back together, and you should be good to go! I have done this on 3 systems that came up with error codes related to the CPU or GPU, and all 3 are now working again. Good luck!

So first off you need to get the case off, and in this modern age YouTube comes to the rescue with loads of really useful videos of people doing just that. Videos are great as I often find normal tutorials will miss something out the author thinks trivial (yet vital) or just aren’t very clear. After all seeing is believing. This one is as good as any: http://www.youtube.com/watch?v=qaxIB6cXTYM You don’t need any special tools, but the do make things easier (I was making the best of a swiss army knife)

Then as xx_mimic_xx said, you need to place the fan on the CPU (the taler one) and leave it for about 20 minutes. The system shouldn’t show the 2 flashing red rings when it overheats (as we a cooling the CPU). Instead the GPU should over heat and stay over headed apparently reflowing the solder.

Once done, let if cool for as long time and then hopefully it should turn back on without the RROD. You may need to do a standard overheat to reset the system though. It wont be a permeant fix mind, but should keep you going for a bit…

NOTE: Make sure not to be connected to Xbox live when your tinkering with your system, as it may ban you if it thinks you modding the system. Also make sure you careful when running the system with no covers, as there is a risk of electrocution and be sure to ground yourself too ;)

I was able to use Charles Proxy to see that the application wasn’t even making the requests to the server, meaning it must be an issue with AIR rather than local or remote DNS, or web servers.

My requests were being made by the HTTPService class, and I couldn’t find any properties of methods that where related to caching, however I did find that URLRequest had two properties, useCache and cacheResponce.

 
var urlRequest:URLRequest = _new URLRequest();
urlRequest.cacheResponse = false;
urlRequest.useCache = false;

This is quite handy, although it didn’t seem to work for me, and also wasn’t idea for the situation I was in. After doing some digging on the web I found the classic solution of adding a random number to the end of the URL

 
 
 
 var urlRequest:URLRequest = _new URLRequest('http://www.example.com/');
 urlRequest.url += '?nocache=' + Math.random() * 100;

Again this isn’t ideal and could lead to problems, especially if you don’t know what server or URL the requests may be sent for. There is a chance the nocache (or any) variable could cause problems.

Eventually I noticed that the URLRequest’s cacheResponse entry on livedocs had a “See also” pointing to flash.net.URLRequestDefaults.cacheResponse. This solved all my problems, and is essentially a default for all URL requests made my AIR.

The properties appear to be static variables so you can set them like so:

1
2
3
4

 
// Turn caching off for AIR
URLRequestDefaults.cacheResponse = false;
URLRequestDefaults.useCache = false;

This only needs to be done once, so you can add it to your applications start up cycle.

Update framework

When using the ApplicationUpdater (without the UI), you can easily force the install of all updates, but this isn’t very user friendly, and not a great experience. Often it’s far too time consuming to write your own UI for the update framework, so ideally I wanted to create a way of supporting required updates whilst using the existing UI as much as possible.

In order to do this I wrote a decorator for the ApplicationUpdaterUI which added the new event RequiredStatusUpdateEvent. This is dispatched when the updateDescriptor file is downloaded and includes the value of a new node called required (which you need to add to your update.xml file):

 
<?xml version="1.0" encoding="utf-8"?> 
<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0"> 
	<version>2</version> 
	<url>http://www.pixelbox.net/demos/extendedAppUpdater/ExampleAirApp-2.air</url> 
	<description>
		Version 2
		- Lots of great new features
		- Required security patch
	</description>
	<required>true</required>
</update>

The text “true” will translate into a Boolean set to true, anything else will be false.

You can then add a listener for the (along with any default events), to tell your user they have to update to the new required version. This can be as simple as:

 
           private function onUpdate(event:RequiredStatusUpdateEvent):void
            {
                if (event.required && event.available)
                    // Required update available 
                else
                    // There isn't a required update, so leave it up to the ApplicationUpdaterUI
            }

From a UX point of view this works rather well. You can choose how your application responds to a required update, and don’t need to force the install in the background and restart the app. I like to change the state of the app, as well as letting the ApplicationUpdaterUI window open. If the user upgrades through the default UI, great, if not they will be presented with a new app state, telling them there is a required update, perhaps even why it’s important. You may even want to let them do some things but not others (such as letting them save their work, or finishing their current workflow). Either way it gives your app the choice of how it wants to behave.

I have created a little example app (with view source enabled) that uses the this code, as well as a .swc and the example app as a project.

• Example AIR Application
• Extended Updater swc file
• Example Air App project
• Example update descriptor XML file

If you install the above air file, you will be able to check for updates and receive a required update. When this happens the app’s main function is disabled and a message displayed telling the user to upgrade.

Please let me know if you have any questions, or would like to add to this little framework, good luck. If you want to create your own without using the default UI check out this article on Black Pepper

NOTE: I have since discovered the Capabilities class that has a boolean called isDebugger. Therefore you can do this like so:

if (Capabilities.isDebugger)
{
trace('This app is running in the ADL');
}

Original post:

I recently came across the situation where I wanted to detect if my AIR application was running, “for real” or running in debug mode (in the Adobe Debug Launcher ADL).

With a standard Flex > SWF project you can change the HTML of the debug template to pass through a debug=true variable. However with an AIR project you don’t have this luxury.

The reason I want to do this, is I don’t want some things to happen when I’m debugging (such as sending stats to the server) and I don’t want to have custom variables or comment out code incase I forget to turn them back on before pushing live. By having a way of checking if the app is running in the ADL you can optionally stop things, safe in the knowledge that when they go live they will work.

I searched the web to see if there was a way to tell if AIR was running in debug mode, or in the ADL or was even a release build, but I couldn’t find a specific API call. What I did find is a number of methods that only worked if running in the ADL. All I had to do then was find one that returned different values depending on that fact. The Error class has a method getStackTrace() that return null if not running in the ADL and a string if it is, this was perfect and can be used like so:

if (new Error().getStackTrace() != null)
{
trace('This app is running in the ADL');
}

This code isn’t perfect, in the future the getStackTrace method could start working when not running in the ADL. You could also combine a few ADL specific methods, for better piece of mind. If you know of a better solution please let me know!

One of the biggest problems when using sub applications is the security violations that the Flash platform throws up. These are seen in the debugging console, and with most Flex projects the number and frequency of violations, mean the console becomes impossible to use.

Today I discovered Arthropod. Arthropod is an AIR application that offers a console that you can log to from a SWF (Flex, AIR, Flash applications or movies). All you need to do is include a simple class, and then log your debugging messages like so:

<

>Debug.log("my message");

Arthropod uses the local connection to communicate with the desktop application, and although currently only supports AS3, it should be possible to get an AS2 version running too.

This means I can now debug to Arthropod and don’t need to use the default flex builder debug console. However Arthropod also allows you to do a lot more, by debugging applications in their live environment. For more info check out http://arthropod.stopp.se

If you are interested in developing large application in Flex, it’s a good idea to break up parts into modues or separate application. This encourages loose coupling, improves the ease of updating and out sourcing development.

If your project is an AIR application then you will probibly want to load those modules locally (rather than rely on the web) and download/update them at runtime, rather than having to package them with your applicaiton. If this is the case you will no dout run into a host of problems involving application and security domains.

Adobe support this concept using the, “Marshall Plan“, an environment for protecting your main application from the many porential risks of downloading excutiable code. Be sure to read the 58 pages of info in this PDF.

The key points of the Marshall Plan are, Application Domains, and Secutiry Domains. In a nut shell, Application domains seperate class definitions (so you can use the same framework/singletons in each app) and security domains protect against applicaitons traversing into their reletaves.

If you want to do anything slightly complicated with your sub applications (RPC, use frameworks, etc) you will need to load them into a separate application and security domain. This does cause some problems with your sub application’s components that try and access high level objects (like stage and mouse), but apparently you can work around these :/

One of the first hurdles in running sub applications in seperate security and application domains is communication. The Marshall Plan has restricted communication in AIR down to a single shared EventDispatcher called sharedEvents, which is located inside the loaderInfo for the SWFLoader and the subApplication. Documentation on this is non existant, and I found myself routing around in debug mode trying to find the correct reference, and here it is:

// From the parent app where mySubApp is an instance of SWFLoader
var e:Event = new Event('testFromParent');
mySubApp.content.loaderInfo.sharedEvents.dispatchEvent(e);
mySubApp.content.loaderInfo.sharedEvents.addEventListener( 'testFromSubApp' , _eventFromSubApp );
 
// From the sub app
var e : Event = new Event('testFromSubApp');
this.systemManager.loaderInfo.sharedEvents.dispatchEvent(e);
this.systemManager.loaderInfo.sharedEvents.addEventListener( 'testFromParent' , _testEventHandler);

That right there is the basics of communicating between the two. Untyped objects can also be passed through, and typed objects (like ArrayCollections) will be converted to generic objects. They key is knowing to use the loaderInfo in the, “content” of the SWFLoader, and that the loaderInfo in the child app is in the systemManager.

I have created a demo AIR application that downloads a sub application, stores it locally, loads it in, and shows them both communicating.

Download the source code here or just the AIR application.

]]> http://www.pixelbox.net/2009/02/11/sub-application-communication-in-air/feed/ 1 http://www.pixelbox.net/2009/02/11/sub-application-communication-in-air/ http://feedproxy.google.com/~r/Pixelbox/~3/kimo8DA5lDQ/ http://www.pixelbox.net/2009/01/23/ui-navigation-question/#comments Fri, 23 Jan 2009 18:01:04 +0000 Rob http://www.pixelbox.net/?p=311

Question to ponder over the weekend.

You have a list of articles that scroll vertically in a desktop app.

When you click on an article to view in full you have navigation arrows to go to the next and previous article.

Do the buttons point up and down, to mimic scrolling on the previous screen?

Do they point left and right like iTunes which also displays songs vertically?

Answers on a post card.