22. Popups

Popups, are dialogs, that open upon a specific action. Here that action will be clicking of buttons.

---

These are the imports. The first one, from the __future__ module, is so the same program runs in Python 3, and Python 2.7. BoxLayout is the class the root is based on. We also import Popup class for the Popup windows. The StringProperty will hold String values that we can refer to, from within the kv file.

---

These are two Popup classes. In this example, the two popups will allow the user to select one of the three choices for color and shape strings. Once the value is changed, its on_ function is called. Here, we only print what is the selected value.

---

The root class contains function for opening up either of the two popups.

---

The app class is created and run. The title of the window is 'Popups'.

# ex22.py

from __future__ import print_function, division

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.uix.popup import Popup
from kivy.properties import StringProperty

class SelectColorPopup(Popup):
    color = StringProperty()
    def on_color(self, *args):
        print("Color Selected: ",args[1])
        
class SelectShapePopup(Popup):
    shape = StringProperty()
    def on_shape(self, *args):
        print("Shape Selected: ",args[1])

class Ex22(BoxLayout):
    def selectColor(self,*args):
        SelectColorPopup().open()
    def selectShape(self,*args):
        SelectShapePopup().open()
        
class Ex22App(App):
    def build(self):
        self.title="Popups"
        return Ex22()

if __name__=='__main__':
    Ex22App().run()

---

In the kv file, the BoxLayout orientation is 'vertical'. It is composed of two buttons, which when clicked, will start the process to open the popups.

---

The visual layout of the first Popup, is defined. Its size is 400 by 400 and is a GridLayout with columns set as 2. Each row will have a label and a radio button, since it is based on a grouped CheckBox. There are rows for the Green and Blue, not shown here, but included at blogspot.

---

We do the same for the second Popup.

# ex22.kv

<Ex22>:
    orientation: 'vertical'
    Button:
        text: 'Color Select'
        on_press: root.selectColor(*args)
    Button:
        text: 'Shape Select'
        on_press: root.selectShape(*args)
       
<SelectColorPopup>:
    title: 'Color Select'
    size_hint: None, None
    size: 400, 400
    GridLayout:
        cols: 2
        Label:
            text: 'Red'
        CheckBox:
            group:'color'
            on_active: root.color = 'Red'
        Label:
            text: 'Green'
        CheckBox:
            group: 'color'
            on_active: root.color = 'Green'
        Label:
            text: 'Blue'
        CheckBox:
            group: 'color'
            on_active: root.color = 'Blue'

<SelectShapePopup>:
    title: 'Shape Select'
    size_hint: None, None
    size: 400,400
    GridLayout:
        cols: 2
        Label:
            text: 'Rectangle'
        CheckBox:
            group:'shape'
            on_active: root.shape = 'Rectangle'
        Label:
            text: 'Circle'
        CheckBox:
            group: 'shape'
            on_active: root.shape = 'Circle'
        Label:
            text: 'Triangle'
        CheckBox:
            group: 'shape'
            on_active: root.shape = 'Triangle'

       

---

This is the result for the second Popup, which is opened by selecting the second button in the BoxLayout. In the default behavior, clicking outside of the popup will dismiss it.

---

These are the printouts after selecting all the different options in turn.

---