Skip to main content

Introduce

compass-framework is a user interface building framework built on canvas, built on JavaScript and XML and Provides a component-based programming model that helps you effectively Develop the user interface.

Here is a minimal browser example:​

HelloWord.xml​

<?xml version="1.0" encoding="UTF-8" ?>
<FrameLayout
        layout_width="match_parent"
        layout_height="match_parent">

    <TextView
            text="Hello World"
            textColor="#000000"
            textSize="40px"
            layout_gravity="center"/>

</FrameLayout>

MainWindow.ts​

import { ApplicationWindow } from "compass-core";
import HelloWordXML from './HelloWord.xml';

export class MainWindow extends ApplicationWindow {
    public onCreate() {
        super.setContentXML(HelloWordXML);
    }
}

manifest.json​

{
    "artifactId": "example",
    "name": "application",
    "groupId": "cn.compass.example",
    "settings": {
        "browser": {
            "container": "#container"
        }
    }
}

ExampleApplication.ts​

import {Application, ApplicationContext} from "compass-core";
import {MainWindow} from "./MainWindow";
import Manifest from "./manifest.json";

export class ExampleApplication extends Application {

    public constructor() {
        super(Manifest);
    }

    public onInstall(context: ApplicationContext): void {
        context.createApplicationFrame()
            .attachApplicationFrameWindow(new MainWindow());
    }
}

index.ts​

import {ApplicationManager, Readying} from "compass-core";
import {ExampleApplication} from "./ExampleApplication";

Readying(() => {
    const applicationManager = new ApplicationManager();
    const exampleApplication = new ExampleApplication();
    applicationManager.installApplication(exampleApplication);
});


Here is a minimal nodejs example:​

HelloWord.xml​

<?xml version="1.0" encoding="UTF-8" ?>
<FrameLayout
        layout_width="match_parent"
        layout_height="match_parent">

    <TextView
            text="Hello World"
            textColor="#000000"
            textSize="40px"
            layout_gravity="center"/>

</FrameLayout>

MainWindow.js​

const {ApplicationWindow} = require("compass-core");
const {readFileSync} = require("fs");

class MainWindow extends ApplicationWindow {
    onCreate() {
        const HelloWordXML = readFileSync("./HelloWord.xml", 'utf8');
        super.setContentXML(HelloWordXML);
    }
}

module.exports = { MainWindow }

manifest.json​

{
    "artifactId": "example",
    "name": "application",
    "groupId": "cn.compass.example",
    "settings": {
    "nodejs": {
        "container": {
                "width": 1000,
                "height": 800
            }
        }
    }
}

ExampleApplication.js​

const {Application} = require("compass-core");
const {MainWindow} = require("./MainWindow.js");
const manifest = require("./manifest.json");

class ExampleApplication extends Application {
    constructor() {
        super(manifest);
    }
    
    onInstall(context) {
        context.createApplicationFrame()
            .attachApplicationFrameWindow(new MainWindow());
    }
}

module.exports = { ExampleApplication }

index.js​

const {ApplicationManager, Readying} = require("compass-core");
const {ExampleApplication} = require("./ExampleApplication.js");

Readying(() => {
    const applicationManager = new ApplicationManager();
    const exampleApplication = new ExampleApplication();
    applicationManager.installApplication(exampleApplication);
});