Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

The Bistromathic Drive – a HHGG geek out flashback

The Bistromathic Drive is a starship propulsion system introduced in the The Hitchhiker’s Guide to the Galaxy novel Life, the Universe and Everything, the third book of the series.
The Bistromathic Drive is used in Slartibartfast’s craft Bistromath and works by exploiting the irrational mathematics that apply to numbers on a waiter’s bill pad and groups of people in restaurants.

The novel Life, the Universe and Everything describes bistromathics as follows:
“ Bistromathics itself is simply a revolutionary new way of understanding the behaviour of numbers. Just as Albert Einstein’s general relativity theory observed that space was not an absolute but depended on the observer’s movement in time, and that time was not an absolute, but depended on the observer’s movement in space, so it is now realized that numbers are not absolute, but depend on the observer’s movement in restaurants. ”

Further explanation of the theory behind bistromathics:
“ The first nonabsolute number is the number of people for whom the table is reserved. This will vary during the course of the first three telephone calls to the restaurant, and then bear no apparent relation to the number of people who actually turn up, or the number of people who subsequently join them after the show/match/party/gig, or to the number of people who leave when they see who else has shown up.

The second nonabsolute number is the given time of arrival, which is now known to be one of those most bizarre mathematical concepts, a recipriversexcluson, a number whose existence can only be defined as being anything other than itself. In other words, the given time of arrival is the one moment of time at which it is impossible that any member of the party will arrive. Recipriversexclusons now play a vital part in many branches of mathematics, including statistics and accountancy, and also form the basic equations used to engineer the Somebody Else’s Problem field.

The third and most mysterious piece of nonabsoluteness of all lies in the relationship between the number of items on the bill, the cost of each item, the number of people at the table and what they are each prepared to pay for. (The number of people who have actually brought any money is only a sub-phenomenon in this field.)

The bridge instruments of the Starship Bistromath are ensconced in fake wine bottles.
The central computational area is a fake Italian restaurant table with seating for twelve encased in a glass cage. The table is decked with a faded red and white check tablecloth with mathematically positioned cigarette burns. A group of robot customers sit round the table, attended by robot waiters.

The mathematics play themselves out in the complex interplay between continuously circulating keys, menus, watches, cheque books, credit cards, bill pads and scribblings on paper napkins.

Slartibartfast explains that “On a waiter’s bill pad, numbers dance. Reality and unreality collide on such a fundamental level that each becomes the other and anything is possible.”

Should the ship’s captain sit at the table, the mathematical functions speed up; the customers become more vociferous and wave at each other. Eventually, the equation balances, and the customers become polite and civil once more. The more heated the argument, the more complex the equation, and the farther the ship may travel.

Effectively, the ship takes advantage of the strange rules that only restaurants operate under by turning itself into a controlled, artificial restaurant. This allows a ship equipped with a bistromathic drive to accomplish feats quite outside the normal capabilities of spacecraft, such as travelling two thirds across the galactic disk in a matter of seconds. The drive is notably more controllable than the Infinite Improbability Drive. It is also said to “make the Heart of Gold seem like an electric pram.”

 

ASMock QuickStart

Mocking objects for tests is standard practice. Recently I had the chance to suport a jr. dev in using FlexUnit 4 and ASMock. Here are the errors she ran into while getting started.

1. ArgumentError: A proxy for com.client.product.models::MyModel has not been prepared yet

At the start of the class you will need the Mock metadata tag with a reference to the class MyModel
[Mock("com.models.MyModel")]
public class PreviewBookViewTest
{ …

2. ArgumentError: A proxy for com.client.product.models::MyModel has not been prepared yet

The [Before] metadata tag was in place

[Before]
public function setUp():void
{
_mockRepo = new MockRepository();
_myModel = _mockRepo.createDynamic(MyModel) as MyModel;
}

but the [RunWith] metadata tag was missing from the start of the class

[Mock("com.models.MyModel")]
[RunWith("asmock.integration.flexunit.ASMockClassRunner")]
public class PreviewViewTest
{ …

more posts at www.toddrothe.com/blog

 

Using UIImpersonator with FlexUnit 4

While testing Spark based custom components I discovered UIImpersonator in FlexUnit 4. Then I nearly strangled UIImpersonator. Here are the issues I ran into, my initial code, and how to resolve the issues.

Issues:
1. Error: Required skin part myRequiredSkinPart cannot be found.
2. Skin for FlexVisualTestEnvironment47.MyView38.MyViewSkin49.contentGroup.myStream._MyStreamSkin_MyRenderer1 cannot be found.

Initial Code:
[Before(async)]
public function setUp():void
{
_target = new MyView();
Async.proceedOnEvent( this, _target, FlexEvent.CREATION_COMPLETE );
UIImpersonator.addChild( _target );
}
[Test(async)]
public function getSetProp():void
{
var _prop:Prop = new Prop();
_target.prop = _prop;
assertThat( _target.prop, sameInstance( _prop ) );
}

Resolutions:
The first error I ran into was this :
1. Error: Required skin part myRequiredSkinPart cannot be found.

Issue : The power of UIImpersonator is that it instantiates your component in isolation, outside of the scope of your application. Therefore css based styles are NOT applied. In my case this meant that my component skin was not applied to my component. When testing using UIImpersonator you need to manually add the skin for your UIComponent.

Fix : Manually set the skinClass style on you component.
_targetSkin = new MyViewSkin();
_target.setStyle( “skinClass”, Class(MyViewSkin) );

The second error I hit was :
2. Error: Skin for FlexVisualTestEnvironment47.MyView38.MyViewSkin49.contentGroup.myStream._MyStreamSkin_MyRenderer1 cannot be found.

Issue : Same issue as before only now the skin that is missing is many components deep.

Fix : Don’t use IUImpersonator for complex composite custom components.

UIImpersonator ensures your test environment is completely separate from the FlexUnit application environment. While this can be useful at times it is often more trouble than it’s worth.

more posts at www.toddrothe.com/blog

 

ItemRendererFunction : Two Styles in One List

Using the ItemRendererFunction on a DataGroup or SkinnableDataContainer allows you to select the appropriate item renderer for different types of data on the fly.

Here is an example using one dataProvider to display two different types of data in two different styles in one list.

 

Download the project to see the full source.
See the same two item renderers near the top of the script tag that were mentioned in the previous post.
import com.toddrothe.renderers.ContactsItemRenderer; // TR: item renderer
import com.toddrothe.renderers.GroupsItemRenderer; // TR: item renderer

Note the objects in the array collection used as dataProviders for the DataGroup contain different ‘type’ values – contact and group.
[Bindable]
protected var mixedData:ArrayCollection = new ArrayCollection([{'type':'contact','id':64, 'name':'Josh Tynjala', 'image':'images/jt.png'},{'type':'group','id':0,'name':'My First Group','content':'various media'},{'type':'contact','id':140, 'name':'Peter C.', 'image':'images/pc.png'},{'type':'group','id':12,'name':'Another Group','content':'video'},{'type':'contact','id':64, 'name':'Brendan', 'image':'images/bl.png'}]);

Below that you will see the same item renderer function used in the previous post which changes the item renderer depending on the item.type value – contact and group..
protected function getItemRenderer(item:Object):IFactory // TR: item renderer func decides which item renderer to use
{
var myRendererClass:Class;
switch( item.type )
{
case "group":
myRendererClass = GroupsItemRenderer;
break;
case "contact":
myRendererClass = ContactsItemRenderer;
break;
}
return new ClassFactory( myRendererClass );
}

And finally the DataGroup with the itemRendererFunction and initial dataProvider value defined.
<s:DataGroup id="myDataGroup" itemRendererFunction="getItemRenderer"
dataProvider="{mixedData}" >

more posts at www.toddrothe.com/blog

 

ItemRendererFunction : One List, Two DataProviders

Using the ItemRendererFunction on a DataGroup or SkinnableDataContainer allows you to reuse said group, selecting the appropriate item renderer for different types of data.

Here is an ItemRendererFunction example using one list to display two separate data sets in two different styles.

 

Download the project to see the full source.
See the two item renderers near the top of the script tag.
import com.toddrothe.renderers.ContactsItemRenderer; // TR: item renderer
import com.toddrothe.renderers.GroupsItemRenderer; // TR: item renderer

Note the two array collections used as dataProviders for the DataGroup.
[Bindable]
protected var contactsData:ArrayCollection = new ArrayCollection([{'type':'contact','id':64, 'name':'Josh Tynjala', 'image':'images/jt.png'},{'type':'contact','id':140, 'name':'Peter C.', 'image':'images/pc.png'},{'type':'contact','id':64, 'name':'Brendan', 'image':'images/bl.png'}]);

[Bindable]
protected var groupsData:ArrayCollection = new ArrayCollection([{'type':'group','id':0,'name':'My First Group','content':'various media'},{'type':'group','id':12,'name':'Another Group','content':'video'},{'type':'group','id':42,'name':'Nature Group','content':'nature photos'}]);

Below that you will see the actual item renderer function which changes the item renderer depending on the item.type value.
protected function getItemRenderer(item:Object):IFactory // TR: item renderer func decides which item renderer to use
{
var myRendererClass:Class;
switch( item.type )
{
case "group":
myRendererClass = GroupsItemRenderer;
break;
case "contact":
myRendererClass = ContactsItemRenderer;
break;
}
return new ClassFactory( myRendererClass );
}

And finally the DataGroup with the itemRendererFunction and initial dataProvider value defined.
<s:DataGroup id="myDataGroup" itemRendererFunction="getItemRenderer"
dataProvider="{contactsData}" >

more posts at www.toddrothe.com/blog

 

AMFPHP Quick Start

AMFPHP is handy when creating a Flex app which interfaces with a php backend.
“AMFPHP allows thin client applications built in languages such as Flash, Flex, and AIR to communicate directly with PHP class objects on the server.” http://amfphp.sourceforge.net/
And here is a short guide to getting AMFPHP working with Flex without the Zend Framework.

1. Download and extract the latest AMFPHP.

2. Copy core dir, gateway.php, globals.php, and services dir from the extracted contents and paste them into your php app root. This guide assumes that you are running your php from a server such as Mamp/Xamp.

2.A. Visit gateway.php in your browser to ensure that everything is in place.

http://localhost:8888/MyFlexApp/gateway.php

3. Place your php class in the services dir that you pasted into your php app root. Here is my php class. ReturnString.php. Ensure that your php class contains only standard characters (bad = ReturnString.class.php). * If your project has php services defined and they are in a dir other than the ‘services’ dir, then modify the $servicePath var in the globals.php file.

4. In your actionscript you will need to create a remote object, populate some of its props and then add some listeners and call your php method.

protected var ro:RemoteObject = new RemoteObject();

init():void
{
ro.endpoint = ‘http://localhost:8888/MyFlexApp/gateway.php’;
ro.destination = ‘ReturnString’;
ro.source = ‘ReturnString’;

ro.addEventListener(ResultEvent.RESULT, returnStringHandler);
ro.addEventListener(FaultEvent.FAULT, returnStringFaultHandler);
ro.getString();
}

protected function returnStringHandler( event:ResultEvent ):void
{
trace(“returnStringHandler result : “+ event.result);
}

protected function returnStringFaultHandler( event:FaultEvent ):void
{
trace(“returnStringFaultHandler result : “+ event.result);
}

No real insights or brand new information contained in this post. Just a straight forward guide to implementing AMFPHP.

 

.apply() – Your Friend in Creating Dynamic Calls

A client asked me to create a layer in their SOA app which would allow them to do the following;
1. Log calls to a service with their analytics software
2. Measure the response time of a service
3. Track service call timeouts and repeat the call as needed

Creating a ServiceProxy seemed like a natural choice.

For those in a hurry – my big lesson was: when assembling a dynamic call and passing params you must use ‘.apply’.
Works: ‘service[serviceCall].apply( null, params );’
Broke: ‘service[serviceCall]( params );’

On with the progam…
The existing ‘service’ files make calls to backend services, via Proxy’s, and process the response received from the server. For example, LoginService contains a login( username, password ) function- – which passes the params as part of a call to FlickrProxy.login( username, password ) .
LoginService listens for a success/failure from FlickrProxy and processes the response accordingly.

Entere the ServiceProxy… who sits between the LoginService and the FlickrProxy.

LoginService.login(username, password) now calls ServiceProxy.makeCall( params ) which ultimately calls FlickrProxy.login(username, password). ServiceProxy.makeCall() is the perfect place to submit data to analytics and start timers immediately before or after making the call to FlickrProxy.
When a response is received from the FlickrProxy, the ServiceProxy stops timers and can submits more analytics data before/after passing the response back to LoginService.handleLogin().

In your LoginService you will now listen for events from ServiceProxy instead of FlickrProxy.

That’s the gist. Not rocket science, I know, but I had fun considering the architectural options and assembling the dynamic calls to service proxies.
Here is a hacked together (non-client specific) version of a ServiceProxy filled with comments.
If I have time I will put together a sample app using the ServiceProxy.

more posts at http://toddrothe.com

 

Flex 3 to Flex 4 Migration Chronicles: III

Error #1053: Illegal override of SolidFill in com.degrafa.paint.SolidFill.

Flex 3 code:
< degrafa:Surface verticalCenter="0" horizontalCenter="0">

< degrafa:fills>
< paint:SolidFill id="blue" color="#62ABCD"/>

< degrafa:strokes>
< paint:SolidStroke id="black" color="#000000" alpha="1" weight="3"/>

< degrafa:GeometryGroup>
< geometry:Circle fill="{blue}" stroke="{black}" radius="150"/>

Attempt 1: Get a Flex 4 compatible Degrafa swc from Degrafa.org.

Result 1: There isn’t one… yet. Greg Drove of the Degrafa dev team has said that a Flex 4 swc is coming, but no word as to when.

Attempt 2: Create a mx.graphics.SolidColor in AS3 to use in place of the com.degrafa.paint.SolidFill.

< fx:Script>
import mx.graphics.SolidColor;
var blue:SolidColor = new SolidColor( 0x62ABCD, 3);
]]>

Result 2: Fail. SolidColor and IGraphicsFill are not interchangeable. You get ‘Error #1053: Illegal override of SolidFill in com.degrafa.paint.SolidFill.’

Attempt 3: Recreate the entire Degrafa surface in using Spark.

< s:Graphic horizontalCenter="0" verticalCenter="0">
< s:Ellipse width="300" height="300">
< s:fill>
< s:SolidColor id="blueFxg" color="#62ABCD"/>

< s:stroke>
< s:SolidColorStroke color="#000000" weight="3"/>


Result 3: Success! This was the fail safe: the most work, guaranteed results, and kinda boring.

 

Flex 3 to Flex 4 Migration Chronicles: II

Error: Cannot resolve attribute ‘horizontalScrollPolicy’ for component type spark.components.BorderContainer.

Goal: Match the existing Flex 3 implementation (and design comps) which displays an image inside a scrollable container.

Flex 3 code:
< mx:Canvas width="400" height="325">
< mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
< /mx:Canvas>

Attempt 1: Add the image inside a Group and set the clipAndEnableScrolling=’true’
< s:Group width="400" height="325" clipAndEnableScrolling="true">
< mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
< /s:Group>

Resut 1: No love. The Image gets clipped but no scrollbars appear.

Attempt 2: Add a parent Scroller to the existing Group and remove clipAndEnableScrolling
< s:Scroller>
< s:Group width="400" height="325">
< mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
< /s:Group>
< /s:Scroller>

Result 2: Success! The Flex 4 separation of form from function, logic from layout, allows us to add scrolling functionality when we need it through the Scroller component/tag. In Flex 3 we were always setting horizontalScrollPolicy=’off’ and verticalScrollPolicy=’off’, 99 times out of 100 anyway. Well no more!
*note: Scroller automatically sets clipAndEnableScrolling to true for its children.

For more comprehensive coverage of Scroller check out the Scroller Funtional and Design Spec or Adobe’s Introduction to viewports and scrolling in Flex 4 by Hans Muller.

 

Flex 3 to Flex 4 Migration Chronicles: I

This is the first in a series of posts which chronicle the issues I ran into while migrating a client’s app from the Flex 3.5 SDK to the Flex 4.0 SDK

Error: “The style ‘borderThickness’ is only supported by type ‘mx.containers.Canvas’ with the theme(s) ‘halo’.”

Goal: Match the existing Flex 3 implementation (and design comps) which displays a container with a border stroke 4 px wide.

Flex 3 code :
< mx:Canvas width="100" height="100" borderStyle="solid" borderColor="0x000000" backgroundColor="0xFFFFFF" borderThickness="4"/>

Attempt 1: Tried adding compiler arg ‘-theme {FlexLibs}/flex_sdk_3.5/frameworks/themes/HaloClassic/haloclassic.swc’.

Result 1: This only created more errors : The style __________ is only supported by type ‘mx.containers.Canvas’ with the theme(s) ‘halo, spark’. Turns out that the ‘haloclassic’ theme from SDK 3.5 doesn’t qualify as ‘halo’ in this case.

Attempt 2: Tried adding compiling arg ‘-theme {FlexLibs}/flex_sdk_4.0/frameworks/themes/Halo/halo.swc’.

Result 2: Qualified success. The error is gone, but when a Spark component is added to the stage the same error appears only it references the new spark component and indicates the lack of ” the theme(s) ‘spark’. ”

Attempt 3: Changed the < mx:Canvas borderThickness="4"> into < s:BorderContainer borderWeight="4">

< s:BorderContainer width="100" height="100" borderStyle="solid" borderColor="0x000000" backgroundColor="0xFFFFFF" borderWeight="4"/>

Result 3: Success! No more error and the BorderContainer satisfies the design requirements of a container with a border stroke 4 px wide.

* The errors chronicled in this series can be recreated by copying working code from within Flex 3 Application tags
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
< strong>here
< /mx:Application>

and pasting it between Flex 4 Application tags
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
< strong>here
< /s:Application>