The Temperature Converter



CSCE 101 Lab 2 Hello World and ColorAcademic HonestyThe work you turn in is to be your work, not copied from someone else, from the web, or generated by a program.Never allow anyone access to your files.Never give anyone your password.Never share your USB memory or email your files to anyone else.Never give anyone a printed copy of your file or an electronic copy.Never allow anyone to copy your work.Problem Statement Part 1: What is your name? (50%)This part must be completed in the lab. The files you will upload in steps 6-8 must appear on your X drive during the time slot allotted for your lab. Your instructor will be checking the “Date modified” fields of these files.You will be using steps in the lab problem to create a program that can accept text input from the user and make use of the information. You will also change the colors of various items on the page using buttons.You will name the project “HelloWorldXY” where XY are your first and last initials. The Layout:First, grab a Horizontal Arrangement from the Layout Palette and drag it onto the viewerIn the Components part of the screen, select the layout and then click the button that says Rename.Type the new name “StudentInfo” and hit OKFrom the User Interface Palette, grab a label and drag it into the StudentInfo Horizontal Arrangement.Rename the label to NameOfStudentIn the Properties section of the page, change the Text property to be your full name.Drag out another label to put in StudenInfoRename it to SectionNumberChange the Text property to say “101-XX” where XX is your section numberGet another label, but drop this one outside the StudentInfoRename it to GreetingTextSet Text to be “What is your name?”Grab a second horizontal arrangement and place it below the GreetingText label.Rename it to NameSectionGrab a TextBox from the User Interface palette, and drop it inside NameSectionRename To “NameEntry”Grab a Button from the User Interface palette and drop it next to NameEntry inside of NameSection.Rename the button to “EnterButton”Change the Text property to “Enter”The Coding (Where We Make Stuff Happen): Make sure to start the emulator in order to test your project. (Connect->Emulator)Click on the Blocks button in the upper right corner of the screen to switch to “Blocks” view. Scroll over if you can’t see the button.224599586804500Look down under the list of blocks until you see the EnterButton item. Click on it to pull up the list of associated code blocks. We want to have something happen when we click on the EnterButton, so we will drag this block out. Be very careful that you only ever drag one event handler of the same type from the same component – duplicates will cause errors (a triangle will appear in the upper left of the block.When the button is clicked, we want to change the GreeetingText to be the phrase “Hello, XXXXXX!” where XXXXXX is whatever was typed into the NameEntry225488567691000Lets break this down: First, we are changing the text value of GreetingText. To do this, select GreetingText under blocks, and drag the following block into the slot in our when EnterButton.Click block. This allows us to change the Text property of GreetingText.What do we want to change the text to? The combination of two pieces of text. To do this, go to the built-in section of blocks and select Text. You are looking for a block that says “join” on it, with a puzzle piece sticking out on the left side. That puzzle piece will fit into the hole on our “set GreetingText.Text” block. 154876510350500The two pieces of text are a phrase, and the contents of the text box. While we are in the Text area, grab the block that has quotes and a spot to type something, and drag it onto the first puzzle gap in the join block. Type inside this new block “Hello, “ (make sure you include the space after the comma)Then go to the NameEntry and find the light green block that says “NameEntry.Text”, drag it out and put it in the second slot of join. 85217028384500Screenshots:Go to Designer view in your project and select “Screen1” in the Components section. Under Properties, change the text in the Title to show your name instead of “Screen1.”Use the Snipping Tool to take a screenshot of the user interface of your Hello World app. That is, use the “Rectangular snip” tool within Snipping Tool to capture the Viewer section in your project’s Designer view. Ensure that your name is present in this screenshot.Name this screenshot “Lab2UI-XY” where XY are your initials. The file should be in either PNG or JPEG format.Use the Snipping Tool to take a screenshot of your blocks code. That is, use the “Rectangular snip” tool within Snipping Tool to capture the Viewer section along with your email address (at the top right of the page, next to your language selection) in your project’s Blocks view.Ensure that your email address is present in this screenshot.Name this screenshot “Lab2Blocks-XY” where XY are your initials. The file should be in either PNG or JPEG format.205740060896500Here are examples of what your screenshots should look like (though yours will and should vary from this, particularly because these screenshots are of Lab 1). Note the things circled in red, as they must be included in your screenshots (though they need not be circled). Place these screenshots in a folder titled “Screenshots” within your “101Labs” folder in your X drive. If this folder does not exist, create it.Part 2: Changing Colors (50%)This part must be completed before the lab’s due date. The file you upload must appear on your X drive before the due date and time specified on your instructor’s website. Your instructor will be checking the “Date modified” field of this file.We will be adding a few components to the user interface of your app. Make sure you are modifying your existing HelloWorldXY project.The Layout, continued:In Designer view, grab a Vertical LayoutRename it to “ColorSection”Grab 3 Buttons and place them inside of ColorSectionName them “FontColor”, “BGColor”, and “Reset” respectively.Change the Text properties of each to something that you think appropriate.(These buttons will be used to change the font color and background color, and reset those colors back to their defaults.)The Coding, continued:We now have 3 other buttons that we need to do something with. You might guess what some of the purpose of the buttons is from the names, which is why we named them what we did.A note: when you want to change a property of a component, you are looking to use a dark green box that contains the word “set”. If you are trying to find the existing value of the component property, you want a light green block that just has the Component.PropertyThe first button needs to change the font color of GreetingText to blue. Therefore, using the When Button.Click for the first button, you need a “set GreetingText.TextColor” block. Instead of accepting text, this time you need a color from the built-in blocks. You can select a color from Colors on the left side of the screen under Built-In. The second button needs to change the background color of the entire screen to pink. To change screen properties, you need to click on Screen1 under blocks. As you might expect, you need to get the “set Screen1.BackgroundColor” block. Finally, the reset button will undo all those changes that we made. Since it is possible to have changed both the font and the background color, you need to do multiple things inside your Click block:Set the GreetingText.TextColor back to BlackSet the Screen1.BackgroundColor back to WhiteSubmitting Your FileOpen "My Projects" in upper right of the App Inventor WebpagePut a check next to the project you want to download (you can only download one at a time). Download the modified version of your app, if you have multiple copies.Project->"Export selected project (.aia) to my computer"The file will download so go, in Chrome, to the download location by clicking the?arrow next to the file name?at the bottom of the screen and selecting "Show in folder".Move the _______________.aia file to your X:\101Labs directory for grading (or upload). ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download