Explore how to best control the code for interactive use. Explore using blocks of code editing. Add more inline code. Apply markup to the Order menu.
- [Teacher] You've learned most of the mark up now. I'd like to show you one more way to set editable code and practice some of the skills you've learned so far. Let's get the two other playground pages we've worked on looking like the pizza page. In Xcode, open up the navigator, if it's closed. Click on "Dessert". Let's hide some of the code here, leaving the list and price editable, and the yummy desserts visible. First, add some instruction.
Change the contents here for a different menu. Be sure to keep the same number of prices as items. Now, let's add hidden code tags above the import UIkit line and below the live view line.
Now, do the same for the print menu line. I'm just going to copy these, and paste them. I'm going to leave two lines for menu board list and menu board price as the editable block. The tag for that is a double slash pound editable code. Below menuBoard.price, add the ending tag.
Close the Xcode playground. Click open Menu Board. Your experience will be very different than past ones. We have formatted text, and links to other pages. Tap the desserts link, you'll see that there's a box you can edit code in. This box is a full editing box, so you can change the code there, and add more code. Tap the cursor after menuBoard.prices. Tap return on the toolbar. The auto-completion appears, and your ready to type code.
You can add code here. So, let's go ahead and add menuBoard.list and we'll add to our stuff. Values, quote, pineapple. Then, under that, do menuBoard.prices, and add to that the 0, so you get a number, then you put 3.45.
Go ahead and run this code, and pineapple appears in the desserts menu. Using block editable code is good for teaching code. Block editable code is the best flexibility and creativity with the code. If your using editable code for other reasons, such as presenting prototypes your sharing with some investors, you don't want them messing with the code. In line code, though tedious, often works better on that kind of finished product.
Open up the order menu playground in Xcode. In a product presentation, I don't want the user messing with my code, but do want him or her to be able to change the menu items. Let's change the code so that an investor can change menu items. Add editable code tags to the Big Island string. So, slash, star, pound, editable code.
Big Island, slash, star, pound, dash, end editable code. Go ahead and copy those tags, and put it in front of Sweet Home Chicago, too. Then, put it behind Sweet Home Chicago. Copy, and then V for paste.
Now, do the same for the last two prices. So, I'm going to copy the editable code again, and I'll stick it in front of the 21.95 and the 19.95, and then the end editable code, I'm going to copy, and I'm going to stick it at the end of 21.95 and the 19.95. Now, go ahead and close your Xcode window.
Now, we've got Big Island, Sweet Home Chicago, 21.95, and 19.95, are changeable, and the rest of the text is not. So, I can hit inside Big Island, and I'm going to change this to Big Island Calzone, and I'll change the Sweet Home Chicago to Hawaiian Dish.
I'm going to change the 21.95, tapping that I get the keyboard, and I'll change it to 22.59. The deep dish, we'll change that to 20.95. Run the code. You'll see the menu change. This is only one example of how to make a code pane into an interactive text pane.
You can use this for some interactive documentation, where you set up a function in the code, set editable code tags around the parameters, and let the result appear in the live view. You can, as we did here, set up a page for a presentation of your prototype, before coding the actual app in Xcode. For those cases, I try to hide as much of the code as possible. Don't show a full array, maybe two let statements, to add an extra menu item to the bottom of the menu. There's one more thing you might want to restrict in both educational presentation settings, and we'll look at that next.
- Comparing iPad and Xcode playgrounds
- Creating and testing Swift classes and code in iPad and Xcode playgrounds
- Prototyping code
- Debugging and testing with Quick Look live views
- Using markup to interactively document code and create educational lessons
- Compiling code into playground books