My favorite 5 Icenium features

Icenium Cloud based IDE got launched and I found this “one stop solution” to create Hybrid applications or Cross-platform application very impressive. While playing around Icenium, I liked almost every features in this Cloud based IDE. However below I am listing my favorite 5 features. In further post, I will discuss more features and step by step explanation to work with them.

 

image

 

Code Editor

Being a hybrid application developer, we need to write lot of HTML, JavaScript and CSS. Code Editor in Icenium is clean and elegant editor. It allows us to write codes without much distraction.

image

Just Code is integrated with Code Editor. In Code Editor, we can perform tasks like

  1. Refactoring
  2. Navigation
  3. Code Commands

image

 

We can perform Code Commands like

  • Formatting of Code
  • Expand selection
  • Duplicate a text
  • Put a block comment

 

image

 

The best part is, there is short cut for all the operation. In Navigation we can perform tasks like

  • Go To File
  • Go To Member
  • Go to Symbol

 

image

So my one of my favorite feature in Icenium is its elegant Code Editor.

 

Certificate Management

If you have created any Android application then you may be knowing that you need to have a certificate to create apk file. Icenium allows us to create and mange certificate right from the IDE.

 

image

Icenium provides two options to create a certificate,

  • Request for a certificate
  • Create self-signed certificate

 

image

Creating certificate right from the IDE is one of the cool feature.

Version Control

Icenuim provides complete version control solution for application development. We can work locally and can perform following tasks in Icenium

  • Compare the changes in between local and latest versions from the server
  • Commit the changes
  • Revert the changes
  • View the history log in the repository

 

image

 

We can compare changes, navigate from one change to another as shown in the below image.

 

image

We can view the

  • history
  • change sets
  • Conflict etc. as shown in the following image,

image

 

Icenium allows us to commit or revert the changes. While committing we need to provide comment for that particular change. We can commit as shown in below image,

 

image

Version control is one of the cool feature I got impressed while playing with Icenium.

Integration with github Repository

Yes you read it corectly , right from the IDE you can push and pull yor project to github repository. Icenium allows us to

  • Configure the repository
  • Pull from the repository
  • Push into the repository
  • Invite the Collaborators

image

The best part is that right from the IDE we can Invite Collaboratoes . Before pushing to github we need to commit the changes to resposiory . Commit comment will be displayed next in the github respository comment

 

image

 

Code sign ,Permissions and Publish of application

 

Right from Icenium IDE ,we can sign the code , configure the permissions and set the icons of the application.

 

image

 

In Icenium with a right click on the project , we can publish the application.

image

I hope you like these fetaure and you are all set to play around Icenium. Thanks for reading this post and I am looking very forward to share more learning on Icenium with you in furher post.

Advertisements

Question and Answers from “Performance and Load Testing with Test Studio” Webinar

I would like to thank everyone for attending webinar on “Performance and Load Testing with Test Studio”. Please find below answers of the questions come up in the webinar.

How to encrypt the password and please can you show us how to handle the parameterization?

Password encryption is set via the property panel for that test step.

image 

How to handle dynamic objects?

See the Video here

Can we do Performance test & Load test with third party application that do not run through browser

Test Studio support web applications. Other applications are not supported.

Test Studio is only for .NET testing not for the JAVA or other testing. Can it test standalone java application?

Test Studio will test any web, Silverlight, or WPF application. The web application can be written on any platform. Java, Ruby, .NET, Python, PHP, it doesn’t matter as long as HTML is sent across the wire.

How many computers we can select at one shot during performance testing

We support multiple computers. We’ve tested with large configurations.

Can we have test suites for the performance testing?

Yes. Test Lists may be created which focus on performance tests.

Can we have custom performance counters added?

Custom counters will be available if they are added through the Windows Performance counter infrastructure.

Describe how to identify the memory leakage using Telerik Test Studio

Memory leakage would be monitored by using performance monitor counters for memory usage. (Total available bytes, garbage collection, etc.)

What criteria would you use to select Web transactions for load testing?

If by “transactions” you mean use cases, then you want to select as many different ones as possible in order to model your site’s traffic as accurately as possible.

How to use Regular Expression in Load Runner for web functions

This webinar is about Telerik’s Test Studio. Please see HP for questions about Load Runner.

Can do the Regression Testing also by using Test Studio

Yes. Automated tests are perfect for regression testing.

What are Performance Testing and Load Testing?

See How Telerik Test Studio helps in Load Testing

See How Telerik Test Studio helps in Performance Testing

image

Performance Testing

Performance Testing is being performed to measure smoothness and readiness of the application. While creating an application the vital factors should be kept in mind are as follows

  • Speed of the application at any given condition
  • Response time of the application
  • How much resources being used by the application
  • How stable is the application at given time
  • Throughput of the application
  • For web application times spent in making HTTP calls at server and client etc.

Performance Testing is type of testing that test application on above listed criteria.

image

Performance Testing measures performance of the application. After measuring performance of the application it sets the base line for further testing. Performance testing is very important since cooperate prestige of the application or decision on the final release of application based on the analysis of the results produced by this test. Performance testing does not find any defect in the application. Often, we perform Performance testing on a stable system.

Performance Test finds performance issue in the

  • Database access
  • Network latency like time spent on the network
  • Time spent on reading or writing files on the disc
  • Time spent on making HTTP calls etc.

So we can summarize Performance testing

image

Load Testing

Load Testing determines user experience when application is under load. In Load Testing, we test application with maximum number of users or with the expected number of users in the production environment.

image

 

Load Testing determines upper limit of the application. Load testing simulates expected number of users from the production environment and tests the application with that number of users. When we exceed number of users to test the application much beyond expected number of users from production environment then we call testing as STRESS TESTING. In majority of the time we consider Stress Testing as Load Testing.

Purpose of Load Testing is to find defect in the application when application is running under maximum load. Some of the defects could be as follows

  • Memory leak
  • Buffer Overflow
  • Server failure
  • Network failure
  • Input devices reading failure
  • Writing on output device failure etc.

We can summarize that Load Testing tests application behavior and sustainability with the maximum number of user inputs.

Appreciate Telerik products? Vote for us

2012 DevPro Community Choice Awards

Windows ITPro Community Choice Awards

Closing date of voting: September 28

Telerik has been working hard to help you in “DELIVERING MORE THAN EXPECTED “. Due to our work and love, we manage to create a semantic and purposeful relationship between you and us. Whether you are a developer, tester, IT pro or a manger our products help you to perform your task more effectively and quickly. We have products for all steps of development process. We are committed to make our products better in order to serve you better.

 

Today we have come to you with a request. If you love and appreciate our products then please vote for us. Vote for us in DevPro and ITPro community choice award. Our products are nominated in 25 different categories. Find details about award at links given below,

2012 DevPro Community Choice Awards

Windows ITPro Community Choice Awards

 

For DevPro our products are nominated in following categories

Category

Products

Best Add-In Product

Telerik JustCode

Best Charting and Graphics Tool Product

Telerik RadChart for ASP.NET AJAX

Best Component Set

Telerik DevCraft Ultimate

Best Content Management System

Sitefinity

Best e-Commerce Package

Sitefinity Ecommerce

Best Email Control Product

Sitefinity Email Campaigns

Best Forum Application

Sitefinity Forums

Best Grid Product

Telerik RadGrid for ASP.NET AJAX

Best Memory Management/Profiling Product

Telerik JustTrace

Best Navigation Control Product

Telerik RadMenu for ASP.NET AJAX

Best Online Editor

Telerik RadEditor for ASP.NET AJAX

Best Printing/Reporting Tool

Telerik Reporting

Best Project Management/Defect Tracking Product

Telerik TeamPulse

Best Scheduling/Calendar Tool

Telerik RadScheduler for ASP.NET AJAX

Best SharePoint Development Tool

Telerik RadControls for ASP.NET AJAX

Best Silverlight Product

Telerik RadControls for Silverlight

Best Testing/QA Tool

Telerik Test Studio

Best Training Product or Book

Telerik Training

Best Utility

Telerik JustDecompile

Best Free Tool

Telerik JustDecompile

Best Vendor Support

Telerik

 

 

For ITPro our products are nominated in following categories

Category

Products

Best Management Suite

Telerik TeamPulse

Best SharePoint Product

Telerik RadControls for ASP .NET AJAX

Best Free Tool

Telerik JustDecompile

Best Vendor Tech Support

Telerik

 

We appreciate your support. Looking forward for prolong relationship with you. Thanks for voting for us.

Start working with RadRating control for Windows Phone in three simple steps

Read more here

As name suggests by using RadRating controls, you can allow your application user to rate something. RadRating control allows user to select a value from set of rating items. RadRating control may give immersive experience as given below.

image

In this post we will follow three steps to start working with RadRating control.

Step 1

Start with adding namespace on xaml

image

Step 2

You can add a RadRating control by declaring it on xaml as following. You need to set value of AutoGeneratedItemsCount property to set number of rating items.

image

Expected output of above declaration should be as following

image

If you want you can change geometrical shape of the rating items as well. You need to set value of ItemShapeStyle property.There are five geometric shapes are provided. They are as following

  1. Stars1
  2. Stars2
  3. Hearts1
  4. Hearts2
  5. Hearts3

You can set Height and Width of the Rating Item using ItemShapeHeight and ItemShapeWidth property respectively.

In below declaration we are setting shape style, shape height and shape width.

image

Expected output of above RadRating control declaration is as following

image

If you want you can customize individual rating item also. You can do that as following. You may have content for each individual rating item.

image

Expected output of above RadRating control declaration is as following

image

Step 3

In last step you may want to handle events to perform operation when user is changing the rating. Below two events are important to track when user is changing rating or rating has been changed already.

  • ValueChanged
  • ValueChanging

You can handle ValueChanged event as following. In this event you get both old value and new value from the RadRating control

image

Conclusion

These are three simple steps you required to start working with RadRating control. Below I am consolidating codes from above discussion

MainPage.xaml

 


<phone:PhoneApplicationPage
x:Class="processapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Demo App" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="rating control" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel Orientation="Vertical" Grid.Row="0">
<telerikInput:RadRating x:Name="rdRatingControl"
AutoGeneratedItemsCount="5" />
<TextBlock x:Name="txtrating1" Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>

<StackPanel Orientation="Vertical" Grid.Row="1">

<telerikInput:RadRating x:Name="rdRatingControl1"
AutoGeneratedItemsCount="5"
ItemShapeStyle="Hearts1"
ItemShapeHeight="60"
ItemShapeWidth="70"
/>
<TextBlock x:Name="txtrating2" Style="{StaticResource PhoneTextNormalStyle}" />

</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="2" >
<telerikInput:RadRating  x:Name="rdRating" >
<telerikInput:RadRatingItem Content="poor "/>
<telerikInput:RadRatingItem Content="satisfied "/>
<telerikInput:RadRatingItem Content="good "/>
<telerikInput:RadRatingItem Content="verygood "/>
<telerikInput:RadRatingItem Content="excelent"/>
</telerikInput:RadRating>
<TextBlock x:Name="txtrating3" Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs

 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Telerik.Windows.Controls;

namespace processapp
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
rdRating.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRating_ValueChanged);
rdRatingControl.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRatingControl_ValueChanged);
rdRatingControl1.ValueChanged += new EventHandler<ValueChangedEventArgs<object>>(rdRatingControl1_ValueChanged);

}

void rdRatingControl1_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{
var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating2.Text = message;
}

void rdRating_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{
var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating3.Text = message;
}

void rdRatingControl_ValueChanged(object sender, ValueChangedEventArgs<object> e)
{

var oldValue = e.OldValue;
var newValue = e.NewValue;
string message = "you have changed value from " + oldValue + "to " + newValue;
txtrating1.Text = message;
}

}
}

When you run application you should have application with RadRating control as following

clip_image002

I hope you find this post useful. Thanks for reading.

Working with RadSlideHubTile for Windows Phone

In this post we will learn working with RadSlideHubTile. This control allows you to have Windows Phone home screen tile experience inside your application. This tile is used to display information with image. You can associate tap or doubletap event with individual slide hub tile to perform specific operation. To have better immersive experience put RadSlideHubTile in a RadUniformGrid. At the end of this post we are going to have RadSlideHubTile in application as following image

image

To start with add Telerik.Windows.Controls.Primtives namespace on the xaml.

image

After adding namespace put a RadUniformGrid on the application page. We are creating uniform Grid of 3 rows and 3 columns.

image

Inside the Grid we will put RadSlideHubTiles. Since grid is of 3 rows and 3 columns, so we can put 9 RadSlideHubTiles.

We can create a RadSlideHubTiles as following

image

We need to provide Title and Picture values to create RadSlideHubTiles. We can see that Title property is set to India and Picture property is set an image url. We can put 9 RadSlideHubTiles in the grid. We can put that as following


<phone:PhoneApplicationPage
x:Class="processapp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="BROWSE COUNTRY APP" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="countries" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<telerikPrimitives:RadUniformGrid NumberOfColumns="3" NumberOfRows="3">
<telerikPrimitives:RadSlideHubTile x:Name="hbIndia"
Title="India"
>
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\indiaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbFrance"
Title="France"
>
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\franceflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbEngland"
Title="England"
Tap="hbTextBox_Tap">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\englandflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbGermany"
Title="Germany">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\germanyflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbAustralia"
Title="Australia">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\ausflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbChina"
Title="China">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\chinaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbJapana"
Title="Japan">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\japanflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbBrazil"
Title="Brazil">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\brazilflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>
<telerikPrimitives:RadSlideHubTile x:Name="hbUSA"
Title="USA">
<telerikPrimitives:RadSlideHubTile.Picture>
<Image Source="Images\usaflag.jpg"
Stretch="Fill"/>
</telerikPrimitives:RadSlideHubTile.Picture>
</telerikPrimitives:RadSlideHubTile>

</telerikPrimitives:RadUniformGrid>
</Grid>
</Grid>

</phone:PhoneApplicationPage>

When you run the application you should get tiles inside your application and you can handle tap or doubletap event to perform specific task on the particular RadSlideHubTile. Expected output of your application is as following

image

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

How to work with RadTextBox for Windows Phone

Read documentation here

RadTextBox is adding below functionalities in usual TextBox. Those functionalities are

  • Watermark
  • Validation
  • Clear Button
  • Action Button
  • Headers

You may have immersive experience of a RadTextBox as following

image

To start working with RadTextBox very first you need to add namespace on XAML as following

image

After adding namespace you need to put RadTextBox on xaml. Explicitly you need to set ActionButtonVisibility property as visible.

image

Clear button will only be visible once you start typing the text. ActionButtonTap event gets called when action button gets tapped. You can set watermark as following

image

On running you should get RadTextBox as below

image

If you want you can change style of clear and action button. Header of the RadTextBox can bind to a data source as following

image

And in the code behind

image

And Data class is defined as following

image

You should be getting RadTextBox experience as following. You will notice that header has been data bind now.

image

One of the most important features of RadTextBox is validation capabilities. You may want to perform some validation on the lost focus. To start with validation you need to add namespace

image

ValidationState enum is used to specify validation state on RadTextBox. There are four possible value of ValidationState

image

You can validate as following

image

Validate is user defined function and you may defined it as per your business requirement. Validation message will be displayed as following

image

image

In this way you can work with RadTextBox. Below is the consolidated code of all discussion from this post

MainPage.xaml


<phone:PhoneApplicationPage
x:Class="Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikSlideView="clr-namespace:Telerik.Windows.Controls.SlideView;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerikDataVisualization="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DEMO RAD CONTROLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Autocomplete" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<telerikPrimitives:RadTextBox x:Name="rdTextBox" Height="110"
ActionButtonVisibility="Visible"
Header="{Binding Name}"
Watermark="Search"
ActionButtonTap="RadTextBox_ActionButtonTap"
/>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs

 

</pre>
using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;
 using Microsoft.Phone.Controls;
 using System.Collections.ObjectModel;
 using Telerik.Windows.Controls;
 using System.Windows.Media.Imaging;
 using System.Xml.Linq;
 using Telerik.Windows.Controls.PhoneTextBox;

namespace Demo
 {
 public partial class MainPage : PhoneApplicationPage
 {

public MainPage()
 {
 InitializeComponent();
 this.rdTextBox.DataContext = new Data { Name = "I am  data bind Header" };
 rdTextBox.LostFocus += new RoutedEventHandler(rdTextBox_LostFocus);

}

void rdTextBox_LostFocus(object sender, RoutedEventArgs e)
 {

bool isValid = Validate(rdTextBox.Text);
 if (isValid)
 {
 rdTextBox.ChangeValidationState(ValidationState.Valid, "Wow valid input!");
 }
 else
 {
 rdTextBox.ChangeValidationState(ValidationState.Invalid, "Oops InValid input!");
 }

}

private bool Validate(string text)
 {
 //Your validation logic
 return false;
 }

private void RadTextBox_ActionButtonTap(object sender, EventArgs e)
 {

MessageBox.Show("Hello");

}

}
 public  class Data
 {
 public string Name { get; set; }
 }

}

&nbsp;
<pre>

I hope you find this post useful. Thanks for reading.

Complex object in RadAutoCompleteBox control for Windows Phone

Read documentation here

RadAutoCompleteBox control provides suggestion to user. It provides suggestion on basis of set criteria filtering data from a SuggestionSource. SuggestionSource is nothing but a Data Source.

RadAutoCompleteBox control gives you immersive experience as following. It can be bind to data source as simple as collection of strings or collection of complex objects. In below RadAutoCompleteBox SuggestionSource is of complex objects.

image

To start working with RadAutoCompleteBox first you need to add following namespace on the XAML page.

clip_image002

You can create a simple RadAutoCompleteBox as following

image

There are many properties exposed to configure RadAutoCompleteBox. You can set values of those properties as per your requirement. Two important properties are AutoCompleteMode and AutoCompletePopupDisplayMode. AutoCompleteMode property defines the way filtering should be done. Filtering criteria will be can be set to two values.

image

AutoCompletePopupDisplayMode defines the place of popup windows to open. This property can be set to four values. Those four values are as following

image

SuggestionSource can be created as following. It is a function returning List of Strings.

image

After creating SuggestionSource you can set that in code behind as given below.

image

At this point on running the application, you should get experience of RadAutoCompleteBox as given in below image,

image

Now let us see how we can work with a complex object. For that go ahead and create a class called CountryData. There are three properties in the class.

 


public class CountryData
{

public string CountryName { get; set; }
public string  CountryCapital { get; set; }
public ImageSource CountryFlag { get; set; }

}

Next you need to create data source or suggestion source. For that I have created a function returning List of CountryData. I have put images in the Images folder. In below function using collection initializer we are creating List of object of CountryData and returning that.


private List<CountryData> GetCountryDetails()
{
List<CountryData> lstCountryData = new List<CountryData>
{
new CountryData
{
CountryName = "India" , CountryCapital ="New Delhi " , CountryFlag= GetImageSource("/Images/indiaflag.jpg")
},
new CountryData
{
CountryName = "USA" , CountryCapital ="Washington" , CountryFlag= GetImageSource("/Images/usaflag.jpg")
},
new CountryData
{
CountryName = "France" , CountryCapital ="Paris" , CountryFlag= GetImageSource("/Images/franceflag.jpg")
},
new CountryData
{
CountryName = "England" , CountryCapital ="London" , CountryFlag= GetImageSource("/Images/englandflag.jpg")
},
new CountryData
{
CountryName = "Germany" , CountryCapital ="Berlin" , CountryFlag= GetImageSource("/Images/germanyflag.jpg")
},
new CountryData
{
CountryName = "China" , CountryCapital ="Shanghai" , CountryFlag= GetImageSource("/Images/chinaflag.jpg")
},
new CountryData
{
CountryName = "Japan" , CountryCapital ="Tokyo" , CountryFlag= GetImageSource("/Images/japanflag.jpg")
},
new CountryData
{
CountryName = "Australia" , CountryCapital ="Canberra" , CountryFlag= GetImageSource("/Images/ausflag.jpg")
},
new CountryData
{
CountryName = "Brazil" , CountryCapital ="Rio" , CountryFlag= GetImageSource("/Images/brazilflag.jpg")
},

};
return lstCountryData;
}

GetImageSource function is defined as following. This function is taking image path as string and converting that to ImageSource such that directly can be bind to Image control.

 


private ImageSource GetImageSource(string fileName)
{
return new BitmapImage(new Uri(fileName, UriKind.Relative));
}

Finally you need to set SuggestionSource of radAutoCompleteBox. You can set that in page constructor as given below,

 


public MainPage()
{
InitializeComponent();
this.radAutoCompleteBox.SuggestionsSource = GetCountryDetails();

}

Now you need to put radAutoCompleteBox on xaml. We are filtering on a SuggestionSource consist of complex objects so you need to set the value of property FilterKeyPath. You can set value of this property to any property of the object. In this case we are filtering on CountryName. SuggestionSelected event gets fired when user selects an item from the popup.

image

By now you have created radAutoCompleteBox and bind to a SuggestionSource of complex objects. Next we need to create SuggestionTemplate. SuggetionTemplate defines the way data from complex object bind as SuggestionSource will be displayed in the suggestion popup. Since there are three properties in the object and one of them is an image. So simply we have put a StackPanel with horizontal orientation and binding properties value in controls inside the StackPanel.

image

Last but not least we want items highlighting on filtering. We want to highlight item on property set as FilterKeyPath. We set CountryName as FilterKeyPath. You can highlight item on filtering as following. You can set highlight style on background or foreground.

image

Consolidating codes from above discussion you will have XAML as following. There is one StackPanel in second row of Grid. On selection of an item, that item will get displayed in controls inside StackPanel.

 


<phone:PhoneApplicationPage
x:Class="Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DEMO RAD CONTROLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Autocomplete" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />

</Grid.RowDefinitions>

<telerikInput:RadAutoCompleteBox x:Name="radAutoCompleteBox"
Height="100"
AutoCompleteMode="Contains"
FilterKeyPath="CountryName"
SuggestionSelected="radAutoCompleteBox_SuggestionSelected"
Margin="-6,19,6,185">

<telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding CountryFlag}" Height="60" Width="60" />
<TextBlock Text="{Binding CountryName}"
telerikInput:RadAutoCompleteBox.IsElementHighlighted="True">
<telerikInput:RadAutoCompleteBox.HighlightStyle>
<telerikInput:HighlightStyle Foreground="Red" FontSize="26"/>
</telerikInput:RadAutoCompleteBox.HighlightStyle>
</TextBlock>
<TextBlock Text="," />
<TextBlock Text="{Binding CountryCapital}" />
</StackPanel>
</DataTemplate>
</telerikInput:RadAutoCompleteBox.SuggestionItemTemplate>

</telerikInput:RadAutoCompleteBox>

<StackPanel Grid.Row="1" Orientation="Vertical">
<Image x:Name="imgMessage" Height="250" Width="200" />
<TextBlock  x:Name="txtMessage"  FontSize="40" Style="{StaticResource PhoneTextAccentStyle }"/>
</StackPanel>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

Last but not least you need to handle SuggestionSelected event. In this event we will bind selected item in controls inside StackPanel.

 


private void radAutoCompleteBox_SuggestionSelected(object sender, SuggestionSelectedEventArgs e)
{

CountryData data  = e.SelectedSuggestion as CountryData;
radAutoCompleteBox.Text = data.CountryName + "," + data.CountryCapital;
txtMessage.Text = "You selected " + data.CountryName;
imgMessage.Source = data.CountryFlag;
}

Now if you go ahead and run the application you should get experience of radAutoCompleteBox as following

image

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

Telerik tools for the Ninja Developer : The Series

If you are here – you are already an awesome developer! Probably you are looking to become what we call the “Ninja Developer”! The Ninja Developers treats coding as an art with tools that he knows would take him beyond to the metaphysical.

There are developer tools and then there are Telerik tools (ok, this was indulgent)!

If the path you have chosen is to become the ultimate developer, Telerik is proud to arm you with tools that will get you there quicker. So, we would like to present to you our array of equipment that is so lethal that is best hidden within your IDE (lest competing clans got their hands on it).

Let the Ninjutsu begin (below is the calendar for the training):

Date Time (Indian Standard Time) Topic
25th July 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Kendo UI
1st August 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: JustCode
22nd August 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Test Studio
29th August 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Just Mock
5th Sep 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Rad Controls for Windows Phone
12th September 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Just* Suite
27th September 2012 3:00 – 4:00 PM Telerik Tools for Ninja Tester: Load Testing with Test Studio
10th October 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Just Trace
17th October 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Reporting
21st  Nov 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Windows 8 Controls
12th Dec 2012 3:00 – 4:00 PM Telerik Tools for Ninja Developer: Silverlight

After completing this webinar series (that we are hosting in the Asian Time Zone), we will award you with the Telerik Ninja Certificate (dare you on this)!

If you would like us to cover a specific tool (err topic), feel free to share that in the comments below. Come back here often for the master regularly updates this series with the attendee links and surprise sessions.

May the force be with you! (Blessings loaned from Yoda)

First look of Telerik India office

image

Telerik  is a recognized name in the space of developer tools. We make controls that deliver popping user experience and tools to make a normal developer a Ninja!

Once we wondered – where do we find the most Developer Ninja’s in the world? The answer didn’t really require us to be enlightened. So, Telerik India came into being!

I am here with some snaps of Telerik India office. Our office is on Sohna Road, Gurgaon. It is on the 5th floor of Shopper Stop building.

image

image

image

image

image

image

On behalf of Telerik India, I invite you to visit our office and have a technological chit chat over coffee. Trust me our coffee machine‘s coffee is worth trying once