Saltearse al contenido
Vixen UI

Aprende lo básico

Cómo usar la interfaz de usuario Vixen para crear una aplicación simple

En esta sección aprenderás cómo usar la interfaz de usuario Vixen para construir una aplicación simple utilizando la plantilla react.

Vixen UI te permite crear aplicaciones de escritorio utilizando React.js con TypeScript y estilos similares a CSS. Se podría ver como una interfaz de usuario ligera y de alto rendimiento para Node.js.

Vixen UI también es una eficiente vinculación de JavaScript a la biblioteca Qt en C++. Qt es una de las bibliotecas de interfaces de usuario más maduras y eficientes para construir aplicaciones de escritorio. Esto permite que Vixen sea extremadamente eficiente en cuanto a memoria y CPU en comparación con otros marcos populares de interfaces de usuario en JavaScript. El propósito de esta sección es mostrarte cómo usar los componentes más comunes de Vixen UI para construir una aplicación “Hello World”.

Elegir el editor de código adecuado

Te sugerimos usar VS Code como editor de código principal para Vixen UI. Si prefieres otras alternativas, puedes usar Sublime Text como editor de código.

Hola Mundo

Para configurar el proyecto básico, ejecuta el siguiente comando:

Ventana de terminal
pnpm create @vixen-js/vixen my-project --template react

Después de la salida, puedes moverte a la carpeta my-project y ejecutar pnpm i para instalar las dependencias.

Ventana de terminal
cd my-project
pnpm i

Desarrollo

Para iniciar tu aplicación, ejecuta el siguiente comando:

Ventana de terminal
pnpm dev

Cuando termine el comando, podrás ver algo similar a esto:

Hola Mundo

Ahora puedes abrir el archivo App.tsx y revisar el código fuente.

App.tsx
import { Window, View, Text, Image } from "@vixen-js/core-react";
import styles from "./assets/styles/styles.css?raw";
import { QIcon } from "@vixen-js/core";


const App = () => {
  return (
    <Window
      styleSheet={styles}
      size={{ width: 800, height: 600 }}
      windowTitle="Vixen UI React"
      windowIcon={
        new QIcon(
          "https://raw.githubusercontent.com/Vixen-js/template-vanilla-ts/refs/heads/main/src/assets/images/Logo.png"
        )
      }
    >
      <View id="root">
        <Text id="label1">Hello Vixen React!</Text>
        <Image
          id="image"
          scaledContents={true}
          size={{ width: 100, height: 100 }}
          src="https://raw.githubusercontent.com/Vixen-js/template-vanilla-ts/refs/heads/main/src/assets/images/Logo.png"
        />
        <Text id="label2">
          Open yout App.tsx file and modify to see the changes
        </Text>
      </View>
    </Window>
  );
};


export default App;

Vamos a comentar un poco el código en el archivo main.tsx:

  • MainWindow es el widget raíz de toda tu aplicación, es la ventana principal.
  • Si deseas agregar texto, debes importar Text desde @vixen-js/core-react.
  • Si quieres usar imágenes, debes importar el componente Image desde @vixen-js/core-react para mostrarla en la pantalla.
  • Si deseas usar estilos CSS, debes importar tu archivo CSS como raw y configurarlo en la propiedad stylesheet de Window para los estilos globales.