Layout

The layout is defined recursively as column, row, column, row, .....

For example, here is an simple definition of the layout

layout_learn = [
    {
        'Row': [
            {
                'Column': [
                    {
                        'Row': [
                            {
                                'Column(min_width=810)': [
                                    {
                                        'Row': ['topic_txt']
                                    },
                                    {
                                        'Row': [
                                            {
                                                'Column': ['word_txt', 'explanation_txt'],
                                            },
                                            {
                                                'Column': ['audio_word'],
                                            },
                                        ]
                                    },
                                ]
                            },
                            {
                                'Column': ['word_pronounce_score', 'input_word_audio']
                            },
                            {
                                f'Column(min_width={image_height})': ['image'],
                            },
                        ]
                    },
                    {
                        'Row': [
                            {
                                'Column(min_width=810)': [
                                    'example_sentence',
                                    'audio',
                                ]
                            },
                            {
                                'Column(min_width=300)': ['sent_pronounce_score', 'input_sent_audio'],
                            }
                        ]
                    },
                    'example_translation',
                    {
                        'Row': ['next_word', 'get_quiz_btn'],
                    }
                ],
            },
        ]
    }
]


next_page = "quiz_translation_page"
learn_page = AutomataPage(
    name="learn_page",
    inputs=["language", "topic", "words", "word2material", "username"],
    outputs=["quiz_idx", "quiz_stat", "wrong_books", "words"],
    layout=layout_learn,
    event_listeners={
        'next_word.click': {
            'goto': {
                'next_state': 'learn_word_state',
                'ctx_handler': {
                    'learn_status': {
                        'finished': {
                            'info': 'You have finished all words in this topic! Please have a quiz.'
                        }
                    }
                }
            },
            'update': '',
            'clear': ['input_word_audio', 'word_pronounce_score', 'input_sent_audio', 'sent_pronounce_score'],
        },
        "get_quiz_btn.click": {
            'goto': "finished_learn_state",
            'preload_page': next_page,
            "switch_page": True,
            'clear': ['input_word_audio', 'word_pronounce_score', 'input_sent_audio', 'sent_pronounce_score'],
        },
        "input_word_audio.stop_recording": {
            'goto': "practice_word_pronunciation_state",
            "update": "word_pronounce_score",
        },
        "input_sent_audio.stop_recording": {
            'goto': "practice_sent_pronunciation_state",
            "update": "sent_pronounce_score",
        }
    },
    start_at="setup_state",
    end_at="finished_learn_state",
    next_state=next_page,
    states={
        ...
    }
}

The above code define the layout of the learn page and pass the layout to the constructor of AutomataPage