www.steamed-design.com

MonoTouch - Image View in Interface Builder

2009-11-14T09:38:00.007+13:00

I have been playing with MonoTouch recently in an attempt to make a iPhone app. I was playing quite happily there just one problem. I couldn't work out how to set the image for the "Image View" in Interface Builder I searched the internet for a few hours and still couldn't find a thing. So it was time to start randomly clicking and compiling until it worked.

Here is what I did....

Create a new iPhone Solution in MonoDevelop.
Drag the image you want to use in to the Solution Explorer.
Click Copy on the dialog box.
Right click the image in the solution and select "Properties", the Properties panel should show up.
Change the "Build Action" to "Content".
Double Click MainWindow.xib in the "Solution Explorer" and Interface builder should open up.
Click "Tools" > "Library", the library window will pop open.
Drag and "Image View" (under "Library" > "Cocoa Touch" > "Data Views") to the "Window".
Click on the Image View, then click "Tools" > "Attribute Inspector".
Type the name of the image in the "Image" field. The image view will be replaced with a question mark icon
Close interface builder.
In MonoDevelop Click "Run" > "Run".
Wait for the iPhone Simulartor to start and enjoy the results.

Error message done right

2009-11-13T11:04:00.005+13:00

Free Mac Apps Go get yours now!

2009-11-08T08:32:00.010+13:00

MacHeist are at it again and are giving away free apps one of which I used to to grab the image for this post.

If you want the pack just jump on over to MacHeist sign up and then get to downloading. You have to be quick tho because the deal ends in four days from today(Sunday 8 November 2009).

Single Quotes in TSQL

2009-10-22T12:42:00.006+13:00

Recently I had a to format some data, originally the formatting was done using the MVC.NET page but there was one for small problem it took over five minutes to return 2,000 records which is just a little bit to long for my liking.

We only had a day to fix this problem so it was time for a dirty yet brilliant hack. I created a table variable and for the formatted data added the data to it and returned the date all in one stored procedure, there was one problem tho I needed to generate T-SQL and run it using EXECUTE (I know its not the best way to do things). I was working away at this and then a problem popped up there is no way to escape single quotes that I could work out in T-SQL.

But with a little trickery.....

DECLARE @singleQuote CHAR(1);
SET @singleQuote = CHAR(39);

Problem Solved!

Flex - Button label truncation problem

2009-09-24T16:27:00.008+12:00

I recently had trouble with Flex truncating the label on some bu...

It was a particularly aggravating affair, playing with the padding and the width which had no apparent effect. After hours of searching the net and finding nary a shred I discovered that there was a simple fix.

Simply changing the label placement property of the button to 'bottom' had the desired effect rendering the label correctly.

Ahhhhh, much better.

Making the Eclipse XML editor Useful

2009-09-01T11:58:00.003+12:00

I use Eclipse for editing pretty much everything I on my Mac with its great free plugins who wouldn't want to use it there is only one small problem. That problem is the built in XML editor for Eclipse sucks, it tree based meaning you can't get the the underlying code without using the default Text Editor.

I decided that there must be a free plugin you can use so I Googled "free eclipse xml editor" and found several articles about an editor called XmlBuddy but there was a problem, the domain www.xmlbuddy.com has been sold so you are not going to be able to download it from there crap!

So yet again I turn to my friend google and at last I have found the answer. I downloaded the plugin from cnet unzipped into my Eclipse plugins directory, now I finally have a decent XML editor.

Custom Events in Action Script

2009-08-17T17:13:00.002+12:00

You have an custom actionscript 3.0 class and it does all sorts of great thing, but now you want other people to be able to use it. There are many ways to do this but for this example I am going to create a custom event. Lets get started.

First add the following imports to your class.

import flash.events.Event;
import flash.events.EventDispatcher;

Then add the metadata about the custom event, the event in this example is called customEvent.

[Event(name="customEvent", type="flash.events.Event")]

Next copy and paste the following code anywhere into your class this is used to add the functions need to create event listeners and dispatch events.

private var disp:EventDispatcher;
public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, 
 priority:int=0, useWeakReference:Boolean=false):void {
   if (disp == null) disp = new EventDispatcher();
   disp.addEventListener(type, listener, useCapture, priority, useWeakReference);
}
    
public function removeEventListener(type:String, listener:Function, useCapture:Boolean=false):void {
 if (disp == null) return;
   disp.removeEventListener(type, listener, useCapture);
}
    
public function dispatchEvent(event:Event):void {
 if (disp == null) return;
   disp.dispatchEvent(event);
}

Next you need to add the code to fire your custom event to do this add the following code to the function you want to fire the event.

var deviceDataEventObject:DeviceDataEvent = new Event("customEvent");
dispatchEvent(deviceDataEventObject);

OK you custom class can now fire your custom event all you need to do is set up a event listener in the calling class, use this code.

customClass.addEventListener("customEvent", yourFunction);
private function yourFunction(event:Event):void{
   //Do Something here
}

Thats it you are done simple huh?

Free Flex Visual Studio Plug-in

2009-07-30T11:02:00.014+12:00

There is a plug-in for visual studio it is not as good as the adobe IDE but is free will do the job, for more info on the plug-in go to their website.

First you need to download all the required files listed below:

Flash Develop - "Release notes and download" link, then towards the bottom of the page redirected page.
Java SE Runtime Environment (JRE) - download button under the table heading (Java SE Runtime Environment (JRE).
Flex SDK - "Free Adobe Flex 3 SDK" link.
Tofino Visual Studio Plugin - "Download Tofino [version] without Flex SDK" link.

Now you have a directory full of downloads it is time to start installing(please note [version] is a place holder for the current version of the file you downloaded):

Extract the Flex SDK (flex_sdk_3.zip) to "C:\Flex\3\".
Install the visual studio plugin (EnsembleTofinoWithoutFlexSDK.[version].msi) by double clicking it.
Open Visual studio
Open the Options Windows
Check the "Show all settings" checkbox if its there
Go to Projects > Flex Projects
Set the Flex 3 SDK location to "C:\FlexSDK\3\"

The Visual Studio Options Screen.

For more info on how to use the plug-in there is an article at developer fusion.

Controlling Flex With Javascript

2009-07-29T23:46:00.008+12:00

For work I had to do a proof of concept to show that I could control flex using javascript and here is is with the source, if you want to do it follow this article.

I did have one problem tho and that was i was using Flash Develop and there is no "Create Ajax Bridge." menu option, luckily this can be solved pretty simply just by copying the the files from you sdk directory to you project they are located in [sdk]\frameworks\javascript\fabridge\src\bridge\.

The Eclipse IDE and Google App Engine

2009-07-25T14:18:00.008+12:00

App Engine is Googles offering in the realm of cloud computing. The free service that Google offers should be more than enough to host small websites. If an application does need extra resources, there is the option to enable flexible billing which alows a web application to scale and only pay for resources used. see Googles Billing Docs

Orginally the App Engine only supported the Python scripting language, though the Google team have recently anounced Java support.

Google have released an SDK and set of plugins for the Eclipse IDE, together they provide an integrated developement and deployment environment.

How to set up Eclipse/App Engine

Software needed:

Java SE Development Kit(JDK)

The Eclipse IDE

Installation:

Install the Java SE DEvelopment Kit

Unpack the Eclipse IDE

Follow these steps to install the SDK and App engine plugin through the Eclipse software update service. You will likely need to reboot.

Further Information:
App Engine Docs
Sample applications

Free Flex IDE

2009-07-22T17:57:00.010+12:00

Ok so flex is great but there is one small problem and thats the US$ 299 for the IDE from adobe. Yes there is a free trial available so you can at least spend 60 days trying the IDE but what happens after your 60 days are up and you still want to use flex but don't have US $299 laying around to buy yourself the full version. With Flash Develop and a two little plugins you can.

Installing
First you need to download all the required files listed below:

Flash Develop - "Release notes and download" link, then towards the bottom of the page redirected page.

Java SE Runtime Environment (JRE) - download button under the table heading (Java SE Runtime Environment (JRE).

Flex SDK - "Free Adobe Flex 3 SDK" link.

Design View plugin - "Download Plugin" link.

Design View Air Package - "designview.air" link.

Debugger Plugin - "FlexDbg.zip" link.

Now you have a directory full of downloads it is time to start installing(please note [version] is a place holder for the current version of the file you downloaded):

Run the installer(FlashDevelop[version].exe) for Flash Develop and and leave everything as the defaults.
Install the Java SE Runtime Environment (jre-[number]-windows-i586.exe).

Extract the Flex SDK(flex_sdk_3.zip) to "C:\Flex\3\".

Install the Design View AIR app(designview.air) by double clicking it.

Open the Design View plugin(FlexDesignView-[version].zip) and copy the contents of "Data" to "C:\Program Files\FlashDevelop\Data\" and the contents of "Plugins" to "C:\Program Files\FlashDevelop\Plugins\".

Extract the Debugger Plugin(FlexDbg.zip) to "C:\Program Files\FlashDevelop\Plugins\"".

Now Everything is in installed all you need to do is set up flex in Flash Develop:

Open the Flash Develop(Start > Applications > Flex Develop > Flex Develop).

Once the application is opened press F10 or go to "Tool > Program Settings" to open the Program Settings.

Click on AS3Content button (1. in the image below).

Then set the "Flex SDK Location" (2. in the image below) to "C:\Flex\3\".

Click Close, and enjoy Flash Develop.

Program Settings

Update: as requested here are some screen shots with FlashDevelop in both Source and Design Views.

Solved It!

2009-07-20T13:47:00.009+12:00

I have been having A LOT of trouble trying to get my Papervision3D to run a tween just after loading. I spent a good part of the weekend trying to get it to work with no avail. Today I decided that it was time to use a process of elimination with event listeners to work it out, luckly for me it was the third event FlashDevelop's drop down list.

Here is the code "view" is a BasicView and "zoomCamera" is the function called after loading view:

view.addEventListener(Event.ADDED_TO_STAGE, zoomCamera);

Sexy touching machines

2009-07-18T23:44:00.001+12:00

Adding Interactivity to Papervision 3D

2009-07-17T08:16:00.002+12:00

There are two types of Interactivity in this demo the first is controlling the camera and the second the 3D Animation i.e. making the panels spin when you click them.

Controlling the Camera
Controlling the camera is pretty simple in this example all you need to do is track the mouse movement and translate it into camera movement.

To do this simply add the following code into your Event.ENTER_FRAME listener, where view is the Papervision View you are using.

view.camera.x += (((stage.mouseX - (stage.stageWidth * .5)) * 2) - view.camera.x ) * .02;
view.camera.y += (((stage.mouseY - (stage.stageHeight * .5)) * 2) - view.camera.y ) * .02;

Controlling 3D Animation
The easiest what to control 3D animation is to use tweener. Basically Tweener helps you move things around on the screen using only code, instead of the timeline. Tweener has no idea about Papervision 3D and in fact it only changes a variable over time which means that you can change any variable as long as it is a number.

To do this you first need to set the view to interactive, then add event listeners to the 3D objects.

var controlPlane:Plane = new Plane();
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout);

Then create functions and use tweener to manipulate the 3D objects

private function plane1Rollover (myEvent:InteractiveScene3DEvent):void {     
    //moves the panel back on roll over
    Tweener.addTween(myEvent.currentTarget, { z:120, time:.5, transition:"easeInOutQuint" } );
}

private function plane1Rollout (myEvent:InteractiveScene3DEvent):void {
    //moves the panel froward to its original position on roll out.
    Tweener.addTween(myEvent.currentTarget, { z:100, time:.5, transition:"easeInOutQuint" } );
}
        
private function plane1Clicked (myEvent:InteractiveScene3DEvent):void {
    //Resets the panels X rotation
    myEvent.currentTarget.rotationX = 0;
    //Flips the panel 360
    Tweener.addTween(myEvent.currentTarget, { rotationX:360, time:1, transition:"easeInOutQuint" } );
}

Follow this link to view a demo and as usual to view the full source right click the demo.

Silverlight and h.264 video

2009-07-16T23:30:00.006+12:00

>>Edit - updated demo

This here is a test of the Silverlight mediaElement. A visual brush is used to create the reflection, here is a demo.

Subverting Visual Studio

2009-07-16T13:25:00.003+12:00

I have recently come across ankhsvn, a free plugin that allows you to use the Subversion version control system.

This will be useful for further investigation into the Google .Net api.

other useful links ->

.Net Gdata online documentation

Plane Projection in Silverlight 3

2009-07-15T15:19:00.005+12:00

The latest Silverlight 3 release has included Plane Projection transformations that allow 2 dimensional controls to be projected in 3 dimensions.

An excellent article to read to get a feel on how to use the transformations to create psuedo 3d effects ->

http://blogs.msdn.com/jaimer/archive/2009/06/03/silverlight3-planeprojection-primer.aspx

A quick example emulating this flash template using the Silverlight 3 PlaneProjection can be found here

Embedding Flex Components

2009-07-14T22:58:00.016+12:00

Ok, so before I start I have to say that the control is not actually embedded, all I managed it to do is get control as an image and apply it as a material to the plane. Click the image to the right to see the demo you can view the source by right clicking the demo.

I am working on getting the material to update when the control updates but that may be a while before it is working perfectly, as this is all I need for the project template.

Reflection

2009-07-12T19:35:00.005+12:00

Ok step two was the reflection and now it is done, click on the image below too see the demo.

The source is available if you right click the demo

Using an Embedded Flex Image in Papervision3D

2009-07-09T17:36:00.006+12:00

One of the problems had setting up the demo in the previous post was using embedded flex images for materials in the Papervision 3D scene, here is the solution.

Create a variable for with the embedded image and the variable for the material.

[Embed(source="assets/earthmap.jpg")]
public var earthMap:Class;
private var moonMaterial:BitmapMaterial;

Create a new BitmapAsset variable cad cast the image class to it.

var earthAsset:BitmapAsset = new earthMap() as BitmapAsset;

Finally assign the new variable as a material.

earthMaterial = new BitmapMaterial(earthAsset.bitmapData);

Papervision3D

2009-07-08T21:19:00.003+12:00

Ok so I have started and the first thing I realised when I looked at the template is that it was doing stuff in 3D so I figured that I probably need to learn how to do that. The template was called Ultra biz papervision 3d flash I figured that Papervision3D is what was doing all the 3D heavy lifting it turns out I was right.

I downloaded the swc and tried to work it out, this is what I managed.

To view the source right click the movie and select view source.

Project Template

2009-07-07T16:35:00.005+12:00

A few weeks ago after spending ages trying to make a cross browser Javascript application and ending up with two lots of code one for IE 7 and one for the rest of the browsers, I decided that there must be a better way enter flex. I spent a week doing the flex in a week and then it was time to come up with an project to see how this flex thing really works.

This is where the contest I won came into play I won $100 of templates and got this template so I figured what better way to learn flex that to try and recreate it using flex instead of boring old flex so project template was born, I will update here as I work through it with all source code included.

Out in the Wild

2009-07-07T15:27:00.000+12:00

My pet project has just finshed its first test in the wild and from what I can tell things went great. To have a look at the website where you to can ask for information feel free to go to the ultimate iphone and iPod Touch Survey Software for Market Research tool, yeah I know its a long link but i do what I am told.

Excel Reader Writer (excel not required)

2009-07-06T15:22:00.010+12:00

Ok as promised here it is a very simple(1 days work) wrapper for reading and writing excel files using 2007 Office System Driver: Data Connectivity Component. Below is an example function that shows what the class library can do. Remember to include a reference to the library in you project.

public void CorichExcel()
{
    string file = "C:/excel.xls";

    string sheet = "";

    try
    {
        //Gets a liost of sheets from the excel file
        string[] sheets = Corich.Excel.ReaderWriter.GetSheets(file);
        sheet = sheets[0];
    }
    catch(Exception ex)
    {
        MessageBox.Show(ex.Message);
        return;
    }
    
    //Check to see if the sheet exist
    if (Corich.Excel.ReaderWriter.SheetExists(file, sheet))
    {

        //gets a list of colums from the first sheet in the excel file
        string[] columns = Corich.Excel.ReaderWriter.GetColumns(file, sheet);

        //Loads the data in the first excel sheet into a data table
        DataTable data = Corich.Excel.ReaderWriter.Read(file);

        //Writes the data from the first sheet to a new excel file, currently only writes to xlsb files
        Corich.Excel.ReaderWriter.Write("C:\new_file.xlsb", data);

        //Writes the data from the first sheet to a new excel file in the temp directory then opens it, currently only writes to xlsb files
        Corich.Excel.ReaderWriter.WriteToTemp("new_file.xlsb", data, true);
    }

}

You can download the .dll and the source here the code is under the GNU GPL licence it would be nice to point people to my site if you use it.

Excel Sheet Names using ODBC

2009-07-03T11:44:00.010+12:00

I recently needed to import data from excel into a c# application after doing some searching I found the 2007 Office System Driver: Data Connectivity Components there is a lot of good info on the net so I quickly got it up and running.

There was only one problem nowhere I looked could I find out how to get the sheet names. I stared putting various stuff into a data grid until I cam up with the code below.

string filename = "your filename";
string connectionString;
connectionString = "Driver={Microsoft Excel Driver (*.xls, *.xlsx, *.xlsm, *.xlsb)};dbq=" + filename + ";fil=excel 12.0;readonly=0;usercommitsync=Yes";

OdbcConnection myConnection = new OdbcConnection(connectionString);

myConnection.Open();
DataTable data = myConnection.GetSchema("Tables");
myConnection.Close();

List sheets = new List();
foreach (DataRow sheet in data.Rows)
{
    sheets.Add(sheet["TABLE_NAME"].ToString().Trim('\'').TrimEnd('$'));
}

P.S. I have built a whole static class library to read and write excel sheets I will post it here when I have some time to comment it.