CS3240 Lab SEM-1 2009/2010 Page 1

CS3240 Human-Computer Interaction Lab Sheet

Lab Session 3

Designer & Developer Collaboration

CS3240 Lab SEM-1 2009/2010

Overview

In this lab, users will get themselves familarise with structure as Visual Studio, and because both applications are able to understand XAML, design work can be completed using Expression Blend and programming functionality can be easily added using Visual Studio. This coordination put both designers and developers on common ground, cooperatively on the same project with the same language.

Project Structures

When creating a new project in Expression Blend, there are the following four options:

· Silverlight 3 Application + Websiteo Use this option to create a Silverlight application along with the requisite files for

hosting it on a web page for you to deploy to your site· WPF Application

o Use this option to create a Microsoft .NET Framework client Windows Presentation Foundation (WPF)

· Silverlight 3 SketchFlow Prototypeo SketchFlow is a new technology in Expression Blend 3 that you can use to develop

prototype applications that can be quickly reskinned into real ones· WPF SketchFlow Prototype

o As with the Silverlight SketchFlow template, with this option you can rapidly develop prototypes of client applications using WPF

Normally we create the Silverlight application using the first option. structure that is created by Silverlight when you create a new project

Figure 1: Project Structure when create a new Silverlight

users will get themselves familarise with fact that Expression Blend uses the identical pro, and because both applications are able to understand XAML, design work can

be completed using Expression Blend and programming functionality can be easily added using Visual his coordination put both designers and developers on common ground, enabling them to

cooperatively on the same project with the same language.

When creating a new project in Expression Blend, there are the following four options:

Silverlight 3 Application + Website Use this option to create a Silverlight application along with the requisite files for hosting it on a web page for you to deploy to your site

Use this option to create a Microsoft .NET Framework client application using the Windows Presentation Foundation (WPF)

Silverlight 3 SketchFlow Prototype SketchFlow is a new technology in Expression Blend 3 that you can use to develop prototype applications that can be quickly reskinned into real ones

As with the Silverlight SketchFlow template, with this option you can rapidly develop prototypes of client applications using WPF

Normally we create the Silverlight application using the first option. The following figure 1 when you create a new project in Expression Blend

: Project Structure when create a new Silverlight project in Expression Blend

Page 2

uses the identical project , and because both applications are able to understand XAML, design work can

be completed using Expression Blend and programming functionality can be easily added using Visual enabling them to work

Use this option to create a Silverlight application along with the requisite files for

application using the

SketchFlow is a new technology in Expression Blend 3 that you can use to develop

As with the Silverlight SketchFlow template, with this option you can rapidly develop

figure 1 is the project in Expression Blend:

CS3240 Lab SEM-1 2009/2010

There is a project file (sample) and a website file (sampleSite)structure when create a new Silverlight object in Visual Studio.

Figure 2: Project Structure when create a new Silverlight

Similar to when creating a new Silverlight project in Expressionsite file (sample2) are being created.

Note that there are two Extensible ApplicatiThe “App.xaml” file is used for applicationwhereas the “MainPage.xaml” (in Expression Blend) & “Page.xaml” file (in Visual Studio) is the default opening page for your application.

roject file (sample) and a website file (sampleSite). The following figure 2 shows the project structure when create a new Silverlight object in Visual Studio.

: Project Structure when create a new Silverlight project in Visual Studio

Similar to when creating a new Silverlight project in Expression Blend: a project file (sample2) and a web

Note that there are two Extensible Application Markup Language (XAML) files that are being created. The “App.xaml” file is used for application-specific (that is, global) variables, functions, and settings, whereas the “MainPage.xaml” (in Expression Blend) & “Page.xaml” file (in Visual Studio) is the default

Page 3

following figure 2 shows the project

nd: a project file (sample2) and a web

on Markup Language (XAML) files that are being created. les, functions, and settings,

whereas the “MainPage.xaml” (in Expression Blend) & “Page.xaml” file (in Visual Studio) is the default

CS3240 Lab SEM-1 2009/2010 Page 4

There will always be a [ProjectName]TestPage.aspx and [ProjectName]TestPage.html page being created automatically upon creation of the Silverlight project. In this case, they are named as “SampleTestPage.aspx” and “SampleTestPage.html”.

Basically, these pages contains a line which runs the “Silverlight.js” javascript file, where the “Sliverlight.js” file contains a framework which runs the Silverlight object contained in the “MainPage.xaml” or “Page.xaml” file.

Designer first VS Developer first

When working in a Silverlight/XAML/Expression Blend/Visual Studio environment, a major consideration in determining which party should begin the project (designer or developer) is the degree to which the developer possesses design skills vs. the degree to which the designer is proficient in Expression Blend and is familiar with the basics of programming.

The goal in deciding who should begin the project is to minimize wasted effort by avoiding any actions which are inconsistent with the responsibilities of their collaborator. For example, a designer with minimal Silverlight experience might not be efficient in choosing between a StackPanel, a Grid or a Canvas as the appropriate container for some combination of controls.

The principal recommendation is that whichever party has more experience with the above-mentioned technologies should begin the process. This will frequently lead to a Developer First approach principally because many more developers will be experienced with Silverlight than designers.

CS3240 Lab SEM-1 2009/2010

Developer creates the form with elements

As explained above, the developer will create elements to use, such as the layout containers and labels or textblock.

1. Open up “Microsoft Expression Blend 3”. Cand name it “tutorial3”. Save it in a folder and leave the language as “

2. Select the [UserControl] layer in the “Objects and Timeline” panel, go to the “Properties” panel and change the “Layout” section’s width and height to 300px and 400px respectively.

Figure 1: Select the [UserControl] layer

3. Now, create a Grid container & “Pin Active Container”,“>>” button below the toolbar panel, drag &container. Align them as shown in figure 3.

Figure 3: Align the elements accordingly to what is shown above

with elements

As explained above, the developer will create the form, where they make the decision in choosing which layout containers and labels or textblock.

Open up “Microsoft Expression Blend 3”. Create a new “Silverlight 3 Application + Website” project, ave it in a folder and leave the language as “Visual C#”.

Select the [UserControl] layer in the “Objects and Timeline” panel, go to the “Properties” panel and width and height to 300px and 400px respectively. (See figure 1 &

: Select the [UserControl] layer Figure 2: Edit the layout in properties panel

& “Pin Active Container”, then expand the assets panel by clicking the below the toolbar panel, drag & drop Textblocks, Textboxes, and Button into the Grid

Align them as shown in figure 3.

: Align the elements accordingly to what is shown above

Page 5

, where they make the decision in choosing which

new “Silverlight 3 Application + Website” project,

Select the [UserControl] layer in the “Objects and Timeline” panel, go to the “Properties” panel and (See figure 1 & 2)

: Edit the layout in properties panel

expand the assets panel by clicking the drop Textblocks, Textboxes, and Button into the Grid

CS3240 Lab SEM-1 2009/2010

4. Now click on each element and go to the “Properties” panel, under the “Common properties” section, change the “Text” accordingly as shown in the following figure

Figure 4: Edit the elements accordingly to what is shown above

Now that the developer has created the form with elementswill now be pass to the designer to design the layout appearance of the form.to pass the “MainPage.xaml” file to the designer

Now click on each element and go to the “Properties” panel, under the “Common properties” section, change the “Text” accordingly as shown in the following figure 4

: Edit the elements accordingly to what is shown above

created the form with elements, to make it more attractive, to the designer to design the layout appearance of the form. The developer just needs

e to the designer.

Page 6

Now click on each element and go to the “Properties” panel, under the “Common properties”

, to make it more attractive, the XAML file developer just needs

CS3240 Lab SEM-1 2009/2010

Designer designs the form to make it attractive

As mentioned above, after the developer has created the form with the basic controls being created and in placed, the designer will now edit the design and make the form more attractive

1. Open the “MainPage.xaml” file in “Microsoft Expression Blend 3”

2. Select the “Grid” container and go to the “Properties” panel, at the “Brushes” section, select the “Gradient Brush” tab and try to adjust the colors to yellow on top and red at the bottom, or simply try adjusting it until the colors look attractive

Figure 5: Edit the colors to make it look more attractive.

Now that the designer is done with the design of the form, the XAML file will now be developer for coding on the event handler on the “Submit” button.

Developer writes the event handler codes

As mentioned earlier, a very big advantage about the designer and developer collaboration when creating a Silverlight application is that both of them uses the same XAML file, thus they can be easily bring over to both the Expression Blend and the Visual S

What happened in the past is that when tools, they pass it to the developers, whom will then write the CSS file, place and align the HTML elements & etc according to the designdeveloper need to redo everything that they did.

However, since both the designers and developers uses the same XAML file now when creating Silverlight applications, the designers’ work could stay aneed to redo) and could focus their time more on the codes

to make it attractive

As mentioned above, after the developer has created the form with the basic controls being created and in placed, the designer will now edit the design and make the form more attractive to the users

file in “Microsoft Expression Blend 3”

Select the “Grid” container and go to the “Properties” panel, at the “Brushes” section, select the “Gradient Brush” tab and try to adjust the colors to yellow on top and red at the bottom, or simply

until the colors look attractive enough. (See figure 5)

: Edit the colors to make it look more attractive.

Now that the designer is done with the design of the form, the XAML file will now be passedhandler on the “Submit” button.

Developer writes the event handler codes

As mentioned earlier, a very big advantage about the designer and developer collaboration when creating a Silverlight application is that both of them uses the same XAML file, thus they can be easily bring over to both the Expression Blend and the Visual Studio environment.

in the past is that when a designer designs the form in Photoshop or other designing tools, they pass it to the developers, whom will then write the CSS file, place and align the HTML elements & etc according to the design. The designers’ work will then become useless since the developer need to redo everything that they did.

However, since both the designers and developers uses the same XAML file now when creating Silverlight applications, the designers’ work could stay and the developer has lesser work to do (don’t need to redo) and could focus their time more on the codes – it’s much more convenient that way!

Page 7

As mentioned above, after the developer has created the form with the basic controls being created and to the users.

Select the “Grid” container and go to the “Properties” panel, at the “Brushes” section, select the “Gradient Brush” tab and try to adjust the colors to yellow on top and red at the bottom, or simply

passed back to the

As mentioned earlier, a very big advantage about the designer and developer collaboration when creating a Silverlight application is that both of them uses the same XAML file, thus they can be easily

a designer designs the form in Photoshop or other designing tools, they pass it to the developers, whom will then write the CSS file, place and align the HTML

then become useless since the

However, since both the designers and developers uses the same XAML file now when creating nd the developer has lesser work to do (don’t

it’s much more convenient that way!

CS3240 Lab SEM-1 2009/2010

1. First, open the “MainPage.xaml” file in “Microsoft

2. Press “F5” to run the file. On the browsebeing run in Expression Blend. (See figure 6)

Figure 6: See that the output being displayed is the same as when you run it in Expression blend

3. In the Button object, add in the following user clicks on the “Submit” button.

<Button Margin="59,0,67,13" VerticalAlignmentRenderTransformOrigin="0.52,0.455"Click="Button_Click" />

Now, right click on the “Button_Click” code and select “Navigate to Event Handler” (See figure 7)

Figure 7: Select the option to navigate to the event handler coding

pen the “MainPage.xaml” file in “Microsoft Visual Studio 2008”

the file. On the browser, see that it displays the same output just like when it is (See figure 6)

: See that the output being displayed is the same as when you run it in Expression blend

In the Button object, add in the following underlined code to add an event handler to take place when

VerticalAlignment="Bottom" Content="Submit"="0.52,0.455" Background="#FF1F3B53"

right click on the “Button_Click” code and select “Navigate to Event Handler” (See figure 7)

: Select the option to navigate to the event handler coding

Page 8

it displays the same output just like when it is

: See that the output being displayed is the same as when you run it in Expression blend

underlined code to add an event handler to take place when

="Submit"

right click on the “Button_Click” code and select “Navigate to Event Handler” (See figure 7)

CS3240 Lab SEM-1 2009/2010

4. After the previous step, you will be brought to the event handler of “Button_Click” event“MainPage.xaml.cs” file. Insert the following

private void Button_Click(object { MessageBox.Show("Form submitted!" }

5. Now, press “F5” and click on the submit – this shows that you have successfully added the event handler to handle the codes when users click on the submit button (See figure 8)

Figure 8: A message box is shown when user clicks on the

4. After the previous step, you will be brought to the event handler of “Button_Click” eventthe following one line of code into it:

object sender, RoutedEventArgs e)

"Form submitted!");

5. Now, press “F5” and click on the submit button and you will see the prompt message being displayed this shows that you have successfully added the event handler to handle the codes when users click on

: A message box is shown when user clicks on the submit button.

Page 9

4. After the previous step, you will be brought to the event handler of “Button_Click” event in the

button and you will see the prompt message being displayed this shows that you have successfully added the event handler to handle the codes when users click on

CS3240 Lab SEM-1 2009/2010 Page 10

CS3240 Silverlight Lab Exercise : Participation counts

In this exercise, you’ll create a simple application that will read product information from an XML file and then display them in Silverlight. To begin, download from IVLE the Lab3ExerciseResources.zip file.

Open the solution ProductsDisplay.sln in Blend 3 or Visual Studio.

You will find in the ZIP file, an XML file under ProductsDisplay.Web/AppCode called ProductDetailss.xml containing the description of the products as follows:

<?xml version="1.0" encoding="utf-8" ?> <products> <product> <productname>Nokia N97</productname> <imageurl>http://www.letsgomobile.org/images/news/nokia/nokia_n97.jpg</imageurl > <description>description</description> <cost>100</cost> </product> <product> <productname>productname 2</productname> <imageurl>url </imageurl> <description>description</description> <cost>150</cost> </product> <product> <productname>productname 3</productname> <imageurl>url </imageurl> <description>description</description> <cost>200</cost> </product> </products> Modify this file to include details for your product display. Do not modify anything between < >.

For this assignment, you are required to display the names of the three products so that when a user selects any one of the products, detailed product information that consists of product name, description, an image of product and the cost will be presented (before the selection, only limited data should be shown).

Sample code in MainPage.xaml.cs shows you how you can access data from the XML file. This code is in C# and you will be able to understand it quite easily if you know Java, C or C++.

You are free to decide on the GUI that the product selection process will use. You can also decide how the information will be displayed. For simplicity, you may assume that there will only be three products on display at any one time (you may ignore this simplification if it is not relevant to the approach you plan to employ).

CS3240 Lab SEM-1 2009/2010 Page 11

Submission Instructions: Show your working, completed exercise to your lab tutor. Zip your solution up and then upload it to IVLE Workbin-ActivitySubmission- Lab3 folder by Saturday 19th September 11:59pm.

Participation points: A basic application that fulfills the minimal requirements will earn you 1 participation point. Students who do a more thorough job and create an aesthetically pleasing interface (perhaps utilising animations/transitions/transformations from Lab 1 and 2), and/or otherwise utilising a robust approach from a code perspective (for example being able to scale to an arbitrary number of products), will be awarded 2 participation points. Do note that your tutor must acknowledge that your submission meets a minimum standard before participation marks will be awarded for this lab.

Tips:

1. You should not need to spend more than 1 hour to complete this exercise. You can amend (or more specifically, extract relevant portions of) the sample code in MainPage.xaml.cs to fulfill this exercise requirement.

2. The sample code provided might appear to be long, but it is fully documented with comments. Either remove the code segments irrelevant to the approach you will be utilizing, or identify the code segments that you require and then refer to it while implementing your solution.

3. For the designers, one possible approach is to utilise placeholder objects and design and apply animation onto the placeholder objects. Subsequently after loading the information from the XML file, update the placeholder objects with the “live data” from the XML file. Note: There are many other possible ways to approach this exercise. Do not let this suggestion constrain the way you think about and approach this exercise.

CS3240 Lab SEM-1 2009/2010

APPENDIX: Creating Out-of-Browser

In Silverlight 3, there is a new feature which enables user to write outthey can create an application that encapsulates its own window and that can be added to the start menu or the desktop.

Creating an out-of-browser application is very straight forward; just simply add some configuration to the application manifest to allow it to run offline.

Note that user could use either Expression Blend or Visual Studio, or even both IDE to create Silverlight applications. Expression Blend is more for designers to use, whereas Visual Studio is more for developers to use.

1. Open “Microsoft Visual Studio 2008” application2. Go to “File” > “New” > “Project…” (See figure 2

Figure 25: Create a new project in Visual Studio

3. Select “Silverlight” project types, and under templates, select “Silverlight Application”. Enter “tutorial2_labForOOB” as the name and save it in a folder. Click OK

Browser applications

new feature which enables user to write out-of-browser applications, so that they can create an application that encapsulates its own window and that can be added to the start

browser application is very straight forward; just simply add some configuration to the application manifest to allow it to run offline.

Note that user could use either Expression Blend or Visual Studio, or even both IDE to create Silverlight ions. Expression Blend is more for designers to use, whereas Visual Studio is more for developers

Open “Microsoft Visual Studio 2008” application Go to “File” > “New” > “Project…” (See figure 25)

: Create a new project in Visual Studio

Select “Silverlight” project types, and under templates, select “Silverlight Application”. Enter “tutorial2_labForOOB” as the name and save it in a folder. Click OK (See figure 26)

Page 12

browser applications, so that they can create an application that encapsulates its own window and that can be added to the start

browser application is very straight forward; just simply add some configuration to

Note that user could use either Expression Blend or Visual Studio, or even both IDE to create Silverlight ions. Expression Blend is more for designers to use, whereas Visual Studio is more for developers

Select “Silverlight” project types, and under templates, select “Silverlight Application”. Enter

CS3240 Lab SEM-1 2009/2010

Figure 26: Enter the details as accordingly

4. Open the “Page.xml” page and enter the following codes <StackPanel> <StackPanel Orientation <TextBlock <TextBlock </StackPanel> <Button x:NameClick="OOB_Click"></Button </StackPanel>

Basically, in the above code, there will be a main StackPanel container being created, whereas inside it, there will be a nested StackPanel to store two Textblocks which are basically for showing whether the application is run on a browser or offline, and a button for user to install the offline version of the application onto the computer.

Note that the button is named as “OOB”

: Enter the details as accordingly

” page and enter the following codes within the Grid container:

Orientation="Horizontal"> TextBlock Text="Instance Mode: "/> TextBlock x:Name="InstanceMode" />

Name="OOB" Content="Install OOB"

Button>

Basically, in the above code, there will be a main StackPanel container being created, whereas inside it, to store two Textblocks which are basically for showing whether the

application is run on a browser or offline, and a button for user to install the offline version of the

Note that the button is named as “OOB”

Page 13

Basically, in the above code, there will be a main StackPanel container being created, whereas inside it, to store two Textblocks which are basically for showing whether the

application is run on a browser or offline, and a button for user to install the offline version of the

CS3240 Lab SEM-1 2009/2010

5. Now, right click on the code saying figure 27)

Figure 27: Select “Navigate to Event Handler”

6. Now go to Page.xaml.cs page, under the main “Page” function, add in the following underlined line: public Page() { InitializeComponent(); Loaded += new }

The line is added to run a new event handler called “Page_Loaded”. However, that event handler does not exist in the codes yet. Thus

void Page_Loaded(object sender, { if (Application.Current.IsRunningOutOfBrowser) { InstanceMode.Text = OOB.Visibility = } else { InstanceMode.Text = OOB.Visibility = } } The “Application.Current.IsRunningOutOfBrowserof the browser, or is it running offline. As for the user is running the application on browser, they see this button which allversion of the application. Whereas when they are running it offline already, we will collapse the visibility of the button to hide from them.

lick on the code saying Click="OOB_Click” and select “Navigate to Event Handler” (See

: Select “Navigate to Event Handler”

page, under the main “Page” function, add in the following underlined line:

InitializeComponent(); RoutedEventHandler(Page_Loaded);

The line is added to run a new event handler called “Page_Loaded”. However, that event handler does not exist in the codes yet. Thus, to create it, type the following codes:

sender, RoutedEventArgs e)

.Current.IsRunningOutOfBrowser)

InstanceMode.Text = "Out of Browser"; OOB.Visibility = Visibility.Collapsed;

InstanceMode.Text = "In Browser"; OOB.Visibility = Visibility.Visible;

unningOutOfBrowser” is just checking whether the browser is running out of the browser, or is it running offline. As for the OOB.Visibility codes, it is a logical thinking: when the user is running the application on browser, they see this button which allows them to install the offline version of the application. Whereas when they are running it offline already, we will collapse the visibility of the button to hide from them.

Page 14

“Navigate to Event Handler” (See

page, under the main “Page” function, add in the following underlined line:

The line is added to run a new event handler called “Page_Loaded”. However, that event handler

” is just checking whether the browser is running out codes, it is a logical thinking: when the

ows them to install the offline version of the application. Whereas when they are running it offline already, we will collapse the

CS3240 Lab SEM-1 2009/2010

7. Now, run the browser and you will see that it says “In Browser” (See figure 2

Figure 28: Output shows “In Browser” 8. Currently, the “Install OOB” button doesn’t works yet. To make it work (click on it and it will install

the offline version of the application), it is simple. Go back to the “the OOB_Click event, add the following one line of code

private void OOB_Click(object { Application.Current.Install(); }

Now, run the browser and you will see that it says “In Browser” (See figure 28)

Currently, the “Install OOB” button doesn’t works yet. To make it work (click on it and it will install the offline version of the application), it is simple. Go back to the “Page.xaml.cs” file and go under

OOB_Click event, add the following one line of code that is underlined:

object sender, RoutedEventArgs e)

.Current.Install();

Page 15

Currently, the “Install OOB” button doesn’t works yet. To make it work (click on it and it will install ” file and go under

CS3240 Lab SEM-1 2009/2010

9. Now, the last step is to right click on the “Properties” (See figure 29)

Figure 29: Click on properties of the Silverlight application 10. Select the “Silverlight” tab and check

browser” (See figure 30)

Figure 30: check the box stating “Enable running application out of the browser”

Now, the last step is to right click on the “tutorial2_LabForOOB” application and click on

: Click on properties of the Silverlight application

check on the box stating “Enable running application out of the

: check the box stating “Enable running application out of the browser”

Page 16

ck on

on the box stating “Enable running application out of the

CS3240 Lab SEM-1 2009/2010

11. Click on the “Out-of-Browser Settings …” and enter the following details and click on OK:31)

Figure 31: Enter the details for “Out-of 12. Now press “F5” to run the application and click on the “Install OOB” button to install the offline

version of the application

Browser Settings …” and enter the following details and click on OK:

of-Browser Settings” as shown

“F5” to run the application and click on the “Install OOB” button to install the offline

Page 17

Browser Settings …” and enter the following details and click on OK: (See figure

“F5” to run the application and click on the “Install OOB” button to install the offline

CS3240 Lab SEM-1 2009/2010

13. Check both boxes to create the “Start menu” and “Desktop” shortcuts. (See figure 3

Figure 32: Create the shortcuts Now you will see the offline version of the application being opened up. (See figure 3

Figure 33: See that the offline version of the application being opened up. The application has detected that it is not opened in browser, it is openeversion), therefore under the “Instance Mode”, it displays “Out of Browser” instead of “In Browser”. Please refer to step 6 to find out why the “Install OOB” button has disappeared. There will be a desktop icon (See figure 3computer. To open the offline version of the application, simply open it from either of these shortcuts.

Figure 34: Desktop Icon

Figure 3

Check both boxes to create the “Start menu” and “Desktop” shortcuts. (See figure 32

Now you will see the offline version of the application being opened up. (See figure 33)

: See that the offline version of the application being opened up.

The application has detected that it is not opened in browser, it is opened out of browser (offline version), therefore under the “Instance Mode”, it displays “Out of Browser” instead of “In Browser”. Please refer to step 6 to find out why the “Install OOB” button has disappeared.

There will be a desktop icon (See figure 34) and a start menu item (See figure 35) being created on the computer. To open the offline version of the application, simply open it from either of these shortcuts.

Figure 35: Start menu item

Page 18

2)

d out of browser (offline version), therefore under the “Instance Mode”, it displays “Out of Browser” instead of “In Browser”.

) being created on the computer. To open the offline version of the application, simply open it from either of these shortcuts.

CS3240 Lab SEM-1 2009/2010 Page 19

To remove the application from the computer, simply right click on the application when it is opened, then select “Remove this application…” (See figure 36) Simply click “Yes” at the confirmation screen.

Figure 36: Select “Remove this application…” to remove the application