CS3240 Human-Computer Interaction Lab Sheet Lab Session 5 Navigation Framework

Transcription

1 CS3240 Human-Computer Interaction Lab Sheet Lab Session 5 Navigation Framework CS3240 Lab SEM /2010 Page 1

2 Overview In this lab, students will familiarize themselves with creating and get to learn and experience the advantages of a Navigation framework application by following through this step-by-step process. Creating a new Silverlight Navigation Application Navigation framework allows users to easily implement navigation between the newly created Page controls in a Silverlight application, interacts with the Browser History journal and provides Uri mapping in the Silverlight application itself. Let s get started: 1. Open Microsoft Visual Studio 2008 and go to File > New > Project & select the Silverlight Navigation Application, name it tutorial5 and save it together with the other tutorials that were created previously. Click on OK and click OK again when prompted to host it on a web site. (See figure 1) Figure 1: Creating a Silverlight Navigation Application on Visual Studio 2008 Note that a Silverlight Navigation Application is a project for creating a rich internet application using Silverlight (.NET Framework 3.5) CS3240 Lab SEM /2010 Page 2

3 2. Now go to the Solution Explorer and right-click on the MainPage.xaml file, click on Open in Expression Blend (See figure 2) Figure 2: Select the Open in Expression Blend 3. Click Yes when prompt with the following window (figure 3) which states that it might be a risk: Figure 3: Simply click Yes when prompted with this window. CS3240 Lab SEM /2010 Page 3

4 In Expression Blend, it should display something like the following figure 4 now: Figure 4: Expression Blend should display something like the above now 4. Go to the Projects panel, under tutorial5.web, right click on the tutorial5testpage.html file and select Startup so that it will be marked as the start up page when debugging. Press F5 to view the project that is done so far. (See figure 5) Figure 5: List of files that exist in the tutorial5 solution CS3240 Lab SEM /2010 Page 4

5 The browser should be displaying the following template which was created by default upon creating the Silverlight navigation application itself. (See figure 6) Figure 6: Viewing the default pre-created page and controls of the Silverlight navigation application 5. Notice that currently, the home tab on the top right corner is highlighted in Blue. Click on the about tab to navigate to that page. 6. Now, from the about page, click on the Browser History control located on the left side of the web browser, notice the following figure 7: Figure 7: Click on the Browser History control CS3240 Lab SEM /2010 Page 5

6 This is the browser history integration feature in Silverlight 3 which will by default, the Frame control integrates with the Browser History journal, which means that every page that the Frame control navigates to, is recorded in that journal. Besides the history integration feature, there is also this DeepLinking feature which when user navigates around different pages in the Silverlight navigation framework, the Frame generates appropriate URLs and query strings, so users are able to access and use them further in the context of the current page. Also, when the URL is being copied and pasted into a new page, the Silverlight application loads and Frame control will navigate to the exact page, specified in the URL. It is simple to create a set of new navigation links. Since home and about are created by default, we will create one more navigation link. 7. Go to the Objects and Timeline panel and navigate to [UserControl] > LayoutRoot > NavigationGrid > LinksBorder > LinksStackPanel and you will see that this is where all the HyperlinkButton object (navigation link) and Rectangle object (divider) are located at. (See figure 8) Figure 8: LinksStackPanel stores all the links and dividers, which are basically the navigation links located at the top right corner of the Silverlight navigation application (See figure 9) CS3240 Lab SEM /2010 Page 6

7 Figure 9: Navigation links 8. A good way to create a new navigation link is to Shift+click on the Divider1 and Link2 element to select them together; then right-click and click on Copy. 9. Now right-click on the LinksStackPanel container and select Paste, you will notice that the following updates were being added to the LinksStackPanel container (See figure 10) Figure 10: The circled two objects were being added by the end of step 9 CS3240 Lab SEM /2010 Page 7

8 Now simply rename the Divider1_Copy to Divider2 and Link2_Copy to Link3. (See figure 11) Figure 11: Rename the two objects 10. Now click on the Link3 layer and go to the Properties panel, notice that under the Common Properties > update the Content value to Products & NavigateUri value to /Products (See figure 12) Figure 12: Update the common properties on the Link3 layer Note that when /Products value was being entered in the NavigateUri field, it means that when user click on this HyperlinkButton, the navigation frame will go to Products.xaml file. However, unlike the About.xaml and Home.xaml files that were created by default, Products.xaml file does not exist yet. So let s create it now. CS3240 Lab SEM /2010 Page 8

9 11. Go to the Projects panel and under the tutorial5 application project, expand the Views folder and you will see the following figure 13: Figure 13: Views folder under the Projects panel Note that this is the directory which stores all the Page XAML files that will be navigated by the navigation framework Silverlight application. As you can see, About.xaml and Home.xaml are located in this directory, and they are being browsed from the HyperlinkButton object via the NavigateUri content of /About and /Home respectively. CS3240 Lab SEM /2010 Page 9

10 12. Right-click on the Views folder and go to Add New Item ; select to create a Page and name it as Products.xaml and click OK (See figure 14) Figure 14: Create the Products.xaml Page file 13. To demonstrate that users are allowed to place any objects on a Silverlight navigation application, now select the rectangle tool and draw a rectangle on the design surface of Products.xaml. Give it a striking color and press F5 to run it, go to the products navigation link to check whether the rectangle can be seen. (See figure 15) Figure 15: The rectangle object is shown clearly on the Products.xaml page CS3240 Lab SEM /2010 Page 10

11 14. Now go back to the MainPage.xaml file and select the ApplicationNameTextBlock Object and under the Common Properties, change the Text value to Tutorial5 (See figure 16) Figure 16: Select the ApplicationNameTextBlock object & change its Text value Note that users not only can change the title of the navigation framework application, they can even change the logo beside it as well. 15. Select the [ContentControl], note that there is this drop down list on top, right below the page tab. Hover the mouse over it and select Edit Template > Edit Current (See figure 17) Figure 17: Select the Edit Current to edit the [ContentControl] object (logo) CS3240 Lab SEM /2010 Page 11

12 The Expression Blend 3 tools should look something like the following figure 18: Figure 18: LogoIcon being opened in Expression Blend 3 At this point, users can choose to edit the logo image or even replace it with different images. For demonstrating purpose, let s flip this image. 16. Select the [Grid] layer and go to the Properties panel, under the Transform section, go to the 3rd tab and change the X value to -1 (See figure19) Figure 19: Update the above value to flip the logo horizontally CS3240 Lab SEM /2010 Page 12

13 17. Now, save the file and press F5 to run the Silverlight navigation framework application on the browser. Note that the logo has been flipped and is updated on all XAML files (See figure 20) Figure 20: In the browser, note that the logo has been flipped and is updated on all XAML files Summary In this lab, users have worked on one of the greatest features of Silverlight 3 - the Navigation framework allows users to easily navigate between pages, without writing a lot of code (so far no coding); it supports Browser History integration and, displays adequate URLs in the browser and allows users to map them. Lab Assignment Create a Silverlight navigation application and modify the title to NUS Shuttle Bus Intelligence with For Students, For Visitors and Help tabs. Modify the application logo using an image of your choice. In the For Students tab, show a static page containing information for students who frequently use buses. Simply display data using grids and labels about all the shuttle buses that are currently on the CS3240 Lab SEM /2010 Page 13

14 road and when they will reach their next destination (Eg. A1 arriving at Central Library in 5min, A1 arriving at NUH in 30sec, A2 arriving at Business in 2min, B arriving at YIH in 1 min, etc). In the For Visitors tab, put a campus map of NUS. In the Help tab, put a few FAQs (frequently asked questions) along with answers about how people can use your actual project application. Submission Instructions: Show your working, completed exercise to your lab tutor. Zip your solution up and then upload it to IVLE Workbin-ActivitySubmission- Lab5 folder by Saturday 10th October 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 through 4), and/or otherwise utilising a robust approach from a code perspective (for example being able to scale to an arbitrary number ofproducts), 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. CS3240 Lab SEM /2010 Page 14