Saltar al contenido

Agregar estilo con la aplicación MDK

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.

  1. El espacio de desarrollo se lanzó en SAP Business Application Studio.

  2. Hacer clic Empezar desde la plantilla en la página de bienvenida.

    MDK

    Si no ve la página de bienvenida, puede acceder a ella a través de Ayuda menú.

  3. Escoger Proyecto MDK y haga clic en Comienzo.

    MDK

  4. I Conocimiento básico paso, seleccione o proporcione la información a continuación y haga clic en Hacia adelante:

    GortValor
    MDK template typeEscoger CRUD desde el otoño pasado
    Your project nameMDK_Styling
    Your application name

    MDK

    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.

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

    GortValor
    Service File Name<Provide any name of your choice>
    OData SourceEscoger Mobile Services desde el otoño pasado
    Application IdEscoger com.sap.mdk.demo desde el otoño pasado
    DestinationEscoger SampleServiceV2 desde el otoño pasado
    Enter a path to the OData serviceDéjalo así
    Language URLDéjelo con el valor predeterminado
    Enable OfflineEstá 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.

  6. 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.

    MDK

  7. 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.

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

    MDK

  2. 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;

  3. Guarde sus cambios en el Styles.less expediente.

    Styles.less ya vinculado a las propiedades de Estilos en Application.app expediente.

    MDK

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
  1. 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.

    MDK

  2. 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.

    MDK

  3. 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.

    MDK

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.

  1. Botón derecho del ratón Application.app y seleccione MDK: Implementación.

    MDK

  2. Seleccione un destino de implementación como Servicios móviles.

    MDK

    Debería ver Implementación exitosa mensaje.

    MDK

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.

MDKMDK

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.

  1. 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.

    MDK

  2. Toque en CLIENTES para navegar a la Lista de clientes. Verá que se ha aplicado un estilo a la propiedad Título.

    MDK

  3. Toque cualquier registro para navegar a la página Detalles del cliente. Verá que el control de Objetos de encabezado es elegante.

    MDK

  1. 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.

    MDK

  2. Toque en Clientes para navegar a la Lista de clientes. Verá que se ha aplicado un estilo a la propiedad Título.

    MDK

  3. Toque cualquier registro para navegar a la página Detalles del cliente. Verá que el control de Objetos de encabezado es elegante.

    MDK

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.