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

July, 2012

  • 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.

  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    Interesting Links 9 July 2012

    • 0 Comments

    I am writing this from Irvine California where I have come for the CSTA CS & IT Conference. I have already had a bunch of great conversations with people who arrived yesterday. The networking (a fancy word for meeting great new people and spending time with others I have known and respected for years) is a highlight of this great professional development event for computer science educators. If you are here I hope you’ll make sure we talk. If you are not here and are a computer science educator start thinking about next year! Oh follow the Twitter stream at #CSIT2012 for updates.

    Microsoft Research runs an annual Faculty Summit and it is going virtual this year - keynotes will be live streamed! I’m going to be there next week so expect some blog posts about the things I learn there. You can also follow the event on Twitter using the #Aksum hash tag. My account on Twitter is @AlfredTwo and if you are on Twitter I hope you’ll follow me. If you let me know you are in computer science education I will follow back as well.

    TEALS: How Microsoft engineers are addressing the Computer Scientist shortage. This video is from a presentation that was made to Microsoft employees to try to recruit more people to this growing program that put computer scientists in the classroom supported by professional teachers.

    New on the CSTA blog Who teaches computer science?  Some interesting numbers. Some of them a bit scary.

    Qualcomm is having a Windows 8 Metro app contest – some good prizes.

    Not a lot of links this week and I apologize for that. Been a bit crazy lately.

  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    Computational Fairy Tales the Book

    • 0 Comments

    Just about a year ago I wrote a post about a Computational Fairy Tale blog (Computational Tales) Briefly Dr. Jeremy Kubica, software engineer and manager at Google, has been putting together a set of examples of CS concepts written as fairy tales. Well today I received an email telling me that the blog was now a book.

    From the write up on Amazon:

    Have you ever thought that computer science should include more dragons and wizards? Computational Fairy Tales introduces principles of computational thinking, illustrating high-level computer science concepts, the motivation behind them, and their application in a non-computer—fairy tale—domain. It’s a quest that will take you from learning the basics of programming in a blacksmith’s forge to fighting curses with recursion. Fifteen seers delivered the same prophecy, without so much as a single minstrel to lighten the mood: an unknown darkness threatens the kingdom. Suddenly, Princess Ann finds herself sent forth alone to save the kingdom. Leaving behind her home, family, and pet turtle Fido, Princess Ann must face goblin attacks, magical curses, arrogant scholars, an unpleasant oracle, and rude Boolean waiters. Along the way she must build a war chest of computational knowledge to survive the coming challenge.

    I just think this is a really cool idea.

Page 4 of 6 (17 items) «23456