Skip to main content

Одностраничные приложения

Описание​

Платформа позволяет формировать одностраничное браузерное web-приложение на платформе React. Это приложение описывается в каталоге файле client/src/.

Главный файл описания – исполняемый на клиенте client/src/index.tsx, в котором на языке TypeScript описаны web-страницы.

Каждое приложение размещается отдельно в своём подкаталоге и описывается файлом с расширением tsx. Например, «client/src/Start/» и файл описания «StartPage.tsx», «client/src/Reports/» и файл описания «ReportsPage.tsx».

Пример​

client/src/index.tsx
/// <reference types="@hardroller/configuration-core/src/hardroller" />

import * as React from "react";

import { Guid } from "@hardroller/core";

import { ApplicationModelProject, AsyncDownloadConnector, ProjectConnector } from "@hardroller/client-connector-core";

import StartPage from "./Start/StartPage";
import ReportsPage from "./Reports/ReportsPage";

class CustomPageFactory {
	createPage(
		pageName: string,
		instanceId: Guid | null,
		applicationModel: ApplicationModelProject,
		projectConnector: ProjectConnector,
		reloadApplicationModel: () => void,
		asyncDownloadConnector: AsyncDownloadConnector
	): React.ReactNode {

		/* загрузка страницы "StartPage" */
		if (pageName === "Start") {
			/* чтобы мы попали сюда, в меню должна иметь вид ".../Application/.../Pages/Start" */
			return () => <StartPage
				pageName={pageName}
				applicationModel={applicationModel}
				instanceId={instanceId}
				projectConnector={projectConnector}
				asyncDownloadConnector={asyncDownloadConnector}
				reloadApplicationModel={reloadApplicationModel}
			/>;
		}

		/* загрузка страницы "ReportsPage" */
		else if (pageName === "Reports") {
			/* чтобы мы попали сюда, в меню должна иметь вид ".../Application/.../Pages/Reports" */
			return () => <ReportsPage
				pageName={pageName}
				applicationModel={applicationModel}
				instanceId={instanceId}
				projectConnector={projectConnector}
				asyncDownloadConnector={asyncDownloadConnector}
				reloadApplicationModel={reloadApplicationModel}
			/>;
		} else {
			return null;
		}
	}
}

export const customPageFactory = new CustomPageFactory();

Пояснения​

Клиентский компонент конфигурации объявляет сущность CustomPageFactory с методом createPage, через который Платформа передает браузерному приложению следующие параметры:

pageName – имя страницы (приложения) которую запросил пользователь;

applicationModel – объект сущности ApplicationModelProject, содержащий необходимую информацию о текущем пользователе, организации и проекте;

instanceId – идентификатор экземпляра сущности, с которым будет работать страница (приложение) - не обязательно;

projectConnector – объект сущности ProjectConnector с методами для вызова API Платформы для клиентского приложения (он же используется стандартными формами редактирования);

asyncDownloadConnector – объект сущности asyncDownloadConnector с методами для запуска фоновых задач;

reloadApplicationModel – функция, вызывающая принудительную перезагрузку клиентским приложением платформы applicationModel, загруженной изначально (применяется, если страница (приложение) вызывала методы API, вносящие изменения в модель данных).

Метод должен вернуть корректно сформированный компонент React.