Microsoft Visual Basic 2012 CHAPTER TWELVE (ENRICHMENT CHAPTER) Windows Store Apps.

Microsoft Visual Basic 2012

CHAPTER TWELVE(ENRICHMENT CHAPTER)

Windows Store Apps

12

Chapter 12 (Enrichment Chatper): Windows Store Apps 2

Objectives

►Describe a Windows Store app►Describe a touch-first app►Understand the Windows Store Application Life

Cycle►Get a free Windows developer license►Create a Windows Store app

12


Objectives

►Customize a splash screen►Add an image to a page►Add TextBlock, TextBox, and ComboBox objects►Code a Windows Store app►Run a Windows Store app in a simulator

12


Objectives

►Analyze the code►Run a performance analysis►Package an app►Certify an app►Publish an app►Monetize an app

12


Introduction

►A Windows Store app is a new type of application that runs on Windows 8 devices and can be developed using a Windows 8 computer with Visual Studio 2012

12


Windows Store Apps

►When you install an app from the Windows Store on a Windows 8 device, it appears as a tile on the Start screen

►Some apps are free and others can cost as much as $999.99

12


Using a Touch Screen

12


Creating a Windows Store App

►Tap or click the New Project button on the Standard toolbar. Tap or click Windows Store in the left pane

►If necessary, tap or click Blank App (XAML) Visual Basic in the middle pane. Type the project name Split the Check in the Name box

►Tap or click the OK button in the New Project window. If you have not created a developer’s license, the Developer License dialog box opens

►Tap or click the I Agree button in the Developer License dialog box. Your computer connects to the Microsoft License server using an Internet connection

12



►Type your Microsoft account name and password in the appropriate text boxes. If you do not have an account, tap or click the Sign up now link and follow the steps. Tap or click the Sign in button

►Tap or click the Close button in the Developer License dialog box

12



12


Replacing the MainPage File

►In the Solution Explorer, tap or click MainPage.xaml. Press the DELETE key

►Tap or click the OK button to permanently delete MainPage.xaml. Tap or click PROJECT on the menu bar, and then select Add New Item. In the left column, tap or click Windows Store. In the middle pane, tap or click Basic Page. Type MainPage.xaml in the Name text box

►Tap or click the Add button►Tap or click the Yes button. When the new page shows an

error in the designer, tap or click the Local Machine button in the toolbar to run the app

►Tap or click the Stop Debugging button in the toolbar

12


Replacing the MainPage File

12


Customizing the Splash Screen

►Scroll in the Solution Explorer and double-tap or double-click the Package.appxmanifest file

►Scroll down to view the Splash Screen section in the Manifest Designer

►Type white in the Background color text box of the Manifest Designer

►Open the USB folder that contains the student Data Files for Chapter 12. In the Solution Explorer, expand the Assets folder, if necessary. To replace the blank splash screen file, drag the SplashScreen.png file from the USB folder to the Assets folder until a plus sign pointer appears. Release the mouse button

►Tap or click the Yes button

12


Customizing the Splash Screen

12


Changing the Page Title

►Close the Package.appxmanifest tab. Tap or click the Yes button if necessary to save changes to Package.appxmanifest. Collapse the Assets folder in the Solution Explorer. Tap or click the My Application TextBlock object at the top of MainPage.xaml. Scroll to the Text property in the Properties window

►Tap or click the property marker (green box symbol) for the Text property of the TextBlock object

►Tap or click Edit Resource on the property menu. Type Split the Check in the Value text box

►Tap or click the OK button in the Edit Resource dialog box

12


Changing the Page Title

12


Adding an Image

►Open the USB folder that contains the student Data Files. In the Solution Explorer, expand the Assets folder. To add the Tip.png file to the Assets folder, drag the Tip.png file to the Assets folder until a plus sign pointer appears, and then release the mouse button

►Tap or click the Collapse Pane button to hide the XAML code. If necessary, open the Toolbox by tapping or clicking VIEW on the menu bar and then tapping or clicking Toolbox. Tap or click Common XAML Controls on the Toolbox. Drag the Image object to MainPage.xaml. Type picTip in the Name property of the Image object

12


Adding an Image

►Tap or click the arrow to the right of the Source property

►Tap or click Tip.png in the Source list►Expand the Layout property in the Properties

window. Type 275 in the Width property text box and 500 in the Height property text box

12


Adding an Image

12


Adding TextBlock Objects

►Collapse the Assets folder. Drag the TextBlock object from the Toolbox to MainPage.xaml until a red snap line appears to align the TextBlock object with the top of the image

►Type lblCheck in the Name property of the TextBlock object. Type Check Total: in the Text property. Scroll down and expand the Text category. Type 30 px in the FontSize property to the right of the FontFamily property set as Global User Interface

12



►Drag another TextBlock object from the Toolbox to MainPage.xaml until a red snap line appears to align the object with the left edge of the previous TextBlock object. Type lblParty in the Name property of the TextBlock object. Type Party Size: in the Text property. Type 30 px in the FontSize property

►Drag a third TextBlock object to MainPage.xaml until a red snap line appears to align the object with the left edges of the previous TextBlock objects. Type lblTip in the Name property of the TextBlock object. Type Tip Amount: in the Text property. Type 30 px in the FontSize property

12



12


Adding a TextBox Object

►Drag a TextBox object from the Toolbox to MainPage.xaml until a red snap line appears to align the object with the top of the first TextBlock object. Resize the TextBox object until the width is 100 pixels. Type txtCheck in the Name property of the TextBox object. Delete the text in the Text property. Type 20 px in the FontSize property

12


Adding a TextBox Object

12


Adding ComboBox Objects

►Drag a ComboBox object from the Toolbox to MainPage.xaml until a red snap line appears to align the object with the top of the Party Size: TextBlock object. Resize the ComboBox object to a width of 100 pixels. Type cboPartySize in the Name property of the ComboBox object. Type 20 px in the FontSize property. Tap or click the ellipsis button to the right of the Items property

12



►Tap or click the Button arrow and then tap or click ComboBoxItem at the bottom of the Object Collection Editor: Items dialog box. Tap or click the Add button and then type 2 in the Content text box in the right Properties pane. Tap or click the Add button and then type 3 in the Content text box in the right Properties pane. Repeat this step to add each of the numbers 4 through 10 as options in the Content text box

12



►Tap or click the OK button to close the dialog box. Drag another ComboBox object from the Toolbox to MainPage.xaml until a red snap line appears to align the object with the top of the Tip Amount: TextBlock object. Resize the ComboBox object to a width of 100 pixels. Type cboTip in the Name property of the ComboBox object. Type 20 px in the FontSize property

12



►Tap or click the ellipsis button to the right of the Items property for cboTip. Tap or click the Button arrow and then tap or click ComboBoxItem in the Object Collection Editor: Items dialog box. Tap or click the Add button. Type 10% in the Content text box in the right Properties pane. Tap or click the Add button and then type 15% in the Content text box in the right Properties pane. Tap or click the Add button and then type 20% in the Content text box in the right Properties pane

►Tap or click the OK button to close the Object Collection Editor: Items dialog box

12



12


Adding a Button Object

►Drag a Button object from the Toolbox to MainPage.xaml below the Tip Amount: TextBlock and cboTip ComboBox objects. Resize the Button object to a width of 225 pixels. Type btnSplit in the Name property of the Button object. Type Split the Check in the Content property of the Button object. Type 20 px in the FontSize property of the Text category

12


Adding a Button Object

►Drag a TextBlock object from the Toolbox to MainPage.xaml and align it with the left edge of the Button object. Type lblResult in the Name property of the TextBlock object. Delete the text TextBlock in the Text property. Type 30 px in the FontSize property

12


Entering Visual Basic Code for Event Handling

►Double-tap or double-click the Split the Check Button object. Type the introductory comments for the event and then type the Option Strict On statement. Tap or click within the btnSplit_Click event

►Initialize the variables for the app►Convert the TextBox and ComboBox objects and assign

them to variables►Use a Select Case statement to assign a tip decimal value

based on the user’s selection►Enter an equation to compute the check amount added to

the tip amount divided by the number of people in the party. The split amount for each person in the party is displayed in the lblResult TextBlock

12


Customizing the App Logos

►Open the USB folder that contains the student Data Files for Chapter 12. In the Solution Explorer, expand the Assets folder. To replace the blank logo files named Logo.png, SmallLogo.png, and StoreLogo.png, drag the Logo.png, SmallLogo.png, and StoreLogo.png files to the Assets folder until a plus sign pointer appears, and then release the mouse button

►Tap or click the Apply to all items check box in the Destination File Exists dialog box. Tap or click the Yes button

12



►Tap or click the Save All button on the toolbar, and then tap or click Save in the Save Project dialog box. Tap or click the Start Debugging button to run the app on the local machine. (If a Local Machine button appears instead of the Start Debugging button, tap or click the Local Machine button.) Test the program and close the app. Press the WINDOWS key to view the Start screen. Scroll to the right, if necessary, to view the app logo tile for the Split the Check app on the Start screen

12



12


Testing the App

►Tap or click the arrow to the right of the Start Debugging button (or the Local Machine button) on the Standard toolbar

►Tap or click Simulator►Tap or click the Rotate clockwise (90 degrees) button on

the right side of the simulator►Tap or click the Change resolution button on the right side

of the simulator►Tap or click the Send Windows key button on the side of

the simulator. Scroll if necessary to view the Split the Check app tile

►Press and hold or right-click Microsoft Windows Simulator on the taskbar, and then tap or click Close window

12


Testing the App

12


Analyzing the Code

►Tap or click ANALYZE on the menu bar, and then tap or click Code Analysis on Split the Check

►Tap or click the Close button on the Code Analysis pane

12


Performance Testing

►Tap or click the MainPage.xaml tab. Tap or click ANALYZE on the menu bar, and then tap or click Start Performance Analysis. The simulator opens, the splash screen is displayed, and then the main page opens. Run the app with any test data and tap or click the Split the Check button to complete the execution. Press and hold or right-click the simulator button on the taskbar, and then tap or click Close window to close the simulator

►Close the tab for the Performance Analysis tool (Split the Check######.vspx). The ###### symbols represent different numbers for each Sample Profiling Report that is run

12


Performance Testing

12


Opening a Windows Store Developer Account

►Tap or click PROJECT on the menu bar, tap or click Store, and then tap or click Open Developer Account

12


Reserving an App Name

►Tap or click PROJECT on the menu bar, tap or click Store, and then tap or click Reserve App Name

►For the Split the Check app, verify that the app is named Split the Check with Tip

12


Reserving an App Name

12


Packaging an App

►Tap or click PROJECT on the menu bar, tap or click Store, and then tap or click Create App Packages

►Tap or click Yes, and then tap or click the Sign In button

►Tap or click the Create button

12


Packaging an App

12


Submitting an App

►After you have reserved the app’s name, set up a payout account, built the app’s package, and tested the app with the Windows App Certification kit, the app is ready for submission

►By opening the Windows Store dashboard, you can submit the app with selling details to supply information such as your app’s price, category, markets, age ratings, and description

12


Monetizing a Windows Store App

►Consider the following business models for monetizing your app:• Collect the full price of the app before

download• Offer free trials or limited versions of the app

and state that a paid full version is available• Sell content, other apps, or new app

functionality (such as unlocking the next level of a game) from within the app

• Create an income stream from advertisements within the app

12


Program Design

12


Program Design

12


Program Design

12


Summary

►Describe a Windows Store app►Describe a touch-first app►Understand the Windows Store Application Life

Cycle►Get a free Windows developer license►Create a Windows Store app

12


Summary

►Customize a splash screen►Add an image to a page►Add TextBlock, TextBox, and ComboBox objects►Code a Windows Store app►Run a Windows Store app in a simulator

12


Summary

►Analyze the code►Run a performance analysis►Package an app►Certify an app►Publish an app►Monetize an app

Microsoft Visual Basic 2012

CHAPTER TWELVE COMPLETE

Windows Store Apps

Microsoft Visual Basic 2012 CHAPTER TWELVE (ENRICHMENT CHAPTER) Windows Store Apps.

Documents

windows store app tap

windows store app chapter

windows store app type

windows store apps5

windows store apps12

windows store apps4

windows store apps6

windows store apps2