These new features includes:
Drag and Drop:
In this version of Ext GWT 1.2 it has got a new Drag and Drop (DND) framework. Respective Support is added via the DragSource and DroptTarget classes with specialized subclasses for Grid, Trees, and Lists. The DND code exposes a rich event model to allow precise control of your DND operations.

Form Data Binding:
With the new data binding framework, your model can be “bound” to forms and fields. The relationship is bi-directional with updates propagating in both directions.

File Upload
This version introduces a few new fields including the FileUploadField which allows files to be uploaded to the server via standard HTML form submissions.

Examples:

Ext GWT 1.2

For Notable new examples are added to the demo applications and which includes Grid to Grid DND, Reordering Tree, Image Organizer, Grid Binding, DualListField and more examples in action

Download:
To download respective Ext GWT 1.2 please visit the Ext GWT download page. And for the release notes you can click here.

This tool is a fully tested tool and was tested in Softpedia labs, I would like to recommend this tool because recently I was handling one of the project in which for one of the file I made some changes long back but I could not remember where I made those changes with the old file. So just I opened the respective old file first and through the menu option (Tools -> Text Differences -> Text Diff with This File…) I have opened the new file and compared the respective changes very easily and integrated the code accordingly in the new file, my job is done. I do agree that there might be some tools which does the same job but I would like to recommend it as it is a freeware product both for personal and commercial use and it does not contain any malware.

PSPad Text Differences

And one more important feature is it supports most of the file types like C++, Cobol, MS-Dos batch, CSS, Forth, Fortran, FoxPro, HTML, XHTML, INI, Inno Setup, Java, JavaScript, KixStart, Object Pascal, Perl, PHP, Python, RSS, SQL, TCL/TK, Unix ShellScript, VBScript, Visual Basic, X86 assembler and other 120+ languages included as user highlighter definition.

If you would like to know more about this editor, then please do visit the site http://www.pspad.com/en/ [English Version]

Creating a New File in Ruby Language
You can create new files in Ruby using the “new” method that belongs to “file”class. The “new” method can handle two arguments, the first argument is the file name of the new file that you want to create. The second argument indicates how you want to open the file, like whether you want to access it only for reading or just writing or both and so on.

Following are some of the file modes used in Ruby:
r - Read only access.
r+ - Read and write access.
w - Write only access.
w+ - Read and write access
a - Write only access
a+ - Read and write access
b - Binary file mode

Example: to create a new file in “write” mode:

1

File.new("temp.txt", "w")

To Open Existing Files in Ruby
Existing files can be opened using “open” method belonging to the class “File”.

1

file = File.open("temp.txt")

You can open files already created in any of the modes mentioned above.
Example: to open a file in read-only mode:

1

file = File.open("temp.txt", "r")

You can also check whether a file is already open or not using the method “closed?”.

1

file.closed?

Output: Returns True or False, if the file is already open then it returns “True” else “False”.
To close a file, you can use “close” method belonging to class “file”.

1
2

file = File.open("temp.txt", "r")
file.close

How to rename and delete files in Ruby programming language?
To rename or delete files you can use “rename” and “delete” methods respectively.
Example: Creating new file

1

File.new("tempfile.txt", "w")

Example: Renaming an existing file

1

File.rename("tempfile.txt", "newfile.txt")

Example: Deleting an existing file:

1

File.delete("newfile.txt")

How to get information on Files?
To do more than just creating and opening files you need to use other methods in class “file”.
You can find whether a file exits using “exists?” method:

1

File.exists?("temp.txt")

You can check whether a file is really a file or is it some directory, using “file?” method:

1

File.file?("ruby")

To check whether it is a directory, use the “directory?” method:

1

File.directory?("ruby")

To check whether a file is readable, use “readable?” method:

1

File.readable?("temp.txt")

To check whether a file is writable, use “writable ?” method:

1

File.writable?("temp.txt")

To check whether a file is executable, use “executable?” method:

1

File.executable?("temp.txt")

You can get the file size using the “size” method:

1

File.size("temp.txt")

To check whether file is empty, use “zero?” method:

1

File.zero?("temp.txt")

Find out the file type using “ftype” method:

1

File.ftype("readme.txt")

1

File.ftype("../ruby")

1

File.ftype("/dev/sda5")

The above are only basics of handling files in Ruby programming language. There is more in programing than just handling files. You need a lot of interest and hard work to master these. So, all the best to your journey into Ruby programming!

Articles which you would like to read:
1. Remove duplicates from an array using JavaScript
2. Check out the number of Occurrences using JavaScript
3. Adding a div, button to the body tag dynamically using JavaScript DOM
4. Open e-mail message window onclick of a button using JavaScript
5. Free JavaScript database for your browser, Taffy DB
6. JavaScript Visitors Browser Detection Code Snippet
7. Netscape is the ‘navigator.appName’ for Google Chrome
8. Error: Invalid source HTML for this operation
9. System Error: -1072896658 in IE
10. Simple steps to develop AJAX Website – DeveloperSnippets

1

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4);

And now your expecting output should be 1,2,3,4 right? yeah it does the same.

JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var sampleArr=new Array(1,1,1,1,1,2,2,3,3,3,4,4,4); //Declare array
document.write(uniqueArr(sampleArr)); //Print the unique value
 
//Adds new uniqueArr values to temp array
function uniqueArr(a) {
 temp = new Array();
 for(i=0;i<a.length;i++){
  if(!contains(temp, a[i])){
   temp.length+=1;
   temp[temp.length-1]=a[i];
  }
 }
 return temp;
}
 
//Will check for the Uniqueness
function contains(a, e) {
 for(j=0;j<a.length;j++)if(a[j]==e)return true;
 return false;
}

You can customize accordingly instead of ‘document.write’ you can copy unique values to other array and proceed accordingly.

Example: “DeveloperSnippets was helpful to *Developers, *Designers, *Beginners, and to *Everybody”

1
2
3

var str = "DeveloperSnippets was helpful to *Developers, *Designers, *Beginners, and to *Everybody";
var occurences = str.match(/\*/g);
document.write(occurences.length);

Output: 4

Explanation of the code:
The below line does everything, ‘/g’ here is for global, means it will check all occurrences of * in a given string globally.

1

var occurences = str.match(/\*/g);

Just have a look at it - and learn from Expert

Knowledge on demand has become the ultimate purpose of many websites. Widgets are nothing but mini-applications, which provide effective solutions to visitors’ needs. Widgets of modern times play a crucial role in making the website a magical stage where you get instant answers for your queries. Apart from making a website interesting and interactive one, they provide instant information on news, entertainment, weather, calculations, and many more.

As today’s web visitors expect more and more from websites, and widgets have become an absolute necessity in order to retain the visitors for a longer period or entice more visitors to your site. If you really want a high traffic to your site, just place a few gadgets that are of great interest to your visitors. Of late, widgets have started attracting web visitors of all ages, and it has been proved that useful and simple widgets increase the traffic of websites in multi-folds. One other specialty of widgets is that users can get easy access to information available on the internet without visiting specific websites. YouTube videos, movie trailers, photo slideshows, news widgets are some of the popular widgets for blog sites and websites. Desktop widgets on the other hand can be downloaded and used to access information without having to visit the website. Some of the good examples include the weather gadget offered on websites that forecast weather, new feeds, maps, pictures, videos, and music.

It is a good idea for website promotion too! Do you know that widgets are great marketing tools in the arena of internet marketing? Well, here are a few points on the marketing capability of the widgets. Instead of placing banner ads, website owners can opt for a useful widget that bears the name of the company on it. As it is an interactive tool that provides a service, you are likely to draw more targeted traffic than your banner ads can bring in. Moreover, allowing users to share the widget gets you more inbound links that is a great plus when it comes to search engine optimization for higher page ranking.

Using widgets on you blog could enhance the looks and usability of your blog site. Apart from providing the blog with great looks, it can draw the attention of the visitors to a large extent. For example, blog widgets like Twitter or Plurk on your site will enable your visitors to know what you do, or even help them subscribe to your blog or follow it.

In order to help developers in learning more about the widgets, there are number of dedicated websites that provide useful information on widgets. These websites explain in detail about the widget and its uses. One good example is developersnippets.com. You can find a good number of snippet articles that are from basic to high-level. This site helps young developers wishing to have fruitful career in developing innovative web products.

CloudComputing:

Cloud Computing

Below is the respective cross-browser code for the same:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
</head>
<body>
<form name="emailwindow">
<input type="button" value="Mail Me at vivek@developersnippets.com" onclick="self.location='vivek@developersnippets.com'" />
</form>
 
</body>
</html>

Even the above can be placed in a function and can be called the same when user clicks on a button. This is simple but very powerful as this can be used a cross-browser snippet.

1
2
3
4

function emailwindow()
{
	self.location='vivek@developersnippets.com';
}

* Under 10K!
* Simple, JavaScript Centric Syntax
* Fast
* Easy to include in any web application
* Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
* CRUD Interface (Create, Read, Update, Delete)
* Sorting
* Looping
* Advanced Queries

We can think this as a SQL database in our web browser. If you would like to know more about the same then please do have a look at here - Getting Started
Below are the few example snippets on how we are going to implement and utilize the same:
Example #1:
Let’s say you have a collection of products and you want to find every product that costs less $10 and is a book. Simple, just write some JavaScript:

1

products.find({price:{lessthan:10},type:"Book"}});

Example #2:
Let’s say you want to update every product from XZYDesign and set the status to not available:

1

products.update({status:"NA"},{manufacturer:"XZYDesign"});

Example #3:
Let’s say you want to sort your products based on type, price descending, and quantity descending:

1

products.orderBy(["type",{"price":"desc"},{"quantity":"desc"}]);

If you would like to know more about the same then please do have a look at here - Getting Started

Download Taffy DB
Feedback/Bugs
FAQ

Articles which you would like to read:
System Error: -1072896658 in IE
Simple steps to develop AJAX Website – DeveloperSnippets
Snippet Code for Simple Ajax Tabs with cool CSS Styles
A simple snippet code to learn basics of Ajax

Coming to our topic today, after going through this post you will get an idea of how we can create a Custom Flash CS3 Preloader.

Custom preloader is a must topic in all aspects while creating any application in Flash or while doing any animation using Flash. The process is much different in ActionScript 3.0 compared to older versions of Action Scripting. External files are no longer loaded on to the stage like you might have done in earlier versions of Flash. Creating a Custom Flash CS3 Preloader is simple and very easy to implement. Here we will be creating a preloader which can be used for loading external images or other SWF (acronym of "Shockwave Flash ") files.

Before start creating the same, initially please do download the respective files – since this going to help us in understanding the same. Please do download the example files for reference, after downloading please do open flashpreloader.fla file.

Getting Started:

Step 1. Open flashpreloader.fla

After opening the flashpreloader.fla file, please do review its contents, you will see that the stage is empty. This is because here we are going to load an external file and display the same here. Here we are going to use some code to dynamically place the preloader on the stage and to remove the same from the stage when the loading is complete.

Press Ctrl+L to open the respective Library; here you will see two movie clips that is rectBarMC and Preloader Movie Clips. rectBarMC is simple blue rectangle bar which will be used to create a visual progress bar when a file is loading.

Firstly we will go with rectBarMC as I have mentioned above this is a simple rectangle bar which will be used as a progress bar for our program.

And coming to Preloader , which is a movie clip contain all the respective pieces of our preloader like the text “Loading 100% ” etc., Just right click on the same and check for the linkage option in the context menu. When you click on Linkage, it will open up “Linkage Properties ” window, in that window make sure that Class name should match with the movie clip name like “Preloader ” for this the Base class would be “flash.display.MovieClip ”. And if you see the checkbox for Export for ActionScript has been selected, this means that when the respective file runs, we can access this movie clip dynamically by its class name that is here “Preloader ”. Below is the screen shot which resembles the same – linkage properties

The Linkage properties for the Preloader Movie Clip.

Now just open the Preloader Movie Clip by double clicking on it in the library. Here you can see three respective layers which are named as Loading_txt , Loading_bar and Border_frame .

“Loading_txt ” layer just contains the “Loading 100% ” text that tells the user what percentage of the respective file has been downloaded. And when you select the same, in the properties inspector panel, you can see that loading_txt has given as the instance name . Using ActionScripting code we can show how much amount of file has been loaded.

“Loading_bar ” Layer contains an instance of the rectBarMC movie clip which will expand to visually indicate how much of the file has been downloaded or completed. And for this we have given an instance name as rectbar_mc .

“Border_frame ” Layer just it contains the box shape, it looks like a border.

Below snap-shot resembles the Preloader Movie Clip.

Step 2. Adding ActionScript to load the external file:

Now we will try to add ActionScript to load the external file, click on the Scene 1 under the timeline. You can see one layer called as “actions ”. Select the “actions ” layer and press F9 to open the Actions panel . Here we will be loading an external .swf file, keeping this in mind we will write some ActionScript code. Just go through the code snippet below which I have written for loading an external .swf file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var myUrlReq:URLRequest = new URLRequest("externalfile.swf");
var myLoader:Loader = new Loader();
 
myLoader.load(myUrlReq);
 
myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);
 
var myPreloader:Preloader = new Preloader();
 
function showPreloader(event:Event):void {
        addChild(myPreloader);
        myPreloader.x = stage.stageWidth/2;
        myPreloader.y = stage.stageHeight/2;
}
 
function showProgress(event:ProgressEvent):void {
        var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
        myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
        myPreloader.rectbar_mc.width = 198 * percentLoaded;
}
 
function showContent(event:Event):void {
        removeChild(myPreloader);
        addChild(myLoader);
}

Code in Brief:

1. Loading the External file

1
2
3
4

var myUrlReq:URLRequest = new URLRequest("externalfile.swf");
var myLoader:Loader = new Loader();
 
myLoader.load(myUrlReq);

Here in the above snippet code, we are creating an object of URLRequest called myUrlReq and will be creating an object of Loader called myLoader, and this Loader class expects to receive a URLRequest pointing to the file you wish to load, it can be an image file / any external file which you want to load. Here we are loading an external .swf file with file name as “externalfile.swf”.

2. Creating respective Listeners to check the progress of the file

After that we need to create listeners to monitor the progress of the file, like how much amount of the file has been loaded till now. For that we will be using event listeners like Event.OPEN , ProgressEvent.PROGRESS , Event.COMPLETE.

1
2
3

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);

Firstly we will run a function called showPreloader() which will place the Preloader movie clip on the stage. Then Secondly we will run a function called showProgress() which will visually update the preloader bar and text to reflect the download progress. Finally we will run a function called showContent() , which will remove the preloader and show the respective content once the download is complete.

3. showPreloader()

Before running the respective function, we need to create an instance of the Preloader movie clip which will display the Preloader on the stage.

1
2
3
4
5
6
7
8
9

var myPreloader:Preloader = new Preloader();
 
Then write the code of the respective function showPreloader():
 
function showPreloader(event:Event):void {
addChild(myPreloader);
myPreloader.x = stage.stageWidth/2;
myPreloader.y = stage.stageHeight/2;
}

Using addChild() we are placing myPreloader instance on the stage, if you see the above code we are placing the respective preloader in the center of the stage through x and y positions.

4. showProgress()

Now after completion of the positioning of the preloader, now we will call showProgress() function, here in this function we will calculate the percentage of loading completed by dividing the number of bytes downloaded so far by the total number of bytes. Then after calculating we are assigning the same to the loading_txt . And simultaneously we need to increase the width of the rectbar_mc to visually showing the same to the user that this much amount of file has been loaded.

1
2
3
4
5

function showProgress(event:ProgressEvent):void {
	var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
	myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
	myPreloader.bar_mc.width = 198 * percentLoaded;
}

5. showContent()

After loading everything, we need to remove the movie clip from the stage and need to show the external file respectively. Below is the code for the same.

1
2
3
4

function showContent(event:Event):void {
	removeChild(myPreloader);
	addChild(myLoader);
}

The above function is called after completion of showProgress() , and in this function we are removing myPreloader movie clip and adding the external file on the stage that is myLoader (I mean an external file named as externalflash.swf ).

So, we are done with the preloader. Now test the application by pressing Ctrl+Enter you can see preloader in action. Before pressing Ctrl+Enter, please do include some .swf file and instead of “externalflash.swf” place your own file in the same directory. After placing the file then press Ctrl+Enter for better results or else it will give an error like “URL not Found”.

Download
Flash Preloader