wp7 hub_introducción a silverlight
DESCRIPTION
Fase 2.2TRANSCRIPT
Introduction to Silverlight
PROGRAM DESIGN WITH SILVERLIGHT
Silverlight 1September 2007
Silverlight 2October 2008
Silverlight 3July 2009
Silverlight 4April 2010
Business Applications
Media
Beyond the Browser
Silverlight 4
Programming and Design Software and Design
It is a sad fact that most programmers are not very good at graphic design
Although some are (lucky people)
Also, most designers do not program much
Programming and Design Separation of tasks
One way to get good looking programs is to separate the graphical design aspects from the programming
The designer can work on the look and feel of the application
The programmer can implement the required behaviours
Silverlight supports this way of working
Programming and Design Tools for the job : Graphical Design
A Silverlight designer can use the “Expression Blend” to specify the appearance of the user interface
A version of Blend for the phone is supplied as part of the phone SDK
Programming and Design Tools for the job : Code Creation
A Developer can take the user interface design and use Visual Studio build the program to make it work
Windows Phone developers use Visual Studio
Programming and Design The Metro design style
The Windows Phone team have taken a lot of trouble over the look and feel of the phone
They have created a design style, “Metro” to express this
Programs on the phone should reflect this style
Programming and Design Design Style and programming
As programmers we probably start of just worrying about making the program work
This is a very good place to start
But in modern systems the “look and feel” of the user interface is very important
No matter how good the code is, if the program is hard to use it will not be popular
You should pay careful attention to user interface issues when making your programs
Programming and Design Silverlight and Metro
To make life easier for us the Metro style is “baked in” to the Windows developer tools
The default appearance, behaviour and fonts of the user elements all match the style
If you want to find out more about Metro you can read the style guidelines for it
Programming and Design Silverlight and Us
We are going to use the Silverlight designer in Visual Studio
This can be used to create a good quality user interface that adheres to the Metro principles
If you know any Graphic Designers it is worth getting them on your development team when you make a Marketplace application
They can make your programs much more impressive
Programming and Design Software Objects
In this study of C# we will see that we can create software objects to represent things
We talk to our customer to establish their requirements and then identify elements that our software will manipulate
We then create software classes which contain the data and behaviours
For example, if we were creating a bank application..
Programming and Design Software Objectspublic class Account{ private decimal balance ; private string name ; public string GetName () { return name; } public bool SetName (string newName){ { // Final version will validate the name name = newName; return true; } // Other get and set methods here}
Programming and Design Data memberspublic class Account{ private decimal balance ; private string name ; public string GetName () { return name; } public bool SetName (string newName){ { // Final version will validate the name name = newName; return true; } // Other get and set methods here}
This is the data our bank account will hold:
The name of the holder and the balance
Programming and Design Data memberspublic class Account{ private decimal balance ; private string name ; public string GetName () { return name; } public bool SetName (string newName){ { // Final version will validate the name name = newName; return true; } // Other get and set methods here}
These are the behaviours the account provides
Programming and Design Using the Account class
The bank program can create instances of the account class and use them to hold customer information
Each instance of an account represents a particular customer
The bank software calls methods in the Account class to work with the data in it
Account rob = new Account();
rob.SetName("Rob");
Programming and Design Objects Oriented Design
Object Oriented Design is a great way to manage complex projects
It lets you break the solution down into manageable chunks
It allows you to put off detailed implementation of the elements until you know what they need to do
It allows you to test objects separately before they are incorporated into the product
Programming and Design The Silverlight Adding
Machine This is a very simple
calculator All it can do is add two numbers
The user types the numbers into the text boxes and presses the equals button
The answer is displayed at the bottom of the screen
Programming and Design Silverlight and Objects
Silverlight is implemented using objects to represent the elements on a User Interface
Each of the items on the screen of the application shown is graphical rendering of a software object
Silverlight display elements
Application title Page title First number Plus text Second number Equals button Result text
Display element data Each of the elements contains data
elements that define how it appears on the screen Position on the screen Height and width Font colour and size etc..
These values are used by Silverlight when the display is drawn
If these value are changed by the program the appearance of the element will change
Types pf element The adding machine actually contains
three different types of Silverlight display element
TextBox Used to receive user input from the
keyboard TextBlock
Used to display messages to the user Button
Used to cause events in the application
Class Hierarchies and Silverlight The elements will have some properties in
common All will have a position on the screen
and a height and width But there will be some properties that are
specific to that element Only a TextBox needs to track the cursor
position for user input A class hierarchy is a great way to
implement this
Silverlight element class hierarchy The Silverlight class
hierarchy is quite complex
Everything is based on the FrameworkElement class which contains the fundamental properties of all elements
There are many other classes
FrameworkElement
TextBlock
TextBox ContentControl
ButtonBase
Button
Control
Class Hierarchies Using a class hierarchy for Silverlight
elements has many advantages A particular set of element data only
needs to be stored once, at the appropriate position in the hierarchy
The display drawing system can treat them all display elements in exactly the same way
We can add new Silverlight elements that extend the behaviour of existing ones
Silverlight and Code This means that to update the items on a
display our program will be calling methods or updating properties on the appropriate software object
The next time that object is drawn the Silverlight rendering system will use the new data values and the appearance of the object will change to match
Silverlight and Design When we design a user interface we set
values to give the elements position and size
We do not do this from a program that we write (although we could)
Instead we are going to use the design tools in Visual Studio to set up the elements
We are going to start by using the element toolbox and the design surface
The Toolbox and Designer Visual Studio provides a
menu of Silverlight elements that can be placed on the display page
You can do this by simply dragging the elements from the toolbox onto the page
Demo 1: Adding display elements
Demo
Silverlight element names When you drag an element onto the page
Visual Studio creates a new variable in your program
These are declared in a special area of the project that Visual Studio looks after for you And you should not fiddle with this or
bad things will happen However, you should always make sure
that your variables have sensible names
Setting the name of an element The default name of an element is not
useful TextBox1, Button1 etc
We want to have more meaningful names firstsNumberTextbox, EqualsButton etc
We can use the Properties window in Visual Studio to update the name of an element in our program
Setting an element The name of an element is
right at the top of the properties pane in Visual Studio
To display the properties pane for an object, click on the object in the design surface
The pane will usually be located at the bottom right of the Visual Studio display
Editing the name of an element You can simply type in the
new name for your element here
Make sure that it is a valid C# variable name, or Visual Studio will complain
When you navigate away from this textbox the name will change
Demo
Demo 2: Display element names
Silverlight element properties We have seen that Visual Studio lets us manipulate
the properties of the display elements We can drag them around the display page We can set values using the property pane
Now we are going to consider how the properties actually from the perspective of C#
To do this we have to revisit what properties are in C# classes
35
Properties in C# A program is made up of classes A class can contain data and behaviours The data is held in member variables The behaviours are provided by member
methods When you design an application you
decide what classes are required and the data and behaviours they have
Private and Public Data in a class is usually made private Methods are usually public You call methods to make changes to the
data inside the class This means that all changes to data in the
class is controlled Programmers love having control........
Managing Class Data We might decide to create a class called Account to
store information in a bank The Account class will have lots of data items that
are stored about each customer Each of these items will map onto a data member
of the class The programmer must then provide methods to get
and set the values of the items
Bank accounts and data Perhaps our bank needs to store the age of the
account holder Perhaps they are concerned about allowing very
young people to draw out too much cash This information must be stored in the account It will be a data member within it
NameProperty
The age value is a private member of the Account class
To work with the age value we have to provide methods that are public
public class Account
{
private int age;
/// rest of account here
}
Using Get and Set methods
public class Account
{
private int age;
public int GetAge()
{
return this.age;
}
public void SetAge( int inAge )
{
if ( (inAge > 0) && (inAge < 120) )
{
this.age = inAge;
}
}
}
Managing the Age
When we want to control the age property we can call the SetAge method
We can use the GetAge method to read the age of the account holder
CurrentAccount a = new Account();
a.SetAge(21);
Get and Set Methods Creating Get and Set methods is a standard
programming pattern Frequently they will perform validation of incoming
data and reject out of range values I have not added any validation to the set method
yet Nobody with an age less than 8 or greater than
100 can have an account
Using Properties The C# language provides properties to make
getting and setting data easier They do not make things possible that we couldn’t
do before They must make the programs easier to write
Properties are used extensively in Silverlight for display elements
Age Property
public class Account
{
private int ageValue;
public int Age
{
set
{
if ( (value > 8) && (value < 100) )
ageValue = value;
}
get
{
return ageValue;
}
}
}
Property Keywords The block of code after the get keyword is
obeyed when the property is read by a program It must return a value of the property
type The block of code after the set keyword is
obeyed when the property is written Within the set block the keyword value
means “The value being assigned to the property”
Using the Age Property
When a program uses a property it looks just like direct access to a data member
The difference is that the get or set behaviours are used the blocks of code in the property are used
This makes the code much tidier
Account s = new Account ();
s.Age = 21;
Console.WriteLine ( "Age is : " + s.Age );
Property validation
If the property uses validation it I up to the user of the property to make sure that an assignment worked correctly
Account s = new Account ();
int newAge = 150;
s.Age = newAge;
if (s.Age != newAge )
Console.WriteLine ( "Age was not set" );
Multiple properties for one value
This property only has a get method It provides a way of reading the age in months
public int AgeInMonths
{
get
{
return this.ageValue*12;
}
}
Properties and Silverlight The items that we see in the properties Pane for an
element are all C# properties When an assigning to an element property a
program runs code inside a C# set behavior This might seem inefficient
Accessing the data directly would be quicker But it is actually a necessary part of how Silverlight
runs
50
Properties and Notification The set method in a Silverlight property has to do a
lot more than just update the stored data This action will also trigger a display update for the
screen Setting a property in a program also sends a
notification to the program that the property is being changed
This idea of using property changes to trigger events is one we will return to
51
Page Design with Silverlight We can design all our pages by dragging items onto
the page, giving them a name and then setting their properties
Visual Studio will create all the code behind the program to make this work
You can set many properties of element s including colour, texture, transparency and even animation
But this is best left to Graphic Designers
52
Review Visual Studio provides a complete design tool for
creating and managing user interfaces A Silverlight display is made up of elements Each element is implemented by a C# class which
is part of the element hierarchy Silverlight elements expose properties which allow
programs (and Visual Studio) to determine their location and appearance on the display page
53
UNDERSTANDING XAML
XAML and Silverlight A Silverlight application is made up of pages that
contain elements These have properties that determine where they
are, how they appear and what they can do in an application
The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane
55
Expressing Silverlight Elements
The description of the elements in a Silverlight application is actually held in a text file
This file is formatted in a particular way Microsoft invented a language, XAML to hold this
design information: eXtensible Application Markup Language
XAML was invented to hold user interface design information
56
Why do we need XAML? XAML allows us to separate the role of graphic
designer and programmer The designer should not have to see code objects
to work The programmer should not be held back while
the design is produced The XMAL file provides a separation between the
code that drives the application and the way the application looks
57
XAML file content
This snippet of XAML is the description of the firstNumberTextBox in our adding machine
It contains fields that describe the position and size of the textbox
This file is managed by Visual Studio as your program is being developed
58
<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox"
Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" />
XAML in Visual Studio
The XAML file holds the information which is updated by both views
59
The XAML language XAML is a “declarative” language It just tells us about things, it does not tell us what
they do and how they can do it The XAML file has a particular format
The characters < and > are used to mark the start and end of some elements in the file
The format looks a bit like XML eXtensible Markup Language
60
Using XAML You can actually edit the XAML text in your project
to create new display elements and modify existing ones
This can often be much quicker than using the editing interface provided by Visual Studio
You just have to type the new values into the XAML window and the properties of the element are changed immediately
61
62
Demo 1: Editing XAML
Demo
The XAML file at run time When a Silverlight program runs the XAML file is
compiled into a set of low level display instructions that are obeyed by the Silverlight runtime system
This is the point at which the XAML object descriptions in the text are converted into program objects we can use in our code
This all happens automatically as far as we are concerned
63
XAML and XML XAML looks a bit like XML
XML means “Extensible Markup Language” This means that XML is really a way of designing
languages that want to talk about something Just like the english language lets us invent verbs
and nouns and put them into sentences that have meaning in a particular context
64
Inventing our own XML
This XML format to hold a video game high score table
65
<?xml version="1.0" encoding="us-ascii" ?>
<HighScoreRecords count="2">
<HighScore game="Breakout">
<playername>Rob Miles</playername>
<score>1500</score>
</HighScore>
<HighScore game="Space Invaders">
<playername>Username</playername>
<score>4500</score>
</HighScore>
</HighScoreRecords>
HighScore element
The HighScore element contains two other elements, playername and score
It also has a property that gives the name of the game
We could add others, for example the date and time the score was achieved
66
<HighScore game="Breakout">
<playername>username</playername>
<score>1500</score>
</HighScore>
HighScoreRecords element
The HighScoreRecords element contains a count of the number of HighScore elements
67
<?xml version="1.0" encoding="us-ascii" ?>
<HighScoreRecords count="2">
<HighScore game="Breakout">
<playername>username</playername>
<score>1500</score>
</HighScore>
<HighScore game="Space Invaders">
<playername>username</playername>
<score>4500</score>
</HighScore>
</HighScoreRecords>
XML and data structures
We can invent our own language format whenever we have some structured data that we want to store
The designers of XAML have done this They have created a language that lets us design
user interfaces
68
The XAML data revisited
We can see that the XAML content that describes a textbox is very similar to a HighScore element
The designers of XAML had to work out what data fields are required in a TextBox object
69
<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox"
Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" />
What is a Markup Language? The “ML” in XML stands for “Markup Language” A markup language was originally a set of
commands for the printers of a document ‘Put the words “Table of Contents” in bold’
When the World Wide Web was created the Hyper Text Markup Language was designed to allow a text file to describe a particular web page design
70
XML and HTML The idea of creating your own markup language
was such a good one that people wanted a standard form for doing this
XML came out of this drive for standards It is the way in which the files use the < and />
and other characters to mean the start and end of elements, names and properties
It also tells you how to create “schemas” that define the structure and content of XML documents
71
XML Schema An XML schema describes a particular XML
document format: “A HighScore element must contain a
PlayerName and a Score value, but the Date value is optional”
Programs can use a schema to make sure that a particular document contains content which is valid
72
XML and software XML allows programs to share data irrespective of
what kind of system was used to create the data There are many software tools that can create
schemas and you can even store the contents of C# directly into XML structured files
However, for now just remember that the description of a Silverlight page is a text file containing an XAML document
73
XAML and Silverlight Pages A Silverlight application is made up of a number of pages
Each page is expressed as a single XAML source file The page will contain descriptions of a number of
Silverlight elements From time to time we will have to make changes to
the XMAL file directly
74
Review The design of a Silverlight page is expressed as a
XAML document stored as text file The separation of the design from the program code
makes it much easier for designers and programmers to work together
The format of a XAML document is based on XML (an eXtensible Markup Language)
XML allows us to create languages that describe any kind of structured data
75
CREATING AN APPLICATION WITH SILVERLIGHT
Silverlight and C# Up until now all we have done is create XAML
designs for our application We have used the editing surface and the
properties pane, along with a text editor Now we are going to see where the program
content lives This code will provide the active content for our
calculator This will work out the result
77
The Visual Studio Solution Explorer
The Solution Explorer is another pane in Visual Studio
It shows all the elements in a particular solution
This includes all the application resources and XAML files
78
The MainPage.xaml file The MainPage.xaml file
contains the XAML that describes how the main page looks
If you add further pages to the application they will appear as xaml pages in the solution
79
The code behind a xaml page Each xaml page has a file
of C# behind it We can find this by
opening up the xaml file as shown in Solution Explorer
80
XAML file content
This is all the actual code behind our adding machine main page
81
namespace AddingMachine
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
}
}
MainPage class
This code is in a class called MainPage which extends the PhoneApplicationPage class
82
namespace AddingMachine
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
}
}
MainPage constructor
The code just contains the constructor that is called when the page instance is loaded
83
namespace AddingMachine
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
}
}
Initialise Components
The constructor calls a method that initialises all the components on the page
84
namespace AddingMachine
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
}
}
85
Demo 1: Code Behind
Demo
Health Warning We have just had a quick look in the “engine room”
of Silverlight This is somewhere you should never go Do not make any changes to this code or Visual
Studio may get very upset and you will almost certainly break your program
86
Running our application We can run our application if we
like We can type in values and press
the equals button But nothing happens Next we need to make a method
that will do the calculation and get it to run
87
calculateResult method
This method will calculate the result and display it If we call this the display will be updated
88
private void calculateResult()
{
float v1 = float.Parse(firstNumberTextBox.Text);
float v2 = float.Parse(secondNumberTextBox.Text);
float result = v1 + v2;
resultTextBlock.Text = result.ToString();
}
Obtaining values
This line gets the text out of the firstNumberTextbox and parses it to produce a floating point value
89
private void calculateResult()
{
float v1 = float.Parse(firstNumberTextBox.Text);
float v2 = float.Parse(secondNumberTextBox.Text);
float result = v1 + v2;
resultTextBlock.Text = result.ToString();
}
Calculating a result
This statement calculates the result we get by adding the values together
90
private void calculateResult()
{
float v1 = float.Parse(firstNumberTextBox.Text);
float v2 = float.Parse(secondNumberTextBox.Text);
float result = v1 + v2;
resultTextBlock.Text = result.ToString();
}
Displaying the result
This statement gets a string version of the result value and puts it into the result texbox
91
private void calculateResult()
{
float v1 = float.Parse(firstNumberTextBox.Text);
float v2 = float.Parse(secondNumberTextBox.Text);
float result = v1 + v2;
resultTextBlock.Text = result.ToString();
}
Silverlight elements and properties
The method works because the Silverlight elements expose properties that the program can read (to get the numbers typed in) and write (to display the required result)
Our program is able to work with the display elements because they are objects as far as we are concerned
The objects are created when the program starts
92
Getting the result Now all we need is to run the calculateResult
method when the Equals button is pressed To do this we have to connect an event generator
(the button) with the method that will run when the button produces an event
The event is generated when the user presses the equals button
93
Programs and events For events to work a program must have a way of
managing an event as a data object We need to be able to give the button an object
that represents a method to be called when the event occurs
C# provides a delegate mechanism that can create references to methods
Fortunately Silverlight and Visual Studio make this very easy to use
94
Events in Visual Studio We can ask Visual Studio to
create an event delegate for us by double clicking on the element in the designer
Visual Studio will do all the “plumbing” to make this work
95
The Event Handler Method
When we have double clicked the button we find that there is now a new method in the MainPage class
This will be called when the button is clicked in our program
96
Displaying the result
Visual Studio has given this method a sensible name This is based on the component name
We just need to add a call of calculateResult to get the program to work
97
private void equalsButton_Click(
object sender, RoutedEventArgs e)
{
calculateResult();
}
98
Demo 2: A Complete Solution
Demo
Managing Events The properties of a
Silverlight element include information about the events and what methods they are bound to
You can see this by selecting Events in the Properties pane
99
Events and XAML
We know that everything in Silverlight begins and ends with the XAML
When we add an event binding in Visual Studio this adds a property to the XAML for that component
You can see it above
100
<Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0"
Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" />
Review Behind each XAML file is a C# source file that
contains the behaviour for that page You add your own behaviours by putting methods
into this code file If you bind Silverlight events to elements the event
handlers are also placed in this file You connect these handlers to your code to produce
a working application
EXERCISE 1: TIME TRACKER USER INTERFACE DESIGN
EXERCISE 2: TIME RECORD XML DESIGN