La traducción de esta página aún no se ha actualizado a la versión más reciente. Haga clic aquí para ver la última versión en inglés.

Crear y ejecutar una app sencilla utilizando App Designer

App Designer proporciona un tutorial que guía a través del proceso de creación de una app sencilla, que contiene una gráfica y un control deslizante. El control deslizante controla la amplitud de la función representada gráficamente. Puede crear esta app ejecutando el tutorial o puede seguir los pasos del tutorial enumerados aquí.

Ejecutar el tutorial

Para ejecutar el tutorial en App Designer, abra la página de inicio de App Designer y haga clic en Show examples en la sección Apps. Después, seleccione Interactive Tutorial.

Pasos del tutorial para crear la app

App Designer tiene dos vistas para crear una app: Design View y Code View. Utilice Design View para crear componentes de la IU y diseñar la app de forma interactiva. Utilice Code View para programar el comportamiento de la app. Puede cambiar entre las dos vistas utilizando los botones de alternancia en la esquina superior derecha de App Designer.

Para crear la sencilla app gráfica, abra una nueva app en App Designer y siga estos pasos.

Paso 1: Crear un componente de ejes

En Design View cree componentes de la IU y modifique su apariencia de forma interactiva. La biblioteca Component Library contiene todos los componentes, contenedores y herramientas que puede agregar a la app de forma interactiva. Agregue un componente arrastrándolo desde Component Library hasta el área de trabajo de la app. Después, puede cambiar la apariencia del componente configurando propiedades en el explorador Component Browser o editando determinados aspectos del componente como el tamaño y texto de etiqueta, directamente en el área de trabajo.

En la app gráfica, cree un componente de ejes para mostrar datos representados gráficamente. Arrastre un componente Axes desde Component Library hasta el área de trabajo.

Paso 2: Crear un componente Slider (control deslizante)

Arrastre un componente Slider desde la Component Library hasta el área de trabajo. Colóquelo debajo del componente de ejes.

Paso 3: Actualizar la etiqueta del control deslizante

Reemplace el texto de la etiqueta del control deslizante. Haga doble clic en la etiqueta y reemplace la palabra Slider por Amplitude.

Cuando haya terminado de diseñar la app, el área de trabajo en Design View debería tener este aspecto:

Para obtener más información sobre cómo diseñar apps, consulte Lay Out Apps in App Designer Design View.

Paso 4: Desplazarse a Code View

Una vez haya diseñado la app, escriba código para programar su comportamiento. Haga clic en el botón Code View sobre el área de trabajo para editar el código de la app.

Cuando añade componentes a la app en Design View, App Designer genera automáticamente código que se ejecuta cuando ejecuta la app. Este código configura la apariencia de la app para que coincida con lo que ve en el área de trabajo. Este código no es editable y se muestra sobre un fondo gris. Como parte de este código generado, App Designer crea algunos objetos para que los utilice cuando programe el comportamiento de la app.

• El objeto app: este objeto almacena todos los datos en la app, como los componentes de la IU y cualquier dato que especifique usando las propiedades. Todas las funciones de la app necesitan este objeto como primer argumento. Este patrón permite tener acceso a los componentes y propiedades desde dentro de esas funciones.

• Los objetos de los componentes: cada vez que agrega un componente en Design View, App Designer almacena el componente como un objeto cuyo nombre se establece utilizando el formato app.ComponentName. Puede mostrar y modificar los nombres de los componentes en la app utilizando el Component Browser. Para acceder a las propiedades de los componentes y actualizarlas desde el código de la app, utilice el patrón app.ComponentName.Property.

Paso 5: Añadir una función callback al control deslizante

Programe el comportamiento de la app utilizando funciones callback. Una función callback es una función que se ejecuta cuando el usuario de la app lleva a cabo una interacción específica, como ajustar el valor de un control deslizante.

En la app gráfica, añada una función callback que se ejecute cada vez que el usuario ajuste el valor del control deslizante. Haga clic con el botón secundario en app.AmplitudeSlider en Component Browser. Luego, seleccione Callbacks > Add ValueChangedFcn callback en el menú contextual.

Cuando añade un callback a un componente, App Designer crea una función callback y sitúa el cursor en el cuerpo de esa función. App Designer pasa automáticamente el objeto app como el primer argumento de la función callback para permitir el acceso a los componentes y sus propiedades. Por ejemplo, en la función AmplitudeSliderValueChanged, App Designer genera automáticamente una línea de código para acceder al valor del control deslizante.

Para obtener más información sobre cómo programar el comportamiento de una app utilizando funciones callback, consulte Callbacks in App Designer.

Paso 6: Representar datos

Cuando llame a una función para crear gráficas en App Designer, especifique los ejes objetivo o el objeto principal como argumento de la función.

En la app gráfica, actualice los datos representados en los ejes cada vez que el usuario de la app cambie el valor del control deslizante, especificando el nombre del objeto de ejes en la app, app.UIAxes, como el primer argumento de la función plot. Agregue este código a la segunda línea del callback AmplitudeSliderValueChanged para representar gráficamente el resultado a escala de la función peaks en los ejes.

plot(app.UIAxes,value*peaks)

Para obtener más información sobre cómo mostrar gráficas en una app, consulte Mostrar gráficas en App Designer.

Paso 7: Actualizar los límites de los ejes

Para acceder a las propiedades de los componentes y actualizarlas desde el código de la app, utilice el patrón app.ComponentName.Property.

En la app gráfica, cambie los límites del eje y configurando la propiedad YLim del objeto app.UIAxes. Añada este comando a la tercera línea del callback AmplitudeSliderValueChanged:

app.UIAxes.YLim = [-1000 1000];

Paso 8: Ejecutar la app

Haga clic en Run para guardar y ejecutar la app. Ajuste el valor del control deslizante para representar gráficamente algunos datos en la app.

Tras guardar los cambios, la app está disponible para ejecutarse nuevamente en App Designer o escribiendo su nombre (sin la extensión .mlapp) en la ventana de comandos de MATLAB^®. Cuando ejecuta la app desde la línea de comandos, el archivo debe estar en la carpeta actual o en la ruta de MATLAB.

Temas relacionados

• Lay Out Apps in App Designer Design View
• Manage Code in App Designer Code View
• Callbacks in App Designer
• Mostrar gráficas en App Designer
• Compartir datos dentro de apps de App Designer