Demo

Xpell-UI Web Application Project Setup

#

Introduction to Xpell UI #

Xpell provides a designated UI package named Xpell UI or XUI for short.

Prerequisites #

Before you begin creating a web project with Xpell UI, ensure that you have the following prerequisites:

1. Node.js and npm installed on your machine
2. A code editor such as Visual Studio Code
3. Basic knowledge of HTML, CSS, and JavaScript
4. Familiarity with command line interface

Creating the Project #

Xpell for Web apps provides npm package “xpell” client.

To start a new npm project, create a folder for your application, open the folder with terminal and type ‘npm init’ to initiate a new npm project.

Answer the wizard questions until it ends and a ‘package.json’ file will be created.

Installing Vite.js #

Vite is a web packaging tool that is used to create web applications faster (https://vitejs.dev). Install Vite as a Dev Dependency: “npm install vite -D“

Installing Xpell-UI #

Install Xpell main package:

“npm install xpell-ui“

Creating index.html File #

Create the main html file that will be processed by vite:


<html>
   <head>
       <title>Home</title>
       <script src="index" type="module" defer></script>
   </head>
   <body>
   </body>
</html>

Creating index.js File #

Create the main javascript file that will be imported to the html (in the example above the file should be called “index.js”).

If you wish to use TypeScript, just save the file with “ts” extension and vite will automatically compile it accordingly.

Importing xpell Package #

In the index.js file, import xpell package:

import {_x,XUI} from "xpell"

The XUI (Xpell UI) package will be used also.

Activating Xpell Log Messages #

To set xpell log to write messages to the console, set the “verbose” attribute to true:

_x.verbose = true

Running Xpell #

Edit the line in the package.json from “test”: “echo \”Error: no test specified\” && exit 1″ to “dev”: “vite .”. Run in the terminal “npm run dev”

npm run dev

Logging Xpell Information #

To show xpell engine information, use the info() method:

_x.info()

The console in the web browser should look like this:

Starting Xpell FPS Engine #

To start xpell Frame engine, use “start()” method: _x.start().

_x.start()

Loading XUI Module #

To load the XUI module into the xpell engine, use the “loadModule(XModule)” method: _x.loadModule(XUI). An appropriate message will be displayed in the console.

_x.loadModule(XUI)

The console will display the following message:

Creating Player #

Xpell UI Player can be created automatically or by providing an HTML element ID to mount the player to. If no element is provided, an HTML DIV with the ID “xplayer” will be mounted to the document body. XUI.createPlayer()

XUI.createPlayer()

Define View #

Xpell View (XView) is a basic UI element that in the form of HTML is using “DIV” element.

To define Xpell UI Object an appropriate JSON object should be provided:

const xview = {
   _id:"hello-view",
   _type:"view",
   _text:"Hello World",
   style:"background-color:black;color:white;font-size:80px;"
}

The XUIObject JSON schema defines two main rules 

  1. Keys that starts with “_” (underscore) will be processed by the XUI module, for example:
  • “_type” attribute defines the XUI object type (“view”, “label”, “image”…)
  • “_id” attribute defines the xpell object _id and the HTML element id attribute
  • “_text” attribute defines the object text content
  1. Keys that start with any other letter will be transferred to the HTML element as attribute without processing
  • “style” attribute defines the HTML Element style attribute

Add View to the Player #

To add the view that was defined in the chapter above use the “add(XUIObject)” method:

XUI.add(xview)

Output:

Congratulations! You are now able to create web applications using Xpell. #

Updated on October 31, 2024
Table of contents
Skip to content