Thursday, October 28, 2010
CoolTuts - QTP - Object Repository
Types of Object Repository
There are two types of Object Repository.
1. Shared Object Repository
2. Local Object Repository
Shared Object Repository: This repository stores objects in a file that can be accessed by multiple tests.
Local Object Reposity: This repository stores objects in a file, that is associate with a single action
Adding Objects
In the Object Repository window, choose Object > Add Objects to Local. Click the object you want to add to your object repository.
If the object is associated to any other object, then use the following dialog box.
Selected object only - Adds selected object's properties and values, without its descendant objects.
Default object types - Adds selected object's properties and values of its descendant objects according to the object types specified by the default filter. You can see which objects are in the default filter by clicking the Select button and clicking the Default button.
All object types: Adds selected object's properties and values, together with the properties and values of all of its descendant objects.
Selected object types Adds selected objects properties and values, as well as the properties and values of its descendant objects according to the object types and classes you specify in the object filter. You specify the objects and classes in the filter by clicking the Select button and selecting the required items in the Select Object Types dialog box.
Friday, October 22, 2010
ASP MultiView and View Server Control
Example:
The Design of MultiView Control looks like this (Figure below)
Firgure 1 Goes Here.
Above figure is a design mode in our visual studio. Then we need to have events for over button clicks. What I am doing here is when I click button in 1st View it should replace with second view see sample images below.
Figure 2, 3, 4 Goes Here.
So by above figures you should get some idea that what this example is doing. For every view next button replacing with next View control and for every previous button is replacing with previous View control.
To get Next View we use
MultiView1.ActiveViewIndex += 1;
To get Previous View we use
MultiView1.ActiveViewIndex -= 1;
Complete code looks like
.aspx
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:Label ID="Label1" runat="server" Text="FirstName:"></asp:Label>
<span lang="en-us"> </span>
<asp:TextBox ID="txtFirstName" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtFirstName" ErrorMessage="FirstName is required"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="Label2" runat="server" Text="Last Name:"></asp:Label>
<span lang="en-us"> </span><asp:TextBox ID="txtLastName" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtLastName" ErrorMessage="Last Name is required"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="btnNextView1" runat="server" Text="Next Step" onclick="Button1_Click" />
</asp:View>
<asp:View ID="View2" runat="server">
<asp:Label ID="Label3" runat="server" Text="DOB:"></asp:Label>
<span lang="en-us"> </span>
<asp:TextBox ID="txtDOB" runat="server" /> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="txtDOB" ErrorMessage="DOB is required"></asp:RequiredFieldValidator><br />
<asp:Label ID="Label4" runat="server" Text="Phone Number:"></asp:Label>
<span lang="en-us"> </span>
<asp:TextBox ID="txtPhoneNumber" runat="server" /><asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="txtPhoneNumber" ErrorMessage="Phone Number is required"></asp:RequiredFieldValidator><br />
<asp:Button ID="btnPrev2View1" runat="server" CausesValidation="false" Text="Previous Step"
onclick="Button3_Click" />
<asp:Button ID="btnNextView2" runat="server" Text="Next Step"
onclick="btnNextView2_Click" />
</asp:View>
<asp:View ID="View3" runat="server">
<asp:Label ID="lblFinalResult" runat="server"></asp:Label>
<asp:Button ID="btnPrev3View1" runat="server" Text="Previous Step" onclick="Button3_Click" />
<asp:Button ID="Button1" runat="server" Text="Finish"
onclick="Button1_Click1" />
</asp:View>
</asp:MultiView>
.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.ActiveViewIndex =0;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex += 1;
}
protected void Button3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex -= 1;
}
protected void Button1_Click1(object sender, EventArgs e)
{
Response.Redirect("http://www.cooltuts.com/");
}
protected void btnNextView2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex += 1;
lblFinalResult.Text = "<b>Your Contact Details</b>"+"<br/>"+
"First Name: "+txtFirstName.Text+"<br/>"+
"Last Name: "+txtLastName.Text+"<br/>"+
"Date of Birth: "+txtDOB.Text+"<br/>"+
"Phone Number: "+txtPhoneNumber.Text+"<br/>"+
"<font size='3' color='red'>Verify and Click submit to Fininsh you registration</font><br />";
}
Thursday, October 14, 2010
Build in Functions
IsNumeric Function
IsDate Function
Year Function
Date Function
Time Function
IsNumeric Function: Evaluates whether an expression can be converted to Date or Not.
Example:
Dim MyVar, MyCheck
MyVar = 53 ' Assigns a Numeric value.
MyCheck = IsNumeric(MyVar) ' Returns True.
MsgBox MyCheck
MyVar = "459.95" ' Assigns a String which consists of Number
MyCheck = IsNumeric(MyVar) ' Returns True.
MsgBox MyCheck
MyVar = "45 Help" ' Assigns a String.
MyCheck = IsNumeric(MyVar) ' Returns False.
MsgBox MyCheck
IsDate Function: Evaluates whether an expression is a number or not.
Example:
Dim MyDate, YourDate, NoDate
MyDate = "October 19, 1962": YourDate = #10/19/62#: NoDate = "Hello"
Msgbox "Value of MyDate is "&IsDate(MyDate)
Msgbox "Value of Your Date is "&IsDate(YourDate)
Msgbox "Value of NoDate variable is "&IsDate(NoDate)
Year Function: Returns the whole number representing an Year
Dim MyDate, MyYear
MyDate = #October 19, 1962# ' Assign a date.
MyYear = Year(MyDate) ' MyYear contains 1962.
Date Function: Returns the current system date.
MyDate = Date
Msgbox "Today's Date is "&MyDate
Time Function: Returns the current system time.
MyTime = Time
Msgbox "Current Time is "&MyTime
Wednesday, October 13, 2010
CoolTuts - QTP - Synchronisation
CoolTuts - QTP - Step Generator
CoolTuts - QTP - Actions
CoolTuts - QTP - Output Values
CoolTuts - QTP - Parameterizing
When you want to test your application, you may want to check how it performs the same operations with different data. This is called parameterizing your test.
We can parameterizing the scripts by using any of the following
- DataTable
- Environment Variables
- Action Parameters
- Random number parameters
CoolTuts - QTP - Checkpoints
A checkpoint compares the value of an element captured, when the object was saved in the object repository, with the value of the same element captured during the run session.
CoolTuts - QTP - Available Keywords Pane
Available keywords pane enables to drag and drop objects or calls to functions into your test. When you drag and drop an object into your test, QTP inserts a step of operations for that object.
To view Available Keywords pane, click the Available Keywords Pane button or select View > Available Keywords.
CoolTuts - QTP - Virtual Objects
Virtual objects enables to record and run tests on objects that are not normally recognized by Quick Test.
Using the Virtual Object Wizard
- Map a virtual object to a standard object class such as a button or a check box.
- Specify the boundaries & the parent of the virtual object
- Assign a name to the virtual object
To Add a Virtual Object Tools > Virtual Objects > New Virtual Object
CoolTuts - QTP - Working with Reporter Object
ReportEvent Method: Reports an event to the test results
Syntax
Reporter.ReportEvent EventStatus, ReportStepName, Details [, Reporter]
EventStatus: 0 or micPass, 1 or micFail, 2 or micDone, 3 or micWarning
Example:
If(Window("text:=Untitled - Notepad").Wineditor("Class Name:=WinEditor").Exist)Then
Window("text:=Untitled - Notepad").Wineditor("Class Name:=WinEditor").Type("hello")
Reporter.ReportEvent 0, "Notepad exists", "Editor exists for the notepad"
else
Reporter.ReportEvent 1, "Notepad exists", "Editor exists for the notepad"
End if
Analysing Test Results
Tools > Options > Run Tab > View results when run session ends
Running Test Scripts
- Running your Entire test
QuickTest always runs a test from the first step, unless you specify otherwise. To run a test from or to a selected step or action, you can use the Run from step or Run to step options
Ex: Click the Run button on the toolbar or choose Automation > Run - Running part of your test
You can use the Run from step option to run a selected part of your test. This enables you to check a specific section of your application or to confirm that a certain part of your test runs smoothly.
Ex: Automation > Run from Step
Transactions
- Measures the time taken to run a section of your test.
- Sections of test are enclosed with start and end transaction statements.
- StartTransaction step signals the beginning of time measurement.
- Time measurement continues until EndTransaction step is reached.
To Insert Transaction, click on Start Transaction button (or)
Choose Insert > Start Transaction
To End Transaction, click on End Transaction button (or)
Choose Insert > End Transaction
Transaction (Keyword View):
Transaction (Expert View):
Services.StartTransaction “NameOfTransaction"
…... Few Statements…...
Services.EndTransaction “NameOf Transaction"
Tuesday, October 12, 2010
Object Spy
Using Object Spy you can view the properties and methods of any object in an open application. You use the object spy pointer to point to an object. Using the Object Spy pointing hand mechanism, you can view the supported properties and methods of any object in an open application.
Object Spy dialog box displays the selected object's hierarchy tree. It displays the run-time or test object properites and values of the selected object in the Properties tab. It displays the run-time or test object methods associated with the selected object in the Methods tab.
Choose Tools > Object Spy or click the Object Spy toolbar button to open the Object Spy dialog box.
Click the pointing hand. Both QuickTest and the Object Spy are minimized so that you can point to any object on the open application.
Low Level Recording
- For recording on environments or objects not supported by Quick Test.
- When you need to record the exact location of the operation on your application screen. While recording in normal mode, Quick Test performs the step on an object even if it has moved to a new location on the screen. If the location of the object is important to your test, switch to Low Level Recording to enable Quick Test to record the object in terms of its x- and y- coordinates on the screen. This way, the step will pass only if the object is in the correct position.
- In this Quick Test records all parent level objects as Window test objects and all other objects as WinObject test objects. They are displayed in the Active Screen as standard Windows objects.
- It supports the following methods for each test object:
WinObject test objects: Click, DblClick, Drag, Drop, Type
Window test objects: Click, DblClick, Drag, Drop, Type, Activate, Minimize, Restore, Maximize - Each step recorded in Low Level Recording mode is shown in the Keyword View and Expert View. (Analog recording records only the one step that calls the external analog data file.)
To record an application using Low Level Recording,
click the Low Level Recording button or choose Automation > Low Level Recording
Analog Recording Mode
To Record an application using analog recording mode,
select Automation > Analog Recording or click on Analog Recording button
Analog Recording mode
1. Record relative to a specified window
2. Record relative to the screen
For Record relative to the screen, QuickTest inserts the RunAnalog step for a Desktop item. Ex: Desktop.RunAnalog "Track1"
For Record relative to the following window, QuickTest inserts the RunAnalog step for a Window item. Ex: Window("Microsoft Internet Explorer").RunAnalog "Track1"
The track file called by the RunAnalog method contains all your analog data and is stored with the current action
Recording Modes of QTP
Recording Modes in QTP
- Normal Recording: Records the objects and the operations performed on them. (default mode)
- Analog Recording: Records the exact mouse and keyboard operations you perform in relation to either screen or the application window. In this recording mode, Quick Test records and tracks every movement of the mouse as you drag the mouse around a screen or window.
This mode is useful for recording operations that cannot be recorded at the level of an object, for example, recording a signature produced by dragging the mouse. - Low-Level Recording: Records on any object in your application, whether or not Quick Test recognizes the specific object or specific operation
Both Analog & Low-Level Recording requires more disk space
Guidelines for Analog and Low Level Recording
- Use analog recording or low-level recording only when normal recording mode does not accurately record your operation.
- Analog recording and low-level recording require more disk space than normal recording mode.
- You can switch to either Analog Recording or Low Level Recording in the middle of a recording session for specific steps. After you record the necessary steps using analog recording or low-level recording, you can return to normal recording mode for the remainder of your recording session.
Normal Recording | Analog Recording | Low Level Recording |
Records Objects Information based on Test Object Model | Records Mouse Movements respect to window or screen | Records All Objects as windows or win objects |
Records Keyboard Inputs | Records Keyboard Inputs | Records Keyboard Inputs |
Records Mouse Clicks | Records Mouse Clicks | Records Mouse Clicks with coordinates |
Object Information is stored in Object Repository | It Can't record Object Information | Records object information in the form of window or win objects | It is possible to edit scripts after recording | Not possible to edit the scripts after recording | It is possible to record scripts after recording |
Recording a Signature is not possible | Alternative mode for recording signatures | |
Recorded steps will run correctly on all objects | When we are recording with respect to window, the window object information will stores in object repository | Recorded steps may not run correctly on all objects |
Support all methods for every object | Support the following methods for each test object Win test objects: Click, DblClick, Drag, Drop, Type Window Test Objects: Click, DblClick, Drag, Drop, Type, Activate, Minimise, Restore, Maximise | |
This is a Default Recording Mode |
Missing Resource Pane
It provides a list of the resources that are specified in your test but cannot be found
- Missing calls to actions
- Unmapped shared object repositories
- Parameters that are connected to shared object repositories.
If one of the resources listed in this pane is unavailable during a run session, the test may fail. You can map a missing resource, or you can remove it from the test, as required.
To show or hide the Missing Resources pane, choose View > Missing Resources or click the Missing Resource button
The Missing Resources pane may list any of the following types of missing resources:
- Missing Action Name
- Missing Object Repository
- Repository Parameters
The Missing Resource pane consists of the following columns
- Items column lists the missing resource.
- Details column provides information about missing resource.
Data Table
It contains one Global tab plus an additional tab for each action.
It assists in parameterizing your test.
To view the Data Table, click Data Table toolbar button or choose View > Data Table.
For every new action, a new action sheet is added.
Action sheets are automatically labeled with the exact name of the corresponding action.
Debug Viewer
There are Three tabs in Debug Viewer of QTP
a. Watch
b. Variables and
c. Command
- Watch tab:It enables you to view the current value of any variable or VBScript expression that you added to the Watch tab.
- Variables tab: During a run session, the Variables tab displays the current value of all variables that have been recognized up to the last step performed in the run session.
- Command tab: It enables to run a line of script to set or modify the current value of a variable or VBScript object in your function library. When continued to the run session, Quick Test uses the new value that was set in the command.
To view the Debug Viewer pane, click the Debug Viewer button or choose View > Debug Viewer
Active Screen
QTP Script View
Expert View
Keyword View
When you create a test, QTP Creates a graphical representation of the steps you perform on your application. These steps are displayed in Keyword view tab.
Keyword view shows object hierarchy in an icon-based table.
Keyword view enables to view the tests of your test in a keyword-driven, modular, table format. Each step is represented as a seperate row in the table.
The columns in the Keyword View show different information for each step, as follows:
- Item: Test object, utility object, function call, or statement in a hierarchical icon-based tree.
- Operation: Operation to be performed on the item, Ex: Click or Select.
- Value: Argument values for the selected operation, Ex: mouse button to use when clicking the image.
- Documentation: Auto-documentation of what the step does, in an easy-to-understand sentence. Ex: Click "findFlights" image.
- Assignment: Assigning a value to or from a variable (not visible by default.)
- Comment: Textual information regarding the step, (not visible by default.)
Regular Expressions
1. glob:pattern - "Glob" is a kind of regular expression used in command line shells.
In glob pattern * represents any sequence of characters. '?' represents a single character.
2. regexp:regexp -Uses Javascript regular expressions
3. exact:string-Match a string exactly
Element Locators in Selenium
Format of element locator is:
locatortype = argument
1. Locating by identifier
identifier = id
Selects an element with specified @id attribute.If no match is found, it will take the element with @name = id.
2. Locating by Name
name = name
Selects the first element with specified @name attribute. If multiple elements have the same value for a name attribute, then you can use filters to further refine your location strategy (matching the value attribute).
3. Locating by id
id = id
Selects the element with @id attribute.
4. Locating by DOM
The Document Object Model represents an HTML document and can be accessed using JavaScript.
dom = javascriptExpression
Example:
dom=document.forms['myForm'].myDropdown
5. Locating by XPath
xpath = xpathExpression
Locates an element with XPath expression.
XPath is the language used for locating nodes in an XML document. As HTML can be an implementation of XML (XHTML), Selenium users can leverage this powerful language to target elements in their web applications.
One of teh main reasons for using XPath is when you don't have a suitable id or name attribute for the element you wish to locate. You can use XPath to either locate the element in absolute terms, or relative to an element that does have an id or name attribute.
Absolute XPaths contain the location of all elements from the root and as a result are likely to fail with only the slightest adjustment to the application.
In Relatiion XPath, we can find a nearby element with an id or name attribute (ideally a parent element), you can locate you target element based on the relationship. This is less likely to change and can make your tests more robust.
Since only xpath locators start with "//", it is not necessary to include the xpath=label when specifying an XPath locator.
Example:
xpath=//img[@alt='The image alt text']
xpath=//table[@id='table1']//tr[4]/td[2]
xpath=//a[contains(@href,'#id1')]
6. Locating Hyperlinks by link Text
link = textPattern
Selects a link with specified text. If two links with the same text are present, then the first match will be used.
7. Locating by CSS
CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents. CSS uses Selectors for binding style properties to elements in the document. These selectors can be used by Selenium as another locating strategy.
css = cssSelectorSyntax
8. ui = uiSpecifierString
Without an explicit locator prefix, selenium uses the following default strategies:
1. dom, for locators starting with document.
2. xpath, for locators starting with //
Monday, October 11, 2010
Debug Viewer
Testing Process in QTP
- Analysing Application
- Create Test Scripts
- Enhancing Test Scripts
- Running Test Scripts
- Analysing Test Results
Analysing Application: Determine the various activities that customers perform in your application, to perform a particular task.
Divide the business process into smaller units which will be represent by test actions.
Each action should emulate an activity that a customer might perform while using your application.
Creating Test Scripts: Create a Test script, by recording a manual Test Scenario, in Application Under Test (AUT)
Enhancing Test Scripts
Running Test Scripts: QTP Connects to website or AUT and performs each operation in the test as performed manually while creating/recording tests.
Analysing Test Results: QTP Test Results are analysed.
Sunday, October 10, 2010
CoolTuts - JavaScript - Strings
public class exercise{
public static void main(String[] args)
{
String FirstString = "Abc"
String SecondString = "def"
String FinalString;
FinalString = FirstString + SecondString;
System.out.println("Cancatenated String "+ MyString);
}
}
Length of the String: Returns the number of characters in the String.
String myStr = "abc"
System.out.println("Length of the string "+myStr.length());
IndexOf: Returns the position of the character in the String
String myStr = "abcdefg"
System.out.println("Position of the character "+myStr.IndexOf("c"));//Returns 2
System.out.println("Position of the character "+myStr.IndexOf("z"));//Returns -1 as character is not present in string
Saturday, October 9, 2010
Thursday, October 7, 2010
File Upload Server Control
A typical File Upload Control is constructed in the following manner:
<asp:FileUpload ID="FileUpload1" runat="server" />
For an Example of using FileUpload control and to save on local computer.
I am using extra button control and one label control.
.aspx
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click" />
<br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
.cs
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
try
{
FileUpload1.SaveAs("C:\\Uploads\\"+FileUpload1.FileName);
Label1.Text = "File name: " +
FileUpload1.FileName + "<br/>" +
FileUpload1.PostedFile.ContentLength + " kb<br/>" +
"Content type: " +
FileUpload1.PostedFile.ContentType;
}
catch(Exception ex)
{
Label1.Text = ex.Message.ToString();
}
}
else
{
Label1.Text = "You have not added a file";
}
}
You can check whether your file uploaded to your local folder or disk.
If you see your file that’s it you are done with this control.
Thanks
Emmaneale Mendu
Web Developer
ASP PlaceHolder Control
To see how it works, insert a PlaceHolder control into your page and then add controls to it from your server-side code in the manner shown below.
.aspx
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
.cs
Label lblMessage = new Label();
lblMessage.Text = "Hello World I am Cool";
PlaceHolder1.Controls.Add(lblMessage);
Here we are creating a new instance of Label control and adding it to placeholder control. You can add more than one control to a single instance of a PlaceHolder control.
Thanks
Emmaneale Mendu
Web Developer.
ASP Panel Server Control
The new feature in the panel control is the capability to scroll with scrollbars that appear automatically depending on the amount of information that panel control holds.
For a example below Figure shows where panel holds table control
<asp:Panel ID="Panel1" Width="100px" Height="100px" ScrollBars="Auto" runat="server">
<table>
<tr>
<td>
This text is to test the scrollbar in panel control.
If this text extends the limit of the panel control
the scrollbars appear
</td>
</tr>
</table>
</asp:Panel>
You can add controls dynamically too.
.cs
Label lblMessage = new Label();
lblMessage.Text = "Hello I am new to Panel control";
Panel1.Controls.Add(lblMessage);
That’s it a small explaination on panel control keep reading.
Thanks
Emmaneale Mendu
Web Developer
ASP AdRotator Server Control
Right click on your solution file and select add New Item, there you select XML file then press OK.
In xml file add the below code.
<Advertisements>
<Ad>
<ImageUrl>~/Images/CoolTuts.JPG</ImageUrl>
<NavigateUrl>http://www.cooltuts.com/</NavigateUrl>
</Ad>
<Ad>
<ImageUrl>~/Images/PleaseWait.JPG</ImageUrl>
<NavigateUrl>http://www.desibindaas.com/</NavigateUrl>
</Ad>
<Ad>
<ImageUrl>~/Images/Submit.JPG</ImageUrl>
<NavigateUrl>http://www.bing.com/</NavigateUrl>
</Ad>
</Advertisements>
The elements we use mainly in this XML file is explained below.
ImageUrl: Location of your Image.
NavigationUrl: Where to navigate when the image is clicked.
AlternateText: This is useful when there is now image in your file.
Impressions: this indicates the likelihood of the image getting selected for display.
Keyword: this sets the category of the image in order to allow for the filtering of ads.
After adding a XML file to your project with adding above code in it. Its time to add AdRotator to your page with having a property AdvertisementFile=”XML File” as shown below.
<asp:AdRotator ID="AdRotator1" runat="server"
AdvertisementFile="~/XMLFile.xml" />
Hence you see by refreshing the web page. The Ads are changing according to your impression element timings.
Thanks
Emmaneale Mendu
Web Developer.
ASP Literal Control
A typical Literal control is written to the page in the following manner.
<asp:Literal ID="Literal1" Text="Hello World!" runat="server"></asp:Literal>
Thanks
Emmaneale Mendu
Web Developer
ASP HiddenField control
<asp:HiddenField ID="HiddenField1" runat="server" />
There are several properties but I just cover two main properties
1) Value
2) Visible
Value: This property is used to assign or store some data in hiddenfield control as shown below.
<asp:HiddenField ID="HiddenField1" Value="Data to be Hidden from Web browser" runat="server" />
Try to work on this it wont display on your web browser.
Visible: This property is optional, but better to know what it does. You are hiding some important data or some confidential data in hidden field. You need to use visible property. why because when you run your program try this way.
Right click on your web browser and select view source. You can see the hidden field value on your source code page. So that reason I use visible property to hide it on view source page too.
<asp:HiddenField ID="HiddenField1" Visible="false" Value="Data to be Hidden from Web browser" runat="server" />
Thank you for reading
Emmaneale Mendu
Web Developer
Wednesday, October 6, 2010
ASP Calendar Server Control
<asp:Calendar ID="cldControl" runat="server"></asp:Calendar>
Above calendar control is a simple default one you can use some CSS styles or you can get some default designs from this control.
Right click on Calendar control and you see SHOW SMART TAG option
Check that and you see a small window at the top of your Calendar control
Select Auto format then you can select any default style you want sample selection is shown below Press OK.
Selecting a single day in the Calendar control
When user selects the date i am using a label control to display the date.
.aspx
<asp:Calendar ID="cldControl" runat="server"
OnSelectionChanged="cldControl_SelectionChanged" />
<asp:Label ID="lblDisplayDate" runat="server" />
.cs
protected void cldControl_SelectionChanged(object sender, EventArgs e)
{
lblDisplayDate.Text = "You have selected " + cldControl.SelectedDate.ToShortDateString();
}
Selecting whole week or whole month
In this case we use SELECTIONMODE property where you see four option to select Day, DayWeek, DayWeekMonth, None.
None – only readonly calendars use this option
So lets see DayWeekMonth in this below example.
.aspx
<asp:Calendar ID="cldControl" runat="server" SelectionMode="DayWeekMonth"
OnSelectionChanged="cldControl_SelectionChanged" />
<asp:Label ID="lblDisplayDate" runat="server" />
.cs
protected void cldControl_SelectionChanged(object sender, EventArgs e)
{
lblDisplayDate.Text = "You have selected <br/>";
for (int i = 0; i < cldControl.SelectedDates.Count; i++)
{
lblDisplayDate.Text += cldControl.SelectedDates[i].ToShortDateString() + "<br/>";
}
}
That’s it a small post with examples on Calendar control. Thankyou for reading the post.
Emmaneale Mendu
Web Developer
Tuesday, October 5, 2010
Input Box
Example:
Input = InputBox("Input Something","Title of the Input Box","Default Text in the Input Box")
Msgbox ("You Entered " & Input)
BulletedList server Control
In the above figure I shown you how it displays when you select different Bulletstyle property options
Circle, LowerAlpha, LowerRoman, UpperRoman etc.
And we have basic properties like BackColor, BorderStyle etc.
.aspx
<asp:BulletedList ID="BulletedList1" BulletStyle="Circle" runat="server">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
<asp:ListItem>Five</asp:ListItem>
</asp:BulletedList>
That’s it small post on Bulletedlist control.
Thanks
Emmaneale Mendu
Web Developer
ASP Table Server Control
In the above figure you can see two headers (“First Name” and “Last Name”). We can use any header here. We have three tags to use in asp table tag
<asp:TableFooterRow></asp:TableFooterRow>
<asp:TableHeaderRow></asp:TableHeaderRow>
<asp:TableRow></asp:TableRow>
You can copy the code below to get the above webpage design
.aspx
<asp:Table ID="Table1" runat="server" Caption="Customer Details">
<asp:TableRow ID="trheader" BackColor="Silver" runat="server" ForeColor="Black" Font-Bold="true">
<asp:TableHeaderCell>First Name</asp:TableHeaderCell>
<asp:TableHeaderCell>Last Name</asp:TableHeaderCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>Emmaneale</asp:TableCell>
<asp:TableCell>Mendu</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>Swetha</asp:TableCell>
<asp:TableCell>Patcha</asp:TableCell>
</asp:TableRow>
</asp:Table>
That’s it a basic asp table design completed.
Dynamically adding rows to the table:
I coded according to get same look as our first image. Just add a table tag in .aspx page and add server side code in page load area.
.aspx
<asp:Table ID="Table2" runat="server">
</asp:Table>
.cs
protected void Page_Load(object sender, EventArgs e)
{
Table2.Caption = "Customer Details";
TableRow tr = new TableRow();
TableCell th1 = new TableCell();
TableCell th2 = new TableCell();
tr.BackColor = Color.Silver;
th1.Text = "First Name";
th2.Text = "Second Name";
tr.Cells.Add(th1);
tr.Cells.Add(th2);
Table2.Rows.Add(tr);
TableRow tr1 = new TableRow();
TableCell tc1 = new TableCell();
TableCell tc2 = new TableCell();
tc1.Text = "Emmaneale";
tc2.Text = "Mendu";
tr1.Cells.Add(tc1);
tr1.Cells.Add(tc2);
Table2.Rows.Add(tr1);
TableRow tr2 = new TableRow();
TableCell tc3 = new TableCell();
TableCell tc4 = new TableCell();
tc3.Text = "Swetha";
tc4.Text = "Patcha";
tr2.Cells.Add(tc3);
tr2.Cells.Add(tc4);
Table2.Rows.Add(tr2);
}
As of now if you try this example you should come to know a basic design and how to dynamically add rows in a table.
That’s it a small post on Table Server control Thanks for Reading.
Yours
Emmaneale Mendu
Web Developer
ImageMap Server Control
Hot spots features:
• Each hot spots is characterized by various attributes like shape, location and size.
• Overlapping hotspots are perfectly valid.
• Hotspots are defined using x and y coordinates.
Types of hot spots
• CircleHotSpot
• RectangleHotSpot
• PolygonHotSpot
CircleHotSpot
We should define X, Y and radius to get this property.
RectangleHotSpot
We should defne Top,Buttom,Left and Right coordinates to get this property.
I got four images in one image and maping images using imagemap to navigation property. when the user clicks on circle or rectangle images I used navigation property to redirect to different urls. As shown above figure the code looks like this.
<asp:ImageMap ID="ImageMap1" runat="server" Height="300px" ImageUrl="~/Images/ImageMap.JPG" Width="300px">
<asp:CircleHotSpot Radius="40" AlternateText="Go to CoolTuts" X="50" Y="218" Target="_blank" NavigateUrl="http://www.cooltuts.com/" />
<asp:RectangleHotSpot AlternateText="Go to Bing" Left="17" Right="85" Top="27" Target="_blank" Bottom="110" NavigateUrl="http://www.bing.com/" />
<asp:RectangleHotSpot AlternateText="Go to Google" Left="140" Right="290" Top="27" Target="_blank" Bottom="110" NavigateUrl="http://www.google.com/" />
<asp:RectangleHotSpot AlternateText="Go to Yahoo" Left="185" Right="255" Top="140" Target="_blank" Bottom="287" NavigateUrl="http://www.Yahoo.com/" />
</asp:ImageMap>
That’s it, test it and let me know if any Questions?
Thanks,
Emmaneale Mendu
Web Developer
Monday, October 4, 2010
Image Server Control
A typical Image control is constructed on web page as shown below.
<asp:Image ID="Image1" Width="300px" Height="300px" ImageUrl="~/Images/CoolTuts.JPG"
runat="server" />
ImageUrl is very important property in our Image Server Control. In this property I am taking a image(CoolTuts.JPG) from Images folder.
Basic Image Control Example
In the above figure I used Image Controls to display three same images with different sizes. If you want to try this just refer to below .aspx source code.
.aspx
<table width="450px">
<tr>
<td rowspan="2">
<asp:Image ID="Image1" Width="300px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
</td>
<td>
<asp:Image ID="Image2" Width="150px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image3" Width="150px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
</td>
</tr>
</table>
Its pretty easy right?
Lets work on another example using different images on one Image Control.
As you see above three Images I am using one image control and three button controls. When the user clicks on “Cooltuts Image” Image control changes to CoolTuts Image and same way other two buttons PleaseWait and Submit buttons too.
Code and functionality looks as shown below.
.aspx
<form id="form1" runat="server">
<div>
<asp:Image ID="imgMain" Width="300px" ImageUrl="~/Images/CoolTuts.JPG" runat="server" />
<br />
<asp:Button ID="btnCoolTuts" runat="server" Text="CoolTuts Image" BackColor="White" OnClick="btnCoolTuts_Click" />
<br />
<asp:Button ID="btnPleaseWait" runat="server" BackColor="White" Text="PleaseWait Image" OnClick="btnPleaseWait_Click" />
<br />
<asp:Button ID="btnSubmit" runat="server" BackColor="White" Text="Submit Image" OnClick="btnSubmit_Click" />
</div>
</form>
.cs
public partial class ImageControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnCoolTuts_Click(object sender, EventArgs e)
{
ReplaceImage(1);
}
protected void btnPleaseWait_Click(object sender, EventArgs e)
{
ReplaceImage(2);
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
ReplaceImage(3);
}
/// <summary>
/// Replace Images According to the Button Clicks
/// </summary>
/// <param name="Number"></param>
private void ReplaceImage(int Number)
{
if (Number == 1)
{
imgMain.ImageUrl = "~/Images/CoolTuts.JPG";
ResetColor();
btnCoolTuts.BackColor = Color.Blue;
btnCoolTuts.ForeColor = Color.White;
}
else if (Number == 2)
{
imgMain.ImageUrl = "~/Images/PleaseWait.JPG";
ResetColor();
btnPleaseWait.BackColor = Color.Blue;
btnPleaseWait.ForeColor = Color.White;
}
else
{
imgMain.ImageUrl = "~/Images/Submit.JPG";
ResetColor();
btnSubmit.BackColor = Color.Blue;
btnSubmit.ForeColor = Color.White;
}
}
/// <summary>
/// Reset all buttons to Default Colors
/// </summary>
private void ResetColor()
{
btnCoolTuts.BackColor = Color.White;
btnCoolTuts.ForeColor = Color.Black;
btnPleaseWait.BackColor = Color.White;
btnPleaseWait.ForeColor = Color.Black;
btnSubmit.BackColor = Color.White;
btnSubmit.ForeColor = Color.Black;
}
}
I am using three button click events and two other functions. That’s it try this on your computer and let me know if any questions or mistakes by me through comments for this post.
Thanks
Emmaneale Mendu
Web Developer
CoolTuts - Performance Testing - Benchmark design
Benchmark is provided by client.