添加微信號"CNFeffery"加入技術交流群

?
本文示例代碼已上傳至我的Github倉庫https://github.com/CNFeffery/DataScienceStudyNotes
?

1 簡介

這是我的系列教程「Python+Dash快速web應用開發(fā)」的第九期，在之前三期的教程中，我們針對Dash中經常會用到的一些靜態(tài)部件進行了較為詳細的介紹，從而get到在Dash應用中組織靜態(tài)內容的常用方法。

而從今天的教程開始，我將帶大家來認識和學習Dash生態(tài)中非常實用的一些「交互式」部件，配合回調函數(shù)，可以幫助我們構建一個形式豐富的可接受輸入，并反饋輸出的交互式應用，今天要介紹的交互部件為「表單輸入」類部件的基礎知識，下面來學習吧~

圖1

2 Dash中常用的表單輸入類交互部件

「交互部件」跟之前介紹的一系列「靜態(tài)部件」的區(qū)別在于它們不僅具有供用戶交互操作的特點，還承擔了接受用戶輸入，并傳遞這些輸入?yún)?shù)的作用。而網頁開發(fā)中，「表單輸入」類部件則是交互部件中最常用到的。

在Dash生態(tài)中常用到的表單輸入類交互部件有：

2.1 輸入框部件Input()

其實在之前的教程內容中我們已經使用過很多次輸入框部件Input()了，而我比較推薦使用的是dash_bootstrap_components中封裝的Input()，它相較于dash_core_components中自帶的Input()擁有更多特性。

除了幾乎所有部件都具有的id、className以及style參數(shù)之外，Input()中還有一個特殊的參數(shù)type，它的不同取值從根本上奠定了Input()的角色，常用的有：

「text、password、search」

當Input()的type參數(shù)取值為'text'、'password'以及'search'之一時，它分別扮演文本輸入框、密碼輸入框以及搜索框等角色，也擁有了一些特別的常用參數(shù)&屬性：

value屬性對應它當前的輸入值；

placeholder用于設置未輸入時輸入框內的提示文字；

maxLength用于設置最多可輸入的字符數(shù)量；

n_submit用于記錄光標在輸入框內部時鍵盤Enter鍵被點按的次數(shù)；

debounce設置為True時會強制每次用戶按下Enter鍵或點擊其他部件時才同步value值給后臺Dash服務。

valid和invalid參數(shù)都接受Bool型參數(shù)，分別用來控制輸入框顯示正確狀態(tài)以及錯誤狀態(tài)，我們可以在檢查用戶名、密碼等是否正確時通過回調輸出設置這些參數(shù)為True來告知用戶相關提示信息。

我們來通過下面的示例來直觀感受這些特性：

?
app1.py
?

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            dbc.Input(id='input-text',
                      placeholder='text模式，長度限制4',
                      type='text',
                      maxLength=4,
                      style={'width': '300px'}),
            html.P(id='output-text'),
            dbc.Input(id='input-password',
                      placeholder='password模式，綁定Enter鍵',
                      type='password',
                      style={'width': '300px'},
                      debounce=True),
            html.P(id='output-password'),
            dbc.Input(id='input-search',
                      placeholder='search模式，可快速清除內容',
                      type='search',
                      style={'width': '300px'}),
            html.P(id='output-search'),
        ],
        style={'margin-top': '100px'}
    )
)

@app.callback(
    Output('output-text', 'children'),
    Input('input-text', 'value')
)
def output_text(value):

    return value

@app.callback(
    Output('output-password', 'children'),
    [Input('input-password', 'value'),
     Input('input-password', 'n_submit')]
)
def output_password(value, n_submit):

    if value:

        return '密碼為：'+value+'  '+f'第{n_submit}次按下Enter'

    return dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True)

圖2

「number、range」

當Input()部件的type屬性設置為'number'時，它便搖身一變成了數(shù)值輸入框，并擁有了一些特殊的參數(shù)&屬性：

min與max參數(shù)用來約束數(shù)值輸入框的輸入值上下限；

step參數(shù)用來設定數(shù)值輸入框右側上下箭頭點按一次后數(shù)值變化的步長

而當type設置為range時就更有意思了，我們的Input()這時變成了一個滑桿，也是通過上述三個參數(shù)來限制范圍和拖動的步長值。

?
app2.py
?

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            dbc.Input(id='input-number',
                      placeholder='number模式',
                      type='number',
                      min=0,
                      max=100,
                      step=0.5,
                      style={'width': '300px'}),
            html.P(id='output-number'),
            dbc.Input(id='input-range',
                      placeholder='range模式',
                      type='range',
                      style={'width': '300px'},
                      min=0,
                      max=100,
                      step=10,),
            html.P(id='output-range')
        ],
        style={'margin-top': '100px'}
    )
)

@app.callback(
    Output('output-number', 'children'),
    Input('input-number', 'value')
)
def output_number(value):
    return value

@app.callback(
    Output('output-range', 'children'),
    Input('input-range', 'value')
)
def output_range(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

圖3

2.2 下拉選擇部件Dropdown()

接下來我們來深入學習之前也使用過很多次的下拉選擇部件Dropdown()，直接使用dash_core_components中的Dropdown()即可，它的主要屬性&參數(shù)有：

options用于設置我們的下拉選擇部件中顯示的選項，傳入列表，列表每個元素為字典，必填鍵有：'label'，用于設置對應選項顯示的標簽名稱；'value'，對應當前選項的值，也是我們書寫回調函數(shù)接受的輸入；'disabled'，一般情況下不用設置，除非你想指定對應選項不可點選就設置為True；

multi，bool型，用于設置是否允許多選；

optionHeight，用于設置每個選項的顯示像素高度，默認35；

placeholder，同Input()同名參數(shù)；

searchable，bool型，用于設置是否可以在輸入框中搜索下拉選項；

search_value，可用作回調的輸入，記錄了用戶的搜索內容；

value，記錄用戶已選擇的選項，單選模式下為對應單個選項的'value'值，多選模式下為對應多個選項'value'值組成的列表；

?
app3.py
?

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_core_components as dcc
import json

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            dcc.Dropdown(
                id='dropdown-input-1',
                placeholder='單選',
                options=[
                    {'label': item, 'value': item}
                    for item in list('ABCD')
                ],
                style={
                    'width': '300px'
                }
            ),
            html.Pre(id='dropdown-output-1',
                     style={'background-color': '#d4d4d420',
                            'width': '300px'}),
            dcc.Dropdown(
                id='dropdown-input-2',
                placeholder='多選',
                multi=True,
                options=[
                    {'label': item, 'value': item}
                    for item in list('ABCD')
                ],
                style={
                    'width': '300px'
                }
            ),
            html.Pre(id='dropdown-output-2',
                     style={'background-color': '#d4d4d420',
                            'width': '300px'})
        ],
        style={'margin-top': '100px'}
    )
)

@app.callback(
    Output('dropdown-output-1', 'children'),
    Input('dropdown-input-1', 'value')
)
def dropdown_output_1(value):
    if value:
        return json.dumps(value, indent=4)

    return dash.no_update

@app.callback(
    Output('dropdown-output-2', 'children'),
    Input('dropdown-input-2', 'value')
)
def dropdown_output_2(value):
    if value:
        return json.dumps(value, indent=4)

    return dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True)

圖4

2.3 單選框與復選框

我們分別可以使用dash_bootstrap_components中的RadioItems與Checklist來創(chuàng)建單選框與復選框：

「單選框RadioItems」

單選框的特點是我們只能在其展示的一組選項中選擇1項。

它的參數(shù)options格式同Dropdown()；

inline參數(shù)設置為True時會橫向布局所有選項；

switch設置為True時會將每個選項樣式切換為開關；

?
app4.py
?

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_core_components as dcc
import json

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            dbc.RadioItems(
                id='radio-items-input',
                inline=True,
                switch=True,
                options=[
                    {'label': item, 'value': item}
                    for item in list('ABCD')
                ],
                style={
                    'width': '300px'
                }
            ),
            html.P(id='radio-items-output')
        ],
        style={'margin-top': '100px'}
    )
)

@app.callback(
    Output('radio-items-output', 'children'),
    Input('radio-items-input', 'value')
)
def radio_items_output(value):

    if value:
        return '已選擇：'+value

    return dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True)

圖5

「復選框Checklist」

與單選框相對的，是復選框，它的參數(shù)與RadioItems完全一致，唯一不同的是它是可以多選的：

?
app5.py
?

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_core_components as dcc
import json

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            dbc.Checklist(
                id='check-list-input',
                inline=True,
                options=[
                    {'label': item, 'value': item}
                    for item in list('ABCD')
                ],
                style={
                    'width': '300px'
                }
            ),
            html.P(id='check-list-output')
        ],
        style={'margin-top': '100px'}
    )
)

@app.callback(
    Output('check-list-output', 'children'),
    Input('check-list-input', 'value')
)
def check_list_output(value):

    if value:
        return '已選擇：'+'、'.join(value)

    return dash.no_update

if __name__ == '__main__':
    app.run_server(debug=True)

圖6

而除了上述兩種供用戶對多個選項進行單選或多選的部件之外，dash_bootstrap_components中還有可以創(chuàng)建單個選擇部件的RadioButton與Checkbox，它們只能進行勾選操作，對應回調用的的輸入值為checked，是個Bool型屬性，用來區(qū)分是否被勾選上，這里就不再贅述。

3 動手編寫在線調查問卷

學習完今天的內容之后，我們就可以將它們應用到實際需求中，譬如我們現(xiàn)在需要向其他人發(fā)放一份調查問卷，其中涉及到不少輸入文字或單選或多選內容，最后我們還需要將用戶填寫完成的表單內容保存到本地，用Dash就可以很快速地完成這項工作：

圖7

對應的代碼如下：

?
app6.py
?

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
import json
import re

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            html.H1('關于Dash用戶的調查'),
            html.Br(),

            html.P('1. 您的性別為：'),
            html.Hr(),
            dbc.RadioItems(
                id='gender',
                inline=True,
                options=[
                    {'label': '男', 'value': '男'},
                    {'label': '女', 'value': '女'}
                ]
            ),
            html.Br(),

            html.P('2. 您常用的編程語言有：'),
            html.Hr(),
            dbc.Checklist(
                id='programming-language',
                inline=True,
                options=[
                    {'label': 'Python', 'value': 'Python'},
                    {'label': 'R', 'value': 'R'},
                    {'label': 'JavaScript', 'value': 'JavaScript'},
                    {'label': 'Java', 'value': 'Java'},
                    {'label': 'Julia', 'value': 'Julia'},
                    {'label': 'C#', 'value': 'C#'},
                    {'label': 'C++', 'value': 'C++'},
                    {'label': '其他', 'value': '其他'},
                ]
            ),
            html.Br(),

            html.P('3. 您使用Dash的頻繁程度：'),
            html.Hr(),
            dbc.RadioItems(
                id='frequency',
                inline=True,
                options=[
                    {'label': '經常', 'value': '經常'},
                    {'label': '偶爾', 'value': '偶爾'},
                    {'label': '很少使用', 'value': '很少使用'},
                    {'label': '沒聽說過', 'value': '沒聽說過'},
                ]
            ),
            html.Br(),

            html.P('4. 您對以下哪些方面感興趣：'),
            html.Hr(),
            dbc.Checklist(
                id='interests',
                options=[
                    {'label': '構建在線數(shù)據(jù)可視化作品', 'value': '構建在線數(shù)據(jù)可視化作品'},
                    {'label': '制作機器學習demo', 'value': '制作機器學習demo'},
                    {'label': '為企業(yè)開發(fā)BI儀表盤', 'value': '為企業(yè)開發(fā)BI儀表盤'},
                    {'label': '為企業(yè)開發(fā)酷炫的指標監(jiān)控大屏', 'value': '為企業(yè)開發(fā)酷炫的指標監(jiān)控大屏'},
                    {'label': '開發(fā)有用的在線小工具', 'value': '開發(fā)有用的在線小工具'},
                    {'label': '其他', 'value': '其他'},
                ]
            ),
            html.Br(),

            html.P('5. 您的職業(yè)：'),
            html.Hr(),
            dbc.RadioItems(
                id='career',
                options=[
                    {'label': '科研人員', 'value': '科研人員'},
                    {'label': '運營', 'value': '運營'},
                    {'label': '數(shù)據(jù)分析師', 'value': '數(shù)據(jù)分析師'},
                    {'label': '算法工程師', 'value': '算法工程師'},
                    {'label': '大數(shù)據(jù)開發(fā)工程師', 'value': '大數(shù)據(jù)開發(fā)工程師'},
                    {'label': '金融分析師', 'value': '金融分析師'},
                    {'label': '爬蟲工程師', 'value': '爬蟲工程師'},
                    {'label': '學生', 'value': '學生'},
                    {'label': '其他', 'value': '其他'},
                ]
            ),
            html.Br(),

            html.P('您的聯(lián)系方式：'),
            html.Hr(),
            dbc.Input(
                id='tel',
                placeholder='填入您的電話或手機號碼！',
                autoComplete='off', # 關閉瀏覽器自動補全
                style={
                    'width': '300px'
                }
            ),
            html.Hr(),

            dbc.Button(
                '點擊提交',
                id='submit'
            ),

            html.P(id='feedback')

        ],
        style={
            'margin-top': '50px',
            'margin-bottom': '200px',
        }
    )
)


@app.callback(
    Output('feedback', 'children'),
    Input('submit', 'n_clicks'),
    [
        State('gender', 'value'),
        State('programming-language', 'value'),
        State('frequency', 'value'),
        State('interests', 'value'),
        State('tel', 'value'),
    ],
    prevent_initial_call=True
)
def fetch_info(n_clicks, gender, programming_language, frequency, interests, tel):
    if all([gender, programming_language, frequency, interests, tel]):

        # 簡單以寫出到本地指定json文件為例來演示寫出過程
        with open(tel+'.json', 'w') as j:
            json.dump(
                {
                    'gender': gender,
                    'programming_language': programming_language,
                    'frequency': frequency,
                    'interests': interests
                },
                j
            )
        return '提交成功！'

    else:
        return '您的信息未填寫完整，請檢查后提交！'

@app.callback(
    [Output('tel', 'valid'),
     Output('tel', 'invalid')],
    Input('tel', 'value'),
    prevent_initial_call=True
)
def check_if_tel_completed(value):
    try:
        if re.findall('\d+', value)[0] == value and value.__len__() == 11:
            return True, False
    except:
        pass

    return False, True

if __name__ == '__main__':
    app.run_server(debug=True)