Main Content

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.

Representar datos numéricos en una app

En App Designer, puede crear una app que represente datos numéricos y se actualice en función de las entradas del usuario. La app de este ejemplo recopila la entrada del usuario, calcula los pagos mensuales en función de la entrada y representa el capital y los importes de los intereses a lo largo del tiempo. Este ejemplo muestra las tareas de creación de la app:

  • Acceder a los valores de las propiedades desde componentes de la IU.

  • Representar datos de una app.

Crear componentes de la IU en la vista de diseño

Esta app utiliza estos componentes para crear una calculadora sencilla de amortización de hipotecas:

  • Campos de edición numéricos: introduzca valores numéricos como el importe del préstamo, el tipo de interés y el periodo del préstamo para ver el importe de pago mensual calculado. MATLAB® los comprueba de forma automática para asegurarse de que los valores son numéricos y de que se encuentran dentro del intervalo que ha especificado.

  • Botón de comando: calcula el valor del pago mensual a partir de las entradas proporcionadas.

  • Ejes: representan una gráfica del capital y los importes de los intereses frente a la cuota de la hipoteca.

Diseñar componentes de la IU

Para crear la calculadora de hipoteca, comience abriendo una nueva app de dos paneles con reordenación automática desde la página de inicio de App Designer. En la vista Diseño, arrastre campos de edición numéricos, un botón de comando y ejes desde la Biblioteca de componentes en el área de trabajo de la app.

Configurar el aspecto de los componentes

Puede modificar el aspecto de un componente editándolo directamente en el área de trabajo o cambiando las propiedades en el explorador de componentes. Por ejemplo:

  • Edite la etiqueta de un componente de forma interactiva. Haga doble clic en las etiquetas del campo de edición del área de trabajo de la app y modifique el texto de la etiqueta.

  • Desactive la capacidad de editar datos en el campo de edición Monthly Payment. Seleccione el componente campo de edición y deshabilite la casilla Editable en el explorador de componentes.

Después de diseñar los componentes de la app, el área de trabajo de la vista de diseño muestra campos para que el usuario de la app introduzca el importe del préstamo, el tipo de interés y el periodo del préstamo, además de un botón para calcular el pago mensual, que todavía no funciona. La gráfica del capital y el interés está vacía. Para obtener más información acerca de ordenar componentes de la app, consulte Lay Out Apps in App Designer Design View.

Programar el comportamiento de la app en la vista de código

Para programar el comportamiento de la app en la vista de código, utilice funciones de callback que se ejecuten siempre que el usuario interactúe con determinados componentes de la app. Por ejemplo, escriba una función de callback para que el botón Monthly Payment calcule el pago mensual y represente datos cuando el usuario pulse el botón.

Añadir una función de callback

Añada una función de callback ButtonPushedFcn para el botón Monthly Payment haciendo clic con el botón secundario en app.MonthlyPaymentButton en el explorador de componentes. Después, seleccione Callbacks > Add ButtonPushedFcn callback en el menú contextual. App Designer genera automáticamente una función en blanco en la vista de código y la asigna como una función de callback al botón. Para obtener más información acerca de los callbacks, consulte Callbacks in App Designer.

En la función de callback que acaba de crear, agregue código para calcular el pago mensual y representar el capital y los importes de los intereses a lo largo del tiempo. Como el callback está asignado al botón, cuando un usuario haga clic en el botón Monthly Payment, se ejecuta este código.

Calcular el pago mensual

Acceda a los valores de entrada numéricos de los componentes de su app usando la notación de puntos app.ComponentName.Property. Por ejemplo, almacene la entrada del campo Loan Amount en una variable local de la función de callback.

amount = app.LoanAmountEditField.Value;

Con las entradas de los campos de edición numéricos para Loan Amount, Interest Rate y Loan Period, calcule el pago mensual con la función de callback.

payment = (amount*rate)/(1-(1+rate)^-nper);

Para obtener el importe de pago calculado en el campo de edición numérico Monthly Payment, defina el valor Monthly Payment en el importe de pago calculado.

app.MonthlyPaymentEditField.Value = payment;

Representar los datos en los ejes

Para generar el capital y los importes de los intereses a partir del valor Monthly Payment, empiece preasignando e inicializando las variables.

interest = zeros(1,nper);
principal = zeros(1,nper);
balance = zeros(1,nper);
balance(1) = amount;

Después, calcule el capital y los intereses.

for i = 1:nper
   interest(i)  = balance(i)*rate;
   principal(i) = payment - interest(i);
   balance(i+1) = balance(i) - principal(i);
end

Represente datos en una app con la función plot y especificando el objeto UIAxes en su app como el primer argumento. Por ejemplo, represente el capital y los importes de los intereses en los ejes llamados PrincipalInterestUIAxes.

plot(app.PrincipalInterestUIAxes,(1:nper)',principal,(1:nper)',interest);

Editar el aspecto de los ejes

Ajuste las etiquetas y los límites de los ejes especificando el objeto UIAxes como el primer argumento de las funciones correspondientes. Por ejemplo, añada una leyenda a los ejes y ajuste los límites de los ejes especificando app.PrincipalInterestUIAxes como el primer argumento de entrada en las funciones legend, xlim e ylim, respectivamente.

legend(app.PrincipalInterestUIAxes,{"Principal","Interest"},"Location","Best");
xlim(app.PrincipalInterestUIAxes,[0 nper]);
ylim(app.PrincipalInterestUIAxes,"auto");

Ejecutar la app

Para ejecutar la app, haga clic en Ejecutar en la barra de herramientas de App Designer. Introduzca algunos valores en los campos numéricos y haga clic en el botón Monthly Payment. La app calcula el pago mensual y representa los datos del capital y de los intereses.

Consulte también

Funciones

Propiedades

Temas relacionados