ProzillaOS/docs/features/applications/README.md

← Back

Applications

Applications (sometimes shortened to apps) are processes that open a window when ran. The window allows the user to view and interact with the app. Apps have a title, id and a windowContent property that refers to the React component of the application interface.

Table of Contents

• Terminal
• File Explorer
• Media Viewer
• Text Editor
• Settings

Common components

Header menu

The header menu is a useful component that can be added to app windows for quick access to useful functions, like saving and opening files. The header menu can also be used to add shortcuts for functions.

Example

// components/applications/example/Example.jsx

<HeaderMenu
	options={{
		"File": {
			"New": () => {
				// ...
			},
			"Save": () => {
				// ...
			},
			"Exit": () => {
				// ...
			},
		},
	}}
	shortcuts={{
		"File": {
			"New": ["Control", "e"],
			"Save": ["Control", "s"],
			"Exit": ["Control", "x"],
		},
	}}
/>

Template components

Webview

The webview template can be used to turn a webpage into an application by simply setting a source property.

Example

// features/applications/applications.js

import { WebView } from "../../components/applications/templates/WebView.jsx";

export default class ApplicationsManager {
	static APPLICATIONS = [
		// ...
		new Application("Web App", "web-app",  WebView, { source: "https://prozilla.dev/" }),
	]

	// ...
}

Examples

Adding a new application

// components/applications/example/Example.jsx

export function Example() {
	return (
		<p>Application interface goes here.</p>
	)
}

// features/applications/applications.js

import { Example } from "../../components/applications/example/Example.jsx";

export default class ApplicationsManager {
	static APPLICATIONS = [
		// ...
		new Application("Example App", "example", Example),
	]

	// ...
}