app inventor - project iteration 3 · web viewthis walkthrough assumes you are starting with a...

1

App Inventor - Project Iteration 3

Application DesignIteration 3 of Wardrobe Wiz:

Our Third Iteration Requirements: o Define an Outfit Structureo Save Outfits o Display list of Outfitso When Outfit is chosen from the list display that Outfit

Allow edits? Allow deletes?

Code WalkthroughStarting Point: This walkthrough assumes you are starting with a working version of Wardrobe Wiz that includes all these features of Iterations 1 and 2: Take photos of Tops, save Tops photos to a list and to a database, display tops and allow users to swipe photos to scroll through them (swipe towards left to see next; swipe towards right to see previous photo); when app starts load existing Tops list from database. With Iteration 2, all the same features were added for Bottoms

If you need a working copy of Iteration 2 as a starting point you can download it from MIT AppInventor’s Gallery: just need to log into MIT App Inventor with your Google account. On the top menu near the upper right, select Gallery, in the box by ”Search for apps”, type endlessloop to see all my projects, select WardrobeWiz_Phase2, then click “Open the App”.

Changes to User Interface (designer tab)We will rework the User Interface to emulate 2 separate screens by using Vertical Layouts to create Photo View and Outfit View; only one View will be visible at a time. So we will add the Layout components, reorganize the existing components into Photo View, and add the Outfit View. Other new elements will be a Button to Save an Outfit, Buttons to switch between Views, ListPicker Component to show list of available Outfits and select one to display and Canvases to display an Outfit Top and Outfit Bottom. Details for these changes follow:

Create a Photo View to contain existing Tops/Bottoms elements: Drag a VerticalScrollArrangement onto the Screen and make it contain the other elements:

This needs to go above all the other elements and they all (VerticalArrangementTop, VerticalArrangementBottom, HorizontalArrangementTop, and HorizontalArrangementBottom) need to be dragged inside of it. This can be very challenging in the App Inventor UI editor; some tips that can help:

o To get the new VerticalScrollArrangement to “drop” into place at the top, try setting the “visible” property of the VerticalArrangementTop to false temporarily. This gives you some screen “real estate” to work with

© Fox Valley Girls Coding Club App Inventor - Project Iteration 3

2

o When dragging each element to reposition it select the element in the Components list to highlight it. Then hover your mouse pointer over it on the screen layout until the correct element name shows, then click and drag to its new location

o It may help to temporarily change background colors of container elements (horizontal and vertical arrangements) to more easily identify them

Name the new VerticalScrollArrangement “PhotoView”

Add Buttons to Save and See Outfitso Note: we will be adding these Outfit buttons to the horizontal arrangements for Tops and

Bottoms. A good future enhancement would be to rearrange the user interface to make the buttons fit better but here we are going for functionality

o Drag another Button onto HorizontalArrangementTop; rename it ButtonSaveOutfit; set its Text to “Save Outfit”. Give it background color and text color different from the buttons for Top

o Drag another Button onto HorizontalArrangementBottom; rename it ButtonOutfitView set its Text to “See Outfits”. Match the colors of the other Outfit button

o Your buttons should look something like this:

Create Outfit View:The Outfit View will appear when the “See Outfits” button is clicked. It will display a List Picker button that will list all outfits when clicked. When the user selects an Outfit in the List, the Top and Bottom will be displayed. A button will allow the user to return to the original Photo View

Add a VerticalScrollArrangement below the PhotoView: You may have to make the button horizontal arrangements invisible temporarily in order to get space at bottom of the screen. Name the new element “OutfitView”. This will contain the components needed to list, select, and display Outfits.

Add a ListPicker: From the User Interface drawer drag a ListPicker onto the OutfitView Vertical Arrangement. Name it “ListPickerOutfit”. A list picker looks like a button; when clicked, it changes its appearance to display a list of selectable items! Set the Text to “Pick an Outfit”; set the Title. Check ShowFilterBar. You may want to set BackgroundColor and TextColor to match those of your Outfit buttons above. We will be adding code to populate the list and to handle the click of a selected item.

Add 2 Canvas Components: for Outfit Top and Bottom: From Drawing and Animation drag 2 Canvas elements below the ListPicker. Name them CanvasOutfitTop and CanvasOutfitBottom

Add a Button to Return to Photo View: below the bottom canvas; text: “Return to Photo View”; name the button ButtonPhotoView

The OutfitView and List of Components should look similar to this:


3

After completing your User Interface Switch to the Blocks tab and write the code!

Code BlocksNew VariablesAdd and initialize global variables to store the Outfits:

outfitList: initialize this to an empty list OUTFITS_TAG: initialize this to “OUTFITS”


4

Add Code to Buttons to Switch Views:We want the screen to show one View at a time and this is done with Button Clicks by changing the Visible property of each View. Remember each View is actually a VerticalScrollArrangement, named OutiftView or PhotoView, containing other components

Select ButtonOutfitView in the Blocks list and drag the Click event to the code editor. Select OutfitView in the Blocks list (under Screen 1) and drag its “setter” to the Click event handler and select the Visible Property from the dropdown. From the Logic drawer under Built-in drag “true”. Add code to set the PhotoView to “false”. Duplicate this ButtonOutfitView.Click code block and use the dropdowns to change the values as shown:

Determining the Outfit Structure:In our discussions, we agreed that for this first Iteration of the Outfits feature we will store this information for each Outfit:

File name for Top photo File name for Bottom photo Description to be entered by the User

So we need a single structure called “Outfit” that is composed of 3 separate fields. In programming, we have several ways to define a structure composed of multiple fields. Let’s look at three of them: Object, List, and Delimited String.

Possible Outfit Structure as Object (can’t use in App Inventor):App Inventor does not have this capability but it is worth looking at the concept to consider the capabilities of other programming languages.

Object-oriented programming languages let us define objects that contain data fields and methods to access or manipulate those fields. In an OO language, such as Java or C# we would define a Class for Outfit and then create an instance of it; the instance would be an Object. So we could have a variable named “currentOutfit” that is an Object of type Outfit


5

The class definition would look like this:

class Outfit{

string top;string bottom;string description;

}

Possible Outfit Structure as ListWhen we did some prototyping code at our previous meeting, we implemented Outfit as a List which meant that the list of all Outfits would be a List of Lists. Each Outfit is a list with three items: the top is at Index 1; the bottom is at Index 2; and the description is at index 3. Our method for adding an outfit to the list looked like this:

This list approach would allow us to access any of the 3 fields (top, bottom, description) of an Outfit by using the appropriate Index for that field. However, that would requiring us knowing the index of that Outfit in the global outfitList. Further analysis and experimentation with the ListPicker component for viewing a list revealed that when the List is filtered the index of the selected item is not necessarily the same as the index in the global list. So that would present another coding challenge to figure out how to tie the user’s selection to the data in the list. And, while we can get the value of the user’s selection in the ListPicker, that value is a string with this format “(file//storage/…….jpg file///storage/…..My cool Outfit)” so we can’t easily parse out the names of the photo files

Outfit Structure as Delimited StringDelimited Strings are commonly used in coding to separate multiple smaller pieces within a larger string. Each piece is separated from the next one by a delimiter character. A familiar example is the CSV (Comma-separated values) format, frequently used for exporting/importing data from Excel, contact lists, etc. Each field within a record is separated by a comma. However, since our Description for an outfit may include commas, we will use Pipe-Delimited Strings, a favorite of programmers. The Pipe symbol | is a good choice because it is unlikely to be keyed in by a user in a Description. And we now have a way to retrieve each field (top, bottom, description) from a selected Outfit without having to worry about the Index of 2 different lists.


6

Create the Procedure to Add an OutfitDrag a Procedure block to the code editor; name the Procedure “addOutfit”. This Procedure will need to receive 3 values, i.e. Parameters. These will be coming in from another block when this procedure is called. To add parameters, click the blue gear icon in upper left of the Procedure and drag three “input x” blocks to the inputs container. Name the parameters top, bottom, and description.

From Lists Blocks add a “add items to list…” block; and from the Variables blocks add a get global outfitList for the list value. For the item value, here is where we build our pipe-delimited string by using a join block from the Text blocks. Store the updated outfitList in the database after adding the item.

The addOutfit Procedure should look like this:

Code the Button to Save the Outfit:When the user saves an Outfit we want to provide her with a way to enter a description, so we will use a Notifier.ShowTextDialog procedure; this will pop up and ask the user to enter text for the description. Code the ButtonSaveOutfit.Click event handler to look like this, using whatever text you want for the message and title:


7

Code Notifier1.AfterTextInput to call the addOutfit ProcedureSelect Notifier1 in the Blocks list and drag a Notifier1.AfterTextInput event handler to the coding screen. This has a built-in parameter named “response” which contains whatever the user typed into the textbox when the Notifier popped up when they clicked the Save Outfit button.

From the Procedures Blocks drag the call addOutfit procedure to the event hander; notice that it comes with the three parameters we defined for top, bottom, and description. We need to pass the correct values as arguments to match each parameter. To get the top and bottom values we use the currentTopsIndex and currentBottomsIndex to get them from their respective lists. For the description we use the response that came from the Notifier.

Show the List of Outfits for the User to Pick:As we coded it earlier, when the user clicks the “See Outfits” button that switches the view to Outfits View. That view has ListPickerOutfit which looks like a button and will display the list when clicked. To ensure that it has the most up-to-date list of saved outfits we code the BeforePicking event handler. Find ListPickerOutfit in the components list and add this event handler. The Elements of a ListPicker needs to be set to a list. Set it to our outfitList. Now when someone clicks the button all the outfits will be listed.


8

Because we set “ShowFilterBar” for the ListPicker in our Design view there is a search feature where a user can type something into the box to filter the items matching the string typed.

Display the Selected OutfitAdd the ListPickerOutfit.AfterPicking event handler. We have already added a Canvas for the Top and for the Bottom in the OutfitView. Now we need to pull the appropriate file names for those photos from the selected item in the list. The Selection property of the ListPicker has the delimited string that we created when we added the outfit. The Text blocks have a split function that we can use to turn the long string into a list of the 3 pieces by breaking it up at the | symbols. This generates a list structure with the top at index 1, the bottom at index 2, and the description at index 3. Your code should look like this:

Update Screen InitializeWe just need to add code to load the outfits from the list if any have been saved to the database. This is the “set global outfitList” statement shown below at the end of the Initialize block:


app inventor - project iteration 3 · web viewthis walkthrough assumes you are starting with a...

Documents