Scrolling div with Javascript

March 5, 2007

You can scroll div with javascript. You need to have one mainContainer which will contain the child for it. eg.

I will have mainArea div with child div myReport.

<div id=”mainArea”>
<div id=”myReport”>

</div>
</div>

You need to fixed the height for the mainArea div with style

<div id=”mainArea” style=”height:400px;overflow:auto”>
<div id=”myReport”>

</div>
</div>

Now your div can scroll, You now need to write one line code in any javascript function

function scrollMainArea()
{
document.getElementById(“mainArea”).scrollTop = 0;
}

This will move your myReport div to show the top portion of your division.

I am using this codes in my chat application to scroll the messages automatically.


PHP base Chat Application is Up and running

February 28, 2007

I am very excited today, I have finally my chat app ready and working. I have shown my application to all my collegues they throughly enjoyed it.

Soon I will be writing the article about the entire development of this chat application.

PHP and Power of Javascript make this application possible for me. UI is not that good, the application is about functionality. I will work on UI someday Later.

I have created three user for the test.

user:tom, password:tom
user:dick, password:dick
user:harry, password:harry

After logging inside you will find a list of User on the left panel, click on the user and start sending messages to them.

So lets have a real feel of the application. Click here to start


Making your application with dynamic debug options

February 12, 2007

Many times our client report that you had debug string into an application. This debug string could be printed array, values echo from database, database queries and many other things. Even in flex/javascript application client report that their are unnecessary alert that is coming in between. These are not actually a errors these are the development level debug messages which we mistaken unable to comment.

What is the solution to this common problem?

The day I realized that I can control this, I started using the concept. Thanks to my previous boss Kaushik Chatterjee who bring this forward for me. Concept is fairly very simple. Define a global level debug variable with default value 0. Following code will explain what I am trying to convince.

<script language=”javascript”>

var debug = 0;
function debugMessages(message)
{
if(debug)alert(message);
}
function getUserName()
{
debugMessages(“I am in this function”);
}
</script>

Above code is pretty simple to understand the concept.

First line of code defines debug variable with value 0 i.e 0 disable/ 1 enable

function debugMessages is responsible for all debugging messages. All messages will route through this function. Inside this its checking whats the value of debug variable. If its true then show alert message or simply discard it. So you can kept the value of debug variable always true as and when working on the development version. At production level simply turn off this variable and there will be no extra debug alert/message in the application.

Applying smart use of this technique, we can achieve alot and stop client from complaining these silly points which we really dont mean too. Atleast it will remove one bug from your system as entered by client as a bug.

🙂


Framework with more features and real usage

February 12, 2007

Months ago when I heard of the term framework which generate Add/Mod/Del functionality, I was quite surprise and realize that how helpful it could be. It will save a lot of hours I spend on the most part, increase efficiency and will be bug free :). After trying with some framework, I found it does the right job but not with style I write the code. Its interanal are too difficult to understand and modifying such code eats up more time than I ever expected. I thought Its better idea to go the way I/we code. Later after thinking for some time on the right concept, its clear many thing and I realizes building framework is not a tough job. In my earlier post I already talked about when I started with it. This time I develop more better version of code.

I used pear DB class for database and Smarty for templating as most of the PHP developers are using it.

What features my frameworks offer this time?

-Generate Class file based on the table Structure.
-Generate Templates for AddUpdate as well as for Listing the records.
-Sorting on the each column field.
-Pagination.
-Server Validation for Unique values.
-Javascript validation for Blank Values currently.
-Generate JS map which we can use for further validation.
-Complete Add/Modify/Delete.
-Debug options which allow development message enable disable.
-Generate Links based on the class available.
-Search on the table field

New Features I will be adding this month
-Basic Ajax Functionality

Framework is flexible enough to add new functinality in code. Even this framework has ability to generate Coldfusion, ASP as well as Java code.

I soon will be submitting it to sourceforge.net and host it for the developers to take a look about what I am talking.

🙂


Lessons learned

December 25, 2006

Last week I was not able to post any entry in my blog, lots of work was done last week. Code refactoring, javascript validators, Smarty templates formatting are some major areas I worked on.

There was too many good things I learned. Firstly I took javascript validation part for my project, I found there were so much redudant code I written when I started working on the project. After taking some deep grasp on it, I was able to implement new validation function which does most kind of validation for me. This was the great achievement from last week. I wrapped my 1000 lines of code within just 100 lines, I am feeling very good about this. I share the code with some other team members and they were happy about the approch I took.

Smarty was one more things which was looking very egly no proper identetion, formatting, comments. No uniformity within the codes. I clean up most of the smarty templates, there are still some more which I will clean up this week.

In PHP, I clean up most part of PHP script, I feel very sorry that I didnt concetrated initially on my code which leads to this.

Some notes I took from this incident
-Always write good code, think before writing the code.
-Analyse it in every aspect, how it can help you in future.
-Is your code is easy to modify in future.
-Can I use the same code in other projects too.

I already started implementing this earlier but not on this project, that was mistake from my side.

But finally I am happy that I clean up many things last week.

Cheers!!


ExternalInterface to Make your flex methods Callable via HTML/Javascript

December 15, 2006

Its greate Experience working with addCallBack method and finally I got it working. I tried various ways. First I simply register the method in flex using addCallBack function but I didnt succeeded. After looking through live docs and reading more about it I come know swf initiates the and talks with browser that swf is ready to accept the call from HTML pages. How did I achieve this?

Here is my Mxml code

MXML Application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” creationComplete=”initApp();”>
<mx:Script>
<![CDATA[

import flash.external.*;
import mx.controls.Alert;
public var readyTimer:Timer;
public var javascriptMethodCounter:int = 0;

public function initApp():void
{
if (isContainerReady())
{
// If the container is ready, register the SWF’s functions.
setUpCall();
}
else
{
/* If the container is not ready, set up a Timer to call the
container at 100ms intervals. Once the container responds that
it’s ready, the timer will be stopped. */
readyTimer = new Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
readyTimer.start();
}
}

public function showAlert(message:String):void
{
javascriptMethodCounter++;
javascriptCounterText.text = javascriptMethodCounter + ” times javascript function called “;
javascriptMessageLogger.text = message;
}

public function timerHandler():void
{
if (isContainerReady())
{
// If the container is ready, register the SWF’s functions.
setUpCall();
readyTimer.stop();
}
}

//setup the callback function so that HTML can call flex methods
public function setUpCall():void
{
ExternalInterface.addCallback(“showAlert”,showAlert);
}

//Checks wheather HTML page is loaded or not.
private function isContainerReady():Boolean
{
var result:Boolean = ExternalInterface.call(“isReady”);
Alert.show(“Result :”+result)
return result;
}
]]>
</mx:Script>
<mx:Panel x=”10″ y=”10″ width=”386″ height=”200″ layout=”absolute”>
<mx:TextArea x=”10″ y=”36″ width=”346″ height=”114″ id=”javascriptMessageLogger”/>
<mx:Label x=”10″ y=”10″ text=”times javascript function called” width=”260″

id=”javascriptCounterText”/>
</mx:Panel>

</mx:Application>

Above code comprises of following method :

initApp : This methods will get call on the creationComplete of an event. This checks wheather swf is ready for

to accept call from HTML/javascript or not.

isContainerReady: this simply call one javascript function which returns boolean value.

timerHandler: after calling isContainerReady function if result if false, we register a timer which gets call

every 100ms to register the swf communication. When successful timer get stoped and call setUpCall method.

setUpCall: Simply registers the Flex method with ExternalInterface addCallBack method.

showAlert: This is the method which we are registered to be callable via HTML

Controls :

javascriptMessageLogger : Displays the message passed via javascript method

javascriptCounterText: Shows the number of times methods get called from javascript.

HTML code:

<script language=”javascript”>
var interfaceObj;

function callFlexMethod()
{

if(navigator.appName.indexOf(“microsoft”)!=-1)
{
alert(“Microsoft”);
interfaceObj = window[“ExternalInterface1”];
}
else
{
interfaceObj = document[“ExternalInterface1”];
}
}

// ——- Private vars ——-
var jsReady = false;

// ——- functions called by ActionScript ——-
// called to check if the page has initialized and JavaScript is available
function isReady() {
return jsReady;
}

// called by the onload event of the <body> tag
function pageInit() {
// Record that JavaScript is ready to go.
jsReady = true;
callFlexMethod();
}

</script>

isReady : Simply returns the state of jsReady variable

pageInit: this method get called on onload event of page. This function makes jsReady true and get the copy of swf object into interfaceObj variable

callFlexMethod: Determines the browser type and get the proper object out of it

Form Element:

Enter Text : <input type=”text” id=”myText”><input type=”button” value=”Send to Flex” onclick=”interfaceObj.showAlert(document.getElementById(‘myText’).value);”>

myText: This is where we enter the message we want to passed to flex method.

Button : Onclick of button showAlert method of flex application get call with value from textInput.

I was able to successfully makes flex methods available to javascript and call it from javascript. One more thing it should be run from webserver.

Screenshot for the javascript flex communication for the above application


“for in” loop to print object properties with Javascript/Actionscript

December 14, 2006

Do you want to know object properties of any object? Its very easy listing all the properties and values with javascript/actionscript using “for in” looping structure.

Lets see how.

Syntax:

for(prop in object)
{

}

Above structure shows how to apply “for in” structure on object.

How it works?
-Its start collecting all properties name to the left side variable (prop) with in the bracket.

Eg.

<script language=”Javascript”>
var obj = new Object(); //Create new object
obj[“firstName”]=”vijay”; //Assign property firstName with value vijay
obj[“lastName”]=”khambalkar”;//Assign property lastName with value Khambalkar
var str=””; //variable which will hold property values
for(prop in obj)
{
str+=prop + ” value :”+ obj[prop]+”\n”;//Concate prop and its value from object
}
alert(str); //Show all properties and its value
</script>

I used this technique many times while working with actionscript and javascript. This all me to see all properties and its individual value to track.