Digicorp

In this article I have explained how to use CSS and jQuery function together.

I will give one example in which I have used CSS for textbox and one jQuery function for validation like numeric value and maximum 3 character allowed.

Example:

Create a CSS for textbox in which height, weight, border, font, text-align etc. is defined.

<style type =”text/css” >

.txt1

{

text-align :center ;

width :60px;

height :22px;

border: 1px solid #000000;

font-family: verdana;

font-size: 10pt;

font-weight:bold ;

}

</style>

Write jQuery function for validation for numeric value and maximum length of the textbox. Bind this function to textbox stylesheet on keypress event.

<script type =”text/javascript” >

$(document).ready(function (){

$(“.txt1″).bind(“keypress”,function(){

var str = (event.srcElement).value;

var len1 = str.length;

if (len1 > 2)

{

event.returnValue=false;

if(!(event.keyCode==45||event.keyCode==46||event.keyCode==48||   event.keyCode==49||event.keyCode==50||event.keyCode==51||   event.keyCode==52||event.keyCode==53||event.keyCode==54||   event.keyCode==55||event.keyCode==56||event.keyCode==57))

{
event.returnValue=false;
}

});

});

</script>

Now apply the CSS to the textbox.

<asp:TextBox ID=”Textbox1″ runat=”server” CssClass=”txt1></asp:TextBox>

By applying this CSS on textbox user can only enter numeric value upto 3 characters and also we have a good looking textbox.

I hope this simple solution will help you somewhere in your project.

» Read the rest of this entry «

As we have discussed how to build the rendered control earlier, it is one step ahead in building custom controls. Earlier we have built the custom control starting from scratch. If you don’t want to start from scratch when building a custom control, you can build a composite control. When you create a composite control, you create a new control from existing controls.

Every ASP.NET control has a Controls property that represents all of its child controls. If you add child controls to a control, then the child controls are automatically rendered when the parent control is rendered.

Lets start from the beginning, Creating NumericTextBox (Only accepts Numeric values, else it give error message through validator.) is shown below. Create new VB Web Application Project and let’s name it NHSWebApplication. After Creating Web Application project just right click on App_Code folder (if not in solution then first create folder named App_Code)  and add one class file named  NumericTextBox.vb.

Note: Any code added to the App_Code folder is compiled dynamically.

The Code of NumericTextBox.vb file is as shown below

Namespace NHSWebApplication

Public Class NumericTextBox

”Inherit the control from Base Class CompositeControl

Inherits CompositeControl

”Declaring TextBox Web Control

Private NumericTextBox As TextBox

”Declaring ReqularExpressionValidator Web Control

Private NumericExpressionValidator As RegularExpressionValidator

”Overriding CreateChildControlMethod

Protected Overrides Sub CreateChildControls()

”Instanciate TextBox Control

NumericTextBox = New TextBox

”Assigning ID to text box control

NumericTextBox.ID = “txtNumericTextBox”

”Adding control

Me.Controls.Add(NumericTextBox)

”Instanciate RegularExpression Control

NumericExpressionValidator = New RegularExpressionValidator

”Assigning ID to RegularExpressionValidator Control

NumericExpressionValidator.ID = “vdtNumericExpressionValidator”

”Assigning Basic Properties to RegularExpressionValidator

NumericExpressionValidator.ControlToValidate = “txtNumericTextBox”

NumericExpressionValidator.ValidationExpression = “[0-9]*”

NumericExpressionValidator.ErrorMessage = “Invalid Inputs”

NumericExpressionValidator.Display = ValidatorDisplay.Dynamic

”Adding Cotnrol

Me.Controls.Add(NumericExpressionValidator)

End Sub

End Class

End Namespace

Here Class NumericTextBox is inherited from the base class CompositeControl. Two webcontrols Textbox and RegularExpressioValidator are declared.

Typically one has to override a control’s CreateChildControls() method. This method is called when a control builds its collection of child controls. In this method the objects of Textbox and RegularExpressionValidator are initialized and the some of the properties are set in order to get desired output.

”Assigning ID to text box control

NumericTextBox.ID = “txtNumericTextBox”

”Assigning ID to RegularExpressionValidator Control

NumericExpressionValidator.ID = “vdtNumericExpressionValidator”

”ID of controls that needs to be validate

NumericExpressionValidator.ControlToValidate = “txtNumericTextBox”

” Regular Expression that only accepts numeric values (0 to 9)

NumericExpressionValidator.ValidationExpression = “[0-9]*”

” Informative Message that needs to display on wrong input

NumericExpressionValidator.ErrorMessage = “Invalid Inputs”

Now just build your application and then add new Web Form. Let’s say TestCustomControl.aspx. Open its design view or HTML view and see the Toolbox. You will find the custom control named NumericTextBox. Just drag it on Design view or html code. See sample code of ASPX Page below.

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head runat=”server”>

<title>Testing Composite Control</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<cc2:NumericTextBox ID=”NumericTextBox1″ runat=”server” />

</div>

</form>

</body>

</html>

It will render the Textbox in browser with RegularExpressionValidator. The regular expression restict user to input non-numeric values. If any non-numeric values entered in textbox then it will show message ‘Invalid Inputs’. Here in this example, the message is kept static. You can always make it dynamic by creating properties of composite control and passed it from HTML.

By extending the properties of existing web control you can create more helpful composite controls. Hope this article will help to understand building custom composite control.

The two basic types of controls are fully rendered and composite controls. When you build a fully rendered control, you start from scratch. You specify all the HTML content that the control renders to the browser. When you create a composite control, on the other hand, you build a new control from existing controls.

Typically, when building a basic control, you inherit your new control from one of the following base classes:

System.Web.UI.Control

System.Web.UI.WebControls.WebControl

System.Web.UI.WebControls.CompositeControl

The CompositeControl class inherits from the WebControl class, which inherits from the Control class. Each of these base classes adds additional functionality.

Building Rendered Controls

Let’s start by creating a simple fully rendered control. When you create a fully rendered control, you take on the responsibility of specifying all the HTML content that the control renders to the browser.

Create new VB Web Application Project from File Menu and let’s name it NHSWebApplication. After Creating Web Application project just right click on App_Code folder (if not in solution then first create folder named App_Code) and add one class file name TestControl.vb.

Note: Any code added to the App_Code folder is compiled dynamically.

The Code of TestControl.vb file is as shown below

‘Namespace Declared

Namespace NHSWebApplication

‘TestContril Class is inherited from base class CONTROL

Public Class TestControl

Inherits Control

‘Declaring Local Variables for Getting and Setting Value of ROWS and COLUMNS attribute

‘assigned from HTML code of ASPX page

Private _Rows As Integer

Private _Columns As Integer

‘Declaring Properties (Attributes) of control to set ROWS from HTML code of ASPX Page

Public Property Rows() As Integer

Get

Return _Rows

End Get

Set(ByVal value As Integer)

_Rows = value

End Set

End Property

‘Declaring Properties (Attributes) of control to set COLUMNS from HTML code of ASPX Page

Public Property Columns() As Integer

Get

Return _Columns

End Get

Set(ByVal value As Integer)

_Columns = value

End Set

End Property

‘Overrides the RENDER method to draw html content

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)

writer.RenderBeginTag(HtmlTextWriterTag.Table)

‘First loop to create Rows

For i As Integer = 0 To _Rows – 1

writer.RenderBeginTag(HtmlTextWriterTag.Tr)

‘Inner loop to Create Columns

For j As Integer = 0 To _Columns – 1

writer.AddAttribute(“Style”, “border:solid 1px #000000″)

writer.RenderBeginTag(HtmlTextWriterTag.Td)

writer.Write(“Rendering Costom Control”)

writer.RenderEndTag()

Next

writer.RenderEndTag()

Next

End Sub

‘End of the Rendering of Custom control

End Class

End Namespace

As we see in above code RENDER method is override and the object of HtmlTextWriter class is passed to HTML Tag that needs to be rendered. For example

writer.RenderBeginTag(HtmlTextWriterTag.Table) same as <Table>

writer.RenderBeginTag(HtmlTextWriterTag.Tr) same as <tr>

writer.RenderBeginTag(HtmlTextWriterTag.Td) same as <td>

Attributes of each of the Tag is added using

writer.AddAttribute(“Style”, “border:solid 1px #000000″)

and it is same as

style=”border:solid 1px #000000)

so After each iteration it will create specified row and columns with specified format.

Now just build your application and then add new Web Form. Let’s say TestCustomControl.aspx. Open its design view or HTML view and see the Toolbox. You will find the custom control named TestControl. Just drag it on Design view or html code. See sample code of ASPX Page below.

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head runat=”server”>

<title>Untitled Page</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<cc2:TestControl ID=”TestControl1″ runat=”server” Rows=”2″ Columns=”3″>

</cc2:TestControl>

</div>

</form>

</body>

</html>

It will render a custom control on web form with Table having 2 rows and 3 columns with 1px Black border

Hope, this article will help you to understand how to build custom rendered control. I will write about building composite control soon.

What is Adobe Flex ?

Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications based on the Adobe Flash platform. Flex applications can be written using Adobe Flash Builder or by using the freely available Flex compiler from Adobe.

Adobe Flex takes you to the next level of web application development with the concept of Rich Internet Application(RIAs).You may have seen applications developed natively in Flash itself and realized that it offers a much more robust experience for the user where productivity is bolstered by ease of use,streamlined workflow,and real time interactivity that is impossible to accomplish in HTML itself. However developing rich applications in Flash for those who are core developers is daunting and unintuitive. The Flash development tool is geard for designers, and developing on a timeline is a strange concept. Flex removes that barrier entry by providing a programmatic way for developing these RIAs.

Flex is very prominent and familiar with professional developers. Flex is a set of products designed in an effective way based on efficient delivery of high performance.

Flex is a standard-based programming model for high performance rich internet applications. Flex application will take advantage of adobe flash player 9 and this will enable developer to extend the capabilities enables the client with richer applications in real time.

Flex is a cross-platform development framework for creating Rich Internet Applications(RIAs). A component based tool that you can use to develop apps that run using Flash player or Adobe Air. Adobe Flex Builder software is an Eclipse based IDE for developing RIAs.

Basics of Flex :

• Runs in the Flash Player or AIR.
• Tag based markup MXML serves as the basis for Flex Projects.
• MXML is a custom XML namespace,looks like <mx:MyTag></mx:MyTag>.
• Component based development : Containers / Layouts Components , UI Elements , Data Connectors.
• ActionScript 3 can be used to add behaviors or other interactivity not covered by MXML.
• Supports common OOP practices like MVC patterns,code behind,etc.
• MXML components can be brought onto the canvas via the GUI similar to Dreamweaver or VisualStudio.
• Markup can be written by hand with code assist, too. Again, similar to Dreamweaver or VisualStudio.
• MXML components have attributes that allow for modification of appearance or behavior.
• Components can be extended for additional capabilities or reuse via MXML or AS or a combo of both.
• Containers control layout (Canvas, Vertical Box, Horizontal Box)
• UI components display data, control interactivity or display states or other visual feedback (Datagrids, lists, buttons, selects menus,radio buttons, etc.).
• Data components load or send data (Services, XML, Remoting, etc).
• Other tags include: Script, Style, etc.
• Tags can be nested similar to HTML/XML.

Release history :

• Flex 1.0 – March 2004
• Flex 1.5 – October 2004
• Flex 2.0(Alpha) – October 2005
• Flex 2.0 Beta 1 – February 2006
• Flex 2.0 Beta 2 – March 2006
• Flex 2.0 Beta 3 – May 2006
• Flex 2.0 Final – June 28,2006
• Flex 2.0.1 – January 5,2007
• Flex 3.0 Beta 1 – June 11,2007
• Flex 3.0 Beta 2 – October 1,2007
• Flex 3.0 Beta 3 – December 12,2007
• Flex 3.0 – February 25,2008
• Flex 3.1 – August 15,2008
• Flex 3.2 – November 17,2008
• Flex 3.3 – March 4,2009

What is Flex Builder ?

Macromedia recently released Flex Builder (formerly known as “Brady”), an IDE based on Macromedia Dreamweaver MX 2004. Bundled with the Flex application server, Flex Builder provides a WYSIWYG environment for creating Flex applications, an integrated debugger, and code hinting for ActionScript and MXML (plus all of the features supported by Dreamweaver).

The IDE still shows some rough edges. For example, clicking “Help” in the “Manage Sites” dialog launches “Using Dreamweaver,” not “Using Flex Builder.” So, if you get stuck in the middle of defining a new Flex site, you won’t have access to Flex Builder’s excellent support documents. In test instances, opening any “On Demand” video tutorials launched Mozilla-even though it wasn’t set as the default browser.

Perhaps the best way to get a sense of the productivity benefits of Flex Builder is to compare it to Macromedia’s other Flash IDE, Macromedia Flash MX 2004 Professional. Both IDEs support a component called “Accordion” that provides a compact interface widget for showing and hiding information. A Flash developer can drag the Accordion component to the stage, but to populate it with data must use the ActionScript Accordion.createChild() method to instantiate a UIObject or link an existing symbol. It’s not rocket science, but it is time consuming. A developer working with Flex Builder, on the other hand, can simply drag an Accordion container to the stage and populate it with drag-and-drop controls such as form widgets or images. The difference in productivity is an order of magnitude. Think of Flex Builder as Visual Studio.NET Light for Flash.

Advantages of Flex :

• Flex applications can be intuitive, easy to use, and almost have the feel of the desktop.

• Easy to program and deploy.

• Can be deployed right now on 50% or more of the world’s browsers, with ubiquity increasing daily.

• Dedicated IDE based on Dreamweaver available now.

• Doesn’t require a large client installation like the .NET runtime.

• Extensive Visual component library.

• Powerful coding tools.

• Scalable and reliable solution.

• Superb Flex programming model.

• Easy Integration into a server application.

• High performance data synchronization engine.

• Interactivity due to video, audio, streaming and messaging components.

Disadvantages of Flex :

• Macromedia has poor track record with servers and server tools.

• Expensive.

• No free developer download.

Examples :

• To get record from DataGrid from particular row and column :

  • var SelectedData:String = DataGrid.dataProvider[event.rowIndex][DataGrid.columns[event.columnIndex].dataField];

• To create Custome Menu on right click :

  • private var cm:ContextMenu = new ContextMenu();

    cm.hideBuiltInItems();

    var newMenu:ContextMenuItem =

    new ContextMenuItem(“View Item”,true);

    newMenu.addEventListener(ContextMenuEvent.Menu_ITEM_SELECT,

    doMenuFunction);

    cm.customItems.push(newMenu);

  • private function doMenuFunction():void

    {

    Alert.show(event.currentTarget.caption.toString());

    }

    It Shows Selected Menu Item.

Security is one of the most important concerns in application software development. Building a robust security model is one of the most important factors that drive the success of application software. As far as security in ASP.NET is concerned, three terms come into my mind, i.e., Authentication, Authorization and Impersonation. Put simply, authentication authenticates the user’s credentials and authorization relates to the resources that an authenticated user has access to. This article is the first in a series of articles on ASP.NET security and discusses these concepts and their applicability.

Let us start our discussion with a brief outline on the sequence of events are as far as authentication and authorization are concerned when a new request comes in. When a new request arrives at IIS, it first checks the validity of the incoming request. If the authentication mode is anonymous (default) then the request is authenticated automatically. But if the authentication mode is overridden in the web.config file settings, IIS performs the specified authentication check before the request is passed on to ASP.NET.

Authentication

Authentication determines whether a user is valid or not based on the user’s credentials. Note that a user can be authorized to access the resources provided the user is an authenticated user. The application’s web.config file contains all of the configuration settings for an ASP.NET application. An authentication provider is used to prove the identity of the users in a system. There are three ways to authenticate a user in ASP.NET:

Forms authentication
Windows authentication
Passport authentication
 

Forms Authentication

This is based on cookies where the user name and the password are stored either in a text file or a database. It supports both session and persistent cookies. After a user is authenticated, the user’s credentials are stored in a cookie for use in that session. When the user has not logged in and requests for a page that is secured, he or she is redirected to the login page of the application. The following code snippet illustrates how this can be implemented in ASP.NET.

<configuration>
<system.web>
<authentication mode=”Forms”/>
<forms name=”LoginForm” loginUrl=”LoginForm.aspx” />
<authorization>
<deny users=”?”/>
</authorization>
</system.web>
</configuration>

Windows Authentication

Windows Authentication is used to validate a user based on the user’s Windows Account; however, this is only applicable in intranet environments where the administrator has full control over the users in the network. The following code snippet illustrates how we can implement Windows Authentication in ASP.NET.

<authentication mode=”Windows”/>
<authorization>
<allow users =”*” />
</authorization>
 

Passport Authentication

Passport authentication is a centralized authentication service that uses Microsoft’s Passport Service to authenticate the users of an application. It allows the users to create a single sign-in name and password to access any site that has implemented the Passport single sign-in (SSI) service. The following code snippet illustrates how we can implement Passport Authentication in ASP.NET.

<configuration>
<system.web>
<authenticationmode=”Passport”>
<passportredirectUrl=”LoginForm.aspx” />
</authentication>
<authorization>
<deny users=”?” />
</authorization>
</system.web>
</configuration>

Authorization

Authorization is the process of determining the accessibility to a resource for a previously authenticated user. Note that authorization can only work on authenticated users, hence ensuring that no un-authenticated user can access the application. The syntax for specifying authorization in ASP.NET is as follows.

<authorization>
< [ allow | deny ] [ users ] [ roles ] [ verbs ] />
</authorization>
In ASP.NET, there are the following types of authorizations.

URL Authorization
File Authorization
Authorization based on ACL (Access Control List)
 

Impersonation

According to MSDN, “When using impersonation, ASP.NET applications can optionally execute with the identity of the client on whose behalf they are operating. The usual reason for doing this is to avoid dealing with authentication and authorization issues in the ASP.NET application code. Instead, you rely on Microsoft Internet Information Services (IIS) to authenticate the user and either pass an authenticated token to the ASP.NET application or, if unable to authenticate the user, pass an unauthenticated token. In either case, the ASP.NET application impersonates whichever token is received if impersonation is enabled. The ASP.NET application, now impersonating the client, then relies on the settings in the NTFS directories and files to allow it to gain access, or not. Be sure to format the server file space as NTFS, so that access permissions can be set”.

Note that Impersonation is disabled by default and can be specified in the web.config file as shown in the code snippet given below.

<identity impersonate=”true”/>
or
<identity impersonate=”false”/>

To impersonate a particular identity, specify the following in your application’s web.config file.

<identity impersonate=”true” username=”joydip” password=”jude”/>