Cree y ejecute su primera aplicación de componentes web UI5 usando CDN
By s4pcademy
Estimados,
Este blog tiene como objetivo explicar cómo se puede construir Aplicación de componentes web UI5 utilizando CDN para que sus desarrolladores creen algo nuevo. Esto es liviano y fácil de desarrollar de acuerdo con sus necesidades mediante el uso de componentes web proporcionados en la documentación.
Documentación de componentes web de SAP UI5 : https://sap.github.io/ui5-webcomponents/
Todos API de https://jsonplaceholder.typicode.com/
Cree una aplicación utilizando los datos de la API de Todos en UI5 Webcomponents
El ejemplo más simple es la obtención de datos muy obvios de la API de Todos a la aplicación UI5. Para ejecutar esta aplicación usaremos el CDN. Primero, vamos a crear un index.html archivo con estructura HTML básica. Para simplificar, escribiremos el código js en el mismo archivo.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Todos API Built in UI5</title>
<script src="https://sap.github.io/ui5-webcomponents/assets/js/ui5-webcomponents/bundle.esm.js" type="module"></script>
<script src="https://unpkg.com/@luigi-project/container" type="module"></script>
<script data-ui5-config type="application/json">{"theme": "sap_horizon"}</script>
<style>
html, body {
margin: 0;
}
luigi-container {
position: absolute;
width: 100%;
left: 0;
top: var(--_ui5_shellbar_root_height);
bottom: 0;
}
</style>
</head>
<body>
<ui5-shellbar primary-title="{JSON} Placeholder">
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
<img slot="logo" src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg"/>
</ui5-shellbar>
<!--- Bug to reported
<ui5-message-strip style="line-height: 1.4rem" design="Information">Information MessageStrip</ui5-message-strip>
--->
<!--
<style>
.backgro {
background: rgba(224,224,224,0.5)
}
</style>
<div class="backgro">
<div class="fd-col fd-col--12 main-title">
<ui5-title slot="title" level="H3"> Result table</ui5-title>
</div>
</div> -->
<!---<h3>{{ utc_dt }}</h3>---->
<br> <br>
<ui5-label class="samples-big-margin-right" for="myInput" required show-colon>User Name</ui5-label>
<ui5-input id="myInput" placeholder="Enter your Name" required></ui5-input>
<ui5-label class="samples-big-margin-right" for="myPassword" required show-colon>Password</ui5-label>
<ui5-input id="myPassword" type="Password" value-state="None" placeholder="Enter your Secret Code" required></ui5-input>
<ui5-button id="ui5Button" design="Emphasized">Submit</ui5-button>
<!--- Bug to reported
<ui5-message-strip design="Positive" style="width: 200px;" hide-close-button>Successfull login!</ui5-message-strip>
-->
<br> <br>
<div>
<ui5-title slot="title" level="H3"> Todos API</ui5-title>
</div>
<div>
<ui5-table class="demo-table" id="productsTable" no-data-text="No Data" show-no-data>
<!-- Columns -->
<ui5-table-column slot="columns">
<span style="line-height: 1.4rem">userId</span>
</ui5-table-column>
<ui5-table-column slot="columns" min-width="800">
<span style="line-height: 1.4rem">id</span>
</ui5-table-column>
<ui5-table-column slot="columns" min-width="600" popin-text="Dimensions" demand-popin class="table-header-text-alignment">
<span style="line-height: 1.4rem">title</span>
</ui5-table-column>
<ui5-table-column slot="columns" min-width="600" popin-text="Weight" demand-popin class="table-header-text-alignment">
<span style="line-height: 1.4rem">completed</span>
</ui5-table-column>
</div>
<template id="productrow">
<ui5-table-row>
<ui5-table-cell data-attribute="userId"></ui5-table-cell>
<ui5-table-cell data-attribute="id"></ui5-table-cell>
<ui5-table-cell data-attribute="title"></ui5-table-cell>
<ui5-table-cell data-attribute="completed"></ui5-table-cell>
</ui5-table-row>
</template>
<script type="text/javascript" charset="utf-8">
const ui5Button = document.querySelector('ui5-button')
ui5Button.addEventListener('click', addData)
async function addData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos')
const products = await response.json()
const table = document.querySelector('ui5-table')
products.forEach(product => {
const tableRow = document.createElement('ui5-table-row')
for (const [key, value] of Object.entries(product)) {
const tableCell = document.createElement('ui5-table-cell')
tableCell.innerHTML = value
tableRow.append(tableCell)
}
table.appendChild(tableRow)
});
}
</script>
</body>
</html>
Abra el archivo en un navegador web y debería ver una tabla de resultados de la API de Todos cuando el usuario hace clic en Botón de enviar.
En esta sección, puede encontrar documentos y ejemplos de API para todos nuestros componentes.
https://sap.github.io/ui5-webcomponents/playground/components
De este blog aprendiste algo nuevo hoy y si te gusta probar de esta manera, asumo que necesitas tener conocimiento de los conceptos de HTML, CSS y Javascript.
Conclusión
En este tutorial, ha visto un ejemplo simple para comenzar a usar Componentes web de UI5. Esto es liviano y no necesita bibliotecas nodeJS o NPM para instalar.