多页破折号应用

Question

我对如何使用破折号创建多页应用程序有疑问。我有两个都可以独立运行的脚本，现在我想将它们集成在一起。请注意，我是仪表板和烧瓶的新手。

因此，我希望索引脚本调用输入脚本，并且输入脚本中的gui应该放在索引脚本的page_content html.Div中。

# index script
import os
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.figure_factory as ff
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash()
application = app.server

colors = {
    'background': '#7FDBFF',
    'text': '#111111'
    }

tab_style = {
        'color': '#0074D9',
        'text-decoration': 'underline',
        'margin': 30,
        'cursor':  'pointer'
        }

app.layout = html.Div(
        style={'backgroundColor': colors['background'],     'color': colors['text']}, children=[
        dcc.Location(id='url'),
        dcc.Link('Index', href='/', style=tab_style),
        dcc.Link('Input', href='/app/input', style=tab_style),
        html.Div(html.H1(children='XYZ', style={'textAlign': 'center'})),
        html.Div(style={'textAlign': 'center'}, id='page_content')
        ])

inputLayout = html.H3(
        children='Input')   # <- if inputLayout is a simple html.H or html.Div I can just assign it to a variable but how do I go about if the result of a more complicated script should go in here. So for example here I want to put the input script.

@app.callback(
        Output(component_id='page_content',  component_property='children'),
        [Input('url', 'pathname')]
        )

def display_page(pathname):
    if pathname == '/app/input':
        return inputLayout # <- call input script
    else:
        return 'This is a Dash application' 

if __name__ == '__main__':
    application.run(debug=True, port=9009)

# input script
import os
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.figure_factory as ff
import plotly.graph_objs as go
import pandas as pd
import numpy as np

app = dash.Dash()

colors = {
    'background': '#7FDBFF',
    'text': '#111111'
}

app.layout = html.Div(style={'backgroundColor':      colors['background']}, children=[

    html.Div(children='Parameters', style={
        'textAlign': 'left',
        'color': colors['text']
            }),

    html.Div(
            dcc.RadioItems(
            id='Parameters',
            options=[
                    {'label': 'X', 'value': 'X'},
                    {'label': 'Y', 'value': 'Y'}
                    ],
            value='X',
            labelStyle={'display': 'block'} # display radio items in list
            )),

    html.Div(
            html.Button('Execute', id='execute')
            ),
    html.Div(id='output')
])

@app.callback(
    Output('output', 'children'),
    [Input('execute', 'n_clicks')],
    state=[
            State('Parameters', 'value')
     ])

def compute(n_clicks, Parameters):
    if n_clicks == None:
        return "not started"
    elif Parameters == "X":
        df = extractData() # <- trigger some data extraction
        return "Running size of data {}".format(df.shape)
    else:
        return "No data: {}".format(Parameters)

def extractData():
    dfX = pd.DataFrame(columns=['x'])
    dfX['x'] = np.random.rand(1000) 
    return dfX     

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