Cómo crear aplicaciones nativas multiplataforma con Fuse

 

 

 


Índice
  1. ¿Cómo funciona el fusible?
  2. ¿Cómo se compara con React Native y NativeScript?
    1. Marcado de interfaz de usuario
    2. Disposición
    3. API de JavaScript
    4. Extensibilidad
    5. Bibliotecas de JavaScript
    6. Animación
    7. Comunidad
    8. Flujo de trabajo de desarrollo
    9. Depuración
  3. Crear una aplicación meteorológica con Fuse

Fuse no sólo se utiliza para describir la interfaz de usuario y el diseño; También puedes usarlo para agregar efectos y animación. En este artículo, Wern Ancheta le mostrará de qué se trata Fuse. Le mostrará cómo funciona y cómo se compara con otras plataformas como React Native y NativeScript. En la segunda mitad del artículo, creará su primera aplicación Fuse. Específicamente, creará una aplicación meteorológica que muestre el tiempo según la ubicación actual del usuario. Hacia el final del artículo, consolidará su aprendizaje analizando las ventajas y desventajas de utilizar Fuse para su próximo proyecto de aplicación móvil.

 

Fuse es un conjunto de herramientas para crear aplicaciones que se ejecutan en dispositivos iOS y Android. Le permite crear aplicaciones utilizando UX Markup, un lenguaje basado en XML. Pero a diferencia de los componentes de React Native y NativeScript, Fuse no sólo se utiliza para describir la interfaz de usuario y el diseño; También puedes usarlo para agregar efectos y animación.

Los estilos se describen agregando atributos como Colory Margina los distintos elementos. La lógica empresarial se escribe utilizando JavaScript. Más adelante veremos cómo se combinan todos estos componentes para crear una aplicación verdaderamente nativa.

En este artículo, aprenderá de qué se trata Fuse. Veremos cómo funciona y cómo se compara con otras plataformas como React Native y NativeScript. En la segunda mitad del artículo , creará su primera aplicación Fuse. Específicamente, creará una aplicación meteorológica que muestre el tiempo según la ubicación actual del usuario. Así es como se verá el resultado:

 

Al crear la aplicación, aprenderá a utilizar algunos de los componentes de interfaz de usuario integrados de Fuse y a acceder a la funcionalidad nativa del dispositivo, como la geolocalización. Hacia el final del artículo, consolidará su aprendizaje analizando las ventajas y desventajas de utilizar Fuse para su próximo proyecto de aplicación móvil.

¿Cómo funciona el fusible?

Me gustaría describir cómo funciona Fuse usando el siguiente diagrama:

En la capa superior están el marcado UX y JavaScript. Aquí es donde pasaremos la mayor parte de nuestro tiempo cuando trabajemos con Fuse. En la capa intermedia están las bibliotecas empaquetadas con Fuse. Esto incluye las API de JavaScript que permiten el acceso a funciones nativas del dispositivo, como la geolocalización y la cámara. Por último, en la capa inferior está el compilador Uno, que se encarga de traducir el marcado UX a código nativo puro (Objective-C para iOS y C++ para Android). Una vez que se ejecuta la aplicación, toda la interfaz de usuario que verá será la interfaz de usuario nativa para esa plataforma en particular. El código JavaScript se ejecuta a través de una máquina virtual en un hilo separado. Esto hace que la interfaz de usuario sea realmente ágil porque JavaScript no afectará el rendimiento de la interfaz de usuario.

¿Cómo se compara con React Native y NativeScript?

Antes de crear una aplicación con Fuse, una de las preguntas importantes que debemos responder es cómo se compara con las herramientas existentes que hacen el mismo trabajo. En esta sección, aprenderemos sobre las características y herramientas disponibles en Fuse en comparación con las de React Native y NativeScript, así como también cómo se hacen las cosas en cada plataforma. Específicamente, compararemos las siguientes áreas:

  • marcado de interfaz de usuario
  • Disposición
  • API de JavaScript
  • Extensibilidad
  • Bibliotecas de JavaScript
  • Animación
  • Comunidad
  • Flujo de trabajo de desarrollo
  • Depuración

Marcado de interfaz de usuario

En todas las plataformas, la interfaz de usuario se puede crear utilizando un lenguaje basado en XML. Los componentes comunes de la interfaz de usuario, como campos de texto, interruptores y controles deslizantes, están disponibles en cada plataforma.

React Native tiene la mayoría de estos componentes, aunque algunos no están unificados, lo que significa que puede haber un máximo de dos formas de utilizar un componente en particular. Por ejemplo, uno se puede utilizar en ambas plataformas y el otro solo para una plataforma específica. Algunos componentes, como ProgressBar, también se implementan de manera diferente en cada plataforma, lo que significa que no es totalmente "escribir una vez, ejecutar en todas partes".

 

Por otro lado, NativeScript tiene una forma unificada de implementar los diferentes componentes de la interfaz de usuario en cada plataforma. Para cada componente, existe un componente nativo equivalente tanto para Android como para iOS.

Fuse tiene una cantidad decente de componentes de interfaz de usuario que cubrirán los requisitos de la mayoría de los proyectos. Un componente que no está integrado ni en React Native ni en NativeScript es el Videocomponente que se puede utilizar para reproducir vídeos locales e incluso vídeos de Internet. El único componente que falta actualmente es el selector de fecha, que resulta especialmente útil durante el registro de usuario. Aunque siempre puedes crear el tuyo propio utilizando los componentes que ya están disponibles en Fuse.

Disposición

En React Native, el diseño se realiza con Flexbox . En pocas palabras, Flexbox le permite especificar cómo debe fluir el contenido a través del espacio disponible. Por ejemplo, puede configurar flexto 1y flexDirectionto rowen un elemento contenedor para dividir equitativamente el espacio disponible entre los hijos y organizarlos verticalmente.

View style={{flex: 1, flexDirection: 'row'}} View style={{backgroundColor: 'powderblue'}} / View style={{backgroundColor: 'skyblue'}} / View style={{backgroundColor: 'steelblue'}} //View

En NativeScript, el diseño se logra utilizando contenedores de diseño, siendo el más básico StackLayout, que coloca todos los elementos uno encima del otro, como en el siguiente ejemplo. En orientación horizontal, se colocan uno al lado del otro.

StackLayout orientation="vertical" Image src="assets/images/dog.png" / Image src="assets/images/cat.png" / Image src="assets/images/gorilla.png" //StackLayout 

De manera similar, Fuse logra el diseño mediante el uso de una combinación de diferentes elementos en UX Markup, siendo los más comunes StackPanely Grid. Funciona de manera similar a NativeScript. He aquí un ejemplo:DockPanelStackPanelStackLayout

StackPanel Orientation="Vertical" Panel Height="100" Background="Red" / Panel Height="100" Background="White" / Panel Height="100" Background="Blue" //StackPanel

API de JavaScript

Todas las plataformas cubren todos los conceptos básicos con las API de JavaScript. Cosas como la funcionalidad de la cámara, información de la plataforma, geolocalización, notificaciones automáticas, solicitudes HTTP y almacenamiento local se pueden realizar en todas las plataformas. Sin embargo, al observar la documentación de cada plataforma, se podría decir que React Native tiene la mayor cantidad de API de JavaScript que cierran la brecha entre las características nativas y "nativas de JavaScript". Aún no hay un nombre oficial para plataformas como React Native, NativeScript y Fuse, así que por ahora sigamos con "JavaScript nativo", porque todas usan JavaScript para escribir código y todas ofrecen un rendimiento similar al nativo.

 

Extensibilidad

Si necesita acceso a funciones específicas del dispositivo que aún no exponen una API de JavaScript, cada plataforma también proporciona formas para que los desarrolladores aprovechen las API nativas para Android e iOS.

NativeScript le brinda acceso a todas las API nativas de la plataforma subyacente a través de JavaScript. Esto significa que no es necesario tocar ningún código Swift, Objective-C o Java para poder utilizar las API nativas. El único requisito es que sepas cómo funcionan las API nativas.

React Native se queda un poco corto a la hora de acceder a las API nativas porque tendrás que conocer el idioma nativo para poder ampliar la funcionalidad nativa. Esto se hace creando un módulo nativo (una clase Objective-C para iOS o una clase Java para Android), exponiendo los métodos públicos deseados a JavaScript y luego importándolos a su proyecto.

Fuse le permite ampliar la funcionalidad a través de una función a la que se refiere como "código externo". Esto le permite llamar al código nativo en cada plataforma a través del lenguaje Uno. El lenguaje Uno es la tecnología central de Fuse. Es lo que hace que Fuse funcione entre bastidores. El uso de funciones nativas que no son compatibles con la biblioteca principal de Fuse se realiza mediante la creación de una clase Uno. Dentro de la clase Uno, puede escribir el código Objective-C o Java que implemente la funcionalidad que desea y exponerlo como código JavaScript, que luego puede llamar desde su proyecto.

Bibliotecas de JavaScript

Tanto React Native como NativeScript admiten el uso de todos los paquetes npm que no dependen del modelo del navegador. Esto significa que puede usar una biblioteca como lodash y moment simplemente ejecutándola npm install {package-name}en el directorio de su proyecto y luego importándola en cualquiera de sus archivos de proyecto, como en un proyecto JavaScript normal.

Por el contrario, actualmente no hay fusibles en este sentido. El uso de bibliotecas JavaScript existentes en la mayoría de los casos no es posible; Se sabe que sólo una breve lista de bibliotecas funcionan. La buena noticia es que los desarrolladores trabajan constantemente en polyfills para mejorar la compatibilidad con las bibliotecas existentes.

Animación

Otra parte importante de la UX es la animación. En React Native, la animación se implementa a través de su API animada. Con él, puedes personalizar mucho la animación. Por ejemplo, puede especificar cuánto tiempo dura una animación o qué tan rápido se ejecuta. Pero esto tiene la desventaja de no ser apto para principiantes. Incluso una animación simple, como escalar un elemento en particular, requiere mucho código. Lo bueno es que bibliotecas como React Native Animatable facilitan el trabajo con animación. Aquí hay un código de muestra para implementar una fadeInanimación usando la biblioteca Animatable:

Animatable.View animation="fadeIn"Fade me in!/Animatable.View

Las animaciones NativeScript se pueden implementar de dos maneras: a través de la API de animaciones CSS3 o la API de JavaScript. A continuación se muestra un ejemplo de cómo escalar un elemento con una clase de el:

.el { animation-name: scale; animation-duration: 1;}@keyframes scale { from { transform: scale(1, 1); } to { transform: scale(1.5, 1.5); }}

Y aquí está el equivalente de JavaScript:

 

var view = page.getViewById('box'); //must have an element with an ID of box in the markupview.animate({ scale: { x: 1.5, y: 1.5}, duration: 1000});

La animación en Fuse se implementa mediante activadores y animadores. Los activadores se utilizan para detectar si algo está sucediendo en la aplicación, mientras que los animadores se utilizan para responder a esos eventos. Por ejemplo, para hacer algo más grande al presionarlo, tendrías esto:

Rectangle Width="50" Height="50" Fill="#ccc" WhilePressed Scale Factor="2" / /WhilePressed/Rectangle

En este caso, WhilePressedes el disparador y Scalees el animador.

Comunidad

Cuando se trata de comunidad, React Native es el claro ganador. El solo hecho de que fue creado por Facebook es un gran problema. Debido a que la principal tecnología utilizada para crear aplicaciones es React, React Native también aprovecha esa comunidad. Esto significa que muchos proyectos pueden ayudarte a desarrollar aplicaciones. Por ejemplo, puede reutilizar componentes de React existentes para su proyecto React Native. Y debido a que muchas personas lo usan, puede esperar obtener ayuda rápidamente cuando se quede atascado, porque simplemente puede buscar una respuesta en Stack Overflow. React Native también es de código abierto y el código fuente está disponible en GitHub . Esto hace que el desarrollo sea realmente rápido porque los mantenedores pueden aceptar ayuda de desarrolladores fuera de la organización.

Mientras tanto, NativeScript fue creado por Telerik. El proyecto tiene una comunidad de tamaño decente detrás. Si miras su página de GitHub , actualmente más de 10.000 personas han protagonizado el proyecto. Se ha bifurcado 700 veces, por lo que se puede suponer que el proyecto está recibiendo muchas contribuciones de la comunidad. También hay muchos paquetes NativeScript en npm y preguntas sobre Stack Overflow, así que espere no tener que implementar una funcionalidad personalizada desde cero o quedarse solo buscando respuestas si se queda atascado.

Fuse es el menos conocido de los tres. No cuenta con una gran empresa que lo respalde y Fuse es básicamente la propia empresa. Aun así, el proyecto viene completo con documentación, un foro, un canal de Slack, aplicaciones de muestra, código de muestra y tutoriales en vídeo, lo que lo hace muy amigable para principiantes. El núcleo de Fuse aún no es de código abierto, pero los desarrolladores pronto harán que el código sea de código abierto. Aviation Questions and Answers

Flujo de trabajo de desarrollo

Con React Native y NativeScript, necesitas tener un dispositivo móvil real o un emulador si quieres ver los cambios mientras desarrollas la aplicación. Ambas plataformas también admiten la recarga en vivo, por lo que cada vez que realiza un cambio en los archivos fuente, se refleja automáticamente en la aplicación, aunque hay un ligero retraso, especialmente si su máquina no es tan potente.

Fuse, por otro lado, le permite obtener una vista previa de la aplicación tanto localmente como en cualquier número de dispositivos actualmente conectados a su red. Esto significa que tanto los diseñadores como los desarrolladores pueden trabajar al mismo tiempo y poder previsualizar los cambios en tiempo real. Esto es útil para el diseñador porque puede ver inmediatamente cómo se ve la aplicación con datos reales proporcionados por el código del desarrollador.

 

Depuración

Cuando se trata de depuración, tanto React Native como NativeScript aprovechan las herramientas de desarrollo de Chrome. Si tiene experiencia en desarrollo web, el flujo de trabajo de depuración debería tener sentido para usted. Dicho esto, no todas las funciones a las que está acostumbrado cuando inspecciona y depura proyectos web están disponibles. Por ejemplo, ambas plataformas le permiten depurar código JavaScript pero no le permiten inspeccionar los elementos de la interfaz de usuario en la aplicación. React Native tiene un inspector incorporado que es lo más parecido al inspector de elementos en las herramientas de desarrollo de Chrome. NativeScript actualmente no tiene esta característica.

Por otro lado, Fuse utiliza el protocolo de depuración del motor V8 de Google para depurar el código JavaScript. Esto le permite hacer cosas como agregar puntos de interrupción a su código e inspeccionar qué contiene cada objeto en cada parte de la ejecución del código. El equipo de Fuse recomienda el uso del editor de texto Visual Studio Code para esto, pero cualquier editor de texto o IDE que admita el protocolo de depuración V8 debería funcionar. Si desea inspeccionar y editar visualmente los elementos de la interfaz de usuario, Fuse también incluye un inspector, aunque por el momento solo le permite ajustar un puñado de propiedades, como anchos, altos, márgenes, relleno y colores.

Crear una aplicación meteorológica con Fuse

Ahora estás listo para crear una aplicación meteorológica sencilla con Fuse. Obtendrá la ubicación del usuario a través de la API GeoLocation y utilizará la API OpenWeatherMap para determinar el clima en la ubicación del usuario y luego mostrarlo en la pantalla. Puedes encontrar el código fuente completo de la aplicación en el repositorio de GitHub .

Para comenzar, vaya al sitio web de OpenWeatherMap y regístrese para obtener una cuenta . Una vez que haya terminado de registrarse, debería proporcionarle una clave API, que puede usar para realizar una solicitud a su API más adelante.

A continuación, visite la página de descargas de Fuse , ingrese su dirección de correo electrónico, descargue el instalador de Fuse para su plataforma y luego instálelo. Una vez instalado, inicie el panel de Fuse y haga clic en "Nuevo proyecto". Esto abrirá otra ventana que le permitirá seleccionar la ruta a su proyecto e ingresar el nombre del proyecto.

Haga eso y luego haga clic en el botón "Crear" para crear su proyecto. Si está utilizando Sublime Text 3, puede hacer clic en el botón "Abrir en Sublime Text 3" para abrir una nueva instancia de Sublime Text con el proyecto Fuse ya cargado. Una vez que esté allí, lo primero que querrá hacer es instalar el paquete Fuse. Esto incluye completar el código, "Ir a definición", obtener una vista previa de la aplicación desde Sublime y ver la compilación.

Una vez instalado el complemento Fuse, abra el MainView.uxarchivo. Este es el archivo principal con el que trabajaremos en este proyecto. De forma predeterminada, incluye código de muestra para que juegues. No dudes en eliminar todo el contenido del archivo una vez que hayas terminado de inspeccionarlo.

 

Cuando creas una aplicación con Fuse, siempre comienzas con la Appetiqueta. Esto le indica a Fuse que desea crear una nueva página.

App/App

Fuse le permite reutilizar fuentes de iconos que se utilizan habitualmente en la web. Aquí estamos usando íconos meteorológicos . Utilice la Fontetiqueta para especificar la ubicación del archivo de fuente web en el directorio de su aplicación a través del Fileatributo. Para este proyecto, está en la fontscarpeta del directorio raíz del proyecto. También debemos darle un ux:Globalatributo, que servirá como su ID cuando desee utilizar esta fuente de icono más adelante.

Font File="fonts/weather-icons/font/weathericons-regular-webfont.ttf" ux_Global="wi" /

A continuación, tenemos el código JavaScript. Podemos incluir código JavaScript en cualquier lugar de UX Markup usando la JavaScriptetiqueta. Dentro de la etiqueta estará el código JavaScript que se ejecutará.

JavaScript/JavaScript

En la JavaScriptetiqueta, se requieren dos bibliotecas Fuse integradas: Observable y GeoLocation. Observable le permite implementar el enlace de datos en Fuse. Esto hace posible cambiar el valor de la variable a través del código JavaScript y reflejarlo automáticamente en la interfaz de usuario de la aplicación. El enlace de datos en Fuse también es bidireccional; por lo tanto, si se realiza un cambio en un valor a través de la interfaz de usuario, el valor almacenado en la variable también se actualizará y viceversa.

var Observable = require('FuseJS/Observable'); 

GeoLocation le permite obtener información de ubicación desde el dispositivo del usuario.

var Geolocation = require('FuseJS/GeoLocation'); 

Crea un objeto que contenga el código hexadecimal para cada uno de los íconos meteorológicos que queramos usar. Puede encontrar el código hexadecimal en la página de GitHub de la fuente del icono .

var icons = { 'clear': 'uF00d', 'clouds': 'uF002', 'drizzle': 'uF009', 'rain': 'uF008', 'thunderstorm': 'uF010', 'snow': 'uF00a', 'mist': 'uF0b6', 'fog': 'uF003', 'temp': 'uF055'}; 

Crea una función para convertir Kelvin a Celsius. Lo necesitamos porque la API OpenWeatherMap devuelve temperaturas en Kelvin.

function kelvinToCelsius(kelvin){ return kelvin - 273.15;} 

Determine si actualmente es de día o de noche según la hora del dispositivo del usuario. Usaremos naranja como color de fondo para la aplicación si es de día y morado si es de noche.

var hour = (new Date()).getHours();var color = '#7417C0';if(hour = 5 hour = 18){ color = '#f38844';} 

Agregue la clave API de OpenWeather Map que obtuvo anteriormente y cree una variable observable que contenga los datos meteorológicos.

var api_key = 'YOUR OPENWEATHERMAP API KEY';var weather_data = Observable(); 

Obtenga la información de ubicación:

var loc = Geolocation.location; 

Esto devolverá un objeto que contiene el latitudey longitudede accuracyla ubicación. Sin embargo, Fuse actualmente tiene problemas para obtener información de ubicación en Android. Si la configuración de ubicación está deshabilitada en el dispositivo, no le pedirá que la habilite cuando abra la aplicación. Entonces, como solución alternativa, primero deberá habilitar la ubicación antes de iniciar la aplicación.

 

Realice una solicitud a la API de OpenWeatherMap utilizando la fetch()función. Esta función está disponible en el alcance global de Fuse, por lo que puede llamarla desde cualquier lugar sin incluir bibliotecas adicionales. Esto funcionará de la misma manera que la fetch()función disponible en los navegadores modernos: también devuelve una promesa que debes escuchar usando la then()función. Cuando se ejecuta la función de devolución de llamada proporcionada, la respuesta sin formato se pasa como argumento. Realmente no puedes usar esto todavía ya que contiene todo el objeto de respuesta. Para extraer los datos que la API realmente devolvió, debe llamar a la json()función en el objeto de respuesta. Esto devolverá otra promesa, por lo que deberá utilizar then()una vez más para extraer los datos reales. Luego, los datos se asignan como el valor del observable que creamos anteriormente.

var req_url = 'https://api.openweathermap.org/data/2.5/weather?lat=' + loc.latitude + 'lon=' + loc.longitude + 'apikey=' + api_key;fetch(req_url).then(function(response) { return response.json();}).then(function(responseObject) { weather_data.value = { name: responseObject.name, icon: icons[responseObject.weather[0].main.toLowerCase()], weather: responseObject.weather[0], temperature: kelvinToCelsius(responseObject.main.temp) + ' °C' };}); 

Para su referencia, aquí hay una respuesta de muestra devuelta por la API:

{ "coord":{ "lon":120.98, "lat":14.6 }, "weather":[ { "id":803, "main":"Clouds", "description":"broken clouds", "icon":"04d" } ], "base":"stations", "main":{ "temp":304.15, "pressure":1009, "humidity":74, "temp_min":304.15, "temp_max":304.15 }, "visibility":10000, "wind":{ "speed":7.2, "deg":260 }, "clouds":{ "all":75 }, "dt":1473051600, "sys":{ "type":1, "id":7706, "message":0.0115, "country":"PH", "sunrise":1473025458, "sunset":1473069890 }, "id":1701668, "name":"Manila", "cod":200} 

Exporte las variables para que estén disponibles en la interfaz de usuario.

module.exports = { weather_data: weather_data, icons: icons, color: color}; 

Debido a que este proyecto es muy pequeño, decidí poner todo en un solo archivo. Pero para proyectos reales, el código JavaScript y el marcado UX deben estar separados. Esto se debe a que los diseñadores son quienes normalmente trabajan con UX Markup y los desarrolladores son quienes tocan el código JavaScript. Separar los dos permite al diseñador y al desarrollador trabajar en la misma página al mismo tiempo. Puede separar el código JavaScript creando un nuevo archivo JavaScript en la carpeta del proyecto y luego vincularlo en su marcado, así:

 

JavaScript File="js/weather.js" 

Finalmente, agregue la interfaz de usuario real de la aplicación. Aquí, estamos usando DockPanelpara envolver todos los elementos. De forma predeterminada, DockPaneltiene una Dockpropiedad establecida en Fill, por lo que es el contenedor perfecto para llenar toda la pantalla con contenido. Tenga en cuenta que no necesitamos establecer esa propiedad a continuación porque se agrega implícitamente. A continuación, solo asignamos un Coloratributo que nos permite configurar el color de fondo usando el color que exportamos anteriormente.

DockPanel Color="{color}"/DockPanel 

Dentro DockPanelestá StatusBarBackground, que acoplaremos a la parte superior de la pantalla. Esto nos permite mostrar y personalizar la barra de estado en el dispositivo del usuario. Si no utiliza este componente, DockPanelconsumirá toda la pantalla, incluida la barra de estado. Simplemente configurar este componente hará que la barra de estado sea visible. Realmente no queremos personalizarlo, así que dejaremos los valores predeterminados.

StatusBarBackground Dock="Top" / 

A continuación StatusBarBackgroundse muestra el contenido real. Aquí, envolvemos todo en un ScrollViewpara permitir al usuario desplazarse verticalmente si el contenido supera el espacio disponible. Dentro está StackPanel, que contiene todos los datos meteorológicos que queremos mostrar. Esto incluye el nombre de la ubicación, el icono que representa el clima actual, la descripción del clima y la temperatura. Puede mostrar las variables que exportamos anteriormente envolviéndolas entre llaves. Para los objetos, se accede a las propiedades individuales tal como lo haría en JavaScript.

ScrollView StackPanel Alignment="Center" Text Value="{weather_data.name }" FontSize="30" Margin="0,20,0,0" Alignment="Center" TextColor="#fff" / Text Value="{weather_data.icon}" Alignment="Center" Font="wi" FontSize="150" TextColor="#fff" / Text Value="{weather_data.weather.description}" FontSize="30" Alignment="Center" TextColor="#fff" / StackPanel Orientation="Horizontal" Alignment="Center" Text Value="{icons.temp}" Font="wi" FontSize="20" TextColor="#fff" / Text Value="{weather_data.temperature}" Margin="10,0,0,0" FontSize="20" TextColor="#fff" / /StackPanel /StackPanel/ScrollView 

También notarás que todos los atributos y sus valores siempre están en mayúscula; este es el estándar en Fuse. Las minúsculas o mayúsculas realmente no funcionarán. Además, observe que Alignment=“Center”y TextColor=“#fff”se repiten varias veces. Esto se debe a que Fuse no tiene el concepto de herencia cuando se trata de propiedades de estilo, por lo que configurar TextColoro Alignmenten un componente principal en realidad no afectará a los componentes anidados. Esto significa que debemos repetirlo para cada componente. Esto se puede mitigar creando componentes y luego simplemente reutilizándolos sin volver a especificar las mismas propiedades de estilo. Pero esto no es lo suficientemente flexible, especialmente si necesita una combinación diferente de estilos para cada componente.

Lo último que deberá hacer es abrir el {your project name}.unoprojarchivo en la raíz de la carpeta de su proyecto. Este es el archivo del proyecto Uno. Por defecto, contiene lo siguiente:

{ "RootNamespace":"", "Packages": [ "Fuse", "FuseJS" ], "Includes": [ "*" ]} 

Este archivo especifica qué paquetes y archivos incluir en la compilación de la aplicación. De forma predeterminada, incluye los paquetes Fusey FuseJStodos los archivos en el directorio del proyecto. Si no desea incluir todos los archivos, edite los elementos de la Includesmatriz y use un patrón global para apuntar a archivos específicos:

"Includes": [ "*.ux", "js/*.js"] 

También puede utilizar Excludespara incluir archivos en la lista negra:

"Excludes": [ "node_modules/"] 

Volviendo a Packagesy le permitirá utilizar bibliotecas específicas de Fuse Fuse. FuseJSEsto incluye funciones de utilidad como obtener el entorno en el que se ejecuta actualmente Fuse:

var env = require('FuseJS/Environment');if (env.mobile) { debug_log("There's geo here!");} 

Para mantener las cosas livianas, Fuse incluye solo lo básico. Por lo tanto, necesitarás importar elementos como la






Tal vez te puede interesar:

  1. ¿Deberían abrirse los enlaces en ventanas nuevas?
  2. 24 excelentes tutoriales de AJAX
  3. 70 técnicas nuevas y útiles de AJAX y JavaScript
  4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Cómo crear aplicaciones nativas multiplataforma con Fuse

Cómo crear aplicaciones nativas multiplataforma con Fuse

Índice ¿Cómo funciona el fusible? ¿Cómo se

programar

es

https://pseint.es/static/images/programar-como-crear-aplicaciones-nativas-multiplataforma-con-fuse-915-0.jpg

2024-04-04

 

Cómo crear aplicaciones nativas multiplataforma con Fuse
Cómo crear aplicaciones nativas multiplataforma con Fuse

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20