23. Popup Ex2

We will again, go over popups, but this time with an important difference. The strings are now, variables of the root class, rather than the popup classes.

---

These are the imports. The root is based on BoxLayout. We define, the popup classes in a separate module, popup. Thus by importing everything from this module, we are importing the classes into the namespace so references can be made from within the program.

---

This is the popup.py file. It is in the current directory, that is, where the python file is. Two classes are defined, based on the Kivy Popup class. The classes are empty. All the properties are defined inside the kv file.

# popup.py

from kivy.uix.popup import Popup

class SelectColorPopup(Popup): pass

class SelectShapePopup(Popup): pass

---

The application's root class contains functions for opening up either of the two popups. It also defines the two variables to hold color and shape information.

---

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

# ex23.py

from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.properties import StringProperty
from popup import *
 
class Ex23(BoxLayout):
    color = StringProperty('No color')
    shape = StringProperty('No shape')
    def selectColor(self,*args):
        SelectColorPopup().open()
    def selectShape(self,*args):
        SelectShapePopup().open()
        
class Ex23App(App):
    def build(self):
        self.title="Popups Example 2"
        return Ex23()

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

---

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

---

The BoxLayout also contains the Status Labels which show what are the currently selected color and shape.

---

This is the first popup class. Note, we access the application root with app.root. Both the size and on_active refer to the application's root. Likewise, there are rows for Green and Blue.

---

Finally, we have a Button with the text 'Select', which when clicked will dismiss the popup. Clicking on the button is the only way to dismiss the popup as we earlier set the auto_dismiss to False. The same is repeated for the second popup.

# ex23.kv

<Ex23>:
    orientation: 'vertical'
    canvas:
        Color:
            rgb: .4, .4, .4
        Rectangle:
            size: self.size
    Button:
        text: 'Color Select'
        on_press: root.selectColor(*args)
    Button:
        text: 'Shape Select'
        on_press: root.selectShape(*args)
    Label:
        size_hint: .3,.5
        pos_hint: {'x':.7}
        text: root.color
    Label:
        size_hint: .3,.5
        pos_hint: {'x':.7}
        text: root.shape
       
<SelectColorPopup>:
    title: 'Color Select'
    size_hint: None, None
    size: app.root.width/2, app.root.height/2
    auto_dismiss: False
    GridLayout:
        cols: 2
        Label:
            text: 'Red'
        CheckBox:
            group:'color'
            on_active: app.root.color = 'Red'
        Label:
            text: 'Green'
        CheckBox:
            group: 'color'
            on_active: app.root.color = 'Green'
        Label:
            text: 'Blue'
        CheckBox:
            group: 'color'
            on_active: app.root.color = 'Blue'
        Button:
            size_hint_y: .3
            text: 'Select'
            on_press: root.dismiss()

<SelectShapePopup>:
    title: 'Shape Select'
    size_hint: None, None
    size: app.root.width/2, app.root.height/2
    auto_dismiss: False
    GridLayout:
        cols: 2
        Label:
            text: 'Rectangle'
        CheckBox:
            group:'shape'
            on_active: app.root.shape = 'Rectangle'
        Label:
            text: 'Circle'
        CheckBox:
            group: 'shape'
            on_active: app.root.shape = 'Circle'
        Label:
            text: 'Triangle'
        CheckBox:
            group: 'shape'
            on_active: app.root.shape = 'Triangle'
        Button:
            size_hint_y: .3
            text: 'Select'
            on_press: root.dismiss()

       

---

This is the result of selecting the second popup and selecting the Triangle radiobutton.

---

After clicking on Select, we can see the status on the bottom right should have updated.

---