IntelliSense support for CSS3, HTML5 and SVG in Visual Studio 2010.

Visual Studio 2010 has a good feature called IntelliSense which relives the pain of developers of remembering namespaces, classes and the methods in those classes.

When developing HTML 5 sites CSS3 , HTML 5, SVG(Scalable Vector Graphics) are used to create  cool HTML5 Websites.

Visual Studio Gallery provides tools to be plugged in Visual Studio 2010 and start development in HTML5.

Log on to http://visualstudiogallery.msdn.microsoft.com/

CSS 3 IntelliSense for Visual Studio 2010.

http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210?SRC=Home

image

HTML 5 IntelliSense for Visual Studio 2010 and Visual Studio 2008

http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d

image

SVG IntelliSense plugin for Visual Studio 2010 and 2008.

http://visualstudiogallery.msdn.microsoft.com/22479d6b-42d5-499f-b501-18e90e579540 

image

Go ahead and add these tools to Visual Studio 2010 and make your life happy by easy coding Smile

Web Development in HTML5 using Visual Studio 2010.

HTML5 is the new buzz all around. And because I use day-in , day-out Visual Studio 2010 for developing Silverlight and WPF applications, I gave a try whether HTML 5 websites be created in Visual Studio 2010.

And the answer is Yes :)

This blog is dedicated to understand how Visual Studio 2010 helps to create HTML5 Websites.

Creating Project Templates in Visual Studio 2010.

Steps to follow :

Create an empty ASP.NET Website .

NewWebSite

Create a folder structure .Place the files in folder.

FolderStructure

 

Select File – > Export Template -> Project Template

ExportTemplate

TemplateDescription

Fill the details

  • Template Name
  • What the template does
  • Set the icon image ( .ico file)(optional)

There you go!!! You have template ready to add HTML5 websites to the solution with a readymade structure

HTML 5 WebSite

Creating Item Templates for HTML 5 in Visual Studio 2010.

Every time when we add HTML pages to the folder, we get a default structure for the HTML page. Now if we wish to have customized HTML 5 page with a structure, it would be great if we have option to ADD NEW ITEM and we have the HTML 5 page structure ready in place.

Steps to follow:

Create desired structure for your HTML 5 page in the website. Following is the structure for the web page.

<!DOCTYPE html5>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <header> HEADER </header>
    <nav>
        <ul>
            <li><a href="Home.html">Home</a></li>
            <li><a href="ContactUs.html">Contact Us</a></li>
            <li><a href="About.html">About Us</a></li>
        </ul>
    </nav>
    <footer> FOOTER </footer>
</body>
</html>

Select File – > Export Template – > Item Template . Refer above image for same step.

Select the file where the structure is created.

ItemExportTemplate

You come across the window which allows the references to be added. But for HTML 5 sites there are no references required at least for simple site. So click Next without checking the checkboxes.

SelectItemReferences

Fill the details as shown in next window.

  • Template Name
  • What the template does
  • Set the icon image ( .ico file) (optional)

SetTheItemDescription

 

There you go!!! You have template ready to add HTML5 pages to the project with your structure code.

HTML5Template

Android Installation on Windows7 and Creating a Simple Hello World Program

 

Mobility is driving you crazy . You wish to create a simple "HelloWorld" program that runs on Android OS. … But you are now confused as to ….How do I go about it or where do I start ?

This post is for "Beginners in Android". So if you are completely new, this post should be of help :) ……

What Is Android ?
Android is an operating system for mobile devices. Applications developed for Android are written in Java programming language.

How do I setup the enviornment for developing applications on Android?
To setup the environment , follow these simple steps:

1) Identify the operating system on your PC. Verify whether it is listed in the "Supported Operating Systems" section. Click on this link to verify http://developer.android.com/sdk/requirements.html

2)  Applications for Android are written using Java programming language.Set up the environment to "DEVELOP" Java Programs.

If you have to only run Java programs, then install Java Runtime Environment(JRE). But we will be developing programs, so install Java Development Kit(JDK) which includes JRE . There is no need of separate installation of JRE if JDK is installed.
Note: Identify the operating system and choose the correct version of JDK.
Click on below link to install JDK : http://www.oracle.com/technetwork/java/javase/index-137561.html

3) Surely you won’t write programs in Notepad. You will use an IDE(Integrated Development Environment) to code your applications. Preferred IDE would be Eclipse, but applications can be developed using other IDEs.
To install Eclipse , select proper version of Eclipse(3.5 or newer).
Click on below link : http://www.eclipse.org/downloads/

 
4)  To code applications , download the Android SDK . Android SDK provides tools and APIs to develop programs for Android OS. Download the Android SDK from this link : http://developer.android.com/sdk/index.html

5)  Your installed Eclipse IDE should be capable of developing Android programs. So install the ADT plugin for Eclipse. Click here to install the same : http://developer.android.com/sdk/eclipse-adt.html#installing

 
6) This is last but very important step. Install the essential platform components to complete the installation. This is done using Android SDK and AVD Manager which is installed once you install the SDK.

The above steps may differ depending upon your previous installations if you were developing Java programs. You can log on to http://developer.android.com/guide/basics/what-is-android.html to know more .

In my case , JDK was installed on D drive and the Android SDK on E Drive. I followed the above steps with simple but important settings.
You can relate the above steps to screenshots given below.

Step 1 : Operating System : Windows 7 64 bit

Step 2 : JDK Installation Folder: D:\JavaInstallations\JDK . Set the PATH variable to point to JDK installation.

JDK

Step 3,4 : Android SDK zipped package and Eclipse zipped package unzipped at folder location : E:\Programs\Android\Software

Android
Step 5 : Open Eclipse. Select Help-> Install New Software . You will come across the below window. Enter the remote site name http://dl-ssl.google.com/android/eclipse/  . Select the checkboxes and complete installation . Click this link for any problem.. http://developer.android.com/sdk/eclipse-adt.html

 InstallADTPlugin
Step 6 :

a) Android SDK and AVD Manager to install the remaining components. My folder location of this manager is E:\Programs\Android\Software\android-sdk_r08-windows\android-sdk-windows .

SDKManager

Run it and select all to install. After Installation, i could see all the installed packages .

InstalledPackages

Now lets just create a Simple project in Eclipse real quick:

1) Open Eclipse.Click on the eclipse symbol to load Eclipse.

Eclipse

2) Set the workspace. It is place to store your programs. On File Menu .. Select New -> Project. You will come across below screen.

AndoidProject
NOTE: In my case, I had to set the Location of Android SDK in Preferences, so as to let the eclipse locate the Android Tools and APIS for development

Preferences
3) Set the Project Name(on top.. hidden in image), Application Name, PackageName(can be of any order), Activity.. setting Min SDK version is not mandatory.

NewProjectDetails

4) You will see a folder structure with some default code.

JavaEclipseHellofolderStructure

4) Run the Application AS Android Application.

RunASWindow
5) Do not worry, There will be many windows popping up.. but they will start the EMULATOR or SIMULATOR which will run the program.

AndroidEmulator
6) Click on Menu.. You should see HelloWorld … Not magic :) Hello World Code is already written to get u started.. :)

HelloWorld2

2010 in review

The stats helper monkeys at WordPress.com mulled over how this blog did in 2010, and here’s a high level summary of its overall blog health:

Healthy blog!

The Blog-Health-o-Meter™ reads Fresher than ever.

Crunchy numbers

Featured image

A Boeing 747-400 passenger jet can hold 416 passengers. This blog was viewed about 13,000 times in 2010. That’s about 31 full 747s.

 

In 2010, there were 7 new posts, growing the total archive of this blog to 23 posts. There were 112 pictures uploaded, taking up a total of 5mb. That’s about 2 pictures per week.

The busiest day of the year was October 19th with 92 views. The most popular post that day was “NTLDR is missing” problem solved in Windows XP..

Where did they come from?

The top referring sites in 2010 were google.co.in, facebook.com, puneusergroup.org, google.com, and forums.silverlight.net.

Some visitors came searching, mostly for ntldr is missing windows xp, javax.comm, javax.comm windows, ntldr is missing xp, and ntldr missing windows xp.

Attractions in 2010

These are the posts and pages that got the most views in 2010.

1

“NTLDR is missing” problem solved in Windows XP. March 2009
3 comments

2

Communicating with ports using javax.comm package for Windows April 2009
6 comments

3

Push Notification in Windows Phone 7 August 2010
4 comments

4

How to consume/connect/use WCF service for Silverlight4 application. January 2010
2 comments

5

Theming in Silverlight January 2010
1 comment

Install a ThemePack on Windows 7

Bored of seeing the same desktop background or resetting from the ones already available…. Wishing to have a new theme. Confused how to get a brand new theme for your desktop and install it…

This post is targetting  “How you can personalize your desktop themes once you get a “Themepack”.

The below steps will install theme pack irrespective of version of operating system for Windows7 ,be it 64 bit or 32 bit.

So here we go:

Step 1: Get a new ThemePack for Windows 7. Click on the link to download Themepacks. http://windows.microsoft.com/en-US/windows/downloads/personalize/themes . You will cone across the below screen.

Windows7Themes

 

 

Step 2 : Save the downloaded Theme pack file at any location and double click to install the theme for your PC.

 

ThemePackIconThemePackWindow

Step 3: To set the current theme , you can go by any of the two ways:

Way 1:

1) Right click on desktop and click personalize.

 

PersonlizeWindow

Way 2:

1) Go to Control Panel Home.

ControlHome

2) Select Appearance and Personalization

3) Select Personalization.

You will come across the same screen as below any of the options chosen.

image

Select the theme installed and there you go… New Cool Theme for your Windows 7… Enjoy… Smile

A Simple Paint App on Windows Phone 7 using InkPresenter

Windows Phone 7 tools comes shipped with InkPresenter control . In this simple application , I  will select a color and draw on drawing surface which is an InkPresenter. Lets start.

Open Expression Blend , Select Windows Phone Application template.

pic1

For drawing surface , select  the InkPresenter control from Assets panel and draw it on ContentPanel(Grid). Call it as drawingCanvas.

pic3

Draw a simple palette  with ellipses of various colors laid over a colored rectangle to make it look like a palette.

pic4

After setting the page name and background color , below is how my paint app looks. Cool isn’t it.. :)

alt

Ok so UI is ready, lets wire it up with code-behind.

We need 2 variables . One to capture stroke and other to set the color of stroke.

SolidColorBrush colorPicked;
Stroke _colorStroke;

To capture mouse movements, we have to handle MouseLeftButtonUp, MouseLeftButtonDown and MouseMove events for the drawingCanvas.

 private void drawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            drawingCanvas.CaptureMouse();
            _colorStroke = new Stroke();
            _colorStroke.StylusPoints.Add(GetStylusPoint(e.GetPosition(drawingCanvas)));
            _colorStroke.DrawingAttributes.Color = colorPicked.Color;
            drawingCanvas.Strokes.Add(_colorStroke);

        }

        private StylusPoint GetStylusPoint(Point position)
        {
            return new StylusPoint(position.X, position.Y);
        }
        private void drawingCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (_colorStroke != null)
            {
                _colorStroke.StylusPoints.Add(GetStylusPoint(e.GetPosition(drawingCanvas)));
            }
        }

        private void drawingCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            _colorStroke = null;
        }

 

For selecting a color from palette we will wire up every ellipse in palette with a MouseLeftButtonDown  event and  set brush used to draw strokes with the Fill of the ellipse .

 private void SelectColor(object sender, MouseButtonEventArgs e)
        {
            Ellipse selectedEllipse = sender as Ellipse;
            colorPicked = selectedEllipse.Fill as SolidColorBrush ;
        }

XAML code is below.

<Grid x:Name="LayoutRoot">
		<Grid.Background>
			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="#FF00243B" Offset="0"/>
				<GradientStop Color="#FF005185" Offset="0.992"/>
			</LinearGradientBrush>
		</Grid.Background>
		<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" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FFA19696"/>
			<TextBlock Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="#FFC04111"><Run Text="P">
					<Run.Foreground>
						<SolidColorBrush Color="#FFA120FF">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="a">
					<Run.Foreground>
						<SolidColorBrush Color="#FF1BADEB">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="i">
					<Run.Foreground>
						<SolidColorBrush Color="#FFFFE153">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="n">
					<Run.Foreground>
						<SolidColorBrush Color="#FF56C011">
							<SolidColorBrush.RelativeTransform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.RelativeTransform>
							<SolidColorBrush.Transform>
								<MatrixTransform Matrix="Identity"/>
							</SolidColorBrush.Transform>
						</SolidColorBrush>
					</Run.Foreground>
				</Run><Run Text="t "/></TextBlock>
		</StackPanel>
		<Grid x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
			<InkPresenter Background="White"
				x:Name="drawingCanvas" MouseLeftButtonDown="drawingCanvas_MouseLeftButtonDown"
				MouseMove="drawingCanvas_MouseMove"
				MouseLeftButtonUp="drawingCanvas_MouseLeftButtonUp" Margin="8,8,8,197"/>
			<Rectangle Height="174" RadiusY="26" RadiusX="26" Margin="8,0,8,8" VerticalAlignment="Bottom">
				<Rectangle.Fill>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FF065474" Offset="0.004"/>
						<GradientStop Color="Black" Offset="1"/>
					</LinearGradientBrush>
				</Rectangle.Fill>
			</Rectangle>
			<Ellipse Height="66" Width="68" Fill="#FF005CF1"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="26,0,0,20" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFFF0C00"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="26,0,0,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFFDFF1F"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="108,0,0,20" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FF3AC00C"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Left" Margin="106,0,0,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Fill="#FF80007B"
				MouseLeftButtonDown="SelectColor" Margin="184,0,204,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFE99A0B"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,128,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FF9D073E"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,48,96" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Fill="#FF1A0CC0"
				MouseLeftButtonDown="SelectColor" Margin="184,0,204,20" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFA6C00C"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,128,16" VerticalAlignment="Bottom"/>

			<Ellipse Height="66" Width="68" Fill="#FFBE02F9"
				MouseLeftButtonDown="SelectColor" HorizontalAlignment="Right" Margin="0,0,46,18" VerticalAlignment="Bottom"/>
		</Grid>

		<!--ContentPanel - place additional content here-->
	</Grid>

This is it . Run your app and enjoy playing with strokes of different colors.

pic6

The xaml code above can surely be customized to include a WrapPanel with ellipses of various colors and loading the palette on click of button.

Below are some real good links for working with InkPresenter.

http://www.nickharris.net/2010/03/silverlight-for-mobile-on-windows-phone-7-inkpresenter-fun/

http://rongchaua.net/blog/windows-phone-signature-capturing-with-inkpresenter-and-save-to-png-file/

IE 9 The Beauty of WEB

iepic  Internet Explorer 9 Beta.. is out. IE9 is available for versions starting from Windows Vista,Windows 7..and supported for 32 bit and 64 bit.Gave it a try and spotted some real good features.

1) Sending images to Bluetooth devices from Browser itself.

If you have your mobile paired with your PC using Bluetooth, any image that you wish to send to your mobile can be easily sent from IE9 itself  by right clicking on an image and selecting Send Image to Bluetooth Device. I got the image real fast in my Nokia 7230 device. This saves a lot time…

image
 
alt image

2) Better printing and print preview options.

Printing support and print preview option is good in IE9. You can change the font, enable/disable background images and , set headers and footers etc.

image

 

 

3) Add site to Start Menu. 

You surf a site everyday.. Rather than opening the browser and clicking on bookmarks, IE9 provides a nice feature of pinning the site to Start Menu.

image  imageimage

4) IE 9 Developer Tools are great.. Excellent traffic capturing, viewing link paths, Validating html,css etc… I guess one line is not enough.. Shoud be writing another blog to explore only the IE9 developer tools…..

image imageimage

5) This is what I wished … Tracking and viewing  your downloads in IE9 … It is there :)

image

6) Great support for HTML5,CSS3 and really good rendering capabilities… You can download and explore IE9 at

http://www.beautyoftheweb.com/ 

Follow

Get every new post delivered to your Inbox.

Join 41 other followers