Hello all. I am back with my blogs once again. This time I am going to write a blog on a current hot topic. Guessed correct!!! Windows Phone 7. All are excited with WP7 topic. Not only for use but also for development of WP7 applications. So for what are we waiting? Let’s start building applications.. I will start with a very basic application and as we all know our tradition “Hello World Application”. I will include screenshots for each of my step so that it’s easy for you to understand visually too. So let’s start…
Step 1-
Let’s start from very basic part – creating new project. Go to File -> New -> Project.
You will get a screen where you will get options. Check on left hand side, select a language C# or VB and select Silverlight for Windows Phone. After selecting it you will get options regarding Windows Phone Applications on right hand side. Select 1st option – Windows Phone Application. Give your application name below. I have given it name WP7HelloWorld.
Step 2-
You will get a screen where you can see two splitted windows. On left side you can see WP7 device and on right side you can see XAML code. You can design on device using tools from toolbox. If you want to make changes in design through code you can do it on right side.
On top of the device its written My Application this is the name of the title which you can change. Just below is written page name. This also you can edit according to your application. In my application I have changed “My Application” to “Hello World Application” and similarly have changed “page name” to “Hello World”.
Step 3-
Next step we going to do is placing controls. I am going to use 1 textbox where we will take input from user (will take their name as input), 1 button on clicking of which will display output and 1 textblock (which is label in windows forms) to display output. In below screenshot you can see the alignment of these 3 controls. You can select these controls from toolbox which you can see on left side. If toolbox is not visible you can view it from View -> Toolbox.
Step 4-
We want to execute application when user clicks on button. So let’s write code on button click event.
Now what exactly we going to do in our application is, we will take name as input from user through textbox and once user clicks on button we will display “Hello ……” in textblock. So we are going to write the code as shown in below screenshot.
Step 5-
In this step I am just increasing the font size of textblock so that output is properly visible to the user.
Step 6-
Now press F5 to run your application and you will get a screen as shown in below screenshot. This is known as emulator. In your Visual Studio you can see 1 dropdown just below menubar which gives you options as Windows Phone 7 Emulator or Windows Phone 7 Device. If you have actually device you can connect it to your machine and run this application directly on your device. If you don’t have a device not to worry we have Emulator. You can run your application on Emulator by choosing Windows Phone 7 Emulator in that dropdown. Now back to your application running on emulator. You can see the UI which you had designed.
Once user clicks on textbox a keyboard will be popped up from below. If your machine has touch screen you can actually do typing by touching screen and get actual feel of device. If you don’t have touch screen to your machine simply click using mouse on the particular characters which you want to insert in textbox.
Once it’s done click on button and you will get your output below. You can see the output in below screenshot.
That’s it!!! Your application is ready!!! I will be back soon with more bogs on Windows Phone 7. Till that time. Good bye :-)
A 2 days workshop on .NET was held in Vishwakarma Institute of Information Technology (VIIT) College on 5-6 October 2010. This was on intercollegiate level and was supported by Microsoft. Almost 150 students from different colleges all over Pune attended this workshop. Students from FE-BE attended it. Workshop included basics of .Net, ADO.Net, ASP.Net, Cloud Computing, Windows Phone 7 etc. We also conducted practicals mainly on basics of .Net and also on ASP.Net and ADO.Net. Was a challenging job as FE and SE students were blank about all these things and had to make them understand each and everything including logic. But overall nice workshop. And being alumni of this college was nice experience to take training in same college.
A 2 days workshop on VB.NET was held in Indira College on 21-22 August 2010. This was held by Pune University for professors of TY BCA (Pune University). There were almost 40 professors from different colleges all over Pune. Workshop included basics of .Net, ADO.Net, etc. We also conducted practicals which were conducted by me. I performed all practicals which were included in their syllabus. Was a nice experience.
Microsoft’s Community Tech Days was held in Pune on 17th July 2010. It was another successful event in Pune volunteered by Pune User Group (PUG) members. Keynote was given by Mr. Daniel. Next sessions were presented by Vivek Venkatesh on Programming in right way, an exciting session on Windows Phone 7 by Mayur Tendulkar, Expression Blend 4 by Pravinkumar Dabade. Last session was given by me on Visual Studio Tools for Office (VSTO). I presented introductory session on VSTO. It included theory part also with 6-7 demos which included excel, word, outlook demos. Almost 80-90 people attended event. In all nice event!!!
Hello all. I am back with another interesting blog. This blog is on Bing Maps. We all use maps to find out any location anywhere in world. Suppose I want to find out location of Pune in India how will we search? Simple! Open maps put Pune, India in its search box and it will give you location of Pune. Now when we get Pune we also get some image on map which is known as pushpin which points out the location which you have searched. Now many of you must be thinking from where we get this. But it’s very simple. We can actually code for that using Bing Maps and get it done! Let’s see few things related to Bing Maps.
In this blog we will see following things related to Bing Maps:- 1) Add Pushpin 2) Delete Pushpin 3) Add Polyline Let’s start with 1st part Add Pushpin. Before that we need to include a script to get map in our browser.
var icon = "<div><img src='images/greenpushpin.png' alt='green pin' width='30px' height='30px'/></div>"; var infobox = "<div style='width:309px;'>This is green!!! Run!!!</div>";
function AddPushpin() { shape = new VEShape(VEShapeType.Pushpin, new VELatLong(19.0177, 72.8562,2272)); shape.SetCustomIcon(icon); map.ClearInfoBoxStyles(); shape.SetTitle("<h2>Pin</h2>"); shape.SetDescription(infobox); map.AddShape(shape); }
In this above function we have used method VEShape to create a shape to which we going to call pushpin. We have VEShapeType.Pushpin as its parameter to get shape pushpin on the map. VELatLong is a method which takes parameters latitude and longitude where by default that pushpin will be placed. We can also dynamically take latitude and longitude as parameters in AddPushpin() function. This will result into following,
We can see in this image above the result of AddPushpin(). We can see a spot marked in red which is pushpin of red color which is place on location Pune.
2) Delete Pushpin :-
Next we will see DeletePushpin.
function DeletePushpin() { if (shape) map.DeleteShape(shape); shape = null; }
This code is used to delete pushpin from Bing Maps. We have a specific function DeleteShape() to delete pushpins where we can call the shape which we had added using AddPushpin() and then set that shape to null.
3) Add Polyline :-
Lets now see how to add polylines. First we will see how to add button in body part clicking on which we can start adding polylines. For that we need to write following code,
<body> <input type="button" id="cmdDraw" value="Click to begin drawing" onclick="startDrawing();" /> <div>Drawing Mode: <span id="ModeIndicator">Disabled</span></div> </body>
var polyline = null; var polylineMask = null; var points = new Array(); var maskPoints = new Array(new VELatLong(0, 0), new VELatLong(0, 0)); var drawing = false;
function GetMap() { map = new VEMap('myMap'); map.LoadMap(new VELatLong(19.0177, 72.8562), 5, false); polylineMask = new VEShape(VEShapeType.Polyline, maskPoints); polylineMask.HideIcon(); polylineMask.Hide(); polylineMask.SetLineColor(new VEColor(0, 0, 255, 0.5)); polylineMask.Primitives[0].symbol.stroke_dashstyle = "Dash"; map.AddShape(polylineMask);
function mouseMoveHandler(e) { if (drawing) { var loc = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY)); if (points.length > 0) { polylineMask.Show() }; maskPoints[1] = loc polylineMask.SetPoints(maskPoints); } }
function mouseDownHandler(e) { if (drawing) { currentLatLon = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY)); points.push(currentLatLon); maskPoints[0] = currentLatLon;
if (points.length > 1) { if (!polyline) { polyline = new VEShape(VEShapeType.Polyline, points); polyline.HideIcon(); map.AddShape(polyline);
function keyPressHandler(e) { if (drawing && e.keyCode == 27) { drawing = false; map.vemapcontrol.EnableGeoCommunity(false); document.getElementById("ModeIndicator").innerHTML = 'Disabled'; document.getElementById("cmdDraw").value = 'Click to begin drawing'; document.getElementById("cmdDraw").disabled = false; polylineMask.Hide(); } }
In the above code we have given user his choice to choose locations and draw polyline. We have used a button on clicking of which user can start drawing polygon and once it press ESC button on keyboard he will stop drawing polygon. For drawing polyline we have set line width, its color etc using a method VEColor. For drawing polylines we have used mousehandlers and keypress handler events. We have used mousehandlers for clicking on location and start drawing polyline and keypresshandler to use ESC button once polylines drawing is finished. To check whether drawing is finished and user has pressed escaped or not we have used a boolean variable drawing.
Result we can show in below video.
This way we can add pushpins, delete pushpins and draw polylines.
Microsoft’s biggest event in India, TechEd, was held on 12-13-14 April 2010 in Bangalore. It was held in Lalit Hotel. Almost 2000-2500 people attended this event. I also got a chance to attend this event. Many dignitaries like S.Somasegar, Moorti Uppaluri, Stephanie Saad Cuthbertson, Sanjay Vyaas etc gave keynotes and sessions. It was in all a 3-day event which included 7 parallel tracks. All technologies for developers and IT Professionals was covered in this event. On 1st day after registrations, event started at 9:30 am with a welcome note of Mr. Moorthy Uppaluri which was continued by S.Somasegar with keynote and Visual Studio 2010. Launch of Visual Studio 2010 was a prime attraction of this event. Everyone was interested to know new features of Visual Studio 2010 which was shown by Stephanie Saad Cuthbertson and Paula Willis through interesting demos. Other sessions included ASP.Net, Cloud Computing, VS 10 programming, securing infrastructure etc. On 2nd day interesting sessions for me were Windows 7 phone development track. Awesome demos were showed by Mr. Vivek Dalvi. We also had sessions on Windows 7, Sharepoint 2010, Office 2010. Architect’s track included session like Concept Visualization by Mr. Sanjay Vyaas. On 3rd day there were individual tracks for Sharepoint Development, Azure, RIA (Silverlight) etc. Speakers like Mr. Nitin Paranjape, Mr. Raj Choudhary, Mr. Harish Ranganathan etc had their sessions on 3rd day. We also had Demo Extravaganza everyday after all sessions concluded. In this section many people got chance to show their talent. One of the most amazing demo was Buddy Home and Robo war and dance demonstrated by Ramaprasanna Chellamuthu. Also 2 college boys demonstrated their project of philontrophy which was one more amazing demo. There was another special section called Community track in which MVPs, Industry Experts gave sessions which were very deep technically and also were very understanding. For e.g. Mr. Dhaval Faria gave a session on F#. We had another section called Hands on which helped people to get practical knowledge of technologies. Event also included a Partner stalls in which parteners like Accenture, Telerik, Sapient etc had put their stalls. Many goodies were distributed there like tshirts, cds etc. We also had MTv VJ Mr. Nikhil Chinappa attending the event. We really had a nice time enjoying this event.
In WPF, we have 3 types of animations: 1) Color Animation – Used to change the color of the control. 2) Double Animation – Used to animate double values such as X/Y coordinate, Width and Height etc. 3) Key Frame Animation – This is a complex animation than color and double animation. In this animation we use key frames or a series of key frames.
Above we have seen just 1 line introduction of all types. We will learn more about them below along with their examples.
We all know that we have to write animation part in “Storyboard”. To begin storyboard we need to do “<BeginStoryBoard>”. It has two main properties – “TargetName” and “TargetProperty”. “TargetName” identifies the pbject and “TargetProperty” identifies the property of that oject. If we want to begin animation on some event like button click etc we can use “EventTrigger”. In animation there are two things – “To” and “From”. “To” specifies the start of animation and “From” specifies the end of animation. “TimeSpan” is 1 more keyword which specifies the time span for how much animation should run. These are few basic keywords which are necessary in our coding part for animation. We might come across few more keywords which I will explain them as they are used. Now let’s start with examples of animations.
Above is the code of color animation. In this example, we have a rectangle which is of yellow color which changes to blue color in time span of 1 second. In above code we have declared a rectangle which is already filled with yellow color. We have declared event on it as “MouseLeftButtonDown”. If we left single click on rectangle, animation will start. Now this animation we have declared below in StoryBoard in Color Animation. For this we have given TargetName the name of rectangle as that is our target for animation and TargetProperty we have declared as Fill.Color which fills the target with given color. Here we have also declared which color to fill which is blue. We have given duration as 0:0:1 which is 1 sec.
So after writing this code we will get the output as shown in below video.
Above is the code of double animation. In this example, we have a rectangle which is of red color of height 38 and width 200 which changes to height 100 in time span of 1.5 second and width 350. We have declared event on it as “MouseLeftButtonDown”. If we left single click on rectangle, animation will start. Now this animation we have declared below in StoryBoard in Double Animation. For this we have given TargetName the name of rectangle as that is our target for animation and TargetProperty we have declared as Height for change in height and Width for change in width. So after writing this code we will get the output as shown in below video.
Let’s see 1 more example of Double Animation in which we will write animation part in code.
In XAML you will have to write, <Grid> <Button Content="Animate" Height="33" HorizontalAlignment="Left" Margin="32,12,0,0" Name="btnRotate" VerticalAlignment="Top" Width="165" Click="btnRotate_Click" /> <Rectangle Height="200" HorizontalAlignment="Left" Margin="534,158,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="50" Fill="#FF166C0F" /> <Rectangle Fill="#FF166C0F" Height="50" HorizontalAlignment="Left" Margin="457,235,0,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="200" /> </Grid>
In code we need to write,
namespace WpfApplication1 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); }
private void btnRotate_Click(object sender, RoutedEventArgs e) { DoubleAnimation da =new DoubleAnimation(); da.From = 0; da.To = 90; da.Duration = new Duration(TimeSpan.FromSeconds(3)); DoubleAnimation da1 = new DoubleAnimation(); da1.From = 0; da1.To = -90; da1.Duration = new Duration(TimeSpan.FromSeconds(3)); //da.RepeatBehavior = RepeatBehavior.Forever; RotateTransform rt = new RotateTransform(); rectangle1.RenderTransform = rt; rt.BeginAnimation(RotateTransform.AngleProperty, da); RotateTransform rt1 = new RotateTransform(); rectangle2.RenderTransform = rt1; rt1.BeginAnimation(RotateTransform.AngleProperty, da1); }
} }
Here we have taken two similar rectangles. We have given angle property to each of them. To 1 rectangle we have given angle 90 and to other we have given angle -90 due to which both rectangle animate in opposite direction. We have included animation in the code. For writing this in our code we need to include namespace using System.Windows.Media.Animation.
So after writing this code we will get the output as shown in below video.
Here we have taken the combination of color and double animation. We have considered the same above example for this. Here as time passes and angle changes the color of rectangle also changes.
So after writing this code we will get the output as shown in below video.
Here we have taken a rectangle. It uses key frames to change the animation. Here we are using X value. We have changed it from 0 to 350 back to 50 and again to 200. We have used Linear key frame so it moves in Linear Fashion.
So after writing this code we will get the output as shown in below video.
Similarly we can do using spline double key frames as follows.
Here we have used spline double key frames using which we can animate in any way. So after writing this code we will get the output as shown in below video.
Microsoft Report is based on report definition which is an XML file that gives us the data of a report. It may have different extensions. For eg. We can create a client-side report definition language (*.rdlc) file using Visual Studio. Reports also include tables, aggregated and multidimensional data, charts etc as per users requirements.
Let us see a example of creating a report. In this we will have a table in our report which will shoe us details of students like name,roll no etc.. Lets start is step by step..
Step 1: We want to build a windows application so we will choose Windows Form Application. You can select any language you want according to your choice. May be it is VB or C#. Give it a name and move ahead by clicking ok. You can check it in screenshot given below. I have named it as SampleSQLReport.
Step 2: After creating Windows Form Application we will get a form which will be completely blank. Now we will ask user to enter his name who wants to generate a report. For this we will need a label on which we will ask user to enter name, then a textbox in which user will enter their name, and last a button on clicking of which will generate a report. We can also increase form size by going into its properties and changing size of it. All these things are shown in screenshot below.
Step 3: Now as we want to generate report we need to include a Microsoft ReportViewer. We can also use Crystal ReportViewer but here we will use Microsoft ReportViewer. We can get this from our toolbox which is on left side. In that we will get it from Reporting. So you can include Microsoft ReportViewer from there by dragging and dropping or by double clicking on it. You can see a report just below label, textbox etc. We can see all these things in screenshot below.
Step 4: After this we have to add a file named .rdlc creating report. For adding this we need to add new item Report. Name it. Here I have given its name as rptSample.rdlc. After adding it we get this in window as shown below.
Step 5: Next thing we will do is that the textbox which we had asked on main application we will display that name on report too.. For that we need to put textbox on report too which will display name. For displaying name on this from main page textbox we need to add report parameters. We can do this by going into Report tab in above navigation bar. Report Report Parameters. After you select this you will get a screen which is shown in below screenshot. In similar way you have to move ahead.
In above screenshot you can see we have added parameters. I have given its name as paraName. Similarly you can add your parameters.
In below screenshot we can see how to add parameters to textboxes so that its value gets displayed in textbox.
Step 6: As we see above we have to select (Category) Parameters (Item) All (Parameter) parameter name which you have declared before in your code. Then after clicking ok you will get below screen.
Till what we have done, its code is given in below screenshot.
Till what we have done lets run it. So that we will get to know whether wat we did atleast till that point how its working. So after running you get this.
Step 7: Now lets move ahead with database part as we want to display Student database in a tabular format in our report. So for that will add annother class in code which will include Student table format. We can see the code in below screenshot.
In above code DataTable Student is created with rows like rollno,name,div,marks and those columns are added in columns.
Step 8: Now we have created DataTable but we need to add DataSource also to this. For that we have an option on left hand named data source. When you click on that we get an option Add New Data Source. After clicking on that we get screen as shown below and in that we have to choose object.
After selecting object click Next. After that you will get screen as shown below.
Step 9: In aboce screenshot you can see options in which student option is included. It’s the same table name which we have created in our code. Select that and click Next. On left side you will see table and its columns which you had added in code. Now as we want to display this in tabular format we will dragand drop Table from toolbox on right side and we will get a table in our report page. Now we can see rows and columns in that table. We will select each column from left side and drag and drop it on particular column in the table. For eg. We will drag and drop rollno column and drag and drop it on 1st column of the table. Similarly we will do of remaining rows and this way we have added columns to our table. If you want to add more columns to the table you can right click on it and you will get option Insert column to right/left. So according to your needs you can add more columns to your table. Final output of this is shown in below screenshot.
Step 10: Now we have to add some data in Student table. We will have to add this in code itself. For that we have to write code written in below screenshot marked in red.
Final Output: After adding this data our work is finished. Now we will run our project and we will get output as shown in screenshot below.
Let’s see using JQuery in ASP.Net in this blog. We will see few examples for use of JQuery in ASP.Net.
1) Displaying an alert on Button click: - Consider a button in our code. <asp: Button ID =”Button” runat=”server” Text=”Show” /> Now once document is loaded we want to perform some action. We will tell browser to do that action using JQuery. For that we need to write a piece of code which is give below. Consider that we want to get an alert saying Welcome then we will write as following in code. <script type=”text/javascript”> $(document).ready(function() { $(“#Button1”).click(function() { alert(“Welcome!”); }) ; }); </script> Now let’s see details of the code in JQuery. a) $ Sign - In JQuery, the most powerful symbol is the dollar sign. A $() function normally returns a set of objects followed by a chain of operations. b) Document. Ready() – In JQuery, this is the most commonly used command. It gets executed only when page gets loaded. Usually code is placed inside this block.
2)Displaying datepicker: - We can use datepicker in ASP.Net using JQuery. For that we have to write following code.
In this code we have taken a textbox as an input in which we will get date. When we click on that textbox a calendar will be opened below attached to textbox. In that calendar we have to choose a date. If you don’t want to select date you can simply press Esc to escape. If date is selected then you will see that date in your textbox.
For including datepicker in your script, you need to download datepicker’s plugin for JQuery.
