vivosmith/gist:25750ee7b8b349fdfbf7024b07804105

## gistfile1.txt
Creating a Custom Widget It would not be difficult to change the labels in the root widget to some buttons and text boxes to create the Add Location form I have in mind. But that would make things rather complicated later, when you need to remove all those widgets from the view to put other data (for example, a forecast) on display. Further, if the user later wanted to add another location, it would be tricky to restore all the Add Location widgets. Instead, create a custom AddLocationForm widget that encapsulates the text entry, search button, location button, and search results into a single widget. Then set the root widget to be an instance of that custom widget instead. Example 1-5 does all of this. Example 1-5. Custom AddLocationForm widget AddLocationForm: # <AddLocationForm@BoxLayout>: # orientation: "vertical" # BoxLayout: TextInput: 12 | Chapter 1: Introducing Kivy www.it-ebooks.info
Page 27
Button: text: "Search" Button: text: "Current Location" ListView: item_strings: ["Palo Alto, MX", "Palo Alto, US"] # The root widget is now a custom widget named AddLocationForm. It doesn’t have an indented block below it, so there are no properties or child widgets defined. The new custom class is defined here. The @ symbol in the KV language indicates that the class is extending BoxLayout using inheritance. This means that the new widget is a BoxLayout and can do all the things a BoxLayout can do, such as lay out its children. The angle brackets tell the KV language that this is a new class rule, not a root widget. AddLocationForm is a BoxLayout like in the previous example, but you are setting its orientation property to vertical. This will force its child elements to appear one above the other. The child elements in this case are another BoxLayout (this one is horizontal), and a ListView. I’ll tell you a lot more about the ListView widget later. For now, because search isn’t implemented yet, just hardcode a couple of values so you can see what the rendered ListView looks like. The rendering of this code is shown in Figure 1-4. It’s already looking a lot like I want it to look, but the widget proportions are all wonky
	Creating a Custom Widget It would not be difficult to change the labels in the root widget to some buttons and text boxes to create the Add Location form I have in mind. But that would make things rather complicated later, when you need to remove all those widgets from the view to put other data (for example, a forecast) on display. Further, if the user later wanted to add another location, it would be tricky to restore all the Add Location widgets. Instead, create a custom AddLocationForm widget that encapsulates the text entry, search button, location button, and search results into a single widget. Then set the root widget to be an instance of that custom widget instead. Example 1-5 does all of this. Example 1-5. Custom AddLocationForm widget AddLocationForm: # <AddLocationForm@BoxLayout>: # orientation: "vertical" # BoxLayout: TextInput: 12 \| Chapter 1: Introducing Kivy www.it-ebooks.info
	Page 27
	Button: text: "Search" Button: text: "Current Location" ListView: item_strings: ["Palo Alto, MX", "Palo Alto, US"] # The root widget is now a custom widget named AddLocationForm. It doesn’t have an indented block below it, so there are no properties or child widgets defined. The new custom class is defined here. The @ symbol in the KV language indicates that the class is extending BoxLayout using inheritance. This means that the new widget is a BoxLayout and can do all the things a BoxLayout can do, such as lay out its children. The angle brackets tell the KV language that this is a new class rule, not a root widget. AddLocationForm is a BoxLayout like in the previous example, but you are setting its orientation property to vertical. This will force its child elements to appear one above the other. The child elements in this case are another BoxLayout (this one is horizontal), and a ListView. I’ll tell you a lot more about the ListView widget later. For now, because search isn’t implemented yet, just hardcode a couple of values so you can see what the rendered ListView looks like. The rendering of this code is shown in Figure 1-4. It’s already looking a lot like I want it to look, but the widget proportions are all wonky