App

App là component chính chứa toàn bộ nội dung, cài đặt chung của ứng dụng

• View là container chứa các Page nằm bên trong App, 1 App có thể có 1 hoặc nhiều View, mặc định mỗi View sẽ kế thừa các routes từ App, tuy nhiên có thể tuỳ chỉnh với mỗi View cụ thể.
• Page là component hiển thị nội dung trang, khi app có định tuyến, chia ra nhiều routes, mỗi Page sẽ ứng với một route cụ thể, các route được khởi tạo mặc định trong app ( đọc từ trường pages trong file app-config.json) hoặc routes cụ thể khai báo trong View

App Properties

App component nhận tất cả tham số thông qua props.

App Parameters

Danh sách các tham số:

Parameter	Type	Default	Description
theme	string	auto	Chủ đề của ứng dụng. Có thể là ios, md hoặc auto. Trường hợp là auto thì theme sẽ được đặt iOS cho iOS devices, MD theme trên android.
themeDark	boolean	false	Khởi tạo ứng dụng với Dark Theme
language	string		Ngôn ngữ ứng dụng. Mặc định là ngôn ngữ hiện tại trên browser/webview (VD: navigator.language).
routes	array	đọc trong trường "pages" trong app-config.json	Mảng các route mặc định cho tất cả các view
on	object	{}	Khởi tạo các events handlers cho events . Ví dụ: const zmpParams = { on: { init: function () { console.log("App initialized"); }, pageInit: function () { console.log("Page initialized"); }, }, }; return <App {...zmpParams}/>
Touch Module Parameters
touch	object		Object với các tham số: const params = { touch: { tapHold: true, }, };

touch parameters

Parameter	Type	Default	Description
touchClicksDistanceThreshold	number	5	Khoảng cách (tính theo px) giúp chặn thao tác vuốt nhẹ màn hình. Nếu khoảng cách tap/move lớn hơn giá trị này thì sự kiện "click" sẽ không bị triggered. (Chỉ sử dụng cho touch events khi fastClicks disabled).
disableContextMenu	boolean	false	Đặt true để vô hiệu hóa context menu (với chuột phải hoặc nhấn giữ)
tapHold	boolean	false	Bật cho phép nhấn giữ
tapHoldDelay	number	750	Quyết định thời gian (thính theo ms) user phải gữi để sự kiện nhấn giữ được kích hoạt vào element đích
tapHoldPreventClicks	boolean	true	Mặc định được kích hoạt, sự kiện click sẽ không được kích hoạt sau sự kiện nhân giữ màn hình
activeState	boolean	true	Khi kích hoạt, sẽ tự động thêm class "active-state" vào phần tử đang được active (:active).
activeStateElements	string	a, button, label, span, .link, .item-link,	CSS selector cho phép kích hoạt activeState khi click
activeStateOnMouseMove	boolean	false	Nếu kích hoạt sẽ giữ class "active state" sau khi mouse di chuyển
iosTouchRipple	boolean	false	Kích hoạt hiệu ứng touch ripple cho iOS theme
mdTouchRipple	boolean		Kích hoạt hiệu ứng touch ripple cho MD theme (android)
auroraTouchRipple	boolean	false	Kích hoạt hiệu ứng touch ripple cho Aurora theme
touchRippleElements	string	.ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio,	CSS selector tới phần tử sẽ áp dụng hiệu ứng touch ripple khi click
touchRippleInsetElements	string	.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .md .navbar .link.back	CSS selector của element áp dụng hiệu ứng inset touch ripple khi click

App Methods & Properties

zmp instance cung cấp các phương thức và thuộc tính:

Ví dụ:

import { zmp } from "zmp-framework/react";

| Properties | | ------------------------ | ------------------------------------------------------------------------- | | zmp.routes | App routes | | zmp.language | App language | | zmp.el | App root HTML element | | zmp.$el | zmpDom instance với app root HTML element | | zmp.rtl | Boolean thuộc tính cho biết ứng dụng đang ở layout RTL hay không | | zmp.theme | String chủ đề hiện tại của ứng dụng | | zmp.width | App width in px | | zmp.height | App height in px | | zmp.left | App left offset in px | | zmp.top | App top offset in px | | zmp.initialized | Boolean thuộc tính cho biết app đã được khởi tạo hay chưa | | zmp.$ | zmpDom alias | | zmp.params | App parameters | | zmp.online | Boolean thuộc tính cho biết app đang kết nối hay không. (true nếu online) | | Methods | | zmp.on(event, handler) | Thêm event handler | | zmp.once(event, handler) | Thêm event handler tự động xóa sau khi được kích hoat | | zmp.off(event, handler) | Xóa event handler | | zmp.off(event) | Xóa tất cả handlers cho một event cụ thể | | zmp.emit(event, ...args) | Kích hoạt event trên instance | | zmp.init() | Khởi tạo ứng dụng khi init App component với tham số init: false |

App Events

App instance emits các events:

Event	Arguments	Description
init		Event kích hoạt khi ứng dụng được khởi tạo.
resize		Event sẽ kích hoạt khi kích thước màn hình ứng dụng thay đổi(window resize).
orientationchange		Event will sẽ kích hoạt khi xoay màn hình (window orientantion change).
click	(event)	Event sẽ kích hoạt khi người dùng click
touchstart:active	(event)	Event sẽ kích hoạt khi người dùng touch element (mousedown), event được thêm dưới dạng active listener
touchmove:active	(event)	Event sẽ kích hoạt khi người dùng thực hiện touch move (mousemove), event được thêm dưới dạng active listener
touchend:active	(event)	Event sẽ kích hoạt sau khi người dùng kết thúc hành động touch (mouseup) event được thêm dưới dạng active listener
touchstart:passive	(event)	Event sẽ kích hoạt khi người dùng touch element (mousedown), event được thêm dưới dạng pasive listener
touchmove:passive	(event)	Event sẽ kích hoạt khi người dùng thực hiện touch move (mousemove), event được thêm dưới dạng passive listener
touchend:passive	(event)	Event sẽ kích hoạt sau khi người dùng kết thúc hành động touch (mouseup) event được thêm dưới dạng passive listener
online		Event được kích hoạt khi app online
offline		Event được kích hoạt khi app offline
connection	(isOnline)	Event kích hoạt khi trạng thái network thay đổi

Ví dụ:

zmp.on("connection", function (isOnline) {
  if (isOnline) {
    console.log("app is online now");
  } else {
    console.log("app is offline now");
  }
});

Ví dụ

Giả sử Project của bạn có cấu trúc như bên dưới:

Code demo fallback when rendering server side!