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

12 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 Chapter 12 (Enrichment Chatper): Windows Store Apps2

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 Chapter 12 (Enrichment Chatper): Windows Store Apps3

12 Objectives ►Analyze the code ►Run a performance analysis ►Package an app ►Certify an app ►Publish an app ►Monetize an app Chapter 12 (Enrichment Chatper): Windows Store Apps4

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 Chapter 12 (Enrichment Chatper): Windows Store Apps5

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 $ Chapter 12 (Enrichment Chatper): Windows Store Apps6

12 Using a Touch Screen Chapter 12 (Enrichment Chatper): Windows Store Apps7

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 Chapter 12 (Enrichment Chatper): Windows Store Apps8

12 Creating a Windows Store App ►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 Chapter 12 (Enrichment Chatper): Windows Store Apps9

12 Creating a Windows Store App Chapter 12 (Enrichment Chatper): Windows Store Apps10

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 Chapter 12 (Enrichment Chatper): Windows Store Apps11

12 Replacing the MainPage File Chapter 12 (Enrichment Chatper): Windows Store Apps12

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 Chapter 12 (Enrichment Chatper): Windows Store Apps13

12 Customizing the Splash Screen Chapter 12 (Enrichment Chatper): Windows Store Apps14

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 Chapter 12 (Enrichment Chatper): Windows Store Apps15

12 Changing the Page Title Chapter 12 (Enrichment Chatper): Windows Store Apps16

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 Chapter 12 (Enrichment Chatper): Windows Store Apps17

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 Chapter 12 (Enrichment Chatper): Windows Store Apps18

12 Adding an Image Chapter 12 (Enrichment Chatper): Windows Store Apps19

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 Chapter 12 (Enrichment Chatper): Windows Store Apps20

12 Adding TextBlock Objects ►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 Chapter 12 (Enrichment Chatper): Windows Store Apps21

12 Adding TextBlock Objects Chapter 12 (Enrichment Chatper): Windows Store Apps22

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 Chapter 12 (Enrichment Chatper): Windows Store Apps23

12 Adding a TextBox Object Chapter 12 (Enrichment Chatper): Windows Store Apps24

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 Chapter 12 (Enrichment Chatper): Windows Store Apps25

12 Adding ComboBox Objects ►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 Chapter 12 (Enrichment Chatper): Windows Store Apps26

12 Adding ComboBox Objects ►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 Chapter 12 (Enrichment Chatper): Windows Store Apps27

12 Adding ComboBox Objects ►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 Chapter 12 (Enrichment Chatper): Windows Store Apps28

12 Adding ComboBox Objects Chapter 12 (Enrichment Chatper): Windows Store Apps29

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 Chapter 12 (Enrichment Chatper): Windows Store Apps30

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 Chapter 12 (Enrichment Chatper): Windows Store Apps31

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 Chapter 12 (Enrichment Chatper): Windows Store Apps32

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 Chapter 12 (Enrichment Chatper): Windows Store Apps33

12 Customizing the App Logos ►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 Chapter 12 (Enrichment Chatper): Windows Store Apps34

12 Customizing the App Logos Chapter 12 (Enrichment Chatper): Windows Store Apps35

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 Chapter 12 (Enrichment Chatper): Windows Store Apps36

12 Testing the App Chapter 12 (Enrichment Chatper): Windows Store Apps37

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 Chapter 12 (Enrichment Chatper): Windows Store Apps38

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 Chapter 12 (Enrichment Chatper): Windows Store Apps39

12 Performance Testing Chapter 12 (Enrichment Chatper): Windows Store Apps40

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 Chapter 12 (Enrichment Chatper): Windows Store Apps41

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 Chapter 12 (Enrichment Chatper): Windows Store Apps42

12 Reserving an App Name Chapter 12 (Enrichment Chatper): Windows Store Apps43

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 Chapter 12 (Enrichment Chatper): Windows Store Apps44

12 Packaging an App Chapter 12 (Enrichment Chatper): Windows Store Apps45

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 Chapter 12 (Enrichment Chatper): Windows Store Apps46

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 Chapter 12 (Enrichment Chatper): Windows Store Apps47

12 Program Design Chapter 12 (Enrichment Chatper): Windows Store Apps48

12 Program Design Chapter 12 (Enrichment Chatper): Windows Store Apps49

12 Program Design Chapter 12 (Enrichment Chatper): Windows Store Apps50

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 Chapter 12 (Enrichment Chatper): Windows Store Apps51

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 Chapter 12 (Enrichment Chatper): Windows Store Apps52

12 Summary ►Analyze the code ►Run a performance analysis ►Package an app ►Certify an app ►Publish an app ►Monetize an app Chapter 12 (Enrichment Chatper): Windows Store Apps53

Microsoft Visual Basic 2012 CHAPTER TWELVE COMPLETE Windows Store Apps