Last time we signed off with dealing with the different properties of the emulator, which we totally love. Now there is also another very important part of our app. If not more important than the emulator, it’s the life-line of the app. Now frankly speaking, nothing can be built, done or executed on the Windows Phone without the coding part. It’s like a human body without its soul, which makes it a zombie! To your disappointment, I am not going to delve into paranormal stuff in this blog, there are enough scary movies already around. Go and check their listings!!
Suggested Reading :
- Beginner’s Guide to Windows Phone 7 App development
- Create Hello World Application in Windows Phone 7
Today we will deal with the coding part of the simple ‘HelloKennedy’ app we executed last time.
Again, visuals will make the difference between make-and-break.
How? Why?? What???
1. OK I know these questions would have stuck to your minds since we first wrote or first app. Now a little info I wanna get into you again is that the programming language we are gonna use in our whole series of tutorial is C# (pronounced as C-sharp and not C-hash) of which I am sure you have heard a lot about. Now C# is a really cool language to start with. Even for first time programmers, C# is gonna be real easy and fun for you to do.
2. As with every programming available, C# has got two parts to it-the syntax and the environment.
The syntax deals with the codes, which statement will do what, where should I place this statement and many such things. The environment is the platform on which we perform such coding. Like for example in our case, the Visual Studio Express 2010 is the IDE (Integrated Development Environment) which we use. After that we have a thing called the ‘Runtime’ which is more or less the same as IDE. The runtime we are going to use in our tutorials is the ‘Silverlight runtime’. Just take a note of the keyword ‘runtime’ as this will crop up more often than not in our tutorial. Now take a breath and try to absorb in these two units by a real-world example-
“If you have ever driven a car, you would know how to steer, press and release the clutch, change the gears etc. Now when you do these actions, you don’t have to think about how the gear box will change the position of the levers inside the hood, how the gas is pumped in to give us power and stuff like that. These are done automatically by the car and we don’t have to worry about it. Similarly, in our app development, the code which we write is ‘you’ who is controlling the ‘car’, and we don’t have to worry about how the ‘engine’ or the IDE is going to do that.”
Hope you have a clear idea of what code and the environment are all about.
3. Let’s concentrate on the code which we wrote for our first app. You have seen that the code is written in many different colors which kind of help the programmer easily debug the app. It’s like a book which tries to take your attention on some words by writing them in a different color.
If you remember clearly, the code we wrote has been highlighted by me. It contains the command to what the Text Block is going to display when we click the ‘click me’ button.
You will see that the code we have written is placed at a particular spot on the coding window. Let’s just remove this from here and place the code somewhere else and see what happens.
Once we try to run the code, we get a whole lot of errors which are highlighted. Now you understand why each code has to be placed exactly in its right place or we are going to mess up the process.
Do remember to change back the code to where it originally was!
4. Take a note of the statement that encloses the command we wrote. It consists of the button name, ‘MyButton’ we gave to it when we first designed it. So this means when the user will click the button, the code which is inside this statement is going to be executed.
5. When you do take a look at the statement which we wrote, you will see that the first part of the statement or the ‘MyTextBlock’ is the name of the TextBlock we typed in the properties when we were designing the app. Hence this statement deals with what where the value is going to be displayed once the user clicks on the ‘Click me’ button. Next is the ‘period’ or the ‘dot’ which is going to ‘access’ the TextBlock and display some text as given after the ‘period’.
This is the way we access a TextBlock in C#, we write the name of the block we want to access and the give a period, and specify the type of input or assignment we are expecting.
The field which is assigned after the ‘equal to’ sign is the value the app will display once the user clicks on the ‘Click me’ button. This ‘equal to’ symbol is called the assignment operator. The field which is given on the right side of the assignment operator is assigned to the field given on the left-hand side. As it is a string, we have enclosed it inside double quotations or “ “. Now in order to end the statement, we use a ‘semi-colon’ or the ‘;’ symbol. This is like the full-stop in English which ends a sentence.
6. Now let’s try to change something about the code we wrote, like let us delete the semicolon and try to run the code-
As expected, the debugging process can’t continue and we are displayed with an error message. This pretty much sums up the fact that each code has to be written perfectly well and correctly, before we can debug it.
7. The IDE also gives an indication that you have done something wrong with the code or something is still missing by underlining it with a red curved line.
8. We must also take into view the ‘curly-braces’ which are all over the code. This is the indentation of each statement or the boundary o of the statement. Take into view another real-world example-
“Administrative wise, in a country there will be many states or provinces. The country can do whatever she wants within the boundary of its states or provinces. Once the country starts doing whatever she wants outside the boundary i.e. to other neighboring countries, problems are gonna arise. This is similar to our indentation. The country is the ‘statement’. The ‘curly braces’ indicate its control. Anything inside the curly braces can be executed by the statement, outside it, she can’t do anything.”
9. You must have also noticed that we have two kinds of codes in our app development, the one with the .xaml extension and the other with the .xaml.cs extension. Broadly speaking, the .xaml code deals with the ‘look’ of the app, or how the app is going to look like. The .xaml.cs code on the other hand deals with the ‘behavior’ of the app, or how the app is going to behave. These two are very much related to each other and any change in one of them is going to be reflected on the other too.
10. How are they related? I will show you on the code. Just click the button we created on the design page and see to the left to view the .xaml coding. This will look something like this-
At the end of the statement we can see that there is a command which says, Click=”MyButton_Click” (highlighted) which will then access the .xaml.cs code and fire up the code we wrote. So, they are very much connected to each other.
The .xaml code is an xml based syntax which we will not be dealing with now. The .xaml.cs is a representation of the C sharp code which can be stated by the .cs extension or .c sharp extension.
So that’s pretty much it about the syntax and the environment of the Windows Phone 7 SDK. Will catch you back later with some cooler stuffs. Bye for now!