Best .NET AJAX… Hijax

November 10th, 2007

Have you ever wanted to eliminate the page refreshes when altering a pages properties in .NET? I have.

The way .NET allows you to access the DOM in your code and quickly change control’s properties, visibility, validate values, it is amazing, but the only issue is the dreaded page refresh! When i first heard about .NET extensions which could make these DOM changes quickly and easily with AJAX, using a method called Jijax, i was amazed! Another important thing is that the Hijax method will degrade gracefully. This is to me, is the basis of treating a HTML site more like a my beloved Flash (or a RIA). The ability to build custom controls (like a class, of movieclip in flash) and then have them talk to each other, writing everything in a single language (c#) and (without a page refresh), make update changes. Beautiful. It also saves writing your application twice (for degredation)

enter Anthem.NET

It is a stable and elegant implementation for .NET and works well in VWD Express and VWD 2005. Check out the Anthem Examples to get a good idea of its functionality. I have found that it has the best documentation and community of the available frameworks. Other Hijax frameworks include comfort ASP and MagicAJAX.NET V0.3.0 altho i had stability issues testing them (it is probably my setup, give them a go). I found a good comparison of .NET Ajax helpful in comparing frameworks, altho be aware that it is written by the programmer who built comfort ASP.

To me these Anthem components are an essential part of the .NET framework, and more useful and elegant than the AJAX (Atlas) Extensions.

AS2 + AS3 Draw a Dotted Rounded Corner Box

November 7th, 2007

So you might think that rounded corners is easy in as3 with the new drawing tools. This is only so true if you don’t want it dotted.

Thanks to senocular AS2 DashedLine.as which was easily converted to an as3 version DashedLine.as for as3 we can draw dotted lines and curves with actionscript. This left me with the task of using the quadratic drawing tools (no i didnt add a cubic curveTo to the Dashed line class) to draw circles (or quarters of circles, for the curners), which isnt the easiest, but i’ll spare you the details and simply say, its done!

Using Draw.curvedBox(obj, offsetX, offsetY, width, height, cornerRadius) we can draw into any graphics object (whether it be a normal Sprite.graphics or a DashedLine Object). This is essential as the Dashed line tool doesnt actually give us a fill, so we might need to draw a normal shape for the background.

import com.senocular.drawing.DashedLine
import com.tonp.utils.Draw
var dl = new DashedLine(this,1,5);
dl.lineStyle(3,0x000000,1);
Draw.curvedBox(dl,10,10,100,100,20)

to draw a curved corner box with a fill, or solid outline, send in mc.graphics as the first attribute (or just the mc in as2)

DashedLine.as for as3

Draw.as for as3

Draw.as for as2

So we can now do a box with curved corners in either AS2 or AS3 and in dotted or normal… phew!

Using Firebugs console.log in flash AS2 & AS3

November 7th, 2007

To use the excellent features of the firebug plugin for Firefox when debugging in flash, simply put this class in your ClassPath.

This will allow you to log Objects (yes it will iterate deep objects) log data which is externally loaded such as server requests. Overall it just makes life that little bit simpler.

Usage:

var obj:Object = {hi:”Hello World”, {hi_again:”Hello again”}}
console.log(obj)
console.debug(obj)
console.warn(obj)
console.info(obj)
console.error(obj)
console.assert(exp) – tests that expression is TRUE
console.dir(obj) – print an objects properties like in the DOM view
console.dirxml(xml)
console.group(name)
console.endGroup(name)
console.time(name)
console.endTime(name)
console.profile(name)
console.endProfile()

Download console.as ( for AS2 )

Download console.as ( for AS3 )

thanks to whomevers code i’ve cannibalized to get these, sorry i lost your links.

Simple AS2 Load Queue

November 7th, 2007

For some reason I’ve found it hard to find a simple and easy to modify Multiple Loader Class. Be it images, swfs, xml, or maybe a custom implementation like loading items into a “Screen” (a class i use for managing pages and transition), this load queue will tell the overall progress as well as individual progress for the item current loading.

Import com.tonp.utils.LoadQueue;var my_xml:XML = new XML();
 
var mc_drop:MovieClip = createEmptyMovieClip(“mc_drop”,1);
 
Var lq:LoadQueue = new LoadQueue();
 
lq.add(“image”, “images/1.jpg”, mc_drop, {});
 
lq.add(“image”, “xml/test.xml”, my_xml, {});
 
lq.onLoadInit = Delegate.create(this, onLoadInit);
lq.start()

Callback functions are fired by the LoadQueue Object are in two sections, events fired for the current item in the queue, and events for the overall progress of the queue:

Item Events

onLoadItemStart
onLoadItemError
onLoadItemProgress
onLoadItemComplete
onTotalLoadComplete

Overall Events

onLoadStart
onLoadProgress
onLoadComplete
onLoadError

The functions return attributes similar to the LoadMovie() Object where possible.

Download LoadQueue.as

AS2 Cast and attach a Custom MovieClip class

November 7th, 2007

One annoying thing that i found in as2 that has been fixed in as3 is the ability to write: new MyCustomClass() and then attach it to the stage. In AS2 there is no way to instantiate a class (which extends MovieClip) and have it parented to an existing MovieClip, unless you put it in the library with a linkage identifier, and assign the class to that asset. This is an arduous process if the clip doesn’t even require any assets drawn in the IDE.

A useful way to work around this is to have an empty movieClip in the library with a linkage of ‘empty’. Then to instantiate your custom class you must dynamically assign that class to the empty library asset with registerClass. If you then attach the ‘empty’ and cast it as your custom class type, bingo! you have your custom class instantiated on the stage.

registerClass( “empty”, MyCustomClass);

var mc:MyCustomClass = MyCustomClass(attachMovie(”empty”));

With correctly casting the attachMovie() you get correct typechecking and auto-completion in FlashDevelop. Remember, your custom class must extend MovieClip in the .as file

Reading XML as an Object Tree in AS2

August 30th, 2007

I thought I’d throw up a few things I’ve been using in AS2 lately on projects, So my next few posts will be old AS2 tricks.

Flash often needs hit the server with variables and load in a response. Using the built in LoadVars and XML Object works, but can be improved on. E4X isnt available in AS2 but here’s a lame relative. Enter stage XMLObj class. You can reading XML as an object eg:

trace( xml._data.root.data.person.name ) >> tony

This is a much faster way to access data. The XMLObj extends the built in XML class but adds the _data property. It can also guess types of the xml data as to save you the time of casting your values such as booleans and numbers.

For example a node such as <data>false</data> would when accessed by the XML tree would be a string of “false”. if(“false”) evaluates to -true- not -false- meaning you must cast it check String(“false”).toUpperCase() == true. Numbers would need to be casted Number(“65”) otherwise using them will not work as expected, eg. “4” + 4 = 44 not 8.

Sending data to an XML or XMLObj is easily done using a LoadVars as follows:

var xmlo = new XMLObj();
xmlo.guessType = true;
xmlo.ignoreWhite = true;
xmlo.onLoad = function(success){
	if(success){
		trace(this._data.root.people.person[0].name); &gt;&gt; tony
		trace(this._data.root.people.person[1].name); &gt;&gt; tarwin
 
	}
}
var vars = new LoadVars();
vars.id = 45;
vars.sessionId = “e3ed3533232ccD”;
vars.sendAndLoad(“process.aspx”, xmlo, “POST”);

The LoadVars Object will send your variables to the server then route the data straight into the XMLObj where it is parsed and onLoad is called.

server response:

<root>
<people>
<person name="”tony”"></person>
<person name="”tarwin”"></person>
<person name="”poo”"></person>
	</people>
	<cars>
		<car _type="”array”">
	</car>
	<text>
		<!--[CDATA[this is a slab of text]]-->
	</text>
</cars>
</root>

Download XMLObj.as

ODBC & .NET TableAdapters

August 29th, 2007

When using an ODBC connection the table adapters will not allow you to add variables. you cannot use the @var syntax as with SQL Server. The only syntax available is the same when using variables to a MS Access DB. You must use ‘?’ where a variable will go eg.

SELECT * FROM ? where dog = ‘?’

The variables are used in the order that you add them to the query. This makes TableAdapters quite restricted and to me, useless… if they already weren’t too clunky.

You should use a good old sql query in the page, or create your own DAL as a class.

A simple ODBC query can be made using a simple function similar to:

using System.Data.Odbc;
 
public OdbcDataReader query(string queryString)
{
    OdbcCommand command = new OdbcCommand(queryString, connection);
    OdbcDataReader result = command.ExecuteReader();
    return result;
}

The Returned result can then be bound to a Repeater, DataGrid, etc

Using MySql with Visual Web Developer Express

August 29th, 2007

As a reforming PHP MySql developer, one thing i really love in LAMP development is the simplicity and no fuss approach. Mysql is small (22mb download) fast and quite capable of most website datastorage. Also the fact that it doesnt cost $5000.00 per processor… thats good too.

So it seems like a good choice to use the advantages of the .NET framework, with the power of MySql. Is this available for VWD Express users however?The answer is yes!

Due to restrictions on the pluginability (technically speaking) VWD Express cannot install the Native Mysql for .NET connectors (mysql conector .net) which would give the best performanc. If you use Visual Studio 2005 then this would be the best choice.

To use Mysql with Visual Web Developer 2005 install Mysql ODBC as follows:

1. Download the ODBC data drivers .

2. Setup your ODBC connection

3. in your config.xml or connection .NET SqlDataSource Object use the mysql connection string found here

In your config.xml you will set up a connection similar to this:

<connectionstrings>
<add name="ConnectionString"
	connectionString="Driver={MySQL ODBC 3.51 Driver};
	Server=localhost;
	Database=test;
	User=root;
	Password=;
	Option=3;"
     providerName="System.Data.Odbc">
     </add>
</connectionstrings>

using IIS5.1 with multiple sites

August 29th, 2007

Okay, as a starting point for learning .NET i installed Visual Web Developer Express. Even though it gives you the option to test a website with the ‘view in browser’ option (which launches a temporary server at some crazy port eg. locahost:1076), I thought it was essential to be developing on a real IIS server. Not setting up my server properly cause me many hours of greif and confusion.

The catch with using IIS5.1 for developing .NET websites is that it only allows you to setup ONE website (domain.. whatever). As i have setup and developed PHP on Apache Development servers before i thought this would be fine to work in a similar way, and proceeded to setup my different sites (as i did some tests) in a separate folders. Then by using folder browsing i could access the different sites. WRONG!

eg:
d:/website/ ( allow folder browsing to select a site)
d:/website/site1/
d:/website/site2/

and access them as:
http://localhost/
http://localhost/site1/default.aspx
http://localhost/site2/default.aspx

This works fine for Php sites running on Apache as all of you code is custom (or you set a base path). Its wreaks havok with .NET however. Forms authentication in the config.xml errors. the ~/ file addressing errors, which caused me not to use it at first. Every piece of example code that i downloaded had strings of errors. Solution: Virtual Folders

In Explorer you can click on the folder and under properties>web sharing and select ’share this folder’ then give it an alias. The alias is used like this:

http://localhost/alias/

If you have access this alias and a login box appears you need to change the websites permissions (change it form forms authentication to allow your windows user). This can be changed by going to control panel > administrative tools > IIS , then under the default website there should be the alias you’ve created. goto its properties > directory security , and press ‘edit’ on anonymous access and allow anonymous access. This may be insecure, but hey… you dont know anything about servers do you… so i trust you dont care :P

Hello world!

August 26th, 2007

Well hi… world

Finally I’ve decided i should try to give a little back to the world about my travels as a web developer/designer. Travels such as AS2, php & Mysql, but mainly at the moment, my transition to .NET and AS3

I’ve been Finding it had the scour the internet, slowly getting an understanding of .NET so i’m going to endevor to post up all the crazy new things i’m learning.

peace out world