Learning Bootstrap Part 2: Working with Buttons

Read Part 1 here: Getting started with Bootstrap

Buttons and anchor tags are very important controls. Bootstrap allows you to customize look of these two very elegantly.

Block level Button: if you want to create a button as the full width of parent container that can be easily created as following


<div class="container">
 <button class="btn btn-large btn-block" type="button">Login</button>
 <button class="btn btn-large btn-block" type="button">Register</button>
 <button class="btn btn-large btn-block" type="button">Twitter</button>
 <button class="btn btn-large btn-block" type="button">Facebook</button>
 </div>

In above we are putting buttons inside fixed container and you will see buttons would rendered as following. Buttons are taking width of parent div container.

clip_image002

There are different styles of buttons available. You can very easily create them. Let us say you want to create a Success Button. Success button can be created by setting class as btn-success

image

If you want to create Info button then that can be created setting button class as btn-info

clip_image001

Different kinds of buttons available in bootstrap is as following,

image

You can create above buttons as easily as given below


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 <div class="container">

 <button class="btn btn-large btn-primary" type="button">Primary Button</button><br />
 <button class="btn btn-info"
 type="button">
 Info Button
 </button>

<br />

 <button class="btn btn-success"
 type="button">
 Success Button
 </button>

 <br />
 <button class="btn btn-large btn-warning" type="button">Warning Button</button> <br />
 <button class="btn btn-large btn-danger" type="button">Danger Button</button><br />
 <button class="btn btn-large btn-inverse" type="button">Inverse Button</button> <br />
 <button class="btn btn-large btn-link" type="button">Link</button> <br />
 </div>

</body>
</html>

Bootstrap also provides you different sizes of buttons. If you want to create a large button that can be created as following

clip_image001[6]

You can create a large success button as following

clip_image003

There are three buttons sizes available,

  1. Large button : btn-large
  2. Default button : btn
  3. Small button : btn-small
  4. Mini button : btn-mini

image

Above buttons can be crated with following mark-up


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 <div class="container">
 <button class="btn btn-large ">
 Large Button
 </button> <br />
 <button class="btn">
 Default Button
 </button> <br />
 <button class="btn btn-small">
 Small Button
 </button> <br />
 <button class="btn btn-mini">
 Mini Button
 </button> <br />

 </div>

</body>
</html>

In this way you can work with buttons and make them immersive using twitter bootstrap. In further posts we will get into more deep into bootstrap. I hope you find this post useful. Thanks for reading.

Presented in C-Sharp Corner MVP Summit

View Event Photos here

It was electrifying, high on energy and absolute impeccable event. I love each second spent at C-Sharp Corner MVP SUMMIT.

image

This three days event was in Country Inn and Suites from 21st March 2013 to 23rd March 2013. All participants was indulged for all three days in this very successful event.

image

I got an opportunity to be part of all three days. Third day was open developer’s day and any developer could attend that. There was sparkling 200+ developers all around Delhi/NCR present at third day. Third day 23rd March 2013 was lined up with industry speakers and veterans.

image

I got an opportunity to present on “Develop for Windows 8 “. This time I tried story telling way of presentation and found audience enjoyed that too much. Please find PPT of presentation below,

 

In demo I created “Flickr Search Application”. Read full blog post about Demo here

clip_image002

View Event Photos here

I had great time presenting and being part of this esteem event. Excited to see you soon in next event. Thanks !

5 Basic Rules of Speaking

They say speaking is an Art, I say speaking is a science. A good speaking is combination of various basic rules. We can deliver a good speaking on applying basic rules collectively.

image

I have been attending many presentations on various topics from different speaker. I found some of them extremely entertaining and interactive and for some of presentation 1 hrs. was equivalent to 10 hrs. I learnt from various good speakers and in this post trying to consolidate my learning in 5 basic rules of speaking. Rules evolves by time so the rules of speaking. However let us see my five basic rules of an effective speaking.

Rule # 1: Complete in Time

I would have written a shorter letter, but I did not have the time: Blaise Pascal

If time is money then completing a task in given time is efficiency. It shows that you have successfully planned your work to execute them in time.

image

  • You have worked hard for this presentation.
  • You have spent sleepless nights to create 100 slides for 60 minutes presentation.
  • You are expert of this particular topic and you want to share all your expertise with audience.
  • All topic of yours presentation are very important

Although all of above data points are very important but not more than time assigned to you. Completing in time is most important attribute of any speaker. If you do not complete in time then

  • You negatively impact overall time table of the day
  • You are creating an enemy in next speaker after you.
  • Even though you are best speaker of the universe there are chances that few among audience did not like your session and they are waiting for your session to get over. By not completing in time you are not doing justice with them

Last but not least not able to complete in time shows your inability to plan and execute. It also suggests that you do not respect time of others. So make sure that you plan such that you can execute your speaking in assigned time to you. I count completing in time most important factor of good speaking and very vital attitude of a good speaker.

Rule # 2: Know your Audience

Every products have their target buyer, every movies have their target viewers, and every books have their target readers hence your session also has a target audience. If there is expectation disparity between buyers and product then very likely product would fail in the market. For a successful book, author’s imagination should be in line with the reader’s imagination. So success of your session depends on how much you know your audience while presenting.

image

This rule is very simple,

  • Your audience should be able to understand what you are saying.
  • Depth of your talk should be in par with level of your audience.
  • You should able to increase or decrease difficulty level of your topic on the fly.

There are various ways you can know your audience,

  • Conduct a poll on whether audience is interested to listen level 100 or level 400.
  • In beginning of session ask some basic questions on the topic you are presenting. See how many hands are being raised to answer those questions and then get a sense of the audience.
  • Last but not least best method to see mood of audience by reading their faces. If you find blank faces while presenting then you may decrease the difficulty level of presentation.

I find knowing audience is another vital aspect of good speaking. You need to be agile and you should able to change perception about your audience on basis of responses you see while presenting. You should able to change pace of presentation on audience response. To be on the same page with audience as speaker is another basic and important attribute of a good speaker.

Rule # 3: Know the Subject

Knowledge is power: Francis Bacon

Prepare, prepare and prepare is the key of successful and meaningful presentation. Without knowledge on subject in front of audience you will be epitome of an army without arms in front of enemy force.

image

Rule is not prepare hard rather prepare in smart way. Your preparation should be evident in your talk. You need to make sure of the following points

  • Make sure you have tested all demo in dry run
  • Make sure you have rehearsed your story for each slides
  • Make sure you know how to use various zoom in tools
  • Make sure there is a story line in your presentation
  • Make sure not to use big jargon while presenting

How easily you are presenting topic reflects amount of preparation you have done. Better preparation will help you to complete in time as well. Preparation will give you optimum confidence to be in front of audience. Hence I consider it one of the most vital factor of good speaking.

Rule # 4: Mind your Body Language and Dress code

Sometime your body language speaks louder than the words. What you are depicting from your body language is as important as what you are speaking from mouth. People hear what you say but they see what you show.

image

While presenting wearing a pleasant dress is always a benefit. Make sure

  • You are not wearing party dress while presenting
  • You are not wearing belt with bizarre buckles. For example once I was attending a presentation and speaker was wearing Playboy belt. He was subject of fun on that event day.
  • Do not try hard to look different while presenting.
  • Make sure you have control on your hand movement. Avoid putting them in your trouser pockets or moving them too fast.
  • Avoid showing your back to audience
  • Do not show that you are from some different planet since you are speaker.
  • Carry a light smile and if possible wear normal colors dress

Unless you are not known to audience, dress and body language does matter. I consider a positive body language with descent dressing an essential rule of effective speaking.

Rule # 5: Add some Fun

“If you don’t like me, why do you waste your time making fun of me? “

I am sure you like yourself and you want people to like you too. Usually people like funny people. In normal scenario people like to laugh. People laughing together are emotionally closer to each other and there are less chances that they would judge each other. To avoid harsh judgment of yourself and your presentation make sure that you and your audience are laughing with each other.

image

There are many ways you can make your audience laugh,

  • Start with a joke on yourself
  • Start with a funny story
  • Keep smiling while presenting
  • Praise few among audience with some flavor of light fun. For example you can say hey you are wearing a nice shirt etc.
  • Start with discussion of some funny scene of a popular story or book

I have seen many speakers start their presentation with negative statements like following,

  • I have not prepared for this session so my demo may fail
  • I have not got sufficient time to prepare
  • I have only 30 minutes and I afraid to complete in time
  • This topic is very hard so give full attention
  • I do not like this city etc.

You should avoid using negative statements. By saying that you have not got time to prepare for that particular session you are disregarding audience and conveying a message that session being presented by you was not that important to you.

Idea is very simple entertain your audience with sweetness of knowledge transfer. Leave everyone with filled mind and smiling face.

Conclusion

As I said in beginning of this post that rules evolves. So the rules of speaking. There are many other small factors we need to take care while presenting. In other post I will discuss other important factors. I hope you find this post useful. Hope to see you soon presenting an effective session.

Completed 5 years as professional

On 24th March 2013 I have completed 5 years as professional in Software industry. It has been an exciting journey for me. I moved from one city to another, worked on different kind of projects, with different kinds of teams. I learnt and explored lot in these 5 years.

So far my 5 years of journey is like below,

image

Even though I was placed from college campus due to late joining date I was jobless for almost 9 months. However I had fun searching jobs on streets of Bangalore. Running behind buses, standing in long queues, and giving resume to security personals at company’s gates. These 9 months gave me different experience and I learnt to survive.

On 24th March 2008 I joined UST Global in beautiful city Trivandrum. UST Global turned best company for me as fresher and I learnt everything there. After UST Global I joined Infosys in Pune. Both UST Global and Infosys added great values to my professionalism and helped me to attain my career best. My managers at both companies were very supportive and great motivator.

On 2nd July 2012 I joined Telerik as Customer Advocate in Gurgaon. This is the job I always wanted to do. In this job I develop, teach, interact and write. I love my job here.

Blogging

I love to share my learning. In order to share my learning I started blogging. I wrote my first blog posts on 20th November 2008. So far I have authored 750 + blog posts on various technologies.

My journey in blogging has been like below,

image

I am aspired to take my blogging to next level in coming years and author some book

Speaking

I love to speak and share my knowledge in community and various platform. In these 5 years I got many chances to present on various topic in different cities of India.

My speaking journey has been as follows,

image

I am excited that I would be speaking in various bigger events in coming years.

Awards and Recognitions

In this journey I got many recognition also. I got awarded as Microsoft MVP, C-SharpCorner MVP and Telerik MVP.

My Awards and Recognitions journey has been as follows

image

Time has been changing so the aspirations and me. Find below How I was in 2008 and now in 2013.

image

I am committed and aspired to work harder and take myself to next level of professionalism. Thanks everyone for all the help and support.

Create Flickr Photo Search Windows Store App in XAML

In this post we will create application shown in below video. Essentially we will see how we can work with

  • GridView and ListView in Windows 8 Application
  • Consuming REST Service in Windows 8 Application
  • Share Contract in Windows 8 Application

To create on Flickr based application you need API Key from Flickr. You can apply for API key here . You need to fill the required information and click on Submit button to create API key. We need this API key in application. You need to submit App information in order to generate key. After submitting app information you will be navigated to App Garden and there you will find APP key and secret key as given in below image.

image

Very first create a Windows Store Application by choosing blank App template. Let us start with initializing variable. To search photos Flickr provides us REST end point. Globally we are initializing Flickr app key we created in previous step and constructing an URL to search on Flickr with search parameter. We are appending app key and search text in URL.


private HttpClient httpClient;
 private string key = "51fc5b3802c6ed36924ed3d6a8cc085a";
 private string flickrSearchUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={0}&text={1}";

Now switch to MainPage.xaml to design application. Very first let us divide content Grid in three rows. In second row we will put text box and button to search Flickr and in third row images returned will be displayed. First row contains header message of application.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Grid.RowDefinitions>
 <RowDefinition Height="100" />
 <RowDefinition Height="100" />
 <RowDefinition Height="700" />
 </Grid.RowDefinitions>

 </Grid>

Next let us put header message and controls. In below XAML we are creating following controls

  • Creating TextBlock in first to display application header message.
  • Creating StackPanel in second row with orientation horizontal.
  • In StackPanel creating TextBlock to get user input to search Flickr.
  • Creating a Button in StackPanel to get user input to search on Flickr.
<TextBlock Text="Flickr Search Application"
 Margin="30"
 FontSize="36" />
 <StackPanel Grid.Row="1" Orientation="Horizontal">
 <TextBox x:Name="txtSearch" Width="200"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"
 Margin="30"/>
 <Button x:Name="btnSearch"
 Content="Search on Flickr"
 Height="40" />
 </StackPanel>

Now let us create output GridView in third row. In this GridView we will display returned images from Flickr. In GridView we are creating ItemTamplate and putting an Image control in that. Image control is been bind to ImageUrl property. We will create class containing this property in later steps.

 <GridView x:Name="grdFlickrImageOutput" Grid.Row="2" Margin="30,0,0,0" >
 <GridView.ItemTemplate>
 <DataTemplate>
 <Image Width="300" Height="300" Source="{Binding ImageUrl}"></Image>
 </DataTemplate>
 </GridView.ItemTemplate>
 </GridView>

We have created design for the application. Now let us go ahead and create a class representing Flickr photo. This class will contain all the properties required to fetch an image from Flickr. Last property ImageUrl is of type URI and we are constructing it using other properties of Flickr Image


using System;

namespace debugmodeflickrsearch
{
 public class FlickrPhoto
 {
 public string ImageId { get; set; }
 public string FarmId { get; set; }
 public string ServerId { get; set; }
 public string Secret { get; set; }
 public string Title { get; set; }

public Uri ImageUrl
 {
 get
 {
 return new Uri(string.Format("http://farm{0}.static.flickr.com/{1}/{2}_{3}.jpg", FarmId, ServerId, ImageId, Secret));
 }
 }
 }
}

On click event of button we need to make a call to Flickr and get the response. To call Flickr REST API we are using HttpClient. We are making async call to get the response from Flickr. After getting reponse ParseIamges function is called to parse the response.


async void btnSearch_Click(object sender, RoutedEventArgs e)
 {
 httpClient = new HttpClient();
 HttpResponseMessage response = await httpClient.GetAsync(String.Format(flickrSearchUrl, key,txtSearch.Text));
 ParseImages(response);
 }

We will parse response using LINQ to XML. After parsing response is set as ItemSource of output GridView.


private async void ParseImages(HttpResponseMessage response)
 {
 XDocument xml = XDocument.Parse(await response.Content.ReadAsStringAsync());
 var returnedphotos = from results in xml.Descendants("photo")
 select new FlickrPhoto
 {
 ImageId = results.Attribute("id").Value.ToString(),
 FarmId = results.Attribute("farm").Value.ToString(),
 ServerId = results.Attribute("server").Value.ToString(),
 Secret = results.Attribute("secret").Value.ToString(),
 Title = results.Attribute("title").Value.ToString()
 };

grdFlickrImageOutput.ItemsSource = returnedphotos;
 }

Now let us go ahead and run application. We should able to search Flickr for images.

clip_image002

Now we want to share photo we like on social media or in a mail. We can achieve that using Windows 8 Share Contract. Very first let us go ahead and add itemclick event to output GridView. After adding event output GridView will get modified as following


<GridView x:Name="grdFlickrImageOutput" Grid.Row="2" Margin="30,0,0,0"
 IsItemClickEnabled="True" ItemClick="grdFlickrImageOutput_ItemClick_1"
 >
 <GridView.ItemTemplate>
 <DataTemplate>
 <Image Width="300" Height="300" Source="{Binding ImageUrl}"></Image>
 </DataTemplate>
 </GridView.ItemTemplate>
 </GridView>

&nbsp;

Next go ahead and define following variable globally,

 private string strTitleToShare = "Debugmode Flickr Photo Search App";
 private string strDescriptionToShare = "Sharing from Debugmode Flickr Photo Search App";
 private string strsharedText = string.Empty;

In constructor of the page create instance of DataTransferManager and add event for DataRequested.


DataTransferManager manager = DataTransferManager.GetForCurrentView();
 manager.DataRequested += manager_DataRequested;

Now we need to write code in DataRequested event to share text from application. In below code we are creating instance of DataRequest and setting Title , Description and Data to share.

void manager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
 {
 DataRequest request = args.Request;
 request.Data.Properties.Title = strTitleToShare;
 request.Data.Properties.Description = strDescriptionToShare;
 request.Data.SetText(strsharedText);
 }

Now we need to handle item selection in GridView. When user will select a particular photo we will construct text to be shared with URL of photo. We can do this as following,


private void grdFlickrImageOutput_ItemClick_1(object sender, ItemClickEventArgs e)
 {
 FlickrPhoto selectedPhoto = e.ClickedItem as FlickrPhoto;
 var urt = selectedPhoto.ImageUrl;
 strsharedText= "Hey look at this photo "+urt+" I loved it #CSharpCornerMvpSummit #Demo" ;
 DataTransferManager.ShowShareUI();
 }

Now go ahead and run the application. You should able to search photo from Flickr and share them using the apps.

image

Below find full source code of above discussion.

Mainpage.xaml


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

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Grid.RowDefinitions>
 <RowDefinition Height="100" />
 <RowDefinition Height="100" />
 <RowDefinition Height="700" />
 </Grid.RowDefinitions>
 <TextBlock Text="Flickr Search Application"
 Margin="30"
 FontSize="36" />
 <StackPanel Grid.Row="1" Orientation="Horizontal">
 <TextBox x:Name="txtSearch" Width="200"
 VerticalAlignment="Center"
 HorizontalAlignment="Center"
 Margin="30"/>
 <Button x:Name="btnSearch"
 Content="Search on Flickr"
 Height="40" />
 </StackPanel>
 <GridView x:Name="grdFlickrImageOutput" Grid.Row="2" Margin="30,0,0,0"
 IsItemClickEnabled="True" ItemClick="grdFlickrImageOutput_ItemClick_1"
 >
 <GridView.ItemTemplate>
 <DataTemplate>
 <Image Width="300" Height="300" Source="{Binding ImageUrl}"></Image>
 </DataTemplate>
 </GridView.ItemTemplate>
 </GridView>

 </Grid>
</Page>

Mainpage.xaml.cs


using System;
using System.Linq;
using System.Net.Http;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using Windows.ApplicationModel.DataTransfer;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace debugmodeflickrsearch
{
 /// <summary>
 /// An empty page that can be used on its own or navigated to within a Frame.
 /// </summary>
 public sealed partial class MainPage : Page
 {
 private string strTitleToShare = "Debugmode Flickr Photo Search App";
 private string strDescriptionToShare = "Sharing from Debugmode Flickr Photo Search App";
 private string strsharedText = string.Empty;
 private HttpClient httpClient;
 private string key = "51fc5b3802c6ed36924ed3d6a8cc085a";
 private string flickrSearchUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={0}&text={1}";

public MainPage()
 {
 this.InitializeComponent();
 DataTransferManager manager = DataTransferManager.GetForCurrentView();
 manager.DataRequested += manager_DataRequested;
 btnSearch.Click += btnSearch_Click;
 }

void manager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
 {
 DataRequest request = args.Request;
 request.Data.Properties.Title = strTitleToShare;
 request.Data.Properties.Description = strDescriptionToShare;
 request.Data.SetText(strsharedText);
 }

&nbsp;

async void btnSearch_Click(object sender, RoutedEventArgs e)
 {
 httpClient = new HttpClient();
 HttpResponseMessage response = await httpClient.GetAsync(String.Format(flickrSearchUrl, key,txtSearch.Text));
 ParseImages(response);
 }

private async void ParseImages(HttpResponseMessage response)
 {
 XDocument xml = XDocument.Parse(await response.Content.ReadAsStringAsync());
 var returnedphotos = from results in xml.Descendants("photo")
 select new FlickrPhoto
 {
 ImageId = results.Attribute("id").Value.ToString(),
 FarmId = results.Attribute("farm").Value.ToString(),
 ServerId = results.Attribute("server").Value.ToString(),
 Secret = results.Attribute("secret").Value.ToString(),
 Title = results.Attribute("title").Value.ToString()
 };

grdFlickrImageOutput.ItemsSource = returnedphotos;
 }

/// <summary>
 /// Invoked when this page is about to be displayed in a Frame.
 /// </summary>
 /// <param name="e">Event data that describes how this page was reached. The Parameter
 /// property is typically used to configure the page.</param>
 protected override void OnNavigatedTo(NavigationEventArgs e)
 {
 }

private void grdFlickrImageOutput_ItemClick_1(object sender, ItemClickEventArgs e)
 {
 FlickrPhoto selectedPhoto = e.ClickedItem as FlickrPhoto;
 var urt = selectedPhoto.ImageUrl;
 strsharedText= "Hey look at this photo "+urt+" I loved it #CSharpCornerMvpSummit #Demo" ;
 DataTransferManager.ShowShareUI();
 }
 }
}

In this way we can create a Flickr Photo Search App for Windows Store. I hope you find this post useful. Thanks for reading.