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. <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 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: <?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.