Handle Null Dates from C# to SQL

Although this has been dealt with hundreds of times, this post is more of a "note to self" so I don't have to go hunting every time I need to handle optional dates from a data access layer into sql. Figured you might find it useful too.

// public getter/setters
public DateTime? OptDate { set; get; }

// for inserts
string sql = "INSERT INTO MyTable (..., OptDate) VALUES (..., @OptDate)";
SqlParameter[] parameters = new SqlParameter[] { 
  new SqlParameter("@OptDate", (object)DBNull.Value)
};

// and for updates
string sql = "UPDATE MyTable SET (..., OptDate = @OptDate)";
SqlParameter[] parameters = new SqlParameter[] { 
  new SqlParameter("@OptDate", 
    (OptDate.HasValue ? OptDate : (object)DBNull.Value))
};

Works well on Guid's too.

Simple Gesture-Like Kinetic Scroller in Flex 4

KineticScroller

In learning the new features in Flex 4, I ported a kinetic scroll component from Flex 3 that adds a decaying motion to view ports when you apply a 'swipe' motion with the mouse or your finger, for touch screens.

I created a swc file that you can drop into the lib folder of a project. Then, simply create an instance of kineticScroller and assign the allowable directions (vertical, horizontal or both), and set the decay speed, to a group box contained within a skinnableContainer or whatever, like:

var ks:KineticScroller = new KineticScroller(myGroup, KineticScroller.BOTH, 7);

I'm eager to start in on the new gesturing interfaces in Flex, but this project has really been more of a learning tool for me, and anyway I'll need to maintain some backward compatibility if and when I port some of my existing touch panels.

View the example and download the swc here. Includes a quick ASDoc, but just look at the example code to see it in action.

Using Flex Framework Assets

Glen Whitbeck posted a nice way to re-use Flex assets on gorillalogic that I need to remember.

There may be times when you want to use an asset/graphic that exactly matches an asset/graphic used by the Flex framework. For example, if you’re already using the Tree component and need to mimic the opening and closing of folders, you may want to use the same icons that the tree uses. It’s really very simple to do this.

The Flex framework stores these types of assets in Assets.swf. To find out what assets are available in Assets.swf, you can peruse the “default.css” file provided in the sdk ([path-to-your-sdk]/frameworks/projects/framework/default.css).

For example, the Tree component has this entry in default.css:

/*
//------------------------------
//  Tree
//------------------------------
*/

Tree
{
  defaultLeafIcon: Embed(source="Assets.swf",symbol="TreeNodeIcon");
  disclosureClosedIcon: Embed(source="Assets.swf",symbol="TreeDisclosureClosed");
  disclosureOpenIcon: Embed(source="Assets.swf",symbol="TreeDisclosureOpen");
  folderClosedIcon: Embed(source="Assets.swf",symbol="TreeFolderClosed");
  folderOpenIcon: Embed(source="Assets.swf",symbol="TreeFolderOpen");
  paddingLeft: 2;
  paddingRight: 0;
  verticalAlign: "middle";
}

There are five assets here that we can use (TreeNodeIcon, TreeDisclosureClosed, TreeDisclosureOpen, TreeFolderClosed, TreeFolderOpen).

One way that we might use them in our application is to embed them into a Class object and then use that as the source property for an Image object. For example, if you wanted to use the little triangle that appears next to a closed folder in the Tree component, you could do the following:

Declare this in your section:

[Embed(source="Assets.swf", symbol="TreeDisclosureClosed")]
private const myClosedIcon:Class;

Then, use this in your MXML code:

<mx:image source="{myClosedIcon}" />

...lather, rinse, repeat.

Preview of the Edge Prototype Tool for HTML5

Adobe Fellow Mark Anders provides a sneak peek of a tool codenamed “Edge,” a prototype of a tool for creating animation and transitions using the capabilities of HTML5. Even if the flash-is-dead camp are right, it looks like Adobe will still be standing.

How Does One Startup Defeat Another?

Interesting article by Chris Cameron over at ReadWriteWeb.

"There is a lot of competition out there in startup land, and often times similar companies launch around the same time and are pitted against one another in head-to-head competition. This was the case in 2007 when personal finance startup Mint launched less than a year after competitor Wesabe. Over time, it would be Mint that would win over the hearts and minds of the Web, leading to a hefty acquisition by Intuit, and the shuttering of Wesabe. So what was it that helped Mint emerge victorious?"

Read How Does One Startup Defeat Another?

Cisco comes out of the closet. The server closet that is.

The new Android-based Cius from Cisco is the first of its kind mobile collaboration business tablet can drive productivity for users in the office or on the go. Check the video and specs. Cisco is marketing it as an 'ultra-portable, mobile collaboration business tablet that offers access to essential business applications and technologies.'

The price point is expected to be less than $1,000 which is a bit high for the consumer market, and according to various reports from Cisco Live, Chairman, President and CEO John Chambers said it isn't about units sold, but getting more people to use video and getting more people to collaboration. If this doesn't succeed, he'll do something else.

'Make video the new voice' is the phrase used at this week's Cisco Live conference in Las Vegas.

Though not going head-to-head with Apple's iPad may be a good strategic move, I would personally like to see it become a serious contender in the consumer space. Think of it; a strong device maker, the right OS to extend, and good timing. Cisco may not be pushing it, but maybe we as developers should push an eco-system to extend it's reach into the consumer market with Cius droid stores, Cius browser apps, maps, etc.)

So, go ahead and corner the business market first, then, if there's enough momentum maybe they'll want to come out with a $300 to $400 personal version and an inexpensive home phone / networked docking unit. After all, I already have a Cisco router in my closet at home. Bet a lot of you do too.

Beautiful .Net Form Validation

Bet you never thought you'd see those words together, but that's what I've done with the following example of an entry form, albeit just one field for simplicity, in .Net:

<style type="text/css">
.field {
    position:relative; 
    width:600px;
    padding-bottom: 20px;
}
.error {
    position:absolute; 
    top:18px; 
    right:0px;
    z-index:1;
}
.errorTip {
    background: url(images/errTip.png) no-repeat;
    width: 234px;
    height: 40px;
    color: white;
    padding: 6px 0 0 25px;
    text-align: left;
    font-size: 15px;
}
</style>

<form ID="Form1" runat="server">
<div class="field">
    <label><span>*</span>Company Name:</label>
    <asp:TextBox ID="txtCompany" runat="server" 
     style="width:390px;" MaxLength="150" />
     <div class="error" style="left:400px">
         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
           ControlToValidate="txtCompany" ValidationGroup="Register" 
           SetFocusOnError="true" runat="server">
             <div class="errorTip">Enter your company name</div>
         </asp:RequiredFieldValidator>
     </div>
 </div>
 </form>

The "errorTip" div has a background image like (mine is a bit prettier than this):

and is displayed in the RequiredFieldValidator with the appropriate error message positioned on top of it.

The "error" div positions the validator to the right edge of the input box, and the outer "field" div helps set up the position and width of the whole thing.

I may put a real example up, but for now; repeat as needed for each field on the form, and bake into your next website.

Adobe CS3 "License Stopped Working..."

Finally, a possible solution beyond the Adobe KB's that tell you to futz with the FlexNet licensing files. Not that I didn't spend a day and a half trying. Anyway:

Solution 7: Remove the SQLite journaling file.

The journaling file will only exist under specific circumstances where a client is accessing the database file with certain options enabled. If the file does not exist please continue to the next solution.

* On Mac
* On Windows

On Mac

1. Using Finder, navigate to /Library/Application Support/Adobe/Adobe PCD/cache.
2. If present, delete cache.db-journal.
3. Launch Adobe Acrobat 9 or a Adobe Creative Suite 4 product.

On Windows

1. Using Explorer, navigate to \Program Files\Common Files\Adobe\Adobe PCD\cache.
2. If present, delete cache.db-journal.
3. Launch Adobe Acrobat 9 or a Adobe Creative Suite 4 product.

Flex native drag-n-drop an image from external applications

Adobe AIR provides some nice tools for interacting with the desktop; local database, filesystem, clipboard and native drag and drop. I have been working on a project which requires the ability to drag images from any source and drop them into a container. Should be a simple task. All of the examples like Christophe Coenraets SalesBuilder on Air and the sample apps from Adobe sure make it look easy enough, but none of them explore what I needed to do; they all drag items out of the container, but not in.

Now given AIR is still a beta release, I hope what I present below will not be needed in the future because this took a while to figure out. Maybe I missed something, so if anyone points out an easier way to do this, I'm all ears.

It seemed the obvious thing to do is something along the lines of:

var data:BitmapData =  e.transferable.dataForFormat(TransferableFormats.BITMAP_FORMAT) as BitmapData;
myCanvas.addChild(data.content);

Burn! The bitmapData object appears to have data; it has height, width and rectangle properties, the size value indicates there's data in there, but when attempting to add the image to myCanvas, addChild reports an error of 'child must be non null'. I just couldn't reach in and get at the bits.

This led me down a rosy path of trying just about everything I could think to get that pretty picture I wanted to drag in. I ended up with the following. It basically serializes the transfer object's data to file, then I simply pick it back up as an image (note there are no format checks or validation in this example... study purposes only).

Note that you will need the PNGEncoder class, adopted by Adobe from Tinic Uro. These are working versions for Flex 2 and 3.

JPGEncoder.as (text)
PNGEnc (text)

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()" layout="absolute">

<mx:Script>
<![CDATA[
import flash.filesystem.*;
import flash.geom.Matrix;
import flash.display.IBitmapDrawable;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.desktop.*;
import flash.events.NativeDragEvent;
import mx.controls.Image;

public function init():void {
myCanvas.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, nativeDragEnter);
myCanvas.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, nativeDragDrop);
}

public function nativeDragEnter(e:NativeDragEvent):void {
if (DragManager.dragInitiator == myCanvas) return; // If your dragging over yourself, ignore
DragManager.acceptDragDrop(myCanvas);
}

public function nativeDragDrop(e:NativeDragEvent):void {
var data:BitmapData = e.transferable.dataForFormat(TransferableFormats.BITMAP_FORMAT) as BitmapData;
var img:Image = encodeImage(data);
myCanvas.addChild(img);
}

private function encodeImage(data:BitmapData):Image {
// write transfer object's data to file
var stream:FileStream = new FileStream();
var matrix:Matrix = new Matrix();
matrix.translate( 0 - ( data.rect.x + 1 ), 0 - ( data.rect.y + 1 ) );  
data.draw( data, matrix );

var png:* = null;
png = PNGEncoder.encode(data);

var file:File = File.applicationResourceDirectory.resolve( "tmp.png" );
stream.open( file, FileMode.WRITE );
stream.writeBytes( png, 0, 0 );
stream.close();

// now we can load the image back in
var img:Image = new Image();
img.load(file.nativePath);
return img;
}


]]>
</mx:Script>

<mx:Canvas id="myCanvas" width"400" height="300" backgroundColor="#FFFFFF">
</mx:Canvas>

</mx:WindowedApplication>

Now, with the added call in the nativeDragDrop() function, we have what we need:

var data:BitmapData = e.transferable.dataForFormat(TransferableFormats.BITMAP_FORMAT) as BitmapData;
var img:Image = encodeImage(data);
myCanvas.addChild(img);

Simple? Not exactly. Obvious? Certainly not! But, it shows that Flex can do quite a lot, with a little elbow grease. I am looking forward to the next AIR release, which should fix a number of other bugs and missives that will make our apps really fly.