Gareth Shapiro | London Based Freelance Web & Mobile Consultant, Developer & Trainer http://www.garethshapiro.com/ en-us Nucleus CMS v3.51 © Weblog http://backend.userland.com/rss http://www.garethshapiro.com//nucleus/nucleus2.gif Gareth Shapiro | London Based Freelance Web & Mobile Consultant, Developer & Trainer http://www.garethshapiro.com/ Simple iOS Viewstack http://www.garethshapiro.com/index.php?itemid=73 Xcode LogoOne of the central mechanisms in the architecture of an iPhone or iPad app is a UINavigationController, there is at least one in most apps. This class is similar to a view stack found in other application frameworks and for the most part works very well. One drawback, and this has as much to do with iPhone and iPad application architecture as much as the UINavigationController itself is the decentralised approach to navigating between children UIViewControllers. Not having details that relate to something in one place in your code can make things hard to find and this frustrating situation can be made more so by the use of storyboards, but that's another conversation entirely.

The situation can very easily be improved ... SimpleIOSViewStackController is an Objective-C utility which extends UINavigationController so that details about the children UIViewControllers, can all be found in one place. This greatly improves the ease at which a programmer can find where in the code the changes to current application view originate from and delivers an added benefit of being able to start your app in a particular view state. This becomes a great production benefit later in a project, helping to remove the need to click through several screens to get to the one you are wanting to work on.

]]> Developer http://www.garethshapiro.com/index.php?itemid=73 Wed, 29 May 2013 19:17:06 +0000 Simple Objective-C API service http://www.garethshapiro.com/index.php?itemid=69 Xcode LogoI am sure many Objective-C developers, iOS or OSX, have been in the situation where the backend API needed for the project they are working on has not been developed by the time they need to start writing the code that will access it. In organisations such as creative agencies, startups and software companies it is not always possible to synchronise resources to perfectly suit all the current projects' timelines but with a mixture of creativity and technology, conveniently wrapped up in a utility called SimpleObjectiveCAPIService, this simple bottle neck can be negotiated.

It is only correct that I point out now that this utility has been created more to assist with iOS app development rather than provide production ready network utility. If you are developing an enterprise iPad app or an iPhone app that has to cope with dynamic connectivity situations this utility is more than likely going to fall short of your needs.
Objective-C iOS API Service

There are a few ways of solving the issue of providing a local version of an API. You could use a local web server on your machine, mock objects in your unit tests or as I was recently asked by a Technical Director while freelancing you could choose to include JSON files in the project to replicate API responses.

The advantage to this approach is the dependancies to get the local solution working are simple text files and are included in the project are backed up in Git/SVN and as such the situation can be easily replicated. Another advantage is realised when the stub files are named in a way that describe the API calls. These can then be supplied to the back end developer as part of communicating what is needed for them to produce the API, cutting down on the project documentation burden.
]]> Developer http://www.garethshapiro.com/index.php?itemid=69 Thu, 23 May 2013 11:30:37 +0000 Dual : Adobe Air Database Update & Access Layer http://www.garethshapiro.com/index.php?itemid=49 Adobe Air RuntimeWe've all been in this situation. You have developed a mobile app, or desktop application. It has been accepted to the Android Marketplace / Apple's App Store, or you have uploaded it onto your website or intranet for distribution. People have installed it and are using it.

It's time for version 2 and you make the inevitable changes to the database. You have to write code, in the model of your MVC pattern usually, that copes both with a upgrading the database from version 1 and creating a database from scratch for a user who is using your application for the first time at version 2.

And so the pattern continues, and the problem grows, for each version. In version 3 you have to write code that handles people upgrading from version 2 to version 3, version 1 to version 3 and people installing the app for the first time.

What a pain! Not anymore … Introduction

Dual is a library written in AS3 that provides an improvement to many database tasks in an Adobe Air application whether the app is intended for an Android phone, iPhone, iPad or desktop. Dual was written to make the task of database version control across many different versions of your application easy to manage but that's not all it does ...

Dual is :
  • Lightweight, adding about 100k to your application.
  • Easy to use. Honest. It's really easy.
  • Part of my AS3 utilities.
Dual helps you :
  • Easily upgrade your application database from one version to another.
  • Run more than one query in one go on your database, this is not currently supported in Air.
  • Listen to only one set of events when accessing your database.
  • Implement robust and secure database code..
Licensing

There is no license restrictions at all. Obviously if you let me know, or even better let other people know that you are using it and where to get it, that would be great.

If you really need a license for legal reasons then I am happy for you to apply this one.

Dual is open source and if you would like to improve it please feel free. I have taken care to make sure that it is constructed well, there are no memory leaks caused by using the library and it is both easy to use and understand.

Where I can you get it?

Dual is available as part of my Actionscript 3 /Air Utilities on GitHub, grab the zip.

]]> Developer http://www.garethshapiro.com/index.php?itemid=49 Tue, 3 Jan 2012 12:31:44 +0000 ActionScript 3 Frame Buffer http://www.garethshapiro.com/index.php?itemid=44 Flash PlatformAll AS3 programmers have had to cope with situations where what they can see on the screen is different to what their code is telling them. Within Air, Flex and Flash applications the two main contributors to this are; the Flash Player is single threaded, apart from a few exceptions in Air, and internally is based around a frame rate.

Have you ever tried to measure something you have just added to the Display List and even though you can see it on the screen your measurement, something like width or height, is coming back as 0? How about when you are preloading, does your preloader get stuck at 10% and then jump to 100% at the end?Elastic Racetrack Cure

First things first, download my Actionscript 3 utilities.

The reason why sometimes you can't measure items you have just added to the Display List in AS3 is because of the "Elastic Racetrack". If you don't know what that is then I recommend you scoot off and read up about it first. Understanding this is essential for intermediate / advanced Actionscripters.

One cure for the Elastic Racetrack is to use Grant Skinner's excellent Chunker approach. It's not always suitable for all situations though and a more straight forward approach is to simply wait 1 frame before carrying on with your measurement. I recently had a project where I needed to wait 1 frame in quite a few places and so the FrameBuffer was born.

Create a new Flex 4 project and type in the following code :

<mx:Application
       
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark"

        creationComplete="setUp()"
         
        >
       
        <fx:Script>
       
                <![CDATA[
                       
                        import mx.collections.ArrayList;

                        [Bindable]
                        private var _years:ArrayList = new ArrayList();
                               
                        private function setUp() : void{
                               
                                        _years.source = ["2010" , "2009" , "2008" ];
                                       
                                        output.text =   "       yearTabBar.width = " + yearTabBar.width;                       
                        }
                               
                ]]>
                       
        </fx:Script>
       
        <s:TabBar
                                                       
                id="yearTabBar"
                dataProvider="{_years}"

        />
                       
        <mx:Text id="output"></mx:Text>  
       
</mx:Application>

When you publish you will see the Flex 4 Spark TabBar.


Spark Component TabBar


Frustratingly the output text will tell you that :

yearTabBar.width = 0

The reason is of course that we need to wait 1 frame for the Flash Player to get through the render part of it's cycle. During this part the component is be measured and its width recorded.

There are many situations where this crops up and many ways of dealing with it. The best approach is to architect your application differently so it does not fall victim to this. Your Views should go through separate Draw and Layout phases and this problem will be avoided. Like using Chunker, which I linked to above, this is not always possible or desirable. It's not going to help your preloader for example.

The easiest way is to set up an Event Handler to listen for Event.ENTER_FRAME and then to retrieve the width. This is of course quite easy to do but on a recent project it was cropping up a bit and I was looking for an straight forward way achieve this and so I create the FrameBuffer utility.

If you haven't done so already make the FrameBuffer code available to your project.

Step 1. Create a folder called com inside your src folder.
Step 2. Create a garethshapiro folder inside your com folder.
Step 3. Add the utilities folder from the download and everything in it to the garethshapiro folder.

Change the code you typed above to include the lines that have //2 at the end below

<fx:Script>
       
                <![CDATA[
                       
                        import mx.collections.ArrayList;
                        import com.garethshapiro.utilities.framebuffer.FrameBuffer;                 // 2
                               
                        [Bindable]
                        private var _years:ArrayList = new ArrayList();
                               
                        // Create the TabBar
                        private function setUp() : void{
                               
                                _years.source = ["2010" , "2009" , "2008" ];
                                       
                                output.text =   "       yearTabBar.width = " + yearTabBar.width;
       
                                var __frameBuffer : FrameBuffer = new FrameBuffer();                // 2
                                       
                                __frameBuffer.buffer(   measureTabBar   );                                 // 2                                
       
                        }                                                                                                       // 2
                               
                               
                        private function measureTabBar() : void {                                           // 2
                               
                                output.text =   "       yearTabBar.width = " + yearTabBar.width;      // 2
                                       
                        }                                                                                                        // 2

                ]]>
                       
        </fx:Script>

This time the output text will tell you :

yearTabBar.width = 211

A result. Happy face.

By default the FrameBuffer will wait 1 frame. If you want it to wait longer then you can supply a second argument a Number which is the number of frames to wait.

__frameBuffer.buffer(   measureTabBar   , 5 );


It is also very likely that you would need to supply arguments to the method that is to be called and this is possible through another optional parameter. The arguments to be supplied are wrapped up in an Array.

__frameBuffer.buffer(   measureTabBar   , 5 , ["Trace Message" , true ]);

Preloading

To get this to help you in preloading simply divide your preloading tasks into pieces and at the end of each piece use the FrameBuffer to wait one frame before moving on to the next piece. If you have a large amount of data then instead of having one for loop handle it all use some variables to keep track of how far you are in the data and only process a small amount each time, wait 1 frame, and carry on.

Context

This code is still dependant on the frame rate of the Flash Player. If you give the player too much to do in one frame everything in your application, including the FrameBuffer is going to wait until that code is finished.

The FrameBuffer is the easiest way but not the most efficient way of solving this problem. If you are writing code that is sensitive to performance then there are better ways of achieving results, two of which I have mentioned in this article. We are adding a type of pause into our program. Expecting better performance this way is the same as expecting more flavour from food by adding water.

That aside quite often user feedback is more important than performance, especially when the difference is milliseconds. This is not an article aimed at C++ programmers writing financial trading software after all.

Hope this helps.]]> Developer http://www.garethshapiro.com/index.php?itemid=44 Thu, 3 Feb 2011 10:05:08 +0000 Flash Actionscript 3 : ViewBuffer http://www.garethshapiro.com/index.php?itemid=21 At the end of 2008 I worked on a Flash project for The Economist called 'The World in 2009'. There was a graphic designer who was responsible for producing a world map vector and I wired it all up.

As you can imagine this artwork was intricate. Each country had a border and a background colour that were separate objects, some text fields for labels, and as you would expect also grouped into continents. The designer was using Adobe Illustrator to create the vector shapes and importing these into Flash and sending me the .fla

The process was not very smooth. There were changes to the artwork of course, Illustrator does not create MovieClips in the same way that you would manually and also when dealing with such an complex piece, old fashioned user error creeps in.The Solution, ViewBuffer

Download

This made life a little difficult for me while developing the Actionscript 3 code. The artwork was divided into regions so the files were easier to work with for the designer. I would load each one using a Loader() class and attach it to the Display List. I could reference the various objects, outlines / text fields / background colour clips, inside them like so :

Get a reference to a MovieClip inside a loaded SWF (The hard way)!!

It is easy to see why this is not a good situation to be in. One change to the structure and my paths would stop working. There were also further complications with instance names which caused the same problem. This is similar to how paths are constructed in Actionscript 2, with dot notation, so what is the best way of doing the same thing in Actionscript 3?

The bottom line is I do not want to be hamstrung by changes either by the Art Director or the Graphic Designer on the project. Changes are always going to happen and I looked to find a solution that simply accommodated them. One of the greatest things about AS3 is the Display List structure. The way that Display Objects are children of DisplayObjectContainers means that we can automatically examine this structure, or part of it, and record each of the items in an Array.

The ViewBuffer takes care of the path and presents the items to us in a straight forward list.

I will assume you know how to import packages into your AS3 projects so won't go into that in detail. Obviously you need this line at the top of the code :

Make sure you have access to the Class

Once you have access to the ViewBuffer you need to make an instance of one :

Create a new ViewBuffer

Let's say that once again you have a Loader called europe_clip_loader and you have added to the the display list, your next step would be to to inspect it :

<br /> Inspect the top element of the Display List that we are interested in

In the above line of code the parameter is compulsory and it has to be a DisplayObjectContainer. The reason I have called the DisplayObjectContainer you are inspecting a ViewComponent is that I am a massive fan of PureMVC and this is what they are called in that framework. It seems to make sense because in Flex you would divide Views up into separate MXML files and they may not be on the Display List when you inspect them for the ViewBuffer. Once you have inspected your ViewComponent you then use the instance name of the items in the ViewBuffer to get reference to them.

Get a reference to a MovieClip inside a loaded SWF (The easy way)!!

If this MovieClip gets moved around then no problem your code will still work. If the instance name gets removed or changed then some more work is needed. Perhaps the person creating the .fla file names the MovieClip incorrectly and calls it 'country_russia' (without the _mc) on the end.

Taking a Look

What you would do is first look at the buffer list to see the instance names of the items on there. This is done like so :

Output the ViewBuffer to the Output panel

The first parameter of the showBufferList method is the function you want to use to display. Here we are using the built in trace() method. Do not put the brackets on, just the name of the function, just like an event handler. The second parameter is optional and is a String. This is the property of the item that you would like displayed. The most useful is “name” but you may want to use “alpha” , “x” or “y” to tell you more details. If you use one of the other properties then the name is also outputted to give you better results.

I use a great debugging tool for Flash and Flex developing called Thunderbolt. This bit of code will output to Firebug, the web developer plug in for Firefox. If you are using this technique you would show the details of the buffer list like so :

<br /> Output the ViewBuffer to Firebug

Great but you may run into problems if after you have made up your ViewBuffer you remove or add an item and then try to reference it using getBufferListItemByName().

Adding and Removing Items

You can keep the ViewBuffer in synch by using addViewBufferItem() and removeViewBufferItem().

These both work in exactly the same way :

Add a new item

This will add item as a child of item_parent to both the Display List and the View Buffer. Similarly with removing items :

Remove an item

This will remove item from both the Display List and the View Buffer.

In both these examples item_parent needs to be a DisplayObjectContainer and item a DisplayObject.

Advanced Techniques

This is quite a straight forward piece of code so there is only one Advanced Technique. If you would like to exclude certain data types from the ViewBuffer you can specify these when you inspect the ViewComponent. The second parameter of the ViewBuffer is an Array of Data Types to be excluded.

Exclude StaticText and Shape Data Types from the ViewBuffer

The reason for this is perhaps you are not interested in administering static items and you are trying make sure your swf performs as quickly as possible. You may also be using a framework such as PureMVC where you have a different class for each View and you do not want global access to the items in other Views across all of the ViewBuffers in your application.

I am sure this code can be improved, I have deliberately kept it from being too complicated. If you do use it, or better yet, improve it please let me know and I'll incorporate the improvements for everyone.

Download]]> Developer http://www.garethshapiro.com/index.php?itemid=21 Tue, 28 Apr 2009 11:56:42 +0000 Search Engine Optimisation (SEO) Blog Plug In http://www.garethshapiro.com/index.php?itemid=20 I have been using Google's excellent free Webmaster Tools to make sure that this blog is in good shape as far as Search Engine Optimisation (SEO) is concerned. One of the things I needed to improve were the description meta tags on each page but I could not find a plug in that would help me achieve this. So I wrote one myself and it is free for anyone who uses the Nucleus blogging system to use.Install

1. Download the plug in from here.

2. Unzip and you should end up with a file called NP_SimpleSEO.php

3. Upload this file into your plug in folder using an FTP program. Your plug in folder can be found at : yoursite/nucleus/plugins/

4. Download the head.inc file that your template is using. This can be found at : yoursite/skins/~skin name~/head.inc

5. Open this file up using an editor. If you don't have one don't use Word, rather use Notepad on a PC or TextEdit on a Mac.

Remove this line :

<meta name="description" content=" <%blogsetting(desc)%>" />

Insert this line in it's place :

<%SimpleSEO()%>

6. Upload head.inc back into the same place.

7. Log in to the admin area of your Nucleus blog and click on Plugins which is under the Management section. At the bottom of the page you should now be able to choose SimpleSEO from the drop down menu at the bottom. Do this and click the 'Install Plugin' button.

Done!

Use

When you add or edit an item you will now have three new fields to fill in on the page under the heading Simple SEO. Simply fill these in as you wish. If you are using a robots.txt file then simply leave this field blank and no meta tags for robots will appear. If you do not supply a description then the default one for the blog, which is found on the left hand menu under Settings will be used.]]> Developer http://www.garethshapiro.com/index.php?itemid=20 Wed, 1 Apr 2009 16:44:48 +0000