CS3240 Human-Computer Interaction Lab Sheet
Lab Session 3
Designer & Developer Collaboration
CS3240 Lab SEM-1 2009/2010 Page 1
Overview
In this lab, users will get themselves familarise with fact that Expression Blend uses the identical project 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, enabling them to work 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 + Website o 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 application using the Windows Presentation Foundation (WPF) · Silverlight 3 SketchFlow Prototype o 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. The following figure 1 is the project structure that is created by Silverlight when you create a new project in Expression Blend:
Figure 1: Project Structure when create a new Silverlight project in Expression Blend
CS3240 Lab SEM-1 2009/2010 Page 2
There is a project file (sample) and a website file (sampleSite). The following figure 2 shows the project structure when create a new Silverlight object in Visual Studio.
Figure 2: 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 site file (sample2) are being created.
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 opening page for your application.
CS3240 Lab SEM-1 2009/2010 Page 3
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 Page 4
Developer creates the form with elements
As explained above, the developer will create the form, where they make the decision in choosing which elements to use, such as the layout containers and labels or textblock.
1. Open up “Microsoft Expression Blend 3”. Create a new “Silverlight 3 Application + Website” project, and name it “tutorial3”. Save it in a folder and leave the language as “Visual C#”.
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. (See figure 1 & 2)
Figure 1: Select the [UserControl] layer Figure 2: Edit the layout in properties panel
3. Now, create a Grid container & “Pin Active Container”, then expand the assets panel by clicking the “>>” button below the toolbar panel, drag & drop Textblocks, Textboxes, and Button into the Grid container. Align them as shown in figure 3.
Figure 3: Align the elements accordingly to what is shown above
CS3240 Lab SEM-1 2009/2010 Page 5
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 4
Figure 4: Edit the elements accordingly to what is shown above
Now that the developer has created the form with elements, to make it more attractive, the XAML file will now be pass to the designer to design the layout appearance of the form. The developer just needs to pass the “MainPage.xaml” file to the designer.
CS3240 Lab SEM-1 2009/2010 Page 6
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 to the users.
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 enough. (See figure 5)
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 passed back to the 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 Studio environment.
What happened 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!
CS3240 Lab SEM-1 2009/2010 Page 7
1. First, open the “MainPage.xaml” file in “Microsoft Visual Studio 2008”
2. Press “F5” to run the file. On the browser, see that it displays the same output just like when it is being 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 underlined code to add an event handler to take place when user clicks on the “Submit” button.
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
CS3240 Lab SEM-1 2009/2010 Page 8
4. After the previous step, you will be brought to the event handler of “Button_Click” event in the “MainPage.xaml.cs” file. Insert the following one line of code into it: private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show("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 the submit button (See figure 8)
Figure 8: A message box is shown when user clicks on the submit button.
CS3240 Lab SEM-1 2009/2010 Page 9
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:
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 10
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 Page 11
APPENDIX: Creating Out-of-Browser applications
In Silverlight 3, there is a 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 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” application 2. Go to “File” > “New” > “Project…” (See figure 25)
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 (See figure 26)
CS3240 Lab SEM-1 2009/2010 Page 12
Figure 26: Enter the details as accordingly
4. Open the “Page.xml” page and enter the following codes within the Grid container:
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”
CS3240 Lab SEM-1 2009/2010 Page 13
5. Now, right click on the code saying Click="OOB_Click” and select “Navigate to Event Handler” (See 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 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:
void Page_Loaded(object sender, RoutedEventArgs e) { if (Application.Current.IsRunningOutOfBrowser) { InstanceMode.Text = "Out of Browser"; OOB.Visibility = Visibility.Collapsed; } else { InstanceMode.Text = "In Browser"; OOB.Visibility = Visibility.Visible; } }
The “Application.Current.IsRunningOutOfBrowser” 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.
CS3240 Lab SEM-1 2009/2010 Page 14
7. Now, run the browser and you will see that it says “In Browser” (See figure 28)
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 “Page.xaml.cs” file and go under the OOB_Click event, add the following one line of code that is underlined: private void OOB_Click(object sender, RoutedEventArgs e) { Application.Current.Install(); }
CS3240 Lab SEM-1 2009/2010 Page 15
9. Now, the last step is to right click on the “tutorial2_LabForOOB” application and click on “Properties” (See figure 29)
Figure 29: Click on properties of the Silverlight application
10. Select the “Silverlight” tab and check on the box stating “Enable running application out of the browser” (See figure 30)
Figure 30: check the box stating “Enable running application out of the browser”
CS3240 Lab SEM-1 2009/2010 Page 16
11. Click on the “Out-of-Browser Settings …” and enter the following details and click on OK: (See figure 31)
Figure 31: Enter the details for “Out-of-Browser Settings” as shown
12. Now press “F5” to run the application and click on the “Install OOB” button to install the offline version of the application
CS3240 Lab SEM-1 2009/2010 Page 17
13. Check both boxes to create the “Start menu” and “Desktop” shortcuts. (See figure 32)
Figure 32: Create the shortcuts
Now you will see the offline version of the application being opened up. (See figure 33)
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 34: Desktop Icon Figure 35: Start menu item
CS3240 Lab SEM-1 2009/2010 Page 18
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
CS3240 Lab SEM-1 2009/2010 Page 19