Computer Science Teacher
Computer Science Teacher - Thoughts and Information from Alfred Thompson

July, 2012

  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    Virtual Windows 8 Hands-on-Labs

    • 0 Comments

    Ready to learn how to develop for Windows 8? Well perhaps not quite ready for a dedicated machine or concerned about complicated set-up? Well in those cases the new Virtual Windows 8 hands-on-labs may be just what you need!

    What are virtual labs? 

    Microsoft Virtual Labs enable you to quickly evaluate and test Microsoft's newest products and technologies through a series of guided, hands-on labs that you can complete in 90 minutes or less. There is no complex setup or installation required, and you can use MSDN Virtual Labs online immediately, free.

    clip_image001 clip_image002

    New! Windows 8 Release Preview Virtual Labs

    Windows is the premiere development platform. With Windows 8, developers can leverage their existing skills and code assets to create Metro style apps. Step into these virtual labs and learn how to build, share and sell interesting and easy-to-use applications that will make your customers happy. Virtual labs are simple –no complex setup or installation required.

    Landing page:  http://msdn.microsoft.com/en-us/jj206431.aspx

    Windows 8 Release Preview Virtual Labs

    · MSDN Virtual Lab: Windows 8: Lab 1 - Creating a Windows 8 Metro Style App - C#
    Contoso Cookbook is a series of hands on labs designed to immerse you into Windows 8 Metro style app development. In this first lab in the series, you will use XAML and C# to create the application, implement navigation, download the data from Windows Azure (or load it locally if you don’t have an Internet connection), and connect the data to controls using data binding.

    · MSDN Virtual Lab: Windows 8: Lab 2 - Orientation, Snapping, and Semantic Zoom - C#
    In this lab, you will build upon Lab 1 by adding three important UI-related features to Contoso Cookbook. First, you will customize the layout of the item-detail and group-detail pages when the screen is rotated. Next, you will customize the layout of the item-detail page when the application is snapped. Finally, you will implement semantic zoom in the start page, enabling users to zoom out and see all the recipe groups on a single screen.

    · MSDN Virtual Lab: Windows 8: Lab 3 - Searching and Sharing - C#
    In this lab, you will add support for searching and sharing to Contoso Cookbook. You will get first-hand experience implementing searching and sharing contracts, and learn how these contracts provide a higher level of integration between either two Metro style apps or an app and Windows itself.

    · MSDN Virtual Lab: Windows 8: Lab 4 - Application Bars and Media Capture - C#
    In this lab, you will enhance Contoso Cookbook by allowing users to capture photos and videos of their favorite recipes and share them with other applications. You will also add an application bar that provides shortcuts to these features and learn how to incorporate popup menus into application bar commands.

    · MSDN Virtual Lab: Windows 8: Lab 5 - Process Lifetime Management - C#
    In this lab, you will learn about Process Lifetime Management. Process Lifetime Management, or PLM, is one of the most important concepts for a developer building Metro style apps to understand. Unlike traditional Windows applications, which continue to execute even when they are in the background, Metro style apps only execute when they are in the foreground.

    · MSDN Virtual Lab: Windows 8: Lab 6 - Settings and Preferences - C#
    In this lab, you’ll add About and Preferences commands to the settings pane in Contoso Cookbook. You’ll expose a simple user preference that can be toggled on and off with a toggle switch, and you’ll use roaming settings to store that preference so it will follow users wherever they go.

    · MSDN Virtual Lab: Windows 8: Lab 7 - Tiles and Notifications - C#
    In this lab, you will get first-hand experience with secondary tiles, push notifications, and toasts by adding them to Contoso Cookbook. At the conclusion, users will be able to pin favorite recipes to the start screen with secondary tiles, see tiles updated by the Windows Notification Service, and see scheduled toasts in action.

    · MSDN Virtual Lab: Windows 8: Lab 8 - The Windows Store - C#
    In this lab, you will use the Windows Store APIs to monetize Contoso Cookbook. First you will modify the about box to detect trial versions and include a purchase button if the app has not been paid for. Next, you will use CurrentAppSimulator to simulate a purchase when the purchase button is clicked. Finally, you will simulate in-app purchases by offering Italian recipes as a paid add-on rather than for free.

    · MSDN Virtual Lab: Windows 8: Lab 9 - Touch and Pointer Input – C#
    In this lab, you’ll take a preexisting photo-editing app named Contoso Photo and add touch support to turn it into a fully functional application. You’ll add support for simple gestures such as taps and double-taps, and you’ll build in support for pinch-zooms as well as for dragging and panning. In addition, you’ll make sure all of it works with a mouse so the application is equally at home on devices that lack touch screens. Sound appealing? Then let’s dive into the world of touch and see what it takes to build a great touch-enabled Metro-style app.

    · MSDN Virtual Lab: Windows 8: Lab 1 - Creating a Windows 8 Metro Style App - JavaScript
    In this first lab in the series, you will use HTML and Javascript to create the application, implement the navigation, download the data from a REST based service, and connect the data to controls using data binding.

    · MSDN Virtual Lab: Windows 8: Lab 2 - Orientation, Snapping, and Semantic Zoom - JavaScript
    In this lab, you will build upon Lab 1 by adding three important UI-related features to Contoso Cookbook. First, you will customize the layout of the item-detail and group-detail pages when the screen is rotated. Next, you will customize the layout of the item-detail page when the application is snapped. Finally, you will implement semantic zoom in the start page, enabling users to zoom out and see all the recipe groups on a single screen.

    · MSDN Virtual Lab: Windows 8: Lab 3 - Searching and Sharing - JavaScript
    In this lab, you will add support for searching and sharing to Contoso Cookbook. You will get first-hand experience implementing searching and sharing contracts, and learn how these contracts provide a higher level of integration between either two Metro style apps or an app and Windows itself.

    · MSDN Virtual Lab: Windows 8: Lab 4 - Application Bars and Media Capture - JavaScript
    In this lab, you will enhance Contoso Cookbook by allowing users to capture photos and videos of their favorite recipes and share them with other applications. You will also add an application bar that provides shortcuts to these features and learn how to incorporate popup menus into application bar commands.

    · MSDN Virtual Lab: Windows 8: Lab 5: Process Lifetime Management - JavaScript
    In this lab, you will learn about Process Lifetime Management. Process Lifetime Management, or PLM, is one of the most important concepts for a developer building Metro style apps to understand. Unlike traditional Windows applications, which continue to execute even when they are in the background, Metro style apps only execute when they are in the foreground.

    · MSDN Virtual Lab: Windows 8: Lab 6: Settings and Preferences - JavaScript
    In this lab, you’ll add About and Preferences commands to the settings pane in Contoso Cookbook. You’ll expose a simple user preference that can be toggled on and off with a toggle switch, and you’ll use roaming settings to store that preference so it will follow users wherever they go.

    · MSDN Virtual Lab: Windows 8: Lab 7: Tiles and Notifications - JavaScript
    In this lab, you will get first-hand experience with secondary tiles, push notifications, and toasts by adding them to Contoso Cookbook. At the conclusion, users will be able to pin favorite recipes to the start screen with secondary tiles, see tiles updated by the Windows Notification Service, and see scheduled toasts in action.

    · MSDN Virtual Lab: Windows 8: Lab 8: The Windows Store - JavaScript
    In this lab, you will use the Windows Store APIs to monetize Contoso Cookbook. First you will modify the about box to detect trial versions and include a purchase button if the app has not been paid for. Next, you will use CurrentAppSimulator to simulate a purchase when the purchase button is clicked. Finally, you will simulate in-app purchases by offering Italian recipes as a paid add-on rather than for free.



  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    New Curriculum Resources for App Development on Windows 8

    • 1 Comments

    Most of what I post about is specifically for K-12 computer science education but I recently received the following about some curriculum designed for university level students. Still my experience tells me two things. One is that I do have a good number of university lever readers. And two there are teachers and schools and students in some high schools who can and do take every advantage of materials targeted at older students. So here you go:

    Just a quick note to let you know that the following three university level courses are now available on Faculty Connection.  The courses are modular for easy integration into existing curricula; they are app development oriented; each contains instructor guides, PPTs, labs/tutorials and video files that accompany the exercise files.

    Designing for Modern UI

    · 11 modules that provide lectures and tutorials on how to design for the Windows 8 UI using Metro language.

    • 100 Level for Human Computer Interaction (HCI)  classes;   focus is on UI design using Metro style
    • Prerequisites:  none; suitable for any college student
    • Audience: any audience;  no programming skills required

    App Development for Modern UI

    • This curriculum contains 9 modules that cover the fundamental concepts of developing Metro style app using JavaScript and HTML5/CSS3 with Microsoft's tools and resources.
    • 100/200 Level for web design classes/apps development
    • Prerequisites:   students need to have basic programming skill, i.e.  Intro to Computing (101) or AP Computing; usually required by any HE institution as part of 1st year classes.
    • Audience: any audience - science, engineering, art, etc

    App Development for Modern Devices

    • This course covers development systems for phones, tablets and desktop computers, focusing on  a) fundamentals of building network aware software, b) interfaces for touch and NUI devices such as Kinect; c) graphics programming such as writing code that displays augmented reality experiences
    • 200/300  Level for CS; Engineering; Science programs with apps development
    • Prerequisites:   students need to have basic programming skill and understanding of math and science
    • Audience: STEM disciplines


  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    Tip Calculator Hands On Lab for Windows Phone

    • 0 Comments

    This is the basic instructions for the demo I did as part of the Mobile App Development throwdown at the CS & IT Conference July 10th, 2012,

    Open Visual Studio (you can get it as part of the Windows Phone SDK) and create a new project.

    image

    Be sure to select Visual C# as the language, Silverlight for Windows Phone as the set of templates and Windows Phone application as the specific template. Also make sure you give your project a meaningful name. I chose TipDemo in this case.

    We’ll be creating this as a Windows Phone 7.1 project.

    image

    A new project will open that may look something like the following:

    image

    If it looks differently you can open the Properties Windows from the view menu and the toolbox is probably just not pinned open.

    From left to right we have the Toolbox (which I have pinned open) that shows us controls that we can use to create our user interface, the design window where we create out by dragging controls to it, the code window that shows the XAML (Silverlight code) that represents the UI controls, and the Solution Explorer and properties window. The properties window will allow us to set attributes for our UI controls.

    There first objects we will change are the Application Title and Page Name. We will do this by selecting each of these objects on the design form and changing the text property as follows.

    imageimage

    Now we can start our user interface. We will use Text Blocks to display labels and data that we set in our code. We will use a Textbox to input the amount of the restaurant bill. We are going to create the following objects on our screen:

    Object Type

    Name

    Other Property settings

    Text Block

    textBlock1

    Text – Meal Charge

    Text attributes to taste

    Textbox

    txtTab

    Text - <empty>

    Text Alignment - Right

    Slider

    slider1

    Minimum – 0

    Maximum – 35

    Value - 15

    Text Block

    textBlock3

    Text – Tip %

    Text Block

    txtTipP

    Text - <empty>

    Text Alignment - Right

    Text Block

    txtTip

    Text - <empty>

    Text Alignment - Right

    Text Block

    txtTotal

    Text - <empty>

    Text Alignment - Right

    Text Block

    txtSplit

    Text - <empty>

    Text Alignment - Right

    Text Block

    textBlock5

    Text – Split Among

    Image

    UpSplit

    Image

    DownSplit

    Text Block

    txtHowMany

    Text - <empty>

    Text Alignment - Right

    Your design screen should look something like this:

    image

    Now we want to add some images to the image objects. First we add some images to our project. I used an up arrow and a down arrow image like these.UpArrow DownArrowFrom the Project Menu I selected Add Existing Object and browsed to where I had saved the Image files and added them to me. The show up in the Solution Explorer as follows:

    image

    Now that these images are associated with out project we can add them to the image boxes we have on the screen. We will do this from the source property in the property box. Selecting the Source property will give us a dialog box like this:

    image

    We’ll now associated the images with the associated up and down image box.

    Our User Interface is now essentially completed. Although we may want to think about adding more labels to make things a bit more clear for the user. Now it is time for some code though.

    We now open MainPage.xaml.cs from the Solution Explorer so that we can add some code. The first thing we need to do is declare some variables.

    public partial class MainPage : PhoneApplicationPage

    {

    // Constructor

    int tipPercentage;

    int splitAmong;

    double toTip;

    double total, baseTab;

    double mySplit;

    Inside the Constructor function itself we will set some initial values. Note that there are named objects in this code to set some of the text values for objects that are part of our user interface.

    public MainPage()

    {

    InitializeComponent();

    tipPercentage = 15;

    slider1.Value = tipPercentage;

    txtTipP.Text = tipPercentage.ToString() + "%";

    splitAmong = 1;

    txtHowMany.Text = splitAmong.ToString();

    }

    We need to do some calculations. We need to calculate the tip amount from the selected percentage. We need to create a new total amount to pay by adding the original bill amount to the tip amount. Lastly we need to calculate how to split the bill among one or more people.

    We will create a general purpose calculation function that we can call from many places in the program if we wish.

    private void doCalcs()

    {

    try

    {

    baseTab = double.Parse(txtTab.Text);

    toTip = tipPercentage / 100.0 * baseTab;

    txtTip.Text = toTip.ToString("$###,##0.00");

    total = baseTab + toTip;

    txtTotal.Text = total.ToString("$###,##0.00");

    mySplit = total / splitAmong;

    txtSplit.Text = mySplit.ToString("$###,##0.00");

    }

    catch { }

    }

    We will also create a method that can be called in response to tapping on various objects which will call there helper method.

    private void Calculate(object sender, GestureEventArgs e)

    {

    doCalcs();

    }

    Next we want to respond to changes in the tip amount. We want to display a new tip percentage as the slider is moved and then calculate a new tip amount based on that percentage. Note that we call the helper calculation routine from this routine.

    private void TipPer(object sender, RoutedPropertyChangedEventArgs<double> e)

    {

    try

    {

    tipPercentage = (Int16)slider1.Value;

    txtTipP.Text = tipPercentage.ToString() + "%";

    doCalcs();

    }

    catch { }

    }

    Lastly we want to deal with the splitting on that tab among more than one person. We want methods that respond to taps on the up and down arrows. A tap should increase or decrease the number of people to split the tab among. Note that we don’t want there to be less than one person.

    private void DownSplit_Tap(object sender, GestureEventArgs e)

    {

    if (splitAmong > 1)

    splitAmong = splitAmong - 1;

    txtHowMany.Text = splitAmong.ToString();

    doCalcs();

    }

    private void UpSplit_Tap(object sender, GestureEventArgs e)

    {

    splitAmong = splitAmong + 1;

    txtHowMany.Text = splitAmong.ToString();

    doCalcs();

    }

    Now we need to associate these methods with specific events. We will return to the ManPage.xaml tab to do this.

    Click on the UpArrow image to select it. On the Properties window select the Events tab.

    image

    Selecting the Tap event will bring up a dropdown list that will include UpSplit_Tap which you will select. The same steps are followed to select DownSplit_Tap to respond to a tap on the down arrow.

    For the Slider bar we will select TipPer to respond to the ValueChanged event.

    image

    We will want the Calculate method to be called in response to taps on any one of several textBlocks such as the Total box.

    image

    We can now run our program on the Windows Phone Emulator (or on an actual device if we have a developer unlocked phone available.)

    image

    This isn’t really the keyboard we want since we are just going to be entering numbers. We could have the user select the number keypad but it makes more sense to have the numeric keypad open by default. So let’s fix that. We will do that by specifying InputScope.

    In the property window select the InputScope property and set it to InputScope.

    image

    Now we need to take a look at the XAML code in the design code window. We’ll find some code that looks like this:

    <TextBlock Height="33" HorizontalAlignment="Left" Margin="46,37,0,0" Name="textBlock1" Text="Meal Charge" VerticalAlignment="Top" Width="146" />

    <TextBox Height="72" HorizontalAlignment="Left" Margin="269,20,0,0" Name="txtTab" Text="" VerticalAlignment="Top" Width="181" TextAlignment="Right">

    <TextBox.InputScope>

    <InputScope />

    </TextBox.InputScope>

    </TextBox>

    In the middle of this code we will specify that we want the CurrencyAmount keyboard by adding line 5 below.

       1: <TextBox.InputScope>
       2:  
       3: <InputScope>
       4:  
       5: <InputScopeName NameValue="CurrencyAmount" />
       6:  
       7: </InputScope >

    Now when we run the program we get the numeric keypad.

    image

    That's the basics. Now cut lose and make it your own.

Page 1 of 6 (17 items) 12345»