CS3240 Human-Computer Interaction Lab Sheet Lab Session 3 Designer & Developer Collaboration 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 becausee both applications are able to understand XAML, design work can be completed using Expression Blend and programming functionality can be easily addedd 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 requisitee 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 Presentationn 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 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. 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. Page 4
Developer creates the form with elements As explained above, the developer willl 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 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. 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 thatt 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! 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. (Seee 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. <Button Margin="59,0,67,13" VerticalAlignment="Bottom" Content="Submit" RenderTransformOrigin="0.52,0.455" Background="#FF1F3B53" 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 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. 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: <?xml version="1.0" encoding="utf-8"?> <products> <product> <productname>nokia N97</productname> <imageurl>http://www.letsgomobile.org/images/news/nokia/nokia_n97.jpg</imageu rl > <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). 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 19 th 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. 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) Page 12
Figure 26: Enter the details as accordingly 4. Open the Page.xml page and enter the following codes within the Grid container: <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Instance Mode: "/> <TextBlock x:name="instancemode" /> </StackPanel> <Button x:name="oob" Content="Install OOB" Click="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 Page 13
5. Now, right click on the code saying Click="OOB_Click and select Navigate to Event figure 27) Handler (See 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. Page 14
7. Now, run the browser and you willl 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(); } Page 15
9. Now, the last step is to right click on the tutorial2_labforoob application and click ck 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 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 Page 17
13. Check both boxes to create the Start menu and Desktop shortcuts. (See figure 332 2) Figure 32: Create the shortcuts Now you will see the offline version of the application being opened up. (See figure 333) 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 opene opened d 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) 3 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 335: Start menu item 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 Page 19