Creating XMLUI Apps

In this section, you will find articles that teach you the details of creating apps with the XMLUI framework. If you have not experienced it before, we suggest you to read the Getting Started article and the Personal Todo App tutorial; these demonstrate the essential concepts through experimenting with simple apps.

This article describes the structure of an XMLUI app by introducing its files and folders. After reading it, you can learn more details about the framework in these articles:

Markup: Learn the essence of the XMLUI markup language
Coding with XMLUI: Understand the coding fundamentals of XMLUI apps
The App Component: XMLUI provides an App component, supplying layout and UI logic services for the entire app
Layout: Learn how to design the app's layout with XMLUI's simple layout system
Working with Text: Understand how you can display text in XMLUI apps
Basic Components: Get acquainted with the basic components XMLUI provides for building apps
Working with Data: XMLUI makes accessing, displaying, manipulating, and persisting data extremely easy through web APIs. Learn how to use these features.
Routing and Links: Understand how you can navigate between different parts of an XMLUI app
Using Forms: The framework has rich support for creating data entry and edit forms and managing their persistence
Modal Dialogs: Learn how to create and display modal dialogs in XMLUI apps
Reusable Components: You can create and leverage your app-specific components using XMLUI markup
Themes: XMLUI supports themes that can change the look and feel of an app. Learn how to create, modify and use themes.
Layout Properties: Components support several properties that influence their layout and appearance; you can learn about them here.
Working with Resources: Understand how to manage resources (images, icons, fonts, etc.) with XMLUI
Build & Deploy: Learn how to build and deploy XMLUI apps for production

XMLUI Application Structure

💡

XMLUI apps have a simple file structure that can be directly hosted as static files in a web server's folder (without a build process).

Unless most modern web UI frameworks, XMLUI does not require you to go through a build process. You work with a simple file structure, where most files are XMLUI markup files; there are a few others.

You use a local web server that can host static files during development.
When your app is about to be released, you copy the same folder structure to a production web server.

💡

The framework offers several build methods that optimize the static file structure for size and startup performance. These are optional; you do not need them while developing an app.

Download the zip file of the Starter App from here (link placeholder) and unzip it into a working folder. Now, open this folder in your file management tool to check its contents. You will find several files in the folder:

<XMLUI app folder>
  ├── index.html (The web page that opens in the browser)
  ├── Main.xmlui (The main XMLUI file with the app)
  ├── config.json (The app's configuration file)
  ├── xmlui-standalone.umd.js (The framework's runtime)
  ├── components (The folder with the app's XMLUI components)
  │   ├── ApiAware.xmlui
  │   ├── Home.xmlui
  │   ├── IncButton.xmlui
  └── resources (Static app resources like images, logos, icons, etc.)
      ├── favicon.ico
      ├── xmlui-logo.svg
      └── xmlui-logo-dark.svg

Application Files and Folders

This folder contains an index.html file that loads a single JavaScript file (the XMLUI framework). It also contains your app's XMLUI source (the Main.xmlui file and other files within the components folder).

The index.html file is simple:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="xmlui-standalone.umd.js"></script>
  </head>
  <body>
  </body>
</html>

The index.html file loads the xmlui-standalone.umd.js, which represents the entire framework. When this JavaScript file starts, it initializes the framework and ignites the app:

Loads and compiles the Main.xmlui file, the entry point of an XMLUI app.
When this app uses app-specific components, the framework loads and compiles them from the components folder.

📔

XMLUI supports apps that load the framework from a CDN. In these apps, index.html addresses the JavaScript file with the CDN's URL.

The Configuration File

When you start developing an XMLUI app, it comes with a simple file, config.json, which holds a few of your app's traits. You do not need to change this file; you can update a few entries to modify your app's working context.

config.json

{
  "name": "Tutorial",
  "version": "1.0.0",
  "resources": {
    "logo": "resources/xmlui-logo.svg",
    "logo-dark": "resources/xmlui-logo-dark.svg",
    "favicon": "resources/favicon.ico"
  }
}

The name property defines the text to display as the app's title in the browse tab. The version property helps query the current version number (and display it) within the app.

The app may use a few resource files (you can declare them in the resources section of the file) that your app uses.

Application Folders

The application structure has a few folders the framework uses for some specific purpose. Besides them, you can use other folders to organize your source code, store app resources, etc. The framework utilizes these folders:

components: This folder contains the XMLUI source files of the app-specific components. When the app uses a component, the framework looks up its definition in this folder.
resources: This folder contains static resources like images, logos, icons, etc. The framework uses these resources when the app needs them.
themes: This folder contains the XMLUI theme files. When the app starts, the framework looks for available theme definitions in this folder.

📔

You can use other folders within the app's root folder to store custom web fonts, unique resources, static data, etc. For more information, see this article (link placeholder).

Create a dashboard Markup