C#.NET | .toString()

Feb 21

ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III

Posted by babarjehangir in ASP.NET, C#, C#.NET, Tutorials, VB.NET on 02 21st, 2009 | 3 Comments

ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III

In this Part we are working with some of the Standard Controls in Details.

Standard Controls

Standard controls contain controls which help the developers to perform useful operations for example displaying information, taking user input in a textbox, displaying a drop down box, ListBox and many more. we will take look at some of them in detail.

Label Control

label control is used when you need to dynamically display/change data on the webpage. we already saw a sample code in the last part (part 03) which changed text of the label dynamically on button’s click and TextBox’s TextChanged Event. There are plenty of Properties with which we play around with.

ASP.NET Standard Controls - Label - Property Panel

following are some of the most used properties witha brief description

BackColor – sets the color of the background of the label control
BorderColor – sets the color of the border of the label control
BorderStyle – lets you set the style of the border e.g. NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset.
BorderWidth – lets you set the width of the border
CssClass -lets you set CSS class for label.
Font – lets you configure various font properties e.g Bold, Italic, Name, Names, Overline, Size, Strikeout, Underline
ForeColor – lets you set the color of the content of the label.
ToolTip – lets you set the tool tip for the label control.
Style – lets you set inline style attribute for the label control.

now lets have a look at a sample which illustrates the use of these properties.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>[.toString()] Standard Controls - http://dottostring.com</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1"
            runat="server"
            Text="label text goes here"
            BackColor="#FF9966"
            BorderColor="Black"
            BorderStyle="Double"
            BorderWidth="2px"
            Font-Bold="True"
            Font-Italic="True">
            </asp:Label>
    </div>
    </form>
</body>
</html>

Run (F5) your website and this is what you will get:

ASP.NET Standard Controls - Label - Properties Demonstration

Labels are frequently used as the labels next to textbox fields in order to identify the information to be entered in those fields. In order to associate a Label to a TextBox, Label has a property AssociatedControlID, setting this property doesn’t change anything as far as the display is concerned however when the label is clicked by the user it automatically takes the focus to the associated control.

Here is another sample which illustrates the use of AssociatedControlID and CssClass attributes.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>[.toString()] Standard Controls - http://www.dottostring.com</title>
    <style type="text/css">
        .LabelStyle {
            font-family: "Trebuchet MS";
            font-size: medium;
            font-weight: bold;
            color: #800000;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div >
        <asp:Label ID="Label1"
            runat="server"
            Text="label text goes here"
            BackColor="#FF9966"
            BorderColor="Black"
            BorderStyle="Double"
            BorderWidth="2px"
            Font-Bold="True"
            Font-Italic="True">
            </asp:Label>
        <br />
        <br />
        <asp:Label
            ID="lblProductName"
            runat="server"
            AssociatedControlID="txtProductName"
            Text="Product Name"
            CssClass="LabelStyle">
            </asp:Label>
        <br />
        <asp:TextBox
            ID="txtProductName"
            runat="server">
            </asp:TextBox>
        <br />
        <asp:Label
            ID="lblProductCode"
            runat="server"
            AssociatedControlID="txtProductCode"
            Text="Product Code"
            CssClass="LabelStyle">
            </asp:Label>
        <br />
        <asp:TextBox
            ID="txtProductCode"
            runat="server">
            </asp:TextBox>
    </div>
    </form>
</body>
</html>

Run(F5) the website and see the results.

ASP.NET Standard Controls - Label - Properties Demonstration II

Literal Control

Literal Control is almost the same as the Label Control except for the fact that Literal Control does not render its content inside the Span Tag, you can use it to display text or HTML content. it simply outputs contents assigned to it. Like for example lets say we need to dynamically update the title of the page, this can be done either by placing a runat=”server” and ID attributes to the Title Tag and then modify it from the server side or we can simply place a Literal Control in the Title Tag and then assign the desired title text to the literal control from the server.

Literal Control possess a useful property called Mode, which can be set to one of the following properties.

PassThrough – Everything assigned to the Text Property is rendered as it is to the browser. for example “dottostring.com” will print dottostring (in bold and italic)
Transform – This will remove all the content from the Text Property of the Literal Control which is not supported by the browser/device it is rendering to. In case of HTML Browser this acts just like PassThrough
Encode – This will encode the all the tag so that they are displayed as it is to the viewer. for example “dottostring.com” will print dottostring.com to the user interface.

as we dont have any span tag in the literal control rendered output, therefore we cannot apply any sort of formatting.

now lets look at some samples

Add Two Literal Controls, one in the Title Tag and the other inside the body and name them lTitle and lContent respectively.
in the Page_Load Method add the following code.

protected void Page_Load(object sender, EventArgs e)
    {
        lTitle.Text = "[.toString()] Standard Controls - http://www.dottostring.com";
        lContent.Text = "<b><i>dottostring</i></b>";
    }

Run(F5) the application and notice the following results

ASP.NET Standard Controls - Literal Control Demonstration

The Title of the page is what we set from the Page_Load Method dynamically and also we can see the other Literal Control which is rendered to display dottostring in below the two textboxes. also it is important to note that by Default the Mode Property for Literal Control is set to Transform, and since results are being redered to an HTML Browser, Transform and PassThrough will generate the same results, however when we change the IContent’s Mode Property to Encode it will also display the markup language on the user interface. effectively converting “<” to “&lt” and “>” to “>”.

ASP.NET Standard Controls - Literal Control Demonstration - Mode=Encode

we can clearly see the mark up language now. so Literal Control can be a very handy control in generating HTML content dynamically.

Thats it for this Part04, in this part we learned how to use some Standard Controls and what their important set of properties do. In the next part we will look at other Standard Controls which will enable us to make our interface much more user interactive.

Thanks for visiting and waiting patiently for this part, I will be posting more regulary now, so keep in touch and don’t forget to leave comments/feedback
Download Source Code for Part04
Cheers !

Previous Parts:

Jan 10

Using extjs calendar control (DateField) in ASP.NET

Posted by Irfan in ASP.NET, C#, C#.NET, ExtJs, Javascript, Tutorials on 01 10th, 2009 | 7 Comments

Using extjs calendar control (DateField) in ASP.NET

There are lots of scenarios where you want to use a nice calendar control, without changing server side logic. This short tutorial will enable you to use extjs DateField in ASP.NET as a calendar control and get the value of user input as DateTime object on server side. With extjs DateField you can apply validations, restrict certain dates, set default date or change it in any way you want.

We start with adding a textbox and a button (We will be converting this textbox to calendar control):

Notice that we are using rel="calendar" here. We do not want to use name or id attribute here because using a master page, we cannot predict client side id or name of the control. Using rel we can safely select multiple controls on client side.

Now we write our javascript. First of all, select all TextBoxes having rel="calendar" using DomQuery:

        Ext.onReady(function(){
            var textBoxes = Ext.DomQuery.select("input[rel=calendar]");
        });

Now loop through each TextBox and convert them to extjs DateField

        Ext.onReady(function(){
            var textBoxes = Ext.DomQuery.select("input[rel=calendar]");
            Ext.each(textBoxes, function(item, id, all){
                var cl = new Ext.form.DateField({
                    allowBlank : false,
                    applyTo: item
                });
            });
        });

And thats all

Now you can get the value of selected date on server side like this:

DateTime.Parse(txtCalendar.Text);

Dec 31

ASP.NET Tutorials – [Part 03] ASP.NET 3.5 Controls and Event Handlers II

Posted by babarjehangir in ASP.NET, C#, C#.NET, Tutorials, VB.NET on 12 31st, 2008 | 3 Comments

ASP.NET Tutorials – [Part 03] ASP.NET 3.5 Controls and Event Handlers II

In the last part (part 02) I gave you an overview of ASP.NET 3.5 Controls and their Event Handlers, in this part I will put forward some samples codes.

Creating an ASP.NET Website

Open Microsoft Visual Studio 2008
Create a new ASP.NET website (File – > New – > Website)

My First Website - Create New Website

Provide the location and name for your website.
From the Language drop down you can select the language of your choice (I will be using C# throughout all my articles).
Pressing OK, will create a website project for you and by default it already has a Default.aspx page added to it.

Switch to Split View of the Default Page and drag and drop a Label, TextBox and Button Control on the interface such that it looks something like this.

My First Website - Sample Default Page

lets look at the declaration of these controls.

<asp:Label ID=”lblmyLabel” runat=”server”></asp:Label>
<asp:TextBox ID=”txtmyTextBox” runat=”server”></asp:TextBox>
<asp:Button ID=”btnmyButton” runat=”server” Text=”Click” />

all of the ASP.NET Controls have the following characteristics

Tag Element starting with asp: ( with the exception of HTML Controls )
Each tag (ASP.NET Control tag) has an attribute runat=”server” which indicates to the framework that this control needs to be rendered at the server side. (HTML Controls can have this attribute only if you need to access it in the server side code)
ID attribute in the declaration of the ASP.NET Control identifies it, once defined, these controls can be accessed on the server side with these IDs.(I have already given controls appropriate IDs)

Now lets add a click event to the button we have on the page, to do that select the button and the look for Properties Panel on the right bottom of the VS Interface ( if you cannot see the properties panel, Press F4). everything you see in this panel are the properties of the control you have selected and you can modify them here. For now we are interested in adding a Click Event, Select Events Tab in the properties panel.

My First Website - Properties Panel - Button Events

you can see there are number of Button events available, but by default no events is placed. To add an event, lets say Click Event, we need to double click the space in front of the Click Label, this will add a Button Click Event handler in the Code File of the Default.aspx. This is how your code-behind file for this page would look like with a Button Click Event Handler.

using System;
using System.Configuration;
using System.Data;
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;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnmyButton_Click(object sender, EventArgs e)
    {

    }
}

btnmyButton_Click Event will occur everytime when btnmyButton is clicked. now lets Append “Hello” to the Label (lblmyLabel) Text everytime this button is clicked.

    protected void btnmyButton_Click(object sender, EventArgs e)
    {
        lblmyLabel.Text += "Hello ";
    }

Run (F5) the website and click on the Button more than one time and see what happens. (Note: for the very first time a Message Box will appear once you Run (F5) your website asking whether to enable debugging or not, Press Yes/Ok)

My First Website - Button Click Event Handler Demonstration

now this is how we can perform different kind of operations, for example manipulating certain information from a form to the database. similarly we have TextChanged Event available for the TextBox control, lets say we require that, whatever is written in the textbox is appended to the label whenever textbox loses focus, All we need to do is select mytxtTextBox control we dropped earlier on the page and add its TextChanged Event Handler like the way we added Button’s Click Event.

using System;
using System.Configuration;
using System.Data;
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;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnmyButton_Click(object sender, EventArgs e)
    {
        lblmyLabel.Text += "Hello ";
    }
    protected void txtmyTextBox_TextChanged(object sender, EventArgs e)
    {
        lblmyLabel.Text += txtmyTextBox.Text;
    }
}

just the way on the click of the button there was a post back to the server so that text could be appended to the label, TextBoxes by default are set not to post back on any event, we have to explicitly enable post back by enabling AutoPostBack property of the txtmyTextBox.

My First Website - Properties Panel - AutoPostBack Property

this will make the TextBox postback to the server on TextChanged Event.

Now Run(F5) the website again
Enter some text in the textbox and click out side the textbox, this will make the textbox lose focus and subsequently will post back to the server and call the TextChanged Event Handler and our text will appended in the label above.

My First Website - TextBox's TextChanged Event Handler Demonstration

this brings us to the end of Part 03. In this part we learned How ASP.NET Controls and Event Handlers are used in ASP.NET Websites, in the upcoming parts we shall look into Controls in each Category in detail, discovering various properties and events associated with them.

Thanks for Visiting, don’t forget to let us know how did this article helped you.
Download Source Code for Part 03
Cheers!

Proceed to:

ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III

Previous Parts:

Dec 30

ASP.NET Tutorials – [Part 02] ASP.NET 3.5 Controls and Event Handlers I

Posted by babarjehangir in ASP.NET, C#, C#.NET, Tutorials, VB.NET on 12 30th, 2008 | 2 Comments

ASP.NET Tutorials – [Part 02] ASP.NET 3.5 Controls and Event Handlers I

In part 1 we talked about ASP.NET and .NET Framework 3.5 in general and got accross some of the very basic concepts of .net technology. now we move on to ASP.NET Controls often termed as the heart of the .NET Framework.

There are around 70+ Controls in ASP.NET Framework and are categorized as follows.

Standard Controls
Data Controls
Validation Controls
Navigation Controls
Login Controls
WebParts Controls
HTML Controls
AJAX Extentions

Standard Controls – as the name suggests this category contains all the basic controls in order to fullfil the web interface related requirements such as text boxes, hyperlinks, buttons, tables and many more.

Data Controls – A number of useful data controls are available for the developer to easily communicate with database and efficiently display them to the end user. GridView, ObjectDataSource, Repeater are few of the most popular data controls.

Validation Controls - these controls come in very handy when we need to apply any sort of validations on the standard controls such as Required field validation on Textbox, Data Type validation, Regular Expression Match and many others.

Navigation Controls – navigation controls make things very comfortable when it comes to manage navigation of your website for example generating SiteMaps, Menus and TreeView.

Login Controls – these controls are there to be used whenever you need to implement security to your website, they enable you to display login, change password and registration forms.

WebParts Controls – these controls enable end users to modify the content, appearance, and behavior of Web pages in the web browser itself.

HTML Controls - these are standard HTML controls such as textboxes, anchor, checkboxes and any other HTML control you would know. it also gives the ability to convert any HTML tag into a server control.

AJAX Extensions – this category contains some very helpful AJAX related controls which enables AJAX on your pages magically ( well seems like magic ), for example if you want to change text of some label on the web page by a button’s click event using AJAX (without posting the entire page back) all you need to do is put that label and button in a UpdatePanel and that’s just about it!

we will learn about each of them in the detail in the later parts.

Event Handlers

Almost all of the ASP.NET controls provides one or more Events to support the idea of event driven web application. for example if you want that on a certain click of a button a text should change on the web page would require a Click Event of the Button to be raised when clicked and subsequently changing the text of the label placed somewhere on the page.

the code below demonstrates this example

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblMessage.Text = "Button has been Clicked";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DotToString - My First Website</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblMessage" runat="server" Text="Click on the Button Below" ></asp:Label><br />
        <asp:Button ID="btnSubmit" runat="server" Text="Click"
            onclick="btnSubmit_Click" />
    </div>
    </form>
</body>
</html>

In this example Two ASP.NET controls are used, Label and Button. I have placed an onclick event which is handled by btnSubmit_Click Event Handler to change the text of the Label control.

In the part 3 I will demonstrate some samples codes (using Microsoft Visual Studio 2008) which will further elaborate the use of ASP.NET Controls and their Event Handlers.

keep visiting and don’t forget to leave feedback.

Cheers!

Proceed to:

Previous Parts:

ASP.NET Tutorials – [Part 01] A peek into ASP.NET and .NET Framework 3.5

Dec 17

How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET – How to Stop/Start the Ticker on Mouse Hover/Leave

Posted by babarjehangir in C#, C#.NET, Windows Forms on 12 17th, 2008 | 5 Comments

How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET – How to Stop/Start the Ticker on Mouse Hover/Leave

With reference to my article How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET , I have been getting inquiries on how to handle certain mouse events. so in this post I will explain how you can make the scroller stop/start on mouse hover/leave events respectively.

before we go ahead, I feel its important for you as reader to know that this is the third article in the chain.following are reference to the previous articles ( for those who are interested )

moving on.

we have two labels which are working as a smooth vertically scrolling set of messages, this scroll effect is given by a Thread we created with the name BeginScroll, so in order to make the labels stop we have to some how make the infinite loop in the BeginScroll thread to stop and vice versa in case of start it again. for that to happen we are going to use a a concept straight out of the operating system textbook i.e. Semaphore/Mutex.

we have to develope a machanism that would allow us to use Signal/Wait strategy. For that .NET Framework has a handy feature called ManualResetEvent(details of this is out of the scope of this article, so I would prefer you to look here for further information )

(You can use any of the source code mentioned in the above two articles,I will be using source code from the second article mentioned above in this example)

Add the following two global declarations to the code (NotificationTiker.cs)

        public ManualResetEvent signalThread = new ManualResetEvent(false);
        private bool keepScrolling;

now add the MouseHover and MouseLeave events for the both the labels such that they should match the following code.

private void lblMessageOne_MouseHover(object sender, EventArgs e)
        {
            //Set KeepSrcolling variable to false so that the loop
            //in the thread terminates
            keepScrolling = false;
            //Reset Event of the ManualResetEvent will make WaitOne
            //Event in the BeginScroll Thread to block and effectively
            //stopping the scroll effect
            signalThread.Reset();
        }

        private void lblMessageOne_MouseLeave(object sender, EventArgs e)
        {
            //Set Event of the ManualResetEvent will release the blocked
            //Thread (blocked by the WaitOne Method)
            signalThread.Set();
        }

        private void lblMessageTwo_MouseHover(object sender, EventArgs e)
        {
            //Set KeepSrcolling variable to false so that the loop
            //in the thread terminates
            keepScrolling = false;
            //Reset Event of the ManualResetEvent will make WaitOne
            //Event in the BeginScroll Thread to block and effectively
            //stopping the scroll effect
            signalThread.Reset();
        }

        private void lblMessageTwo_MouseLeave(object sender, EventArgs e)
        {
            //Set Event of the ManualResetEvent will release the blocked
            //Thread (blocked by the WaitOne Method)
            signalThread.Set();
        }

now after making some changes to the scroll function, it should contain the following code

        private void BeginScroll()
        {
            //This variable will take label out of view
            int LabelHeight = -lblMessageOne.Height;
            //This variable will be used to assign out of view variable to bottom of the panel, to re-enter
            int PanelBottom = panel1.Height;
            bool firstEntry = true;
            while (true)
            {
                if (!firstEntry)
                    signalThread.WaitOne();
                keepScrolling = true;
                while (keepScrolling)
                {
                    firstEntry = false;
                    if (lblMessageOne.Location.Y == LabelHeight)
                    {
                        //when label one goes out of view, it is configured to re enter again
                        lblMessageOne.Location = new Point(lblMessageOne.Location.X, PanelBottom);
                    }
                    else
                    {
                        //Scrolling label by decrementing it y-axis location
                        int MessageOneY = lblMessageOne.Location.Y - 1;
                        lblMessageOne.Location = new Point(lblMessageOne.Location.X, MessageOneY);
                    }
                    if (lblMessageTwo.Location.Y == LabelHeight)
                    {
                        //when label one goes out of view, it is configured to re enter again
                        lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, PanelBottom);
                    }
                    else
                    {
                        //Scrolling label by decrementing it y-axis location
                        int MessageTwoY = lblMessageTwo.Location.Y - 1;
                        lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, MessageTwoY);
                    }
                    this.Refresh();
                    Thread.Sleep(50);
                }
            }
        }

this is it, now Run(F5) the application and test the mouse over and leave events.
Cheers, dont forget to leave comments/feedback.
Download Source Code Here.

Dec 15

How to create(make a Windows Form act like) a Docking Window without a container in C#.NET

Posted by babarjehangir in C#, C#.NET, Windows Forms on 12 15th, 2008 | 2 Comments

How to create(make a Windows Form act like) a Docking Window without a container in C#.NET

Time to share another interesting requirement I had to deal with when I was working on messaging application some time back(just in case if somebody is interested, I wrote about the Notification bar with smooth message/label scroller), which was how to make a Docking Window without a container.

Since there is no built in feature in the .NET Framework 2.0 to facilitate this, I decided to yet again tinkle up with the dynamic positioning of the form on the screen. All I needed was a windows form which could act like Docking Window on the Right of the screen.

I will integrate this piece in the previous application I buit on How to make pop-up / Notification bar with Merssage Ticker (smooth message scroller) over the Task Bar in C#.NET

Create a new Windows application (C#.NET) or Download the application I mentioned above.
Add a new windows form with the name “DockingWindow”
Re-Size it such that it looks like a Docking Window ( set Size 310, 450 ), also set ControlBox Property to False and FormBorderStyle to None. This will remove the windows normal controls to Close,Minimize and Restore.
Now Add a Panel (ID: pVisiblePart) and set it Dock Property to Left.

An Illustration of Initial Version of Docking Window

Since Docking Window is required to stick to the right side of the desktop and also should resize dynamically such that it matches the height of the working area. Also we would require a Button which will allow us to Dock(>>)/UnDock(<<) the Window.

Dock (>>)

This would require us to set the Location of the Docking Window such that only the panel (pVisiblePart) is visible, with the Button Available to UnDock the Window

Un-Dock(<<)

This would require us to set the Location back to normal but still sticking to the right side of the screen, with a Button Available to Dock again.

so for the code should look like this.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace _DotToString_NotificationBarTicker
{
    public partial class DockingWindow : Form
    {
        public DockingWindow()
        {
            InitializeComponent();
            configureThis();
        }
        ///
        /// Gets The Screen Width Available for Work
        ///
        /// Working Width Area
        private int getScreenWidth()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Width;
        }
        ///
        /// Gets The Screen Height Available for Work
        ///
        /// Working Height Area
        private int getScreenHeight()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Height;
        }
        ///
        /// Initialize the Docking Window Start Location
        ///
        private void configureThis()
        {
            //Dynamically resizing the form to match the height available on the screen
            this.Size = new Size(this.Width, getScreenHeight());
            //Calculating the Horizontal Location of the Form (Docking Window)
            //such that only the panel having the Docking Window's Navigation Control
            //will be visible
            int EndX = getScreenWidth() - pVisiblePart.Width;
            this.Location = new System.Drawing.Point(EndX, 0);
            //Setting the Text of the Button which will act at the Navigation for Docking Window
            this.btnDockUnDock.Text = "<<";
        }
    }
}

I have documented through the code so that it helps you understand various code statements.

Now Run(F5) your project
you should be able to see the following

An Illustration of Initial Docking Window

now we just need to take care of two things,
- how to Un-Dock the Docking Window?
- how to Dock the Docking Window?

How to Un-Dock the Docking Window?

on the click event of the button we will now change the location of the window such that it gives an effect of coming out from the left.

        private void btnDockUnDock_Click(object sender, EventArgs e)
        {
            if (btnDockUnDock.Text.Trim().Equals("<<"))
                DockOut();
            else
                DockIn();
        }
        ///
        /// Docking Window is brought to the front
        ///
        public void DockOut()
        {
            //Starting Location of the Docking Window
            int StartX = this.Location.X;
            //Calculating the final X Coordinate at which the docking window should
            //settle in order to be completely visible
            int EndX = getScreenWidth() - this.Width;
            //This loops does the trick for us, this will effectively simulate the
            //coming out effect to the docking window, eventually making the window
            //completely visible
            for (int i = StartX; i >= EndX; i--)
            {
                this.Location = new System.Drawing.Point(i, 0);
            }
            //Setting the final location (ensuring the final location)
            this.Location = new System.Drawing.Point(EndX, 0);
            this.btnDockUnDock.Text = ">>";
        }
        ///
        /// Docking Window is Docked Back In
        ///
        public void DockIn()
        {
            //Getting the Start Location for the loop
            int StartX = this.Location.X;
            //Calculation the final x coordinate for the loop to finish
            int EndX = getScreenWidth() - pVisiblePart.Width;
            //This is loop will dock the window back in
            for (int i = StartX; i <= EndX; i++)
            {
                this.Location = new System.Drawing.Point(i, 0);
            }
            this.Location = new System.Drawing.Point(EndX, 0);
            this.btnDockUnDock.Text = "<<";
        }

An Illustration of Docking Window in Visible Mode: Dock Out

BINGO! thats just about it, Docking Window is there to be used.
you can continue adding contents to the form’s working area just like a common form.
Cheers, don’t forget to leave in your comments/feedback.
Download the complete source code here

Nov 23

Using ASP.NET TextBox as ExtJs form TextField with clientside validation ubobtrusively

Posted by Irfan in ASP.NET, C#.NET, ExtJs, Javascript on 11 23rd, 2008 | 2 Comments

Using ASP.NET TextBox as ExtJs form TextField with clientside validation ubobtrusively

This mini tutorial will enable you to use the default functionality of ASP.NET TextBox and ASP.NET Button with client side validation using ExtJs.

Lets start with making a ASP.NET page with 2 TextBox and 1 Button.

<div class="Form">
	<fieldset class="Form">
		<asp:Label ID="Label1" AssociatedControlID="TextBox1" runat="server" Text="Text Field 1" CssClass="lblTextField"></asp:Label>
		<asp:TextBox ID="TextBox1" runat="server" CssClass="textField"></asp:TextBox>

		<br />
		<asp:Label ID="Label2" AssociatedControlID="TextBox2" runat="server" Text="Text Field 2" CssClass="lblTextField"></asp:Label>
		<asp:TextBox ID="TextBox2" runat="server" CssClass="textField"></asp:TextBox>

		<br />
		<asp:Button ID="Button1" runat="server" Text="Button" />
	</fieldset>
</div>

We want to use unobtrusive javascript. So we will start with writing our code within Ext.onReady event. This event ensures that all DOM has been loaded and this is faster than window.onload event.

        Ext.onReady(function(){
                // write your code here
        });

Now use the functionality of DomQuery to find all text boxes having a particular class on our page. DomQuery helps you in finding element using CSS3 selectors. ExtJs has optimized this for each browser so this is faster and convenient than regular techniques.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");
        });

Above code returns us an array of all ASP.NET TextBoxes having class textField. We loop through each of these TextBoxes and make an Ext TextField against each ASP.NET TextBox.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");

            // An array to keep track of all ExtJs Text Fields
            var ExtTextFields = Array();

            // Now loop through each element and make it Ext TextField
            Ext.each(textBoxes,function(item,index,allItems){
                ExtTextFields[index] = new Ext.form.TextField();
            });
        });

But we dont want to make a separate TextField. We want to convert ASP.NET field into ExtJs TextField without changing its default behavior. This can be archived by using configuration settings of TextField.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");

            // An array to keep track of all ExtJs Text Fields
            var ExtTextFields = Array();

            // Now loop through each element and make it Ext TextField
            Ext.each(textBoxes,function(item,index,allItems){
                ExtTextFields[index] = new Ext.form.TextField({
                     allowBlank : false,
                     applyTo : item
                });
            });
        });

Now we have perfectly working ASP.NET TextBoxes which have client side validation of required field using ExtJs. Lets add some more functionality to this. Now we want to disable the ASP.NET button if the TextBoxes are left empty and enable it if all the TextBoxes are filled in. This functionality will be archived by writing handlers for ExtJs TextField custom events onValid and onInvalid.

        Ext.onReady(function(){
            // Get an array of all input text fields using DomQuery
            var textBoxes = Ext.DomQuery.select("input[class=textField]");

            // An array to keep track of all ExtJs Text Fields
            var ExtTextFields = Array();

            // Now loop through each element and make it Ext TextField
            Ext.each(textBoxes,function(item,index,allItems){
                ExtTextFields[index] = new Ext.form.TextField({
                     allowBlank : false,
                     applyTo : item
                });

                // add an event to disable the submit button when there is no text in the field
                ExtTextFields[index].on("invalid",function(evt,target,opts){
                    Ext.get("Button1").set({disabled:true});
                });

                // add an event to enable the submit button when both fields have some value
                ExtTextFields[index].on("valid",function(evt,target,opts){
                    var flagDisableButton = false;
                    Ext.each(ExtTextFields,function(t,i,a){
                        // if any of the field is not valid, set flag to false
                        if(t.isValid() == false) {
                            flagDisableButton = true;
                        }
                    });
                    Ext.get("Button1").dom.disabled = flagDisableButton;
                });

            });
        });

Nov 20

How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET

Posted by babarjehangir in C#.NET, Windows Forms on 11 20th, 2008 | 12 Comments

How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET

few weeks ago I had to work on an application that had a client piece which was required to act like the a one-way messenger e.g. Supervisors wanted to send in messages to their sub ordinates. one of the requirements was whenever a new message arrived, a notification bar should pop-up over the task bar with all the new messages appearing in a ticker fashion ( also messages should scroll smoothly).

There is no .net control available to achieve this. so I searched the internet in hope to get hold of some (free) third party custom controls, but dint find anything of significant help, all I found was how to make characters within the label text scroll horizontally. so I decided to make something of my own.

problems I had to cope with here were:

how to make a windows form act as a pop-up/Notification bar over the task bar?
how to implement message ticker (i.e. smooth scrolling of the messages on the pop-up/Notification bar)?

how to make a windows form act as a pop-up/Notification bar over the task bar?

As always, we begin by creating a new Windows Application (C#.NET)

An illustration of creating a new windows application (C#.NET)

now by quickly doing the following:
- Rename the Form1.cs with something meaningful, such as “NotificationTicker.cs”, Press “Yes” when it asks for renaming reference content.
- Re size the form such that it looks like a notification bar.
- Drop in a group box from the toolbox and re size it to stretch towards the boundaries.
- Drop in a label in the group box area and assign some dummy text to it.
- Set ControlBox Property of the Form to false.
- Set ShowInTaskbar Property of the Form to false.
we get

Notification Ticker Initial Form Sample

verify that everything is working fine by compiling and running the application (F5)
Width of the form should be equal to the width of the user screen, this is simple, all we need here is to find out the working area of the client machine.
Working Area of the Client Machine is the space on screen available for the Forms to appear (excluding Taskbars, Docked Windows e.t.c).
we get this space in the form of rectangle.

Rectangle recWorkingArea = new Rectangle();
recWorkingArea = Screen.PrimaryScreen.WorkingArea;

by using the working area and a bit of mathematics we can get what we want.

        private int getScreenWidth()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Width;
        }
        private int getScreenHeight()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Height;
        }
        private void FitToScreen()
        {
            this.Size = new Size(getScreenWidth(), this.FormHeight);
            this.Location = new System.Drawing.Point(0, this.Location.Y);
        }

FitToScreen() when called will span the form to the width of the user screen.
Now we need to re size the group box as well, that’s also done with a bit of simple mathematics

private void SetGroupBox()
{
    int diff = (this.Location.X + this.Width) - (this.gbNotificationCenter.Location.X + gbNotificationCenter.Width);
    this.gbNotificationCenter.Size = new Size((getScreenWidth() - diff) - this.gbNotificationCenter.Location.X, this.gbNotificationCenter.Height);
}

call these functions ( FitToScreen and SetGroupBox ) in the below sequence in the form constructor and then Run(F5) your application

        public NotificationTicker()
        {
            InitializeComponent();
            SetGroupBox();
            FitToScreen();
        }

if you have done everything as right, you should see a form with the same height (as in the design time) but with a width equal to the your screen width.

now the pop-up part, this requires a bit of tinkling with the Location.Y ( Top-Left ) of the form. if we can somehow place the form initially at the height of the working area and then start decrementing it till Location.Y(of the form) + Height(of the form) equals Height of the working area, this would do the trick. Also note that all of this code would be written in Activated Event of the form, so that whenever the form is activated this form gives an effect of pop-up notification bar.

define a variable FormHeight and initialize it to a static value of the form height shown at the design time. because of at the runtime Height (of the form) becomes (form height (at design time) + ControlBox height).

private void NotificationTicker_Activated(object sender, EventArgs e)
{
    //firsttime is a global boolean variable initialized to true
    if (firsttime)
    {
        //setting this to false, right away. because activated is called again whenever
        //form gets the focus.
        firsttime = false;
        //Initializing the form to the bottom of the working area ( out of visible area )
        this.Location = new System.Drawing.Point(0, getScreenHeight());
        this.Refresh();
        //Read about the below line in the next section, where we will enable it
        //InitiateScrollingThread();
        //calculating the seed, so that opacity increases from 0% to 100% during the course of popping up.
        double opacityIncreaseSeed = 100.0 / (Convert.ToDouble(this.FormHeight) * 100.0);
        //Starting Index for the loop
        int ScreenHeight = getScreenHeight();
        //End Index for the loop to stop
        int StartY = getScreenHeight() - this.FormHeight;
        for (int i = ScreenHeight; i >= StartY; i--)
        {
            //Increasing opacity gradually
            this.Opacity = this.Opacity + opacityIncreaseSeed;
            //updating the location to give the move up effect
            this.Location = new System.Drawing.Point(0, i);
            this.Refresh();
            //to put some delay.
            Thread.Sleep(10);
        }
        //finally setting Opacity of the form to 100%
        this.Opacity = 1.0;
    }
}

Run(F5) the application and there you have a smooth and graceful pop-up notification bar coming out over the taskbar.
Download Source Code up till here

moving on to the second problem

how to implement message ticker (i.e. smooth scrolling of the messages on the pop-up/Notification bar)?

This is a bit tricky, but the idea is pretty simple. if you think you can implement smooth scrolling / ticker with two labels potentially. All you need to do is move one label out of the view and simultaneously moving the other one into view, assign a new message to the label that went out of the view and start to move it into the view again while the other one goes out of the view so on and so forth.

to accomplish this we need to drop in a panel and two labels, NOTE: Labels should be placed such that, they are inside the panel.

Demonstration of Notification Ticker with Two labels

here we need to understand that scrolling will be a continuous event and therefore we cannot have this method in the same application thread. we need to create a separate thread to handle the scrolling.

all of this is handled by the following two functions

private void InitiateScrollingThread()
{
    //Bottom of the Panel, will be used for hiding one of the two labels
    int PanelBottom = panel1.Height;
    //Setting the second label below the panel (effectively taking it out of view)
    lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, PanelBottom);
    // we have to set this to false, otherwise we wont able to update the location
    // of the labels from the scrolling thread.
    System.Windows.Forms.Control.CheckForIllegalCrossThreadCalls = false;
    //Initializing the scrollerThread(defined globally, Thread scrollerThread)
    scrollerThread = new Thread(BeginScroll);
    //Starting the BeginScroll Function at a separate thread
    scrollerThread.Start();
}
private void BeginScroll()
{
    //This variable will take label out of view
    int LabelHeight = -lblMessageOne.Height;
    //This variable will be used to assign out of view variable to bottom of the panel, to re-enter
    int PanelBottom = panel1.Height;
    while (true)
    {
        if (lblMessageOne.Location.Y == LabelHeight)
        {
            //when label one goes out of view, it is configured to re enter again
            lblMessageOne.Location = new Point(lblMessageOne.Location.X, PanelBottom);
        }
        else
        {
            //Scrolling label by decrementing it y-axis location
            int MessageOneY = lblMessageOne.Location.Y - 1;
            lblMessageOne.Location = new Point(lblMessageOne.Location.X, MessageOneY);
        }
        if (lblMessageTwo.Location.Y == LabelHeight)
        {
            //when label one goes out of view, it is configured to re enter again
            lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, PanelBottom);
        }
        else
        {
            //Scrolling label by decrementing it y-axis location
            int MessageTwoY = lblMessageTwo.Location.Y - 1;
            lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, MessageTwoY);
        }
        this.Refresh();
        Thread.Sleep(50);

    }
}

make a call to InitiateScrollingThread() funcation in the Activated Event defined above (in the if condition after setting the Location of the form)
and that’s it, we are done.
Run (F5) the application and the see smooth pop-up notification bar over the taskbar and then the smoothly scrolling messages.
Download Source Code Here
Cheers (don’t forget to leave your feedback/concerns)

Standard Controls

Label Control

Literal Control

Creating an ASP.NET Website

Event Handlers

Dock (>>)

Un-Dock(<<)

How to Un-Dock the Docking Window?

how to make a windows form act as a pop-up/Notification bar over the task bar?

how to implement message ticker (i.e. smooth scrolling of the messages on the pop-up/Notification bar)?

RSS Feed

Categories

Tags