Monday, October 20, 2008

Captcha using Asp.net

1)Create a class Captcha which handles the captcha logic like creating dynamic image containing code & generating dynamic codes

using System;

using System.Data;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Drawing;

using System.Drawing.Imaging;

public class Captcha

{

private System.Drawing.Image image;//generated image

private int width, height; //width,height of the image to be generated

private string text = ""; //code

private Random random;//for random number generation

public Captcha(int w, int h, string text)

{

width = w;

height = h;

random = new Random();

this.text = text;

this.GenerateImage();

}

public System.Drawing.Image CapImage

{

get

{

return image;

}

}

// returns the Randomly generated String

public static string GenerateRandomCode()

{

int no = 0;

string no1 = "";

Random r = new Random();

no = r.Next(10);

no = no * 10 + r.Next(10);

no = no * 10 + r.Next(10);

char c = (char)r.Next(65, 90);

char c1 = (char)r.Next(65, 90);

no = no * 10 + r.Next(10);

//Convert all number into String

no1 = no.ToString();

//Insert the two character into the specified position

no1 = no1.Insert(0, c.ToString());

no1 = no1.Insert(2, c1.ToString());

return no1.ToString();

}

private void GenerateImage()

{

// Create a bitmap image.

Bitmap bitmap = new Bitmap(this.width, this.height);

// Create a graphics object for drawing.

Graphics g = Graphics.FromImage(bitmap);

//Create Rect

Rectangle rect = new Rectangle(0, 0, this.width - 1, this.height - 1);

//Create Font

Font font = new Font("Arial", width / 8, FontStyle.Italic);

// Fill in the background.

g.FillRectangle(Brushes.SeaShell, rect);

// Set up the text format.

StringFormat format = new StringFormat();

format.Alignment = StringAlignment.Center;

format.LineAlignment = StringAlignment.Center;

//Rotation angle

g.RotateTransform(5);

//Draw the Text

g.DrawString(this.text, font, Brushes.Sienna, rect, format);

// Add some random noise.

int m = Math.Max(rect.Width, rect.Height);

for (int i = 0; i < (int)(rect.Width * rect.Height / 20); i++)

{

int x = this.random.Next(rect.Width);

int y = this.random.Next(rect.Height);

int w = this.random.Next(m / 50);

int h = this.random.Next(m / 50);

g.FillEllipse(Brushes.Gray, x, y, w, h);

}

// Clean up.

g.Dispose();

// Set the image.

this.image = bitmap;

}

}

2) Create an asp.net page (or instead of using page, you can also use HttpHandler) to output the dynamic image containing code. This page doesn’t required any interface related tags but only contains code in the Page_Load event handler & named it CaptchaGenerator.aspx

protected void Page_Load(object sender, EventArgs e)

{

//create captcha using width,height & code from the Session

Captcha captcha = new Captcha(160, 65, Session["Code"].ToString());

System.Drawing.Image img = captcha.CapImage;

//set the response type to the browser

Response.ContentType = "image/jpeg";

//send the image to th browser

img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);

//end the response

Response.End();

}

3) Create a Register page displaying captcha & other registration information:

Design Time Display








Run Time Display












protected void Page_Load(object sender, EventArgs e)

{

if (Session["Code"] == null)

Session["Code"] = Captcha.GenerateRandomCode();

/// if (IsValid)

// Response.Write("Verified.");

}

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)

{

if (Session["Code"].ToString().Equals(txtCode.Text))

{

args.IsValid = true;

}

else

args.IsValid = false;

}

protected void btnRegister_Click(object sender, EventArgs e)

{

if (IsValid)

{

Response.Write("Verified.");

}

}

Download Source Code here

Saturday, October 11, 2008

Hello world Richfaces/ajax4jsf application

ajax4jsf/RichFaces

- is an open source framework that adds Ajax capability into existing JSF applications without resorting to JavaScript.


Step 1: (add jar files & make changes into the web.xml file)

...
    <context-param>
<param-name>org.richfaces.SKINparam-name>
        <param-value>blueSkyparam-value>
context-param>
<filter>
<display-name>RichFaces Filterdisplay-name>
<filter-name>richfacesfilter-name>
<filter-class>org.ajax4jsf.Filterfilter-class>

    <filter-mapping>
<filter-name>richfacesfilter-name>
<servlet-name>Faces Servletservlet-name>
<dispatcher>REQUESTdispatcher>
<dispatcher>FORWARDdispatcher>
<dispatcher>INCLUDEdispatcher>
>

Step 2:

class Bean {

private int first;

private int second;

private int result;

public String action() {

result = first+second;

return null;
}

}


Step 3:

index.jsp

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<h:form>

<rich:panel header="Calculate Sum" style="width:200px" > <!--allows to place the page elements in rectangle
panel that can be skinned
-->
First: <h:inputText
value="#{Bean.first}" /> <br>

Second: <h:inputText
value="#{Bean.second}" /> <br>

<%--reRender contains
the element id(or multiple ids) which will be updated after
the ajax response --%> <a4j:commandButton value="Add" action="#{Bean.action}"
reRender="result" />

Result: <h:inputText

value="#{Bean.result}" id="result" /> </rich:panel>
</h:form>


Source Code

Wednesday, October 8, 2008

Hello world Flex application

First download the Flex builder, which is an IDE built on top of Eclipse or you can only download Flex SDK.
If you have only sdk then you can use your favorite text editor like notepad, & type the following code as shown below:

Test.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>

import mx.controls.Alert;
private function display():void

{

Alert.show(txt.text,"Message",Alert.OK);

}

</mx:Script>

<mx:TextInput id="txt" />
<mx:Button label="Click" click="display()" />

</mx:Application>



Now Flex application contains the combination of
MXML
(
is an XML library-based language in that it has a library of specific tags representing GUI components/controls and follows strictly the rules of XML) &
ActionScript 3.0
(an Object oriendted language like java,c#,javascript in which every thing will be converted into & is used to manipulate GUI components)
Every flex application contains the root element of MXML as tag, & inside it, we can place different tags representing different GUI components like label,textbox,button etc.
Then inside it, we can place the tag containing actionscript codes under script tag.

For compiling (goto to the bin directory of flex sdk & type the following to generate the Test.swf file)

mxmlc.exe Test.mxml

For running the flex application

execute
Test.swf file