A few weeks ago, I was asked to translate a script that I wrote in ASP a year ago to Perl, which I did, because the client wanted the project to be written in Perl.
Well, can’t blame the client since ASP is kind of outdated anyway.
Later on, I was thinking to myself that it won’t be very fun for me to rewrite the script again everytime a client wants the server script to be in a different language that I don’t yet have.
So I decided to write a Web Service for that particular script. I think that it is a very useful tool and would love to encourage other people to start utilizing it or at least get familiar with it.
Web Service, just like its name implies is a “service”. The major advantage is that different platforms and programming languages can use the “service”.
Since this post is targeted to encourage people to take a look at Web Service, I am only going to give a preview of things that can be done using Web Service.
This Flash movie utilize the Web Service that I wrote here to get the distance between 2 US zipcodes
If you have SOAP package for PEAR and some other prerequisite packages like Mail_Mime, Net_URL, HTTP_Request, and Net_DIME installed, you can also use the following PHP script to utilize the Web Service previewed in the Flash movie above.
<?php
require('SOAP/Client.php');
$soap = new SOAP_WSDL('http://capcai.indorelation.com/webservices/ZipWS.php?wsdl');
$proxy = $soap->getProxy();
$proxy->setOpt("timeout",0);
$hasil = $proxy->getDistance("78741", "90010", "mi");
print_r ($hasil);
?>
Surprised? It takes only 6 lines of code to access and display the output.
If you are interested in learning more about Web Service, Alessandro Crugnola of sephiroth.it has written a very nice tutorial here.
Posted by mteguh in
General
February 26th, 2006 at 3:05 am
I believe most of us are familiar with the phrase “Good vs. Evil”. However, what about “Good vs. God”? I tried doing a search on it and didn’t find anything. Well, that’s because that is a phrase that my brother and I always use when someone says “You are not going to heaven if you don’t believe in God.”
With all due respect to those who do not agree with me, but I think not believing in God = not going to heaven just does not make any sense at all. Over the centuries, religion has evolved to become more of a political tool instead of serving its original purpose of teaching Good.
Look at history. Countless wars were waged in the name of God. There are hatred because of differences in beliefs. Why all these when religion is supposed to teach about Good, passion, and harmony?
Should someone who spend all his life helping other people not go to heaven just because he/she does not belief in God?
So, to me its better to believe in doing Good rather than believing in God for the wrong reason.
Posted by mteguh in
IT,
Flash
February 22nd, 2006 at 4:31 pm
Recursion is a programming technique that is used in many important applications such as “sorting”, “parsing”, and “searching” among many others.
Many programmers shy away from using this techniques because the logic behind it can be quite abstract. However, the basic idea of recursion is a function that calls itself in a finite number of times. Finiteness is a very important part to consider when dealing with recursion, since it is very easy to get an infinite loop when doing recursion. Recursive calls utilize the stack, as such the first call to the recursive function will eventually finish last (LIFO).
In this post, I am going to show one of the most widely used recursion example, i.e. drawing a tree branch. However, if you are interested to see how recursion can be used for “sorting” (QuickSort algorithm in this case - one of the faster sorting algorithm), feel free to download it here.
Here is a preview of the final product:
To begin, let’s take a look at the complete code first:
var pi:Number = Math.PI;
function drawBranch(start_x:Number, start_y:Number, color:Number, length:Number, angle:Number, thickness:Number, level:Number):Void {
if (level > 0) {
this.lineStyle(thickness, color, 100);
this.moveTo(start_x, start_y);
var end_x:Number = start_x-length*Math.cos(angle);
var end_y:Number = start_y-length*Math.sin(angle);
this.lineTo(end_x, end_y);
--level;
drawBranch(end_x, end_y, color << 1, length/1.4, angle+pi/4, thickness/2, level);
drawBranch(end_x, end_y, color << 1, length/1.4, angle-pi/4, thickness/2, level);
}
}
drawBranch(100, 120, 0x993300, 20, pi/2, 8, 10);
Let’s look at the following line
var pi:Number = Math.PI;
The purpose of this is just to store value of Math.PI. The reason I put it here and not inside of the function is for optimization by avoiding multiple Math.PI calls
The next line of code is
function drawBranch(start_x:Number, start_y:Number, color:Number, length:Number, angle:Number, thickness:Number, level:Number):Void {
It is just the function declaration with a whole bunch of parameters that is dynamic according to the recursion level.
The next line of code is
if (level > 0) {
This is a vital part of the code. This is what defines the finiteness of your recursive function. Without this, your recursive function will go in an infinite loop.
The next line of codes is
this.lineStyle(thickness, color, 100);
this.moveTo(start_x, start_y);
var end_x:Number = start_x-length*Math.cos(angle);
var end_y:Number = start_y-length*Math.sin(angle);
this.lineTo(end_x, end_y);
This is what draws the tree branch. It utilizes the Flash drawing API. There are many good tutorials out there if you are not familiar with them. But basically this.lineStyle(thickness:Number, color:Number, alpha:Number) is what defines the style of your line stroke. this.moveTo(x:Number, y:Number) position the starting point of your line. this.lineTo(x:Number, y:Number) position the ending point of your line. So your line will drawn from those 2 points that you define here.
The next line of code is
--level;
This is another vital part of the code. This code is what makes the finiteness rule (in this case, if (level > 0)) of this code possible.
The next line of codes is
drawBranch(end_x, end_y, color << 1, length/1.4, angle+pi/4, thickness/2, level);
drawBranch(end_x, end_y, color << 1, length/1.4, angle-pi/4, thickness/2, level);
This is the recursive call. Notice how it is calling the function itself. Also notice the difference between the 2 lines. One has angle+pi/4 and the other has angle-pi/4. The only reason for calling it twice is because your tree will be 1 sided otherwise.
Posted by mteguh in
IT,
Flash
February 22nd, 2006 at 2:32 am
Sometimes integrating your Flash movie into the HTML page may cause some layout issues such as your HTML dropdown menu appearing below the Flash movie.
Those are caused because by default browsers place embedded content on the topmost layer.
A fast fix to the above problem would be to add the “wmode” and setting the value to “transparent” in the embed tag. (Note: The “wmode” tag is not supported in some browsers)
However, what if the background color of your Flash movie is not the same as the color of your HTML page? (Might not be the best example, but for argument sake)
This is when the putting “Flash behind HTML” technique might come in handy.
To achieve this, we need to utilize layering in the HTML page, and another possible value for the “wmode” tag, which is “opaque”.
Layering in CSS has pretty much the same concept like layering in Flash. To do layering using CSS, we need to use a special attribute called the z-index. The smaller the z-index, the lower in the stack they are. So stuff that are put in layer 2 (or z-index:2) will block those that are put in layer 1 (or z-index: 1).
Do not use negative z-index, because it won’t show up on Mozilla. If there are 2 objects with the same layer, whichever comes later will be on top of the one that comes before it.
This is the HTML to embed your Flash movie behind the HTML (to test it just grab the code below and make a simple Flash movie and name it “yourmovie.swf”):
<div style="position:relative; font-size:30px; z-index:5;">LAYER 5</div>
<div style="position:relative; font-size:30px; z-index:2">LAYER 2 before flash</div>
<div style="position:absolute; top:0; left:0; font-size:120px; z-index:2;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="150" id="recursion_tree_branch" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="wmode" value="opaque" />
<param name="movie" value="yourmovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#e7e7e7" />
<embed src="yourmovie.swf" mce_src="yourmovie.swf" wmode="opaque" quality="high" bgcolor="#e7e7e7" width="200" height="150" name="yourmovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div style="position:relative; font-size:30px; z-index:4">LAYER 4</div>
<div style="position:relative; font-size:30px; z-index:2">LAYER 2 after flash</div>
<div style="font-size:30px; z-index:1">LAYER 1</div>
Posted by mteguh in
IT,
Web Dev
February 21st, 2006 at 2:19 am
The navigator’s object properties are the most common technique used for browser detection.
In this post, I am just trying to find an alternate way to do browser detection.
A logical alternative would be to use the document object and try to find functions or properties that exist in one browser version but not on another.
For example:
document.getElementById is available for IE5+ or NS6+
document.all is available for IE4+
So, one possible solution would be:
if (document.getElementById) { // browser is IE5+ or NS6+
if (document.all) { // IE4+ only
// browser is IE5+
} else {
// browser is NS6+
}
}
Wondering how this can be useful? Well, who knows if this might come out as one of your interview questions. ;p
Posted by mteguh in
IT,
Flash
February 20th, 2006 at 8:31 pm
Utilizing functions in programming is a fundemental thing in programming.
However, I think its worth knowing what is happening behind the scene.
To start, let’s take a look at the following sample code:
var num:Number = 5;
var obj:Object = new Object({name: "Hello", arr: new Array(5,3,8)});
function foo (n:Number, o:Object):Void {
o.name += " Hai";
o.arr[1] += 10;
++n;
trace("in foo n = " + n);
trace("in foo o.name = " + o.name);
trace("in foo o.arr[1] = " + o.arr[1]);
}
foo(num, obj);
trace("num = " + num); // 5
trace("after without clone obj.name = " + obj.name); // Hello Hai
trace("after without clone obj.name = " + obj.arr[1]); // 13
At a glance, the output of this code seems to be perfectly predictable. However, you will notice something is off if you look at it closer.
num is declared 5 and obj.name is declared “Hello” at the beginning. After they were passed to function foo and we print their values again, num still has the value 5. But how come obj.name becomes “Hello Hai” now?
The reason is because, for primitive data types like Boolean, Number and String, arguments are passed as a value. That means a copy of them is made, such that when the argument is modified inside of the function, the change does not affect the original variable being passed in.
Object, however, is not an ActionScript primitive data types. When a non-primitive data type is passed as an argument to a function, it is passed by reference. To understand that, we need to understand that variable values are all stored in the memory as bits. Supposed that the value of obj.name is stored at location 1000. What we are passing is really the reference to that location, in this case 1000. That’s why the original obj.name is also affected.
So, how do we prevent this behaviour? Simply doing var obj_copy:Object = obj; would not solve the above problem because of the same reason. If we want to prevent that from happening, we need to first make a deep copy of our object.
Here is the sample code to prevent that “ripple” effect behaviour.
function clone (o:Object):Object {
var copy:Object = new Object();
for (var i in o) {
if (o[i] === o) {
copy[i] = copy;
} else {
copy[i] = (typeof(o[i]) == "object")? clone(o[i]) : o[i];
}
}
return copy;
}
foo(num, clone(obj));
trace("num = " + num); // 5
trace("after obj.name = " + obj.name); // Hello Hai
trace("after obj.name = " + obj.arr[1]); // 13
Argument is still being passed by reference. But by doing a deep copy means that the objects are referencing at different locations. The original still reference location 1000. But the second one at location 1001 maybe.
I am including the source code used in this post here in case anyone is interested in playing more with it.
