The Space For App Developers

Beyond Plain Old HTML Objects

Archive for the ‘playbook’ tag

Cooklet – the most innovative cooking app built with Adobe AIR

with 2 comments

With the holiday season just around the corner you may be wondering what and how you are going to cook (or maybe your mom or wife does ;) ). Well here comes help: a really great looking and innovative app called Cooklet for tablets  (of course built with Adobe AIR). This app is a great addition to the Cooklet.com portal.

My favorite feature is the way you can navigate between the steps of the recipe. It is actually controlled via a front-facing camera and your hand gestures; this way your precious tab can stay clean ;) Another great thing is that the cooking steps are actually read for you so you can keep your tab at a safe distance from your stove. Also the steps’ text is presented with a much larger font so again it can be read from further away. The Cooklet team did really amazing job on the UI and UX of the app!

So go ahead and download it from Android Market or BlackBerry App World (hopefully the iPad version will come soon). You can also check it out in action in the video below.

Written by Piotr Walczyszyn

December 22nd, 2011 at 12:02 pm

Posted in Examples

Tagged with , , ,

as3viewnavigator – ViewNavigator for as3/flash projects

with 43 comments

I’m currently working on an application for the BlackBerry PlayBook tablet. The API that comes with the PlayBook SDK is based on pure AS3. Of course I could use Flex Hero for the job but I wanted to try out the “native” stuff that it comes with. My impression so far is really positive and the only thing that I’ve found missing so far was the concept of Views and ViewNavigator that comes with Flex Hero for mobile devices.

That is why I took a bit of time today to create library heavily inspired by ViewNavigator from Flex Hero that I could use for my pure as3/flash projects. The library is available for download here. Also checkout the video below for the details on how to use it.

Just for the reference, to tween the view transitions I used Tweener library that is also used internally by PlayBook API.

Below is the snippet of code that implements the example from the video above, you can also download the project source from here.

package
{
	import com.riaspace.as3viewnavigator.ViewNavigator;
 
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
 
	import qnx.ui.buttons.LabelButton;
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerAlign;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.core.SizeMode;
	import qnx.ui.core.Spacer;
	import qnx.ui.text.Label;
 
	[SWF(width="600", height="1024", backgroundColor="#FFFFFF", frameRate="30")]
	public class Main extends Sprite
	{
		private var navigator:ViewNavigator;
 
		private var viewNumber:int = 0;
 
		public function Main()
		{
			initializeUI();
		}
 
		private function initializeUI():void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			// Creating instance of ViewNavigator
			navigator = new ViewNavigator(this);
			// Pushing first view to the navigator
			navigator.pushView(createView());
		}
 
		private function createView():Container
		{
			var view:Container = new Container;
			view.flow = ContainerFlow.VERTICAL;
			view.align = ContainerAlign.MID;
 
			// Incrementing view number
			viewNumber++;
 
			// 20% spacer from the top
			view.addChild(new Spacer(20));
 
			// Adding label with view number
			var numLabel:Label = new Label;
			numLabel.text = viewNumber.toString();
			var format:TextFormat = new TextFormat;
			format.size = 70;
			format.bold = true;
			format.align = TextFormatAlign.CENTER;
			numLabel.format = format;
			numLabel.size = 100;
			numLabel.sizeMode = SizeMode.BOTH;
			view.addChild(numLabel);
 
			// 15% spacer between label above and buttons
			view.addChild(new Spacer(15));
 
			// Adding "push view" button
			var btn:LabelButton = new LabelButton;
			btn.label = "push view";
			btn.addEventListener(MouseEvent.CLICK,
				function(event:MouseEvent):void
				{
					navigator.pushView(createView());
				});
			view.addChild(btn);
 
			// Adding "pop view" button
			btn = new LabelButton;
			btn.label = "pop view";
			btn.addEventListener(MouseEvent.CLICK,
				function(event:MouseEvent):void
				{
					navigator.popView();
				});
			view.addChild(btn);
 
			// Adding "pop all" button
			btn = new LabelButton;
			btn.label = "pop all";
			btn.addEventListener(MouseEvent.CLICK,
				function(event:MouseEvent):void
				{
					navigator.popAll();
				});
			view.addChild(btn);
 
			// Adding "pop to first button" button
			btn = new LabelButton;
			btn.label = "pop to first";
			btn.addEventListener(MouseEvent.CLICK,
				function(event:MouseEvent):void
				{
					navigator.popToFirstView();
				});
			view.addChild(btn);
 
			// Adding "replace" button
			btn = new LabelButton;
			btn.label = "replace";
			btn.addEventListener(MouseEvent.CLICK,
				function(event:MouseEvent):void
				{
					navigator.replaceView(createView());
				});
			view.addChild(btn);
 
			return view;
		}
	}
}

Written by Piotr Walczyszyn

February 2nd, 2011 at 9:11 pm