Skip to main content

Window

Examples#

Basic#

import { App, WindowCreation, WindowFlag, Window } from 'ave-ui';
// create Ave app instance, assign it to global to avoid GCconst app = new App();globalThis.app = app;
// cp:creation paramconst cpWindow = new WindowCreation();cpWindow.Title = 'Window';cpWindow.Flag |= WindowFlag.Layered;
const window = new Window(cpWindow);// avoid GCglobalThis._window = window;
// set callbackwindow.OnCreateContent((sender) => {    // and create window content here    return true;});
// boilerplate codeif (!window.CreateWindow()) process.exit(-1);
window.SetVisible(true);window.Activate();

Run, and get this basic window:

window basic

API#

export interface IWindow extends IControl {    // callback:return true for success, or return false    OnCreateContent(callback: (sender: Window) => boolean): Window;
    // success: true, fail: false    CreateWindow(): boolean;
    SetVisible(visible: boolean): IControl;
    // activate it, or you will get gray window    Activate(): Window;
    // enable/disable background of window    SetBackground(useBackground: boolean): Window;}
export class WindowCreation {    Title: string = '';    Flag: WindowFlag = WindowFlag.Default;}
export enum WindowFlag {    MainWindow /**/ = 0x00000001, // program will terminate when window created with this flag closed    Sizable /**/ = 0x00000004,    Minimum /**/ = 0x00000008,    Layered /**/ = 0x00000040, // enable transparency    Default /**/ = MainWindow | Sizable | Minimum,}

Inactive window:

window not active

Transparency#

Layered flag controls transparency feature:

window opacity

You can implement it this way:

import {    App,    WindowCreation,    WindowFlag,    Window,    Grid,    Vec4,    DockMode,} from 'ave-ui';
export function run() {    const app = new App();    globalThis.app = app;
    const cpWindow = new WindowCreation();    cpWindow.Title = 'Window';    cpWindow.Flag |= WindowFlag.Layered;
    const window = new Window(cpWindow);    globalThis._window = window;
    window.OnCreateContent((sender) => {        // by default we get white background, to enable transparency, we disable it here        sender.SetBackground(false);
        const grid = new Grid(sender);        {            const gridChild = new Grid(sender);            grid.ControlAdd(gridChild).SetDock(DockMode.Fill);            const color = new Vec4(100, 149, 237, 255);            gridChild.SetBackColor(color);            // the opacity of gridChild will be the opacity of the content of window            gridChild.SetOpacity(0.5);        }        window.SetContent(grid);        return true;    });
    if (!window.CreateWindow()) process.exit(-1);
    window.SetVisible(true);    window.Activate();}

About grid opacity, see Transparent Grid.