Agregar estilo con la aplicación MDK || ebooksonline.es

Puede clonar un proyecto existente desde Tienda GitHub y comience directamente con el paso 4 de este tutorial.

La plantilla MDK admite estilo MENOS archivo para estilizado para NativeScript, Controla el SDK de Android y el SDK de iOS.

Paso 1: Cree un nuevo proyecto MDK en SAP Business Application Studio

Este paso implica el proyecto de crear un kit de desarrollo móvil en el editor.

El espacio de desarrollo se lanzó en SAP Business Application Studio.
Hacer clic Empezar desde la plantilla en la página de bienvenida.
Si no ve la página de bienvenida, puede acceder a ella a través de Ayuda menú.
Escoger Proyecto MDK y haga clic en Comienzo.
I Conocimiento básico paso, seleccione o proporcione la información a continuación y haga clic en Hacia adelante:
Gort Valor
MDK template type Escoger CRUD desde el otoño pasado
Your project name MDK_Styling
Your application name
El es CRUD La plantilla crea acciones, reglas, mensajes fuera de línea o fuera de línea, lista de datos específicos con opciones comestibles. Más detalles sobre Plantilla MDK disponible en documentación útil.
Si tú ves La señal de fundición en la nube expiró, ¿continuar sin conexión a servicios móviles? , luego configure el entorno de Foundry Cloud nuevamente haciendo clic en en la esquina inferior izquierda de la barra de estado para iniciar una sesión válida y haga clic en Comenzar de nuevo.

Gort	Valor
`MDK template type`	Escoger `CRUD` desde el otoño pasado
`Your project name`	`MDK_Styling`
`Your application name`

I Configuración del servicio paso, proporcione o seleccione la información a continuación y haga clic en Hacia adelante:

Gort	Valor
`Service File Name`	`<Provide any name of your choice>`
`OData Source`	Escoger `Mobile Services` desde el otoño pasado
`Application Id`	Escoger `com.sap.mdk.demo` desde el otoño pasado
`Destination`	Escoger `SampleServiceV2` desde el otoño pasado
`Enter a path to the OData service`	Déjalo así
`Language URL`	Déjelo con el valor predeterminado
`Enable Offline`	Está habilitado por defecto

MDK

En este tutorial, ya se ha realizado la configuración del lado del servidor para esta aplicación MDK.

Ya sea que esté creando una aplicación en línea o fuera de línea, este paso es necesario para conectarse a un servicio OData. Al crear la aplicación Mobile Development Kit, se asume que el servicio OData creado y el destino destinado a este servicio están configurados en Mobile Services.

Dado que crea una aplicación en línea, Habilitar sin conexión la opción está seleccionada.

I Colecciones de OData paso, seleccione Customers (a menos que se seleccione de forma predeterminada). Hacer clic Finalizar para completar la creación del proyecto.
Después de hacer clic Finalizar, el asistente generará su aplicación MDK en función de sus selecciones. Debería MDK_Styling proyecto en el explorador de proyectos.

Hecho

Inicie sesión para responder la pregunta

Paso 2: agregue metadatos de estilo al archivo LESS

El es LESS La hoja de estilo brinda la capacidad de definir hojas de estilo que se pueden usar para diseñar la interfaz de usuario en la aplicación MDK.

Puedes encontrar más detalles al respecto. estilo en MDK.

I MDK_Styling proyecto, ampliación del Estilos carpeta y abra la Styles.less expediente.

Copie y pegue el siguiente código.

@mdkYellow1: #ffbb33;
@mdkRed1: #ff0000;

//// This style applies to all the ActionBars in the application
ActionBar {
    color: white;
    background-color: red;
}

//// This style applies to all the ToolBars in the application
ToolBar {
    color: white;
    background-color: blue;
}

//// LogoutToolbarItem is tool bar item for Logout in Main.page
#LogoutToolbarItem  {
    color: brown;
}

//// UploadToolbarItem is tool bar item for Sync in Main.page
#UploadToolbarItem  {
    color: green;
}

//// By-Class style: These style classes can be referenced from rules and set using ClientAPI setStyle function
//// below snippet is to style Customers button on Main.page
.MyCustomerButton{
  font-color: @mdkRed1;
  background-color: black;
}

//// below snippet is to style Title property of an Object Table control in Customers_List.page
.ObjectTableTitle {
  font-color: @mdkYellow1;
  background-color: @mdkRed1;
}

//// below snippet is to style Object Header control in Customers_Detail.page

/* Object Header - BodyText */
/* iOS Only */
.objectHeaderBodyText {
  font-color: red;
}

/* Object Header - Description */
/* iOS Only */
.objectHeaderDescription {
  font-color: blue;
}

/* Object Header - Footnote */
/* iOS Only */
.objectHeaderFootNote {
  font-color: green;
}

/* Object Header - Headline */
/* iOS Only */
.objectHeaderHeadline {
  font-color: #ff00ff;
}

/* Object Header - Background */
.objectHeaderBackground {
background-color: #DC143C;
}

/* Object Header - StatusText */
/* iOS Only */
.objectHeaderStatus {
  background-color: #cccccc;
  font-color: red;
  font-name: italicSystem;
  font-style: italic;
  font-size: 18;
}

/* Object Header - Subhead */
/* iOS Only */
.objectHeaderSubhead {
  font-color: yellow;
}

/* Object Header - SubstatusText */
/* iOS Only */
.objectHeaderSubStatus {
  background-color: #cccccc;
  font-color: blue;
  font-name: italicSystem;
  font-style: italic;
  font-size: 18;
}

De forma predeterminada, hay una superposición de tinte superpuesto en la barra de herramientas. Si desea una barra de herramientas de color sólido que coincida con la barra de acción, necesita la bartintcolor propiedad en el estilo en lugar del color de fondo (o además de él). bartintcolor: blue;

Guarde sus cambios en el Styles.less expediente.
Styles.less ya vinculado a las propiedades de Estilos en Application.app expediente.

Paso 3: establece el estilo de los controles del SDK

En este paso, conectará clases de estilo:

MyCustomerButton a Customers control de botón de sección activado Main.page
ObjectTableTitle al Título de Propiedad de la Tabla de Objetos en Customers_List.page
objectHeaderBodyText a BodyText Propiedad Encabezado propiedad en Customers_Detail.page
objectHeaderDescription a Description Propiedad Encabezado propiedad en Customers_Detail.page
objectHeaderFootNote a Footnote Propiedad Encabezado propiedad en Customers_Detail.page
objectHeaderHeadline a HeadlineText Propiedad Encabezado propiedad en Customers_Detail.page
objectHeaderBackground a ObjectHeader Propiedad Encabezado propiedad en Customers_Detail.page
objectHeaderStatus a StatusText Propiedad Encabezado propiedad en Customers_Detail.page
objectHeaderSubhead a Subhead Propiedad Encabezado propiedad en Customers_Detail.page
objectHeaderSubStatus a SubstatusText Propiedad Encabezado propiedad en Customers_Detail.page

Haga doble clic Main.page, Seleccione Customers botón de sección, haga clic en conexión icono junto a Estilo propiedad.
En el navegador de objetos, haga doble clic MyCustomerButton clase para enlazar y hacer clic en la propiedad de estilo Okey.
Ir Paginas | Clientes, haga doble clic Customers_List.page, Seleccione Tabla de objetos control, desplácese hacia abajo para Estilo alt.
Hacer clic conexión icono junto a Título propiedad.
En el navegador de objetos, haga doble clic ObjectTableTitle clase para enlazar y hacer clic en la propiedad de estilo Okey.
Ir Paginas | Clientes, haga doble clic Customers_Detail.page, Seleccione Objetos de encabezado control, desplácese hacia abajo para Estilo compartir y asociar propiedades de control con propiedades estilísticas.

Paso 4: usa la aplicación

Hasta ahora, aprendió a crear una aplicación MDK en el editor de SAP Business Application Studio. Ahora aplicará esta definición de aplicación a los servicios móviles.

Botón derecho del ratón Application.app y seleccione MDK: Implementación.
Seleccione un destino de implementación como Servicios móviles.
Debería ver Implementación exitosa mensaje.

Hecho

Inicie sesión para responder la pregunta

Paso 5: Replica el código QR para abordar una aplicación

SAP Business Application Studio tiene una función para generar un código QR para una aplicación integrada.

Haga doble clic en el Application.app para abrirlo en MDK Application Editor y haga clic en Código QR de la aplicación icono para incluir el código QR.

MDK MDK

Hecho

Inicie sesión para responder la pregunta

Paso 6: Ejecute la aplicación en el cliente MDK

Asegúrese de seleccionar la pestaña de plataformas de dispositivo correcta arriba. Una vez escaneado y cargado con la URL incorporada, se recordará. Cuando cierre la sesión y vuelva a subir a bordo, se le pedirá que continúe usando la aplicación actual o que escanee un nuevo código QR.

Inclinarse estos pasos para abordar el cliente MDK.
Una vez que acepte la actualización de la aplicación, verá el Principal página (con CERRAR SESIÓN y SINCRONIZAR opciones en la parte inferior de la página) y CLIENTES establece la entidad para navegar a la página List-Data. En la página principal, notará el estilo de las barras de actividad, barras de herramientas, elementos (Cerrar sesión y sincronizar) disponibles en las barras de herramientas, CUSTOMERS botón.
Toque en CLIENTES para navegar a la Lista de clientes. Verá que se ha aplicado un estilo a la propiedad Título.
Toque cualquier registro para navegar a la página Detalles del cliente. Verá que el control de Objetos de encabezado es elegante.

Inclinarse estos pasos para abordar el cliente MDK.
Una vez que acepte la actualización de la aplicación, verá el Principal página (con Cerrar sesión y Sincronizar opciones en la parte inferior de la página) y Customers establece la entidad para navegar a la página List-Data. En la página principal, notará el estilo de las barras de actividad, barras de herramientas, elementos (Cerrar sesión y sincronizar) disponibles en las barras de herramientas, Customers botón.
Toque en Clientes para navegar a la Lista de clientes. Verá que se ha aplicado un estilo a la propiedad Título.
Toque cualquier registro para navegar a la página Detalles del cliente. Verá que el control de Objetos de encabezado es elegante.

Una vez escaneado y cargado con la URL incorporada, se recordará. Cuando cierre la sesión y vuelva a subir a bordo, se le pedirá que continúe usando la aplicación actual o que escanee un nuevo código QR.

Felicitaciones, ha diseñado con éxito su aplicación MDK y ahora está listo para implementar una conexión profunda con otra aplicación desde la aplicación MDK.

Seguro que también te interesa

Deja un comentario Cancelar respuesta