What is this?

mikeneko is a SPA (Single-Page-Action) framework that supports web and terminal applications.
It is composed of TypeScript (JavaScript).

The Japanese version of REAMME is here.

Contents

• How to use it?
  • Installing mikeneko
  • Preparing the environment from project sources
• Create project
  • Project file/directory structure
• Web Build
• How to specify build options
  • Argument specification for Builder.build method
  • Specification by configuration file mikeneko.json
• Web Build Option
  • Platform Settings
  • Debug Log Output
  • View Mappings
  • Code Obfuscation
  • Code Compression
  • Force Build of Core Libraries
  • Change Transpiled Version
  • Build With WebPack
• Initial Setup
  • Root Method
  • Routing
  • Specifying the NotFound View
  • Screen Transition Delay Settings
  • Class Settings for Screen Transition Animation
  • Background Processing Settings
• Routing Setting
  • Routing with URL path and View
    • Specifying the URL and View
    • URL Scope
    • When to specify dynamic or arbitrary values ​​in the URL
  • Routing with RouteMap
• About the Core Library
• Transition Class
  • Transition to another screen (next)
    • Specify a string path (URL)
    • Specify the RouteMap class instance.
    • Specifying a static View class
  • Screen transition with RouteMap specified (move)
  • Temporarily change screen (stack)
  • Return to previous screen (back)
  • Display another screen (replace)
    • Specify a string path (URL) as the replace
    • Specify an instance of the RouteMap class as the replace.
    • Specify a static View class as the replace
  • Delete screen history (historyClear)
  • Adding Screen History (historyAdd)
  • Obtaining the transition state (isNext/isBack)
  • Lock screen transitions (lock)
  • Displaying the UI (bindUI)
  • Addition of UI (appendUI)
• VirtualDom Class
  • Setting up and operating a Virtual Dom
  • Chaining DOM Manipulation
  • Parent element operations
  • Multi-element operations
    • Get the number of target elements
    • Specify the first element
    • Specify the last element
    • Specify the nth element
    • Specify the previous element
    • Specify the following element
  • Search within an element (querySelector)
  • Creating a new virtual DOM (VirtualDom.create)
  • Get/Set specify text (text)
  • Get/Set HTML Tags (html)
  • Adding content (append)
  • Add to the beginning of the content (afterBegin)
  • Get/set css (style sheet) (style)
  • Get CSSStyleDeclaration interface access
  • Get the setting value of css (style sheet) (getStyle)
  • Get/Set Attributes (attr)
  • Deleting an attribute (removeAttr)
  • Easy retrieval/setting of attribute values
    • Get/set src
    • Get/set placeHolder
    • Get/set href
    • Get/set name
    • Get/set id
  • Adding a class attribute (addClass)
  • Removing a class attribute (removeClass)
  • Get/Set temporary data (data)
  • Delete temporary data (removeData)
  • Setting the Event Handler (on)
    • When an element is pressed (onClick)
    • When you double-click an element (onDblClick)
    • When an element is changed (onChange)
    • When the focus of an element changes (onFocus)
    • When the mouse click begins (onMouseDown)
    • When the mouse click ends (onMouseUp)
    • When the mouse cursor moves (onMouseMove)
  • Event Execution (dispatch)
  • Get/Set Input Value (value)
    • Get/Set Checkbox Selection Value
    • Get file selection
  • Get/change checkbox selection state (checked)
  • Adding options to the drop-down menu (selectAddParam)
  • Display when no pull-down menu is selected (selectEmpty)
  • Clear the selection in the drop-down menu (selectResetParam)
  • Get the display text of the options in the pull-down menu (selectedText)
  • Switching between displaying and hiding on the screen (display)
  • Enable/disable elements (disable)
• Render Class
• Lib class
  • Check if resource file exists
  • Getting resource files
  • Get DataURL of resource file
  • Get MimeType of resource file
  • Decoding from base64 format (base64Decode)
  • Encode to base64 format (base64Encode)
  • Creating a unique identifier (uniqId)
  • Retrieving Object Data by Value (passByValue)
  • Stop at a specified time (sleep)
  • Loading external JS scripts (importResourceScript)
  • Getting the date and time (datetime)
    • Getting the date and time in a format
    • Get the last day of the month (getLastDate)
    • Get the last day of the month (getLastDay)
    • Get tomorrow's information (nextDate)
    • Get the previous day's information (prevDate)
    • Get next month's information (nextMonth)
    • Get previous month's information (prevMonth)
• View Class
  • Placement of View class file
  • Setting HTML content
    • Place HTML content directly in the View-derived class
    • Setting the rendering HTML file (Recommendation)
  • Main life cycle
    • The handle method
    • The handleNext method
    • The handleBack method
    • handleBefore/handleAfter Methods
    • The handleRenderBefore method
    • The handleRenderBAfter method
    • The handleLeave method
    • The handleLeaveNext method
    • The handleLeaveBack method
    • The handleLeaveStackClose method
    • The handleTemplateChanged method
    • The handleHeadChanged method
    • The handleHeaderChanged method
    • The handleFooterChanged method
  • Manipulating the Virtual DOM
  • Template settings
  • Head settings
  • Header settings
  • Footer Settings
  • Changing the rendered HTML
  • Temporary display of screen (stackOpen)
• UI Class
  • How to specify the UI
    • Show UI class files only
    • UI rendering HTML only
    • Place both UI class files and rendering HTML (Recommendation)
  • Displaying the UI (bind)
  • UI Addition Display (append)
  • UI Addition Display (afterBegin)
  • Event handlers when displaying the UI (handle)
  • Manipulating the Virtual DOM
• Template Class
  • Setting the template to use
  • How to specify a template
    • Display only template class files
    • Template rendering Display only HTML
    • Place both the template class file and the rendering HTML
  • Event handler when Template is displayed (handle)
• Background Class
  • How to use Background
• Hook Class
  • How to use Hook
  • Main reservation events
    • Immediately after launching the app (onStartoBegin)
    • When transitioning to the next screen (onTransitionNext)
    • When moving to the next screen (onTransitionMove)
    • When transitioning to the next screen using stack (onTransitionStack)
    • After a screen is closed from the stack (onTransitionStackClose)
    • When returning to the previous screen (onTransitionBack)
    • When switching to the next screen (onTransitionReplace)
    • When adding screen history (onTransitionHistoryAdd)
    • When clearing screen history (onTransitionHistoryClear)
    • When you remove the screen history (onTransitionHistoryPop)
    • Before screen change (onRenderingBefore)
    • After screen change (onRenderingAfter)
    • When binding the UI (onUIBind)
    • When adding UI (onUIAppend)
    • When installing the render content (onSetRenderContent)
  • Run your own event
• About Plugins
  • Installing the plugin
  • Remove plugin
  • Checking installed plugins
• Console mike command
  • Create a project
  • Web Build of the Project
  • Adding a platform
  • Removing a Platform
  • Adding Plugins
  • Remove plugin
  • View Added Plugins
• Others
  • About import path specification

How to use it?

To use it, you must first install Node.js and its package management tool, npm.
After the above installation is complete, install mikeneko as an npm package.

The following environment is required:

• Node.js (ver20.18.1 or later)
• npm (ver10.8.2 or later)
• TypeScript (5.7.2 or later)
• VisualStudioCode (Editor with TypeScript completion)

Once the installation is complete, follow the steps below:

• Create Project
• Starting a Web Build

Installing mikeneko

Install mikeneko with the following npm command.

$ npm i -g mikeneko

After the installation is complete, the following mike command will be available.

$ mike

The mike command is a function for creating projects and managing the plugin platform in mikeneko. For details on commands, see here

Preparing the environment from project sources

Prepare a test sample in the following Git repository.

https://github.com/masatonakatsuji2021/mikeneko_sample

Create Project

To create a project, use the following command:
After that, the project name etc. are set interactively.

$ mike create

If the project name is already set, you can specify it directly using the following command:

$ mike create project1

Project file/directory structure

Below is an example.

|- dist
    ....
|- output
    ....
|- src
    |-app 
        |- config
            |- App.ts
        |- ui
            |- HeaderUI.ts
        |- view
            |- View.ts
            |- HomeView.ts
    |-rendering
        |- ui
            |- header.html
        |- view
            |- home.html
        |- template
            |- default.html
    |- resource
        |- css
            |- style.css
        |- img
            |- logo.png
|- index.js
|- package.json
|- mikeneko.json
|- tsconfig.json

See below for an overview of the files and directories in the source code.

||| |:--|:--| |dist|*1 Directory for intermediate sources during build| |output|*1 Build generated directories| |node_modules|*1 Directory for local installation of npm packages| |src|Directory for storing all source files| |..app|Directory for TypeScript (ts) format script files| |..rendering|Directory for rendering HTML files| |..resource|Directory for static content files such as css and images| |index.js|Build js file| |package.json|Project package.json| |mikeneko.json|Build options configuration file| |tsconfig.json|TypeScript configuration file|

*1 No need to create it as it will be generated automatically.

Web Build

Change the current directory to the project directory,
Running the mike build command will start a web build from the project sources.

• Features since version 1.1.4

$ cd project1
$ mike build

You can also build the web by running the index.js file set when creating the project with the node command.

$ cd project1
$ node . 

How to specify build options

Build options can be set by

• specifying them as arguments to the Builder.build method
• specifying them in the configuration file mikeneko.json

Argument specification for Builder.build method

Build options can be specified as arguments to the Builder.build method for executing the build in index.js located directly under the project directory,
as shown below.

"use strict";
const { Builder } = require("mikeneko-build");
Builder.build({
    platforms: [
        {
            name: "web",
            debug: true,
        },
    ],
});

Specification by configuration file mikeneko.json

How to specify build options in the configuration file mikeneko.json.

{
    "platforms": [
        {
            "name": "web",
            "debug": true,
        },
    ],
}

Web Build Option

Platform Settings

If you want to add two or more platforms to mikeneko.json,
list them as follows:

{
    "platforms": [
        {
            "name": "app1",
        },
        {
            "name": "app2",
        },
        {
            "name": "app3",
        },
    ],
}

If you have multiple platforms,
running the following command will build all platforms.

$ node .

To build only the app2 platform,
execute the following command:

$ node . --platform app2

Debug Log Output

Set debug to true in mikeneko.json.

{
    "platforms": [
        {
            "name": "app",
            "debug": true        // <= Output debug log
        }
    ]
});

View Mappings

Set mapping to true in mikeneko.json.

{
    "platforms": [
        {
            "name": "app",
            "mapping": true        // <= Mapping Output
        }
    ]
}

Code Obfuscation

Set obfuscated to true in mikeneko.json.

{
    "platforms": [
        {
            "name": "app",
            "obfuscated": true   // <= Code Obfuscation
        }
    ]
}

Code Compression

Set codeCompress to true in mikeneko.json.

{
    "platforms": [
        {
            "name": "app",
            "codeCompress": true   // <= Code compression
        }
    ]
}

Force Build of Core Libraries

When building a web site immediately after creating a project, two types of sources are transpiled from TypeScript: the core library source and the local source in the project (including plugins if any are added).

None of these, except for your project's local sources,
will be transpiled unless you delete the files in the dist directory after transpiling once.

However, if you want to optimize after updating the mikeneko core library (mikeneko-corelib) or adding/removing plugins,
you can specify the --force option to force all TypeScript files to be transpiled.

If the core library is updated,
it will be updated with the following command.

$ node . --force

Change Transpiled Version

Change the target in tsconfig.json.

{
  "compilerOptions": {
    "target": "es2022",        // <= Change Target
    "module": "commonjs",
    "lib": ["es2022","dom"],   // <= Change Target
    .....
  }
}

Build With WebPack

Specify build to webpack in mikeneko.json.
(Note that WebPack is installed globally.)

{
    "platforms": [
        {
            "name": "app",
            "build": "webpack"   // <= Specify build to webpack
        }
    ]
}

Initial Setup

Open src/app/config/App.ts and make sure the code is written as below.

import { App, AppRouteType } from "App";
import { RouteMap, RouteMaps } from "RouteMap";
import { Maps } from "app/config/Maps";

export class MyApp extends App {

    // routeType
    public static routeType: AppRouteType = AppRouteType.web;
    
    // route maps
    public static maps : RouteMaps = Maps;

    // Not Found View
    public static notFoundView: RouteMap = Maps.notFound;

    // Rendring Delay 
    public static delay: number = 300;

    // animation class selector
    public static animationClassSelector: AnimationClassSelector = {
        // When switching screens (next or move)
        next: {
            open: "nextOpen",
            close: "nextClose",
        },
        // When switching screens (back)
        back: {
            open: "backOpen",
            close: "backClose",
        },
        // When switching screens (stack)
        stack: {
            open: "stackOpen",
            close: "stackClose",
        },
    };
}

Root Method

There are two options, web and application, so select one.

||| |:--|:--| |web|Use for viewing in a web browser etc. URL can be specified.| |application|Mainly used in smartphone apps and desktop apps.|

// routeType
public static routeType: AppRouteType = AppRouteType.web;

Routing

Specify the routing settings for each screen below
For more information on routing, see here.

The following is the case when using the RouteMap method.

// route maps
public static maps : RouteMaps = Maps;

Specifying the NotFound View

Specify the screen to be displayed if a screen does not exist or the file class for the screen is insufficient.
Can be specified by view name or RouteMap class.
For the RouteMap, see here

// Not Found View
public static notFoundView: RouteMap = Maps.notFound;

Screen Transition Delay Settings

Specify this if you need a slight delay when performing animations during screen transitions.
The unit is ms.

// Rendring Delay 
public static delay: number = 300;

Class Settings for Screen Transition Animation

When performing animation display, etc., you can use the member variable
animationClassSelector to specify class attributes for when various screens are displayed and when they end.

The specified class attribute name will be placed in the article tag for each screen.

For animation display,
it is recommended to use CSS animations using animation or transition in CSS.
So here we use the class attribute to switch animations.

public static animationClassSelector: AnimationClassSelector = {
    // When switching screens (next or move)
    next: {
        open: "nextOpen",
        close: "nextClose",
    },
    // When switching screens (back)
    back: {
        open: "backOpen",
        close: "backClose",
    },
    // When switching screens (stack)
    stack: {
        open: "stackOpen",
        close: "stackClose",
    },
};

Background Processing Settings

You can enumerate background processes that run simultaneously when the app is launched.
The order will be the execution order of each background class.

public static background = [
    "Background1",
    "Background2",
    "Background3",
    ....
];

For background, see here

Routing Setting

Routing is information that links the screen class (View) and URL that are applied when transitioning between screens.
In mikeneko, screen transitions and switching are basically performed by specifying a URL with routing or the RouteMap class.

There are two main methods for routing:

• Routing with URL path and View specified as literal string.
• Routing with RouteMap

Routing with URL path and View

Specify the View name (View derived class name) to be used by using the URL as a key.

This is the simplest method,
but because the URL and view name are literal values,
care must be taken when using and managing them,
such as when modifying code.

The method is to write the code as follows in src/app/config/App.ts.
If you have a lot of routing content,
it is better to make it a separate module and import it.

public static routes = {
    "/": "home",
    "/faq": "faq/main",
    "/page1": {
        "/": "page1/main",
        "/{id}": "page1/detail",
        "/add": "page1/add",
    },
};

Specifying the URL and View

The key value (left side) is the URL (path) and the value (right side) is the view name to be used.
In the example below, HomeView(src/app/view/HomeView.ts) is specified as the screen (TOP) that appears immediately after the app is launched.

"/": "home",

View can also specify subdirectories.
In the following example, the MainView(src/app/view/faq/MainView.ts) will be specified for the URL /faq.

"/faq": "faq/main",

For information on how to set up the View class and HTML content, see here.

When transitioning between screens, use the Transition class to specify the URL as shown below.
For more information on Transition, see here

Transition.next("/faq");

URL Scope

If the same path exists for multiple routes at the beginning of the URL,
it can be written in the scope.

"/page1": {
    "/": "page1/main",
    "/{id}": "page1/detail",
    "/add": "page1/add",
},

In the above case, /page1 is omitted, and it will be the same as below.

"/page1": "page1/main",
"/page1/{id}": "page1/detail",
"/page1/add": "page1/add",

Scope can also be specified by nesting as follows:

"/offline": {
    "/page1": {
        "/": "offline/page1/main",
        "/{id}": "offline/page1/detail",
        "/add": "offline/page1/add",
    },
},

When to specify dynamic arbitrary values ​​in the URL

Use the {} notation when specifying dynamic or arbitrary values ​​in the URL.

"/page1/{id}": "page1/detail",

In the above case, the same routing will be applied to the following URLs:

/page1/1
/page1/2
/page1/3

Dynamic values ​​can be obtained as arguments in the View class.
For details, see here

Multiple dynamic values ​​can be specified.

"/page1/{id1}/{id2}/{id3}": "page1/detail",

In the above case, the following URL also applies:

/page1/1/2/3

However, since the value is required,
if even one value is missing as shown below,
it will not be applied.

/page1/1/2

Use {?} to make some values ​​optional.

"/page1/{id}/{option?}": "page1/detail",

This will apply the routing in the above case.

/page1/1
/page1/2/1

Routing with RouteMap

RouteMap is a method that emphasizes complementary functions more than the above routing methods.
The method is to instantiate the URL and View class name in the RouteMap class and use it.

To instantiate it, use the RMap method in the RouteMap module:

Write the following code in src/app/config/App.ts:

import { RMap } from "RouteMap";

public static maps = {
    home: RMap({ url: "/", view: "home" }),
    faq: RMap({ url: "/faq", view: "faq/main" }),
    page1: {
        main: RMap({ url: "/page1", view: "page1/main" }),
        main: RMap({ url: "/page1/{id}", view: "page1/detail" }),
        main: RMap({ url: "/page1/add", view: "page1/add" }),
    },
};

The RMap method instantiates the RouteMap class and takes a view name or URL as an argument.

The global variable maps can be used as a definition when transitioning between screens using Transition, etc.,
and it is possible to specify only the routing defined by the completion function in Visual Studio Code, etc.

import { MyApp } from "app/config/App";

...

Transition.next(MyApp.maps.faq);

If the routeType is application,
you do not need to specify the URL and can just specify the view name.

import { RMap } from "RouteMap";

public static maps = {
    home: RMap({ view: "home" }),
    faq: RMap({ view: "faq/main" }),
    page1: {
        main: RMap({ view: "page1/main" }),
        main: RMap({ view: "page1/detail" }),
        main: RMap({ view: "page1/add" }),
    },
};

• When using RouteMap, the first specified route is applied to the TOP immediately after the app is launched.

About the Core Library

In mikeneko, the standard functions available are collectively called core libraries.
The core libraries provided are:

|||| |:--|:--|:--| |App|Initial setting class|| |Transition|Method class for screen transition|| |VirtualDom|Virtual DOM manipulation classes|| |Lib|Commonly Used Method Classes|| |Render|Drawing classes|Classes not used directly| |View|Display class for each screen|| |UI|Class for parts to be displayed commonly on each screen|| |Template|Template Classes|| |Background|Background processing classes|| |Hook|Class for setting interrupt execution when various events occur|

In addition to this, functions such as dialog display (Dialog) and input validation check (Validation) can be used by installing them as separate plugins.

For more information, see About Plugins.

Transition Class

Transition is a class mainly used for screen transitions, etc.
To use it, you need to import the module with the following import.

import { Transition } from "Transition";

Transition to another screen (next)

You can use the next method to navigate to another screen.
When this method is used, the screen transition history is stored inside the app.

There are the following ways to specify the transition destination:

• Specify a string path (URL)
• Specify the RouteMap class instance.
• Specifying a static View class

Specify a string path (URL)

If you want to specify the destination as a string path (URL), use the following:
In this case, you need to specify the path and the destination View class name in routes in the initial settings (App) beforehand.
For more information on specifying string paths for routing, see here

For example, suppose you specify the following routes in app/config/App.ts:

import { App } from "App";

export class MyApp extends App {

    public static routes = {
        "/": "home",
        "/faq" : "faq",
    };
}

If you want to transition to the above path /faq,
specify the path as an argument as follows:

Transition.next("/faq");    // <= Go to /faq page

You can also set temporary data for the destination screen in the arguments.
(However, this method cannot be used if RouteType is used on the web.)

Transition.next("/faq", { id: 2 });    // <= Go to /faq page

The above data is obtained by sendData in the View class.

import { View } from "View";

export class FaqView extends View {

    public handle() {

        console.log(this.sendData);    // <= Output information for { id: 2 }
    }
}

Specify the RouteMap class instance.

You can specify a RouteMap instance instead of a URL.

import { RMap } from "RouteMap";

Transition.next(RMap("faq"));    // <= Go to the FaqView screen

If you are using RouteMap routing, you can specify it as follows:
For more information on routing using RouteMap, see here.

First, you need to create an instance of RouteMap in MyApp.maps.faq.

import { MyApp } from "app/config/App";

Transition.next(MyApp.maps.faq);    // <= Go to the RouteMap information screen specified in MyApp.maps.faq

If the URL has dynamic values ​​specified in the RouteMap, specify the values ​​in the second argument.
For example, if the following routing is specified in app/config/App.ts

export class MyApp extends App {
    ...
    public static Maps = {
        ....
        anypage: RMap({url: "/any/{id1}/{id2}/{id3}", view: "anypage" })
        ....
    },
}

Specify the value to be assigned as an argument when transitioning between screens as follows:

import { MyApp } from "app/config/App";

Transition.next(MyApp.maps.anypage, [ 1, 2, 3]);   // <= /any/1/2/3 to switch screens

If you want to set temporary data instead of a URL in RouteMap, specify it in the third argument.
In this case, the second argument is specified as null.

import { MyApp } from "app/config/App";

Transition.next(MyApp.maps.other, null, { id: 2 });    // <= Go to the RouteMap information screen specified in MyApp.maps.other

Specifying a static View class

• Features since version 1.1.4

You can also specify the View class (typeof) directly.

import { Page1View } from "app/view/Page1View";

Transition.next(Page1View);

When specifying a View class, it is possible to set temporary data for the output screen.

import { Page1View } from "app/view/Page1View";

Transition.next(Page1View, { id : 2});

Screen transition with RouteMap specified (move)

To use RouteMap to transition between screens, use the move method.
The usage is the same as using the next method.
(However, you cannot specify a URL path.)

import { MyApp } from "app/config/App";

Transition.move(MyApp.maps.faq);    // <= Go to the RouteMap information screen specified in MyApp.maps.faq

• Features since version 1.1.4

You can also specify the View class (typeof) directly.

import { Page1View } from "app/view/Page1View";

Transition.move(Page1View);

When specifying a View class, it is possible to set temporary data for the output screen.

import { Page1View } from "app/view/Page1View";

Transition.move(Page1View, { id : 2});

Temporarily change screen (stack)

You can temporarily navigate to another screen using the stack method.
(This is a wrapper function for View.stackOpen)

It looks similar to next and move,
but while next and others erase the previous screen before switching to the new one,
stack leaves the previous screen intact and brings the new screen to the foreground when switching between screens.

Therefore, if you go back, the previous screen will remain as it is.
(However, handlers such as handleLeave on the returned screen will not be executed at all.)

As an example, prepare a selection screen and display it temporarily.
After selecting a value on the selection screen,
some value can be returned, so you can receive it.

// Temporarily display the selection screen
const res = await Transition.stack(maps.select);
console.log(res);

RouteMap class instance and static View class can be specified as the display destination by arguments.

import { SelectView } extends "app/view/SelectView";
// // Temporarily display the Page1View screen
const res = await Transition.stack(SelectView);
console.log(res);

When receiving, you can specify the value to be passed as a return value by using the
handleLeaveStackClose event on the view side of the selection screen.
For details, see here

Return to previous screen (back)

To go back to the previous screen, use the back method.

Transition.back();

The number of screens to go back can be specified by an argument.

Transition.back(2); // <= Go back two

Display another screen (replace)

To switch between different screens, use the replace method.

It is similar to next and move, but the big difference is that it can switch between different screens without leaving a history of screen transitions.
Therefore, if you go back to the previous screen, you will be returned to the screen before the switch, so please be careful.

There are the following ways to specify the transition destination:

• Specify a string path (URL)
• Specify the RouteMap class instance.
• Specifying a static View class

The screen behavior after switching (such as the life cycle of the View) is the same as when transitioning using next or move.

Specify a string path (URL) as the replace

If you want to specify the destination as a string path (URL), use the following:
In this case, you need to specify the path and the destination View class name in routes in the initial settings (App) beforehand.
For more information on specifying string paths for routing, see here

For example, suppose you specify the following routes in app/config/App.ts:

import { App } from "App";

export class MyApp extends App {

    public static routes = {
        "/": "home",
        "/other2": "other2",
    };
}

If you want to transition to the above path /other2,
specify the path as an argument as follows:

Transition.replace("/other2");

Specify an instance of the RouteMap class as the replace.

You can specify a RouteMap instance instead of a URL.

import { RMap } from "RouteMap";

Transition.replace(RMap("faq"));    // <= Go to the FaqView screen

If you are using RouteMap routing, you can specify it as follows:
For more information on routing using RouteMap, see here.

First, you need to create an instance of RouteMap in MyApp.maps.faq.

import { MyApp } from "app/config/App";

Transition.replace(MyApp.maps.faq);    // <= Go to the RouteMap information screen specified in MyApp.maps.faq

If the URL has dynamic values ​​specified in the RouteMap, specify the values ​​in the second argument.
For example, if the following routing is specified in app/config/App.ts.

export class MyApp extends App {
    ...
    public static Maps = {
        ....
        anypage: RMap({url: "/any/{id1}/{id2}/{id3}", view: "anypage" })
        ....
    },
}

Specify the value to be assigned as an argument when transitioning between screens as follows:

import { MyApp } from "app/config/App";

Transition.replace(MyApp.maps.anypage, [ 1, 2, 3 ]);   // <= /any/1/2/3 to switch screens

If you want to set temporary data instead of a URL in RouteMap, specify it in the third argument.
In this case, the second argument is specified as null

import { MyApp } from "app/config/App";

Transition.replace(MyApp.maps.other, null, { id: 2 });    // <= Go to the RouteMap information screen specified in MyApp.maps.other

Specify a static View class as the replace

• Features since version 1.1.4

You can also specify the View class (typeof) directly.

import { Page1View } from "app/view/Page1View";

Transition.replace(Page1View);

When specifying a View class, it is possible to set temporary data for the output screen.

import { Page1View } from "app/view/Page1View";

Transition.replace(Page1View, { id : 2});

Delete screen history (historyClear)

To delete all screen transition history within an app, use the historyClear method.

Transition.historyClear();

Adding Screen History (historyAdd)

If you want to add an optional history of screen transitions within the app, use the historyAdd method.

Transition.historyAdd("/");             // <= Add TOP page
Transition.historyAdd(MyApp.maps.faq);  // <= Added FAQ screen in RouteMap format
Transition.historyAdd(Page1View);       // <= Added Page1View Static Class.

Obtaining the transition state (isNext/isBack)

To get the screen transition status (back or forward) in a view, use isNext or isBack.
isNext and isBack are opposites, so you can use either one.

For example, if you return from the previous screen, the following is the result:

if (Transition.isBack) {
    // Processing when returning from the previous screen.....
}

If you proceed from the previous screen, the following will be determined:

if (Transition.isNext) {
    // Processing when proceeding from the previous screen.....
}

Lock screen transitions (lock)

By using lock, you can temporarily disable a series of screen transitions,
such as transitions using next, move, replace,
or returning to the previous screen using back.

Used to disable screen transitions when a dialog is displayed.

// Lock screen transitions
Transition.lock = true;

// Unlocking screen transitions
Transition.lock = false;

Be sure to unlock the app at the end, otherwise it will stop working.

Displaying the UI (bindUI)

The bindUI method allows you to bind and display a UI to a specified virtual DOM element.
This method is a wrapper function for UI.bind.
Learn more about UI.bind

As shown in the code below,
by specifying the virtual DOM and UI name to be bound to,
the HTML content of the UI will be placed and displayed in the tag of the virtual DOM to be bound to.

The return value is an instance of UI,
or if a class with the specified UI name exists,
an instance of that class (ItemUI in the example below) is returned.

const itemUI = Transition.bindUI(this.vdos.item, "item");

It is also possible to specify temporary data for the bound UI as shown below.
For how to extract the data, please refer to About UI Class

const itemUI = Transition.bindUI(this.vdos.item, "item", { id: 3 });

Addition of UI (appendUI)

The appendUI method allows you to append a UI to a specified virtual DOM element.

• This method is a wrapper function for UI.append.
  Learn more about UI.append

As shown in the code below, by specifying the destination virtual DOM and UI name as arguments,
the HTML content of the UI will be added to the tag of the destination virtual DOM.

The return value is an instance of UI,
or if a class with the specified UI name exists,
an instance of that class (ListItemUI in the example below) is returned.

const listeItemUI = Transition.appendUI(this.vdos.list, "listItem");

It is also possible to specify temporary data for the destination UI as shown below.
For how to extract the data, please refer to About UI Class

const listeItemUI = Transition.appendUI(this.vdos.list, "listItem", { id: 3 });

VirtualDom Class

The VirtualDom class is a class for operating the virtual Dom,
which is necessary to set the text display of the HTML content part and the event operation when a button is pressed.

Setting up and operating a Virtual Dom

First, in the HTML part such as View or UI,
you need to place the tag to be applied as a virtual DOM and specify the attribute name.

Attribute names can be specified in any tag with v={attribute name}.

For example,
set up a HomeView and set a tag to display the title on the rendering HTML side as shown below.

<div v="title"></div>

In the HomeView class,
you can specify the title text via the member variable vdos with the following code.

import { View } from "View";

export class HomeView extends View {

    public handle() {

        // Show title
        this.vdos.title.text = "Title Sample";
    }
}

In addition, when a tag with the v attribute is loaded once on the screen,
the attribute itself is deleted and the tag is virtualized.

If you want to perform DOM operations on the entire screen in a view or on the entire element in a UI,
use the member variable vdo.

For example,
if you specify the following in View,
the entire screen will be displayed with a black background.

this.vdo.style({ background: "black" });

The v attribute can also specify multiple tags with the same attribute name.

<div v="test1"></div>
<div v="test1"></div>
<div v="test1"></div>
<div v="test1"></div>

The following code will display the same text for all tags that have test1 defined.

this.vdos.test1.text = "Test1 Sample...";

Chaining DOM Manipulation

The v attribute can be used to perform chain operations using the . separator.

For example,
you can add tags to your HTML like this:

<div v="chain.a"></div>
<div v="chain.b"></div>
<div v="chain.c"></div>

To display text for the v attribute chain,
write the following code:

this.vdos.chain.text = "Chain Test";

Then, the following will be displayed in the browser:

Chain Test
Chain Test
Chain Test

If you want to change the text only for tags chained with a in the v attribute,
use childs as shown in the code below.

this.vdos.chain.childs.a.text = "Chain A Text";

Then, the following will be displayed in the browser:

Chain A Text
Chain Test
Chain Test

Chaining allows you to manipulate elements by categorization.

Parent element operations

To get the parent element, use parent.
Parent elements can be obtained and operated without specifying the v attribute.

this.vdos.test.parent.text = "Parent Text";

Multi-element operations

The VirtualDom class provides methods (setter/getter) to operate on multiple elements in one virtual DOM.

Get the number of target elements

The number of target elements is obtained with length.

console.log(this.vdos.test.length);

Specify the first element

The first element is obtained with first.

this.vdos.test.first.text = "Test Sample (First)";

Specify the last element

The last element is obtained with last.

this.vdos.test.last.text = "Test Sample (Last)";

Specify the nth element

The nth element can be obtained by specifying the index number as an argument using the index method.

this.vdos.test.index(2).text = "Test Sample (2)";

Specify the previous element

To get the adjacent element before an element, use prev.
If the virtual DOM itself has multiple elements,
it gets the adjacent element before the first element.

this.vdos.test.prev.text = "Prev Text";

Specify the following element

To get the next adjacent element of an element, use next.
If the virtual DOM itself has multiple elements,
it gets the next adjacent element from the first element.

this.vdos.test.next.text = "Next Text";

Search within an element (querySelector)

Using the querySelector method,
you can retrieve elements that match a selector or selectors specified within an element in the VirtualDOM object.
(querySelector is used when searching by selectors such as class attributes or ID attributes.)

For example, prepare the following HTML in View etc.

<div v="area">
    <div class="name">Name</div>
    <div class="description">description</div>
</div>

If you want to get the description for the tag with the v attribute area,
use querySelector and write it as follows.

console.log(this.vdos.area.querySelector(".description").text);

Creating a new virtual DOM (VirtualDom.create)

Using the VirtualDom.create method,
a virtual DOM (VirtualDom class object) can be created without applying the v attribute to HTML content.

Below is an example of this:
Specify the content as an argument.

const newDOm = VirtualDom.create("new Dom Text...");
newDom.style({ color: "orange" });
this.vdos.target.html = newDom;

The second argument can be any DOM tag name.
(If not specified, it will default to the div tag.)

const newDOm = VirtualDom.create("new Dom Text...", "h1");
newDom.style({ color: "orange" });
this.vdos.target.html = newDom;

Get/Set specify text (text)

Use text(setter/getter) to set and get text.

To set the text, use the following code:

this.vdos.sample.text = "Sample Text....";

To get the displayed text, use the following code:

const sampleText = this.vdos.sample.text;
console.log(sampletext);

Get/Set HTML Tags (html)

Use html (setter/getter) to set and retrieve HTML tag content (innerHTML).
To set HTML tags, use the following code:

this.vdos.sample.html = "<h1>Sample Text....</h1>";

You can also create a new virtual DOM object and specify it.

const newDOm = VirtualDom.create("new Dom Text...");
this.vdos.target.html = newDom;

To get the HTML tag,
use the following code:

const sampleHtml = this.vdos.sample.html;
console.log(sampleHtml);

Adding content (append)

To append HTML content to a string or a virtual DOM object, use the append method:
append adds to the end of the tag element.

To specify a string (HTML text), use the following:

const addHtml = "<H1>add Html Content...</h1>";
this.vdos.list.append(addHtml);

You can also create a new virtual DOM object and specify it.

const newDom = VirtualDom.create("New VDom Text ....");
this.vdos.list.append(newDom);

Add to the beginning of the content (afterBegin)

To append HTML content to the beginning of a string or virtual DOM object, use the afterBegin method:
append appends downwards to the bottom of the tag, whereas afterBegin appends upwards to the top of the tag.

To specify a string (HTML text), use the following:

const addHtml = "<H1>add Html Content...</h1>";
this.vdos.list.afterBegin(addHtml);

You can also create a new virtual DOM object and specify it.

const newDom = VirtualDom.create("New VDom Text ....");
this.vdos.list.afterBegin(newDom);

Get/set css (style sheet) (style)

To get or set stylesheet (css) values, use the style method.

The css settings are written in the following code.

this.vdos.sample.style({ background: "black" });

You can also set the style sheet properties all at once like this:

this.vdos.sample.style({
    background: "black",
    color: "white",
    "font-size": "15px",    
});

Get CSSStyleDeclaration interface access

• Features since version 1.1.4

By using the getter css,
you can also set the style sheet using an object of the CSSStyleDeclaration interface.
For more information on CSSStyleDeclaration, see here.

this.vdos.sample.css.background = "red";
this.vdos.sample.css.color = "white";
this.vdos.sample.css.padding = "10px";

Get the setting value of css (style sheet) (getStyle)

The style sheet settings are obtained with getStyle.

const bgColor = this.vdos.sample.getStyle("background");
console.log(bgColor);

Get/Set Attributes (attr)

Use attr to specify or retrieve attribute values ​​for an element tag.

To specify an attribute value, use the following:

this.vdos.sample.attr("name", "sample");

The name attribute is added as follows:

<div name="sample"></div>

To get the attribute value:

const name = this.vdos.sample.attr("name");
cosnole.log(name);

Deleting an attribute (removeAttr)

If you want to remove attribute information, use removeAttr.

this.vdos.sample.removeAttr("name");

Easy retrieval/setting of attribute values

Among the attribute values, the most frequently used attribute information can be easily obtained/set using the following.

Get/set src

Use src to get and set the src attribute used for image paths, etc.

To get the src attribute value:

const src = this.vdos.image.src;
console.log(src);

To set the src attribute value, use the following:

this.vdos.image.src = "img/sample.png";

Get/set placeHolder

Use placeholder to get and set the placeholder attribute

To get the placeholder attribute value, use the following:

const placeholder = this.vdos.image.placeholder;
console.log(placeholder);

To set the placeholder attribute value, use the following:

this.vdos.image.placeholder = "Placeholder Sample....";

Get/set href

Use href to get and set the href attribute used in link tags, etc.

To get the href attribute value, use the following:

const href = this.vdos.link.href;
console.log(href);

To set the href attribute value, use the following:

this.vdos.link.href = "linkurl";

Get/set name

Use name to get and set the name attribute.

To get the name attribute value, use the following:

const name = this.vdos.input.name;
console.log(name);

To set the input attribute value, use the following:

this.vdos.input.name = "yourname";

Get/set id

Use id to get and set the id attribute.

To get the id attribute value, use the following:

const id = this.vdos.sample.id;
console.log(id);

To set the id attribute value, use the following:

this.vdos.sample.id = "sample";

Adding a class attribute (addClass)

If you want to add a specific class attribute, use addClass.

this.vdos.sample.addClass("open");

Removing a class attribute (removeClass)

If you want to remove a specific class attribute, use removeClass.

this.vdos.sample.removeClass("open");

Get/Set temporary data (data)

To get or set temporary data on a VirtualDom, use the data method:
The value set by this data method is confidential because it is information that is not included in the actual HTML tag.

In addition, the data types that can be set include strings, objects other than numbers, etc.

The temporary data settings are as follows:
The arguments are the data name and the setting value, in that order.

this.vdos.button.data("id", 23);

You can retrieve data by specifying only the data name as an argument.

const id = this.vdos.button.data("id");
console.log(id);

Delete temporary data (removeData)

To remove temporary data, use removeData.
Specify only the data name as an argument

this.vdos.button.removeData("id");

Setting the Event Handler (on)

To set an event handler, use the on method:

Specify the event name and the callback function for the event as arguments as shown below.

this.vdos.button.on("click", () => {
    console.log("button click event");
});

In terms of specifications, it is similar to the native JavaScript addEventlistner,
but there are some differences in the arguments to the callback function.

The first argument is the target information, just like addEventlistner, but the second argument is the virtual DOM object that executed the event.

this.vdos.button.on("click", (e, my) => {
    console.log(e);
    console.log(my);    // <= VirtualDom Class Object
});

By using the second argument,
you can set any data to the button as shown below,
and retrieve the set data when you press it.

this.vdos.button
    .data("data", { id: 23 })       // <= Set the data to be passed
    .on("click", (e, my) => {

        // Get Data
        const data = my.data("data");

        console.log(data);          // <= Outputs { id: 23 }
    })
;

Among the events in the on method,
the simple set method that can be written is listed below.

When an element is pressed (onClick)

Set an event handler for when an element is clicked or tapped.

this.vdos.button.onClick = () => {
    console.log("button click event");
};

When you double-click an element (onDblClick)

Set an event handler for double-clicking an element.

this.vdos.button.onDblClick = () => {
    console.log("button DoubleClick event");
};

When an element is changed (onChange)

Set an event handler when an element (input value or selected value) is changed.

this.vdos.button.onChange = () => {
    console.log("button Change event");
};

When the focus of an element changes (onFocus)

Set an event handler for when focus changes to an element.

this.vdos.button.onFocus = () => {
    console.log("button Focus event");
};

When the mouse click begins (onMouseDown)

Sets an event handler for when the mouse button is pressed within an element.

this.vdos.button.onMouseDown = () => {
    console.log("button Mouse Down event");
};

When the mouse click ends (onMouseUp)

Sets an event handler for when the mouse button is released within an element.

this.vdos.button.onMouseUp = () => {
    console.log("button Mouse Up event");
};

When the mouse cursor moves (onMouseMove)

Set an event handler for when the mouse cursor moves within an element.

this.vdos.button.onMouseMove = () => {
    console.log("button Mouse Move event");
};

Event Execution (dispatch)

To execute an event arbitrarily, use the dispatch method.

Specify the name of the event to be implemented as an argument.

this.vdos.button.dispatch("click");

Get/Set Input Value (value)

If the element is an input field or a pull-down menu,
use value (setter/getter) to get and set the value.

As an example, prepare the following input field on the HTML side.

<input type="text" v="name">

The input value can be obtained as follows:

const name = this.vdos.name.value;

To set the input value, use the following:

this.vdos.name.value = "input area..";

Get/Set Checkbox Selection Value

In the case of checkboxes, the get/set type is an array value.
For example, if you specify a check box in HTML as follows:

<label><input type="checkbox" v="checkbox" value="0">0</label>
<label><input type="checkbox" v="checkbox" value="1">1</label>
<label><input type="checkbox" v="checkbox" value="2">2</label>
<label><input type="checkbox" v="checkbox" value="3">3</label>

You can get the selection state with the following code:

console.log(this.vdos.checkbox.value);

However, the retrieved value is not a string,
but the selected checkbox values ​​are returned as an array value, as shown below.

[ 0, 2 ]

When setting, specify the value as an array.

this.vdos.checkbox.value = [ 1, 2 ];

Get file selection

If the input field is a file selection, the data is returned as a buffer.

<input type="file" v="file">

After selecting a file from the file selection field above,
retrieve it with the following code

console.log(this.vdos.file.value);

The retrieved data is in the form of the VirtualDomFile interface,
which is an extension of the FILE interface.
For details about the File interface, see the official MDN page.

result contains the file data converted to base64,
so use this when handling file data.

The results are as follows:

{
    name: "file.jpg",
    lastModified : "2025-0101 T 00:00:00",
    lastModifiedDate : "2025-0101 T 00:00:00",
    result: "***************************...",
    ...
}

Get/change checkbox selection state (checked)

You can use checked to get and change the selection state of a single checkbox.

To get the selection status of a checkbox:
The boolean type is returned. If the item is selected,
true is returned. If the item is not selected, false is returned.

console.log(this.vdos.checkbox.checked);

To change the selection state of a check box, use the following:
Can be forced to true or false

this.vdos.checkbox.checked = true;

Adding options to the drop-down menu (selectAddParam)

Use selectAddParam if the element is a drop-down menu and you want to add options to it.

Specify the object as follows:

this.vdos.select.selectAddParam({
    0: "Option A",
    1: "Option B",
    2: "Option C",
    3: "Option D",
});

In reality, it is set as follows:

<select>
    <option value="0">Option A</option>
    <option value="1">Option B</option>
    <option value="2">Option C</option>
    <option value="3">Option D</option>
</select>

If you specify nesting as shown below, it will be placed in optgroup.

this.vdos.select.selectAddParam({
    0: "Option A",
    1: "Option B",
    2: "Option C",
    3: "Option D",
    "Option E and onwards": {
        4: "Option E",
        5: "Option F",
        6: "Option G",
    },
});

In