AutomataPage
an AutomataPage define a whole page of app. Here is an example login and sigup page.
demo_root = "demos/duolingo"
html = "<div style='margin-top: 100px'></div>"
layout_login = [
{
'Row': [
{
'Column': [],
},
{
'Column': [
{
'Row': [f'$HTML("{html}")'],
},
'username',
'password',
'login_btn',
'signup_btn'
],
},
{
'Column': [],
}
]
},
]
layout_signup = [
{
'Row': [
{
'Column': [],
},
{
'Column': [
{
'Row': [f'$HTML("{html}")'],
},
'username',
'password',
'password2',
'signup_btn',
'login_btn',
],
},
{
'Column': [],
}
]
},
]
login_page = AutomataPage(
name="login_page",
layout=layout_login,
start_at="login_state",
end_at="login_success_state",
next_state="setup_language_page",
use_idle_state=True,
event_listeners={
"login_btn.click": {
"goto": {
"next_state": "login_state",
"ctx_handler": {
"login_status": {
"success": {
"info": "Login Success",
},
"fail": {
"warn": "Login Failed",
},
}
}
},
"switch_page": True,
}
},
outputs=['username'],
states={
"login_state": TaskState(
name="login_state",
module_type='JsonRWFunctionModule',
config=dict(
filename=f"{demo_root}/data/app/user_info.json",
mode="read",
var_type="dict",
var_name="user_info",
),
inputs={
"username": Textbox(
value="",
placeholder="username",
show_label=False,
),
"password": Textbox(
value="",
text_type="password",
placeholder="password",
show_label=False,
),
"login_btn": Button(
value="Login",
interactive=True,
),
"signup_btn": Button(
value="Signup?",
interactive=True,
)
},
outputs={
"user_info": ValueType(
type="dict",
value="${user_info}"
)
},
next_state="check_user_info",
),
"check_user_info": ConditionChoiceState(
name="check_user_info",
choices={
"true": "login_success_state",
"false": "login_error_state",
},
condition='${user_info.get(username, None) == password}',
),
"login_error_state": TaskState(
name="login_error_state",
outputs={
"login_status": ValueType(
type="str",
value='fail',
)
},
),
"login_success_state": TaskState(
name="login_success_state",
outputs={
"login_status": ValueType(
type="str",
value='success',
)
},
),
}
)
signup_page = AutomataPage(
name="signup_page",
start_at="setup_state",
end_at="save_user_info_state",
next_state="login_page",
layout=layout_signup,
event_listeners={
"signup_btn.click": {
"goto": {
"next_state": "signup_state",
"ctx_handler": {
"signup_status": {
"user_exist": {
"warn": "username exist, please login!",
},
"password_too_short": {
"warn": "password should contains at least 8 characters!",
},
"username_short": {
"warn": "username should contains at least 6 characters!",
},
"password_differ": {
"warn": "two passwords are different!"
},
"success": {
"info": "signup success!"
}
}
}
},
'switch_page': True,
}
},
states={
"setup_state": TaskState(
# load database later
name="setup_state",
module_type='JsonRWFunctionModule',
config=dict(
filename=f"{demo_root}/data/app/user_info.json",
mode="read",
var_type="dict",
var_name="user_info",
),
outputs={
"user_info": ValueType(
type="dict",
value="${user_info}"
)
}
),
"signup_state": TaskState(
name="signup_state",
inputs={
"username": Textbox(
value="",
placeholder="username",
show_label=False,
),
"password": Textbox(
value="",
text_type="password",
placeholder="password",
show_label=False,
),
"password2": Textbox(
value="",
text_type="password",
placeholder="confirm password",
show_label=False,
),
"signup_btn": Button(
value="Signup",
interactive=True,
),
"login_btn": Button(
value="Login?",
interactive=True,
),
},
next_state="check_user_exist_state"
),
"check_user_exist_state": ConditionChoiceState(
name="check_user_exist_state",
choices={
"true": "user_exist_error_state",
"false": "check_user_validity_state",
},
condition='${username in user_info}',
),
"check_user_validity_state": ConditionChoiceState(
name="check_user_validity_state",
choices={
"true": "password_same_state",
"false": "username_short_error_state",
},
condition='${len(username) >= 6}',
),
"user_exist_error_state": TaskState(
name="user_exist_error_state",
outputs={
"signup_status": ValueType(
type="str",
value="user_exist",
)
}
),
"username_short_error_state": TaskState(
name="username_short_error_state",
outputs={
"signup_status": ValueType(
type="str",
value="username_short",
)
}
),
"password_same_state": ConditionChoiceState(
name="password_same_state",
choices={
"true": "password_validity_state",
"false": "password_same_error_state",
},
condition='${password == password2}',
),
"password_same_error_state": TaskState(
name="password_same_error_state",
outputs={
"signup_status": ValueType(
type="str",
value="password_differ",
)
}
),
"password_validity_state": ConditionChoiceState(
name="password_validity_state",
choices={
"true": "signup_success_state",
"false": "password_validity_error_state",
},
condition='${len(password) >= 8}',
),
"password_validity_error_state": TaskState(
name="password_validity_error_state",
outputs={
"signup_status": ValueType(
type="str",
value="password_too_short",
)
},
),
"signup_success_state": TaskState(
name="signup_success_state",
outputs={
"signup_status": ValueType(
type="str",
value="success",
),
"user_info": ValueType(
type="dict",
value="${{**user_info, username: password}}"
)
},
next_state="save_user_info_state",
),
"save_user_info_state": TaskState(
name="save_user_info_state",
module_type="JsonRWFunctionModule",
config=dict(
filename=f"{demo_root}/data/app/user_info.json",
mode="write",
var_type="dict",
var_name="user_info",
),
)
}
)Last updated