Month: April 2013

Webinar Recap: Create faster Windows Store Enterprise Apps

Posted by

0

image

On April 25th we had full house in webinar Create faster Enterprise Apps for Windows 8 . It was very overwhelming exciting discussion with attendees. In webinar we focused on DataGrid and Chart.

Download Demo Codes of Webinar

Learn more about RadControls for Windows 8

Download Trial version

In webinar we discussed

  • Different Windows 8 development paradigm
  • Setting up project to work with RadControls
  • Working with Charts in JavaScript based Apps
  • Working with DataGrid in Xamls based Apps

Here is the slide deck of webinar

During this webinar we had a lot of questions and I am trying to address them here:

Full form of WinRT?

WinRT stands for Windows RunTime

WinRT is common for both Windows 8 & Windows 8 Phone?

No WinRT is not common for both Windows 8 and Windows Phone 8. WinRT is part of Windows 8 Operating System.

Can existing .NET apps built on win xp or win 7 can we executed in win 8

Yes existing .NET apps can run on Windows 8 as desktop applications. There are two kinds of apps run on Windows 8. They are Metro/Windows Store Apps and Desktop apps. Any existing .NET apps from earlier version of Windows runs as desktop app on Windows 8

Is Silverlight supported on Windows 8 IE browsers?

No Silverlight is not supported on metro version of IE on Windows 8

Which Framework of .NET do we need for RadControls for Windows 8

RadControls for Windows 8 are supported on version 4.5

Can we use RadControls for Windows 8 in MVVM architecture?

Yes you can use them in App creating using MVVM architecture.

Can we sort the column in RadDataGrid control?

Yes sorting is implemented by default. On clicking column headers you can sort a column

In case we purchase rad controls today for $599, after august will we be eligible to get addition controls.if yes, do we need to pay more?

If you buy now you need to pay $599 and you will get all controls getting added till August. You do not need to pay anything extra then

Does grid support combobox, checkbox at cell level?

Yes you can add them. You can add any controls in TemplateColumns.

Is it possible to retrieve data from Windows Azure and result will display in Chart Rad Controls?

Yes you can retrieve data from Windows Azure. There are many options by which you can connect with Windows Azure

  • Creating a Service layer and accessing Windows Azure Services via Service
  • Using Windows Azure Mobile Services
  • Windows Azure SDK for Windows 8

Can we use ado.net or asp.net web api instead of wcf for linking to database?

Yes you can use ASP.NET Web API but you cannot use ADO.Net directly in Windows Store apps

Also, we had promised to attentive members from the audience will get our Telerik Ninja t-shirt. Well here are 2 winners we picked:

  1. Jaffar A
  2. Pramod Gupta

Congratulations to the winners and we will be getting in touch with you soon. Hope you liked this webinar and we hope to see you back in our future webinars.

Download Demo Codes of Webinar

Learn more about RadControls for Windows 8

Download Trial version

image

Advertisement

Visit Telerik booth at GIDS 2013 and win tablets

Posted by

0

image

We are excited to share that Telerik India will be present at Great Indian Developer Conference. We will be around for all three days. We request you to visit our booth.

image

Along with technical presentations and discussions, we will give away 1 Micromax tablet in raffle daily.

image

Do not forget to visit our booth,

  • To gain knowledge on various technology trends
  • To know and learn more about various Telerik products
  • To get cool Ninja T-Shirts
  • To get a chance to win one Micromax tablet

We are helping GIDS by creating apps for the event as well. We have created apps for iPhone and Android devices.

Download apps for iPhone from here

Download apps for Android devices from here

We are excited to see you at GIDS.

Resources for webinar on “Easy Agile Project Management with TeamPulse”

Posted by

0

On April 18th, we had a full house during our discussion on Agile methodologies and a concrete implementation with Telerik TeamPulse. We were overwhelmed with the queries put forth by the attendees. If you would like to review the presentation, we have provided the same below:

And if you are someone who wants to stay ahead of the curve in the Agile space, we have some  breaking news.  A preview of the next version of TeamPulse (TeamPulse R1 2013) is now available as public Beta. Feel free to take a look if you are interested: http://bit.ly/tp-demo

imageThe FAQs from the webinar are as follows:

Q: on which platform it should work?

A: It will work on any platform. It is web application running in browser. Some screens are not supported on mobile devices as of now.

Q: The properties – are they customizable…can we add / modify / or delete?

A: Certain properties for the requirements are customizable for example you can change what appears in the drop downs for Maturity, Certainty, etc. You cannot change the names of the labels. This is done by modifying the project template.

Q: can we track multiple projects at the same time?

A. We offer a cross project view that allows you to track multiple projects

Q: can PO be the BA ?

A.  PO is responsible for:

  1. Maintaining the backlog
  2. Representing client interests in the Scrum team and get buy ins from various stakeholders

If BA can accomplish the above two, he/ she can act as PO too. Generally, PO is someone from the client side.

Q: is it mandatory to use TFS with the Team pulse?

A: TeamPulse can be used as a stand alone too. It is not necessary to use TFS for project management. If you have already invested in TFS – you can integrate with it.

Q: so where i have to use agile?

A: Where to use Agile – its up to you and your team. Agile is developmen methodology that industry is leaning to. Short sprints i.e. ideally a 15 days to 30 day sprints, where you work on a requirement and make sure you finish it to a done state. so its upto you if you want to go the Agile way or Waterfall model.

Q: what is TFS??

A: Microsoft Team Foundation Server – a source control from Microsoft ~Lohith

Q: even for new product there is a backlog..?

A: Can you please elaborate on this ?

Q: is the sprint scope defined by Scrum master or PO?

A: The sprint scope should be decided by the team based on their capability. It is important to know your team velocity so that you can deliver what you can promise. Buy in from PO is important too. Scrum Master is there to facilitate things.

Q: is some kind of automated integration available in teampulse for other telerik products?

A: TeamPulse integrates beautifully with Telerik Test Studio for bug management. While TeamPulse is built using Telerik controls, the cross project view is built using Kendo UI.

Audience Question:

Q: why the product backlog decided in the begining of the project??

A: In Agile Methodology – you identify the requirements or user stories upfront and create a log of that. That simply put becomes product backlog and once you achieve all the backlogs – you will have built your product. so thats why you define your requirements upfront. Thats one of the core agaile principles.

Q: please listout some scrum metrics

A. We offer burn down reports, velocity reports for individual projects and across projects. We also offer timesheet views and productivity views for individual team members.

Q: Do we have any video sessions for the Team Pulse?

A: We have what we call – Telerik TV – http://tv.telerik.com/products/teampulse. Here you can find short focused videos done by evangelists. This is a free public site. no registration required.

Q: Is there any option to track the retrospective out comes? so the team and scrum master can ensure that the retrospective points are addressed.

A. We have issues and risk to track retrospective outcomes

Q: Could Scrum be implemented in production support project?

A. While Scrum can be used in production support projects, Kanban is frequently used for this. TeamPulse can be used for managing Kanban projects as well.

Q: how we manage if task cannot be completed in a given sprint?

A: If the task hasn’t been started, the task should be assigned to the next iteration.

Q: can we do a migration from TFS 2012 to teampulse?

A: Yes we can. We now support TFS. take a look at this : http://www.telerik.com/agile-project-management-tools/tour/integrations.aspx

Q: Do you have some sort of mechanism to mark the user story as broken when a bug is associated to an user story?

A. Yes, it is displayed on the board that there is a bug or blocking bug. If blocking it will identified by red colored icon.

Q: if that is a new project….even then we have the backlog?

A: Yes. normally you will start with a product backlog. Then pull items to sprint backlog.

Q: how the roles will be assigned and mapped to each project ?

A. TeamPulse offers built in groups and the ability create new custom group. Such custom groups can be assigned the desired permissions in a project.

Q: We know in an agile environment, we need to respond to changes. What kind of change management process to be implemented for cost control?

A. None currently.

Q: looks like tfs can do pretty much all of these things. What advantages does this have over TFS?

A: TFS cannot give you metrics in terms of charting/gauging. You need Reporting Services along with it. And customization of those reports are not easy. TFS was not built as a project management tool – its more of a source control and task maintenance. With TeamPulse you can do project management and get health of multiple projects in one shot – which is not possible with TFS. If you are already invested in TFS, we add value as a complement to TFS rather than as a replacement. More  features can be read here http://www.telerik.com/agile-project-management-tools/tour/overview.aspx

Q: Does it have some sort of notification to the task owner if any associated issues/Impediment is resolved by the scrum master? or the scrum master will get the update?

A. He can through our notification system but he will need to configure what types of notifications to receive. There are some limitations.

Q: agile is a framework?

A: Yes, it is a framework as it makes recommendations. Scrum and Kanban are specific implementations of this framework.

Q: How about the interface to manage the issue management – if we are using some other tool on the same?

A: At the moment we support only integration with TFS.

Q: Can we use Teampulse for teams working across geographies?

A: Yes. TeamPulse is an ideal solution for such teams. This is a web application and so anybody can log in from anywhere. However, the teams needs to understand the Scrum process well.

Q: What database the TeamPuse connects with?

A. MS SQL Server 2008 or above. SQL express is also supported

Q: In the test management, there was one topic called traceability. What is it?

A: Traceability lets you trace different things like for a bug – in which sprint was it logged, what was the check in against that bug, which backlog item was that .. etc.

Q: When you create a task i could see Given, When and Then statements in it. Does it have any support to BDD?

A. No, the only BDD like item that provide is our acceptance criteria for stories and bugs but not on the task level.

Q: What all support does it have for the process compliance? do we have any reports specific for the quality delivery group?

A. None

Q: Can we do a migration of data from JIRA/TFS 2012 to teampulse?

A: At the moment we support only TFS.

Q: How can priority be assigned to a task?

A. You set priorities by dragging and dropping the order they should be completed in. So, a task on the top of the list gets more priority than the one of the bottom. While creating your Sprint backlog, it is important to start looking from the top.

Q: Is there any metric to measure regression caused in a sprint?

A. None

Q: how do we maintain the hierarchy of user roles? Do we have any such hierarchy?

A. With Personal you can link them to specific relationships

Q: Can we configure the list of work items that need to be completed as part of a user story? This is just for tracking its completion?

A. Yes through creating Tasks in a user story.

Q: Does TeamPulse integrate with JIRA?

A: At the moment no. We have integration with TFS only.

Q: do we have a desktop plugin version of this tool ? some environments may not have access outside intranet?

A. It’s a web application that is self-hosted on your server. So, the access can be restricted to the sub-set of people you desire.

Q: Can we handle restricted story points? Visible only to specific people?

A. No. All stories are visible to all team members. One of the key tenants of Agile is transparency throughout the team.

Q: once an epic is split into sprintable units, what do you do with the original epic? Do you keep it with the stories until all are done? Do you retire them into some kind of epic archive? Do you just delete them?

A. No, we can only show the relationship

Q: Can I check resource assignments using team pulse…like resource utilization etc?

A: Yes. we give you resource utilization metrics built on time sheets.

Q: How would we arrive at the velocity of the team?

A: Tam Velocity = Story or Tasks completed in a sprint

Q: the project status looks cool. Burn down chart is a really nice addon over TFS.

A: Thank you. Glad you like it.

Q: Is project manager and team leads both can see how many release are planned for particular month?

A: Yes.

Q: Does Teampulse comes with Tereik Test studio or similar?

A: TeamPulse is a separate product from Telerik. So it has a separate license. http://www.telerik.com/agile-project-management-tools/pricing-and-licensing.aspx ! http://www.telerik.com/agile-project-management-tools/pricing-and-licensing.aspx

Q: Is Team pulse compatible with Jira/ Clearcase/ Clearquest?

A: TeamPulse currently integrates with TFS.

Q: Where does the tool store all its metadata? Does it work on client-server relationship?

A. All data is stored on the SQL Database, a local XAP file is cache locally but no meta data is passed and stored in session

Q: Will developer daily need to update the story board?

A: As a best agile practice – you should burn your days hours. 🙂

Q: Is teampulse accessible via internet?

A: You can have a trial version of TeamPulse hosted by us for 30 days. You can quickly set it up at: http://telerik.com/agile-project-management-tools/try-now.aspx

Currently there is no SaaS offering available.

Q: can we assign the tasks to individuals in Teampulse.

A: Yes.

Q: Didnt see a log where we can have the daily meeting minutes entered so that it can be reviewed and the end of the sprint?

A. All requirements have a comments area that is threaded and could be used for this purpose

Q: Can we handle multiple project? and multple team?

A: Yes. we support cross project views. meaning – as a manager you can set up your dashboards to see health of more than 1 project.

Q: I believe the key behind agile is having all the learning experience documented for future reference and better sprint planning do we have any such features here?

A. Issues can be have a resolutions added to them and associated with a time line such as iteration or simply tag for future retrieval.

Q: How to login access to tempulse?

A: Currently, TeamPulse is a self hosted solution. It can be integrated with your Active Directory environment or can have separate login credentials.

Q: Project Management Reports is export them as PDF, Excel ?

A: Yes

Q: is it multilingual? can it be used in other language like spanish ?

A. No. Although comments, user stories etc can be put in any language. You can only localize our feedback portal.

Q: what are the process template available in Teampluse?

A. Scrum for Team System v 2 and 3, MS Agile, CMMI and Scrum and our own TeamPulse template You also have the ability to change any template.

Q: Does it support Kanban dashboard?

A: yes. WIP is supported.

Q: is the api available for teampulse?

A. Only for time tracking and an Odata layer for the rest of the application

Q: As a Customer can a person log a bug or enhancement by Email in TeamPulse?

A: Not by default. However, integration points are available.

API for time tracking as well TFS sync and hook from our testing suite Test Studio to capture acceptance criteria

If you have scrolled down to read this, you are obviously looking for the winners of the cool Telerik T-Shirt. Though we had only planned for 2 giveaways, we felt humbled by the engagement during the webinar. We have decided to giveaway 5 T-Shirts for this webinar. We are pleased to announce the winners of the same as the below:

  1. Suman Chatterhee, Symphony
  2. Suresh Subramanian, CTS
  3. Harris Vincent, CSC
  4. Jayachandran P, CTS
  5. Salil Bhatnagar

The winners have been contacted directly and the prize will be shipped to them shortly.

Feel free to post your query in the comments section below.

Windows Azure Mobile Services Data and Telerik RadDataGrid: Two good things together

Posted by

3

Learn more about Rad Controls for Windows 8 here

Recently I was in a Windows Azure event for local user group. Attendees were very excited about Windows Azure Mobile Services. When I discussed with them how more immersive and user friendly it could be working with data from Windows Azure Mobile Service Table in Telerik RadDataGrid, they got more excited. In this post we will go very basic and learn basic required steps to fetch data from Mobile Service Data Table in RadDataGrid.

image

If you are new to Mobile Services and Windows Store App development then before you proceed in this post, I recommend you to read these two posts

Step by Step working with Windows Azure Mobile Service Data in XAML based Windows Store Apps

Three Steps to work with RadDataGrid in XAML based Windows Store Application

Video: Getting started with RadDataGrid in XAML based Windows Store Application

Mobile Service Data Table

You can view all Windows Azure Mobile Services and tables by login to Windows Azure Management Portal.

We are going to display data from techbloggers table. I have created this table in Windows Azure Mobile Service as shown below. There are three columns in table. We will display content from techbloggers Mobile Service table in RadDataGrid.

image

We need App URL and key. You need key and application URL to work with Mobile Services from Windows Store application. You will find key and application URL at the portal.

image

Creating Windows Store App

Very first you need to install Windows Azure SDK for Windows 8. You can download that from here . After installing make sure that you have installed RadControls for Windows 8. You can download trial from here

Now go ahead and create a Windows Store App by choosing Blank App project template from Windows Store project tab. After project being created add Rad Controls for Windows 8 reference and Windows Azure Mobile Services Managed Client reference in the project. To add reference right click on Reference in project and select Add Reference.

image

After adding reference on XAML add namespace on MainPage.xaml to work with RadDataGrid


xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"

Next add following namespaces on MainPage.xaml.cs to work with Mobile Services client.


using Microsoft.WindowsAzure.MobileServices;
using System.Runtime.Serialization;

Next you need to create entity class representing table from the Windows Azure Mobile Service. Let us create entity class as following. We are creating entity class TechBloggers.


public class TechBloggers
 {
 public int id { get; set; }
 [DataMember(Name = "name")]
 public string Name { get; set; }
 [DataMember(Name = "technology")]
 public string Technology { get; set; }

}

After creating entity class go ahead and add following global variables.


MobileServiceClient client;
IMobileServiceTable<TechBloggers> bloggerstable;

Once global variable is defined in the constructor of page you need to create instance of MobileServiceClient and MobileServiceTable. Let us go ahead and create that in constructor of the page.


public MainPage()
 {

 this.InitializeComponent();
 MobileServiceClient client = new MobileServiceClient("https://youappurl", "appkey");
 bloggerstable = client.GetTable<TechBloggers>();
 }

Next you need to put RadDataGrid on XAML and bind it to data source. RadDataGrid can be created as following


<telerik:RadDataGrid x:Name="BloggerGrid" />

Next you need to bind RadDataGrid to List of Bloggers. List of Bloggers will be fetched from Mobile Service data table. You can do this as following.


protected async override void OnNavigatedTo(NavigationEventArgs e)
 {
 var items = await bloggerstable.ToListAsync();
 this.BloggerGrid.ItemsSource = items;
 }

Next go ahead and run application. You will get records from Mobile Service table bind to RadDataGrid.

image

These are basic steps to fetch data from Windows Azure Mobile Services Table Data and display in RadDataGrid. In further posts we will get into further details of working with these two together. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

You love us now please vote for Telerik Products in GIDS 2013

Posted by

0

image_thumb[2]

I am very happy and excited to share with you that Telerik Products have been nominated in different categories in GIDS 2013 . We have been nominated in 7 different categories.

Vote Here

Telerik Products are nominated as follows, Please browse to question numbers as given below tp vote for your beloved Telerik Products. Navigate here to vote

Telerik TeamPulse is nominated under Collaboration Solution category. To vote for this select this option in Question number 2.

clip_image001_thumb[2]

 

Telerik Sitefinity CMS is registered under Content Management category. To vote for this select this option in Question number 3.

clip_image003_thumb[2]

Telerik TeamPulse is nominated under Change and Configuration Management category. To vote for this select this option in Question number 5.

clip_image005_thumb[2]

 

Telerik TestStudio is nominated under Testing category. To vote for this select this option in Question number 6.

clip_image006_thumb[2]

Telerik KendoUI is nominated under Web Development category. To vote for this select this option in Question number 8.

clip_image007_thumb[2]

 

Telerik Icenium is nominated under Mobile Development category. To vote for this select this option in Question number 9.

clip_image009_thumb[2]

 

Telerik Devcraft is nominated under Framework category. To vote for this select this option in Question number 10.

clip_image010_thumb[2]

Your love and support will help us to build better products. Take few minutes out and Navigate here to vote.

We are committed to help you in “Delivering More Than Expected “. You may have further query feel free to reach me at dhananjay.kumar@telerik.com

Join me for webinar on 25th April 2013: Create faster Enterprise Apps for Windows 8 and win Telerik Ninja T-shirt

Posted by

1

Learn more about Rad Controls for Windows 8 here

If you are a Windows Store App developer and want to quickly create Enterprise App then this webinar is for you.

Register here to attend webinar

image

You will learn to create Enterprise App harnessing goodness of DataGrid in this webinar.

image

We will follow following agenda in webinar ,

  • Introduction of RadControls for Windows 8
  • First look of all RadControls
  • Setting up environment to work with RadControls for Windows 8.
  • Getting started with RadDataGrid
  • Working with different kinds of columns in RadDataGrid
  • Working with Services in RadDataGrid
  • Charts in RadDataGrid
  • Grouping and Filtering in RadDataGrid.

Register here to attend webinar

In this webinar we will focus on Data Grid along with other controls. During webinar we will be selecting two active participants from the webinar and sending them the much in demand Telerik Ninja T-Shirt. You will be coming, right?

image

Register here to attend webinar

Learn more about Rad Controls for Windows 8 here

See you in webinar, If you have any query reach me at dhananjay.kumar@telerik.com

How to work with Images in RadDataGrid in XAML based Windows Store Application

Posted by

0

Learn more about Rad Controls for Windows 8 here

Before you start with this post I recommend you to read following blog posts to get it started with RadDataGrid.

Video: Getting started with RadDataGrid in XAML based Windows Store Application

Three Steps to work with RadDataGrid in XAML based Windows Store Application

In this post we will take a look on working with Images as column value in RadDataGrid. As we discussed in this post that there are two types of columns in RadDataGrid.

image

To work with images we need to work with TemplateColumns. TemplateColumn uses DataTemplate to define content of column. To start with let us create business class Product. We will display collection of Products in RadDataGrid. Product class is defined as following. Along with other properties there is a property of Product Image. ProductImage property will hold URL of Image to be displayed for each Products.


public class Product
 {
 public string ProductName { get; set; }
 public double ProductPrice { get; set; }
 public string ProductType { get; set; }
 public BitmapImage ProuctImage { get; set; }
 }

Next let us create collection of Products locally. GetProducts function will return list of Products. We will bind this function as ItemSource of RadDataGrid.


private List<Product> GetProducts()
 {
 List<Product> lstProduct = new List<Product>()
 {
 new Product
 {
 ProductName = "Pen",
 ProductPrice = 100,
 ProductType = "Education",
 ProuctImage = new BitmapImage(new Uri("/ProductImages/Pen.jpg",UriKind.Relative))
 },
 new Product
 {
 ProductName ="Pencil",
 ProductPrice = 50,
 ProductType = "Education",
 ProuctImage = new BitmapImage(new Uri("/ProductImages/Pencil.jpg",UriKind.Relative))

 },
 new Product
 {
 ProductName ="Math Book",
 ProductPrice = 345,
 ProductType = "Education",
 ProuctImage = new BitmapImage(new Uri("/ProductImages/Mathbook.jpg",UriKind.Relative))

 },
 new Product
 {
 ProductName ="Ball",
 ProductPrice = 23,
 ProductType = "Sports",
 ProuctImage = new BitmapImage(new Uri("/ProductImages/Ball.jpg",UriKind.Relative))

 },
 new Product
 {
 ProductName ="Cricket Bat",
 ProductPrice = 560,
 ProductType = "Sports",
 ProuctImage = new BitmapImage(new Uri("/ProductImages/Cricketbat.jpg",UriKind.Relative))

 },
 new Product
 {
 ProductName ="Baseball Bat",
 ProductPrice = 550,
 ProductType = "Sports",
 ProuctImage = new BitmapImage(new Uri("/ProductImages/Baseballbat.jpg",UriKind.Relative))

 },
 };
 return lstProduct;
 }

As of now we have data source in place. Next we need to create RadDataGrid. After creating RadDataGrid we will create DataGridTemplateColumn with DataTemplate. To create RadDataGrid with image as one of the column value we need to follow following steps inside RadDataGrid.

Step 1: Create DataGridTemplateColumn

Step 2: Create DataGridTemplateColumn.CellContentTemplate

Step 3: Create DataTemplate and put Image inside this

We can create RadDataGrid Column with Image in column value as following,

image

We can create columns for each properties in the same way we created for ProductImage property. Final RadDataGrid with columns can be created as following,


<Page
 x:Class="RadDataGridProductDemo.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:RadDataGridProductDemo"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"
 mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <telerik:RadDataGrid x:Name="ProductGrid" AutoGenerateColumns="False">
 <telerik:RadDataGrid.Columns>
 <telerik:DataGridTemplateColumn Header="Name" >
 <telerik:DataGridTemplateColumn.CellContentTemplate>
 <DataTemplate>
 <TextBlock Text="{Binding ProductName}"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"/>
 </DataTemplate>
 </telerik:DataGridTemplateColumn.CellContentTemplate>
 </telerik:DataGridTemplateColumn>
 <telerik:DataGridTemplateColumn Header="Photo" >
 <telerik:DataGridTemplateColumn.CellContentTemplate>
 <DataTemplate>
 <StackPanel>
 <Image Source="{Binding ProductImage}"
 Height="100"
 Width="100" />
 </StackPanel>
 </DataTemplate>
 </telerik:DataGridTemplateColumn.CellContentTemplate>
 </telerik:DataGridTemplateColumn>
 <telerik:DataGridTemplateColumn Header="Price" >
 <telerik:DataGridTemplateColumn.CellContentTemplate>
 <DataTemplate>
 <TextBlock Text="{Binding ProductPrice}"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"/>
 </DataTemplate>
 </telerik:DataGridTemplateColumn.CellContentTemplate>
 </telerik:DataGridTemplateColumn>
 <telerik:DataGridTemplateColumn Header="Type" >
 <telerik:DataGridTemplateColumn.CellContentTemplate>
 <DataTemplate>
 <TextBlock Text="{Binding ProductType}"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"/>
 </DataTemplate>
 </telerik:DataGridTemplateColumn.CellContentTemplate>
 </telerik:DataGridTemplateColumn>

 </telerik:RadDataGrid.Columns>
 </telerik:RadDataGrid>
 </Grid>
</Page>

Now go ahead and run application. You will find Product Images as one of the column value.

image

In this way you can work with Images as column value in RadDataGrid. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

Kendo ColorPicker Wrapper for ASP.NET MVC

Posted by

2

Overview:

This is the eight post in the series on Kendo UI wrappers for ASP.NET MVC. We will look at one more wrapper in this post namely Color Picker. This post is part of a getting started with Kendo UI wrappers for ASP.NET MVC and you can find the index post here.

What is ColorPicker Wrapper?

The ColorPicker is a drop-down widget for selecting colors. It’s designed to replace a HTML5 <input type="color"> field, which is not yet widely supported in browsers. ColorPicker widget provides a user-friendly interface for picking colors.

image

Fig 1: ColorPicker Widget

ColorPicker wrapper is just a kendo helper for ASP.NET MVC.

Basic Usage:

In order to use the ColorPicker widget on any page, we will use the ColorPicker wrapper or helper available as part of the kendo wrappers. Following is the code to create a color picker on any page. Note that Name() is a mandatory setting for the color picker. Without setting the name we will get an exception which will tell that name is not set.

@(
Html.Kendo().ColorPicker()
.Name("picker")
)
view raw KendoUI-ColorPicker.cshtml hosted with ❤ by GitHub

Here is the output of the above code:

image

Fig 2: Color Picker Basic Usage

Color Palette:

We can customize the color palette that is displayed in the color picker drop down. The wrapper provides Palette() configuration method which accepts the palette. There 2 ways of providing the palette. They are:

1. ColorPickerPalette Enumeration:

We can pass enum called ColorPickerPalette to Palette() method of the widget. The enum supports Basic, None and WebSafe palette. Here is the code for setting the palette:

@(
Html.Kendo().ColorPicker()
.Name("kPickerBasic")
.Palette(ColorPickerPalette.Basic)
)
view raw KendoUI-ColorWidgetPalette.cshtml hosted with ❤ by GitHub

Here is the output of setting palette to Basic, WebSafe and None:

image

Fig 3: Basic Color Palette

image

Fig 4: Web Safe Palette

image

Fig 5: No Palette

2. Provide Palette as Array

We can pass a string array to Palette() method which should contain the hex codes of the colors we want to show in the palette. Here is the code to do this:

@(
Html.Kendo().ColorPicker()
.Name("kPickerBasic")
.Palette(new string[] {
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
})
)
view raw KendoUI-ColorPickerCustomPalette.cshtml hosted with ❤ by GitHub

And here is the output of the code changes:

image

Fig 6: Custom Palette

Custom Color Tile Size:

So far we have seen how the color picker works and what palettes it supports. One thing to notice in palettes is the size of the individual color tiles. It looks small. What if we wanted a bigger tile? The wrapper supports a TileSize() configuration method which takes in an integer. Here is a code set the tile sizes of the color palette:

@(
Html.Kendo().ColorPalette()
.Name("color-chooser")
.Palette(new string[] { "#ddd1c3", "#d2d2d2",
"#746153", "#3a4c8b",
"#ffcc33", "#fb455f",
"#ac120f" })
.Value("#ffcc33")
.TileSize(30)
)
view raw KendoUi-ColorPickerCustomTileSize.cshtml hosted with ❤ by GitHub

Here is the output of above code changes:

image

Fig 7: Custom Color Tile Size

Accessing control on client:

So far we have seen how to instantiate a control with the helpers. And since the Kendo controls are all client side, lets take a look at how to get the control using JavaScript code. Kendo controls are HTML5 compliant so we make use of HTML5 attributes like “data-“ and construct our controls. You can use the jquery data() method to get to an already instantiated control. Here is the code snippet for the same:

<p>
@(Html.Kendo().ColorPalette()
.Name("color-chooser")
.Palette(new string[] { "#ddd1c3", "#d2d2d2",
"#746153", "#3a4c8b",
"#ffcc33", "#fb455f",
"#ac120f" })
.Value("#ffcc33")
.TileSize(30)
)
</p>
<script>
$(document).ready(function () {
var colorPicker = $("#color-chooser").data("kendoColorPalette");
var selectedColor = colorPicker.value();
});
</script>
view raw kendoui-colorpicker-clientside.cshtml hosted with ❤ by GitHub

Accessing & Setting Value from client side:

All kendo controls have rich client side API support. One of the api method is value() which lets you read the selected value and also set new value of the color picker. Here is the code:

<p>
@(Html.Kendo().ColorPalette()
.Name("color-chooser")
.Palette(new string[] { "#ddd1c3", "#d2d2d2",
"#746153", "#3a4c8b",
"#ffcc33", "#fb455f",
"#ac120f" })
.TileSize(30)
)
</p>
<script>
$(document).ready(function () {
var colorPicker = $("#color-chooser").data("kendoColorPalette");
colorPicker.value("#ffcc33");
var selectedColor = colorPicker.value();
});
</script>
view raw kendoyui-colorpicker-getsetvalue.cshtml hosted with ❤ by GitHub

In the above code – we just created the color picker using the server side helpers. On client side, after document has loaded, we grab the control, use the value() method to set a new value. And then use the same method to read back the selected value.

Handling Events:

Color Picker supports four events which can be handled on the client side. They are:

  • change: Fires when a color was selected
  • select: Fires when a new color is displayed in the drop-down picker
  • open: Fires when the picker popup is opening
  • close: Fire when the picker popup is closing

Here is the code wire up the events and JavaScript code for the handlers:

<p>
@(Html.Kendo().ColorPicker()
.Name("palette-picker")
.Value("#cc2222")
.Palette(ColorPickerPalette.Basic)
.Events(events => events
.Select("pickerSelect")
.Change("pickerChange")
.Open("pickerOpen")
.Close("pickerClose")
)
)
</p>
<script>
function pickerSelect(e) {
var selectedValue = e.value;
}
function pickerChange(e) {
var selectedValue = e.value;
}
function pickerOpen(e) {
//custom code
}
function pickerClose(e) {
//custom code
}
</script>
view raw kendoui-colorpicker-events.cshtml hosted with ❤ by GitHub

Summary:

Through this post we looked at yet another kendo wrapper for MVC namely Color Picker. Using color picker is as easy as settings some configuration methods and the rest is done by the helper for you. Hope this excites you to test out Kendo UI in your projects.

Till next time, Happy Coding.

How to set Column Header Style of RadDataGrid in XAML based Windows Store Application

Posted by

0

Learn more about Rad Controls for Windows 8 here

RadDataGrid is most important RadControl to create enterprise based Windows Store Application. Currently I have been writing on RadDataGrid and you can read previous two posts at below link,

Part 1: Three Steps to work with RadDataGrid in XAML based Windows Store Application

Part 2: Working with Columns width in RadDataGrid in XAML based Windows Store Application

In this post we will take a look on setting Column Header Style. You can set column header style by configuring value of

image

To start with first you need to add following references on XAML.


xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"
xmlns:telerikgridrimitives="using:Telerik.UI.Xaml.Controls.Grid.Primitives"

After adding reference Create RadDataGrid as following. Make sure AutoGenerateColumns property is set to false


<telerik:RadDataGrid
 x:Name="ProductGrid"
 AutoGenerateColumns="False"
 Width="500">
</telerik:RadDataGrid>

After this you need to manually create columns. Create RadDataGrid.Columns inside RadDataGrid.

image

After creating RadaDataGrid.Columns you need to create RadDataGrid.Columns. In columns you can set

  1. Header : Set value of header text
  2. Width : Fixed width of the column
  3. PropertyName : Set this as property name of business object you want to display in this column.

image

In DataGridTextColumn you need to set HeaderStyle. That can be done as following. In below code we are setting

  1. Header Background
  2. Header Fontstyle
  3. Header Fontsize

image

So putting all together you can create RadDataGrid with customized column header as following


<telerik:RadDataGrid
 x:Name="ProductGrid"
 AutoGenerateColumns="False"
 Width="500">
 <telerik:RadDataGrid.Columns>

<telerik:DataGridTextColumn
 PropertyName="ProductName"
 Header="Name"
 Width="200">
 <telerik:DataGridTextColumn.HeaderStyle>
 <Style
 TargetType="telerikgridrimitives:DataGridColumnHeader">
 <Setter Property="Background" Value="SaddleBrown"/>
 <Setter Property="FontStyle" Value="Italic"/>
 <Setter Property="FontSize" Value="20"/>
 </Style>
 </telerik:DataGridTextColumn.HeaderStyle>
 </telerik:DataGridTextColumn>

 <telerik:DataGridTextColumn

 PropertyName="ProductPrice"
 Header="Price"
 Width="50"/>
 <telerik:DataGridTextColumn
 PropertyName="ProductType"
 Header="Type"
 Width="150"/>
 <telerik:DataGridTextColumn
 PropertyName="InStock"
 Header="In Stock"
 Width="100">
 <telerik:DataGridTextColumn.HeaderStyle>
 <Style
 TargetType="telerikgridrimitives:DataGridColumnHeader">
 <Setter Property="Background" Value="Blue"/>
 <Setter Property="FontStyle" Value="Oblique"/>
 <Setter Property="FontSize" Value="20"/>
 </Style>
 </telerik:DataGridTextColumn.HeaderStyle>
 </telerik:DataGridTextColumn>

</telerik:RadDataGrid.Columns>
 </telerik:RadDataGrid>

On running application you will get RadDataGrid with styled column header as following

image

In this post we used some of the discussion from last post so did not discuss about binding and Product class in earlier part of this post. However For your reference find definition of business class Product below


public class Product
 {

 public string ProductName { get; set; }
 public double ProductPrice { get; set; }
 public string ProductType { get; set; }
 public bool InStock { get; set; }
 }

ItemSource of RadDataGrid is set as below,


protected override void OnNavigatedTo(NavigationEventArgs e)
 {

this.ProductGrid.ItemsSource = GetProducts();
 }

GetProducts() class is defined as below,


private List<Product> GetProducts()
 {
 List<Product> lstProduct = new List<Product>
 {
 new Product
 {
 ProductName ="Pen",
 ProductPrice = 100,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Pencil",
 ProductPrice = 50,
 ProductType = "Education",
 InStock = false
 },
 new Product
 {
 ProductName ="Math Book",
 ProductPrice = 345,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Ball",
 ProductPrice = 23,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Cricket Bat",
 ProductPrice = 560,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Baseball Bat",
 ProductPrice = 550,
 ProductType = "Sports",
 InStock = false
 },
 };

return lstProduct;
 }

In this way you can work with column header style. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

Working with Columns width in RadDataGrid in XAML based Windows Store Application

Posted by

2

Learn more about Rad Controls for Windows 8 here

In last blog post we learnt to work with RadDataGrid in three simple steps. In this post let us have a look on how we could work with Columns in RadDataGrid. Before we move ahead and understand how to work with columns width and columns header, let us have some understanding on columns in RadDataGrid. There are two kinds of columns in RadDataGrid.

image

TextColumn renders each cell value as System.String object whereas TemplateColumn renders as DataTemplate. In this post we will focus our discussion on TextColumn. It inherits DataGridColumn.

It got following important properties

  1. Header
  2. HeaderStyle
  3. SizeMode
  4. Width
  5. SortDirection

image

We will use Product business object from LAST POST . You will notice in output of last post that RadDataGrid columns were taking default width. Width of column was stretched to maximum. We got output as following

image

Now if you want to set width of each columns you need to follow following steps

Make sure AutoGenerateColumns property is set to false

image

After this you need to manually create columns. In column creation you need to set width of the column. Create RadDataGrid.Columns inside RadDataGrid.

image

After creating RadaDataGrid.Columns you need to create RadDataGrid.Columns. In columns you can set

  1. Header : Set value of header text
  2. Width : Fixed width of the column
  3. PropertyName : Set this as property name of business object you want to display in this column.

image

So putting all together you can create fixed width text column in RadDataGrid as following. We have XAML from previous post. Modified XAML with fixed column width is as following


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <telerik:RadDataGrid
 x:Name="ProductGrid"
 AutoGenerateColumns="False"
 Width="500">
 <telerik:RadDataGrid.Columns>

<telerik:DataGridTextColumn
 PropertyName="ProductName"
 Header="Name"
 Width="200"/>
 <telerik:DataGridTextColumn
 PropertyName="ProductPrice"
 Header="Price"
 Width="50"/>
 <telerik:DataGridTextColumn
 PropertyName="ProductType"
 Header="Type"
 Width="150"/>
 <telerik:DataGridTextColumn
 PropertyName="InStock"
 Header="In Stock"
 Width="100"/>
 </telerik:RadDataGrid.Columns>
 </telerik:RadDataGrid>
 </Grid>

On running application you will get RadDataGrid with fixed column width as following

image

Other important property of column is SizeMode. This property can be set with following three values

image

  1. Width property takes effect only when SizeMode is set to Fixed.
  2. If SizeMode is set to Auto then column takes only width which is required. It overrides value of width.
  3. If SizeMode is set to Strech then column will override width value and stretch to all available space.

image

If you modify above RadDataGrid with setting SizeMode property of fourth column as Auto then RadDataGrid will render as following

image

In this post we used some of the discussion from last post so did not discuss about binding and Product class in earlier part of this post. However For your reference find definition of business class Product below


public class Product
 {

 public string ProductName { get; set; }
 public double ProductPrice { get; set; }
 public string ProductType { get; set; }
 public bool InStock { get; set; }
 }

ItemSource of RadDataGrid is set as below,


protected override void OnNavigatedTo(NavigationEventArgs e)
 {

this.ProductGrid.ItemsSource = GetProducts();
 }

GetProducts() class is defined as below,

private List<Product> GetProducts()
 {
 List<Product> lstProduct = new List<Product>
 {
 new Product
 {
 ProductName ="Pen",
 ProductPrice = 100,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Pencil",
 ProductPrice = 50,
 ProductType = "Education",
 InStock = false
 },
 new Product
 {
 ProductName ="Math Book",
 ProductPrice = 345,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Ball",
 ProductPrice = 23,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Cricket Bat",
 ProductPrice = 560,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Baseball Bat",
 ProductPrice = 550,
 ProductType = "Sports",
 InStock = false
 },
 };

return lstProduct;
 }

In this way you can work with column width. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

Three Steps to work with RadDataGrid in XAML based Windows Store Application

Posted by

7

Recently I was talking to Windows Store App Developers. When I show them demo of RadDataGrid , all they got very excited. One of the manager asked me to show working with RadDataGrid in simplest steps. In this post we will take a look on working with RadDataGrid in three simple steps.

Learn more about Rad Controls for Windows 8 here

Step 1: Add Rad Controls for Windows 8 reference

Go ahead launch Visual Studio and create a new Windows Store Application. Select Blank App project template to create application. After project being created add Rad Controls for Windows 8 reference in the project. To add reference right click on Reference in project and select Add Reference.

image

After adding reference on XAML add namespace to work with RadDataGrid


xmlns:telerik="using:Telerik.UI.Xaml.Controls.Grid"

Step 2: Create Business object

Next step you need to create business object. Let us create business objects for Product


public class Product
 {

 public string ProductName { get; set; }
 public double ProductPrice { get; set; }
 public string ProductType { get; set; }
 public bool InStock { get; set; }
 }

We will display Products in RadDataGrid. In real time scenario List of Products will be fetched from Services. For purpose of this post let us create List of Products as collection locally.


private List<Product> GetProducts()
 {
 List<Product> lstProduct = new List<Product>
 {
 new Product
 {
 ProductName ="Pen",
 ProductPrice = 100,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Pencil",
 ProductPrice = 50,
 ProductType = "Education",
 InStock = false
 },
 new Product
 {
 ProductName ="Math Book",
 ProductPrice = 345,
 ProductType = "Education",
 InStock = true
 },
 new Product
 {
 ProductName ="Ball",
 ProductPrice = 23,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Cricket Bat",
 ProductPrice = 560,
 ProductType = "Sports",
 InStock = true
 },
 new Product
 {
 ProductName ="Baseball Bat",
 ProductPrice = 550,
 ProductType = "Sports",
 InStock = false
 },
 };

return lstProduct;
 }

Step 3: Create RadDataGrid and bind with the datasource

In last step you need to put RadDataGrid on XAML and bind it to data source. RadDataGrid can be created as following


<telerik:RadDataGrid x:Name="ProductGrid" />

Next you need to bind RadDataGrid to List of Products. You can do that as following


this.ProductGrid.ItemsSource = GetProducts();

Run Application

On running application you will find RadDataGrid. You will notice that by default RadDataGrid supports sorting on columns

image

In these 3 simple steps you can start working with RadDataGrid in XAML based Windows Store Application. In further posts we will get into deeper concepts of RadDataGrid. I hope you find this post useful. Thanks for reading.

Learn more about Rad Controls for Windows 8 here

Webinar Recap: Easy HTML5 Data Visualization with Kendo UI DataViz

Posted by

0

Apr – May 2013 will see a series of webinar from Telerik India pertaining to Data Visualization, Team Pulse, Windows 8, SiteFinity, Windows Phone 8 and Kendo UI. If you are interested in any of these webinars do take a look at the following post: https://telerikhelper.net/2013/03/19/ninja-enough-telerik-india-webcasts-april-may-2013/.

On Apr 11 we delivered a webinar on HTML5 Data Visualization titled – “Easy HTML5 Data Visualization with Kendo UI DataViz”. This post is a recap of the webinar. As part of the webinar we discussed the following things:

  • What is Data Visualization ?
  • Why do we need Data Visualization ?
  • How do we do Data Visualization ?
  • What does HTML5 technology define for Data Visualization ?
  • Introducing Kendo UI DataViz
  • Demo

Here is the slide deck used for the webinar:

Here is the video recording of the webinar:

Easy HTML5 Data Visualization with Kendo UI DataViz from Telerik Helper on Vimeo.

During this webinar we had a lot of questions and I am trying to address them here:

  1. There are couple of free jquery plug-in available on the net. which do all these charts. how Kendo UI different from  them?
    Kendo UI aims at providing unified framework for HTML5 & JavaScript Apps/Sites. Kendo UI is all about HTML5 powered client side javascript frame work. The DataViz package of Kendo UI spits out the Charts/Graphs/Gauges using SVG technology on modern browsers and will render as VML on older browsers. So if you use Kendo UI DataViz to perform your data visualization rest assured that you are HTML5 complaint.
  2. Being a .Net developer why I should use HTML5 and not Silverlight for all this. same can  be achieved with Silverlight as well?
    The decision to use Silverlight or HTML5 will depend on the nature of the project. Silverlight is still a plugin based technology where as HTML5 is trying to standardize the web world with a common structure to be supported by all browsers.
  3. For running Silverlight applications , user has to download the runtime first. Is it the same for Kendo UI code?
    Kendo UI is a pure client side JavaScript framework. Kendo UI relies on Stylesheet and JavaScript. We have only one dependency and that is of Jquery. Apart from this nothing else is needed.
  4. Why we need to choose separate chart product – when asp.net charting can give the charting option?
    The charting option provided by ASP.NET as far as I know if not HTML5 based. Meaning the output of the chart/graph through ASP.NET charting is still Image based and does not use the HTML5 recommended SVG for output. Where as Kendo UI is a HTML5 compliant and outputs the charts/graphs as SVG on modern browsers and as VML on older browsers.
  5. Can we add Kendo UI references into the PHP project?
    Absolutely. Kendo UI is serer agnostic. Meaning it does not care what server side technology has been used. This is because Kendo UI is a client side JavaScript framework. And to use Kendo UI you only reference a couple of style sheets and scripts and you are up and running. For data you will need to make sure that you create JSON end points as Kendo UI works well out of the box with JSON and XML.
  6. Can we change the styles according to us?
    Yes very much. We provide an easy way to custom style all the Kendo UI widgets. We have an online theme builder for web and for mobile controls. For more information check out this page: http://demos.kendoui.com/
  7. Can we use Kendo on Windows 8 metro & mobile apps ?
    Kendo UI consists of 3 packages – Web, DataViz and Mobile. The Web can be used for Web Applications. Mobile controls can be used to develop Cross Platform Hybrid Mobile Apps. So Kendo UI Mobile Controls support Windows Phone. As of now we do not have support for Windows 8.
  8. can we use it for 3D, is there any support for that?
    We do not support 3D charting at the moment.
  9. Will this work on mobile browsers ?
    Since DataViz output SVG as the format for the chart/gauges, it can run on both desktop browsers and mobile browsers.
  10. Does the charts support Drill Down option?
    Drill-down functionality is not supported out of the box yet. However the chart exposes a seriesClick event which can be used instead. You can find a live demo here.
  11. In the demo shown, was usage of valueAxis , categoryAxis, tooltip…. are these syntax to use kendo ui or some sort of data…??
    These are the configuration settings you do on the Kendo UI DataViz objects and at runtime the chart is generated based on these settings.
  12. Can i use Kendo UI in my .net application instead of SSRS charts?
    Absolutely. You just need to make sure you provide an endpoint which can return JSON payload and the Kendo UI DataViz widgets can consume data and plot it.
  13. How do we know Kendo Chart options ? as you are passing some options to it. is there any full fledged docs ?
    The Kendo UI Documentation can be found at http://docs.kendoui.com. We have the API reference, Getting Started, Tutorials at the documentation site.
  14. Does this come with Samples?
    Yes. whether you download the trial or licensed version of Kendo UI – we ship the demo source code with it.
  15. can we populate the data from database and bind this data to kendo charts?
    Kendo UI is server side agnostic and does not care about what is the technology used for server side. Having said that the way Kendo UI works is – it can understand JSON or XML. So as long as data is passed as JSON/XML we don’t care about anything else. So you need to make sure that you create endpoint i.e. services which can return data in JSON or XML format. Kendo Widgets will be able to read data from those services out of the box.

Also, we had promised to attentive members from the audience will get our Telerik Ninja t-shirt. Well here are 2 winners we picked:

  • Ravi Gadag
  • Narendra Bisht

Congratulations to the winners and we will be getting in touch with you soon. Rest of you don’t loose heart. We have 5 more webinars in April and May and in each webinar we will be giving out 2 shirts each.

Hope you liked this webinar and we hope to see you back in our future webinars.

What is Test Oracle

Posted by

0

Test oracle determine that whether a test executed as expected or not. Essentially you can say test oracle is a mechanism to determine whether program, software or application got executed as expected for a particular Test Case or not? A test oracle may be either manual or automated.

Let us understand test oracle with an example. You are automating test of File Download Functionality. Downloading of file may take following steps

  • User will click on a Button
  • On click of button Operating System File Download dialog will open
  • User will select download location
  • File download will start

In above test case to verify successful download of file you may want to create a test oracle which will verify size of downloaded file on the file system. Hence in this case,

image

Test Oracle is very specific to a business scenario and probably tool may not able to automate this. Test Oracle can be written as Coded Step.

We can summarize Test Oracle as parameter which verify that whether application passed a test for a particular test case or not.

What is Document Object Model?

Posted by

3

While automating a test understating of DOM is very essential. Any tool read DOM to automate test. In this post we will try to understand what DOM is in simplest words. Tool sees whole page you are doing automation testing as DOM and searches, finds elements in DOM.

As of W3C definition: DOM stands for Document Object Model and it is a programming interface to manipulate a well formed HTML or a valid XML document. Here we will discuss DOM in context of HTML.

Technically, browsers create DOM after parsing the HTML. All browsers follow the specification given here to create the DOM. DOM created by Browsers can be accessed and manipulated by programming languages like JavaScript. Essentially, you can say that DOM connects web pages to programming languages.

image

DOM expose everything of the web page as objects to programming languages like JavaScript. Whether it is elements, events, styles etc. all are exposed as objects to JavaScript. Let us consider following HTML,

 

DOM will expose all the HTML elements as objects. These objects can be manipulated and updated by JavaScript.

image

In other words we can say that DOM is Application Programming Interface (API) which exposes HTML or XML as structured document to programming languages. This structure document can be manipulated by the languages like JavaScript. Above listed HTML can be exposed as following structured document by DOM.

image

DOM see a HTML document as tree. All elements can be seen as nodes of the tree. Attributes and value of elements can be seen as leaf of the tree.

Browsers generates DOM when it parses the HTML. For example, when you browse above HTML in browser it will parse the HTML and create DOM. You can view created DOM by pressing F12 in any mostly used browser.

image

I hope now you have descent understanding of DOM. You need understanding of DOM to automate test. I hope you find this post useful. Thanks for reading.