Create use-print how-to example

how-to/use-print/README.md

@@ -0,0 +1,48 @@
+# Use Print
+
+## How it Works
+
+This example demonstrates how to use the `view.print()` function to print the current view. The app contains a button that triggers the print dialog when clicked.
+
+For more information, see the [OpenFin View.print documentation](https://developer.openfin.co/docs/javascript/stable/classes/OpenFin.View.html#print).
+
+## Get Started
+
+Follow the instructions below to get up and running.
+
+### Set up the project
+
+1. Install dependencies and do the initial build. Note that these examples assume you are in the sub-directory for the example.
+
+```shell
+npm run setup
+```
+
+2. Build the project.
+
+```shell
+npm run build
+```
+
+3. Start the test server in a new window.
+
+```shell
+npm run start
+```
+
+4. Start the Platform application.
+
+```shell
+npm run client
+```
+
+### What you will see
+
+1. A platform window with a print button
+2. Clicking the print button will open the system print dialog
+3. The view content will be available for printing
+
+## A note about this example
+
+This is an example of how to use OpenFin APIs to configure OpenFin Container. Its purpose is to provide an example and suggestions. **DO NOT** assume that it contains production-ready code. Please use this as a guide and provide feedback. Thanks!
+

how-to/use-print/client/src/provider.ts

@@ -0,0 +1,3 @@
+import type OpenFin from "@openfin/core";
+
+fin.Platform.init().catch((error) => console.error(error));

how-to/use-print/client/src/shapes.ts

@@ -0,0 +1,17 @@
+import type OpenFin from "@openfin/core";
+/**
+ * Map of the external clients.
+ */
+export type ExternalClientMap = Map<OpenFin.ApplicationIdentity["uuid"], OpenFin.InteropClient>;
+
+/**
+ * External client context.
+ */
+export interface ExternalContext extends OpenFin.Context {
+	/**
+	 * The client information.
+	 */
+	_clientInfo?: {
+		uuid: string;
+	};
+}

how-to/use-print/client/src/window.ts

@@ -0,0 +1,69 @@
+import type OpenFin from "@openfin/core";
+
+export const CONTAINER_ID = "layout-container";
+const openfinWindow: OpenFin.Window = fin.Window.getCurrentSync();
+const openfinApplication: OpenFin.Application = fin.Application.getCurrentSync();
+
+let lastFocusedView: OpenFin.Identity;
+
+openfinApplication
+	.on("view-focused", (viewEvent): void => {
+		lastFocusedView = viewEvent.viewIdentity;
+	})
+	.catch((error) => console.error(error));
+
+window.addEventListener("DOMContentLoaded", async () => {
+	await fin.Platform.Layout.init({ containerId: CONTAINER_ID });
+	await setupTitleBar();
+});
+
+/**
+ * Setup the content for the title bar.
+ */
+async function setupTitleBar(): Promise<void> {
+	const printBtn = document.querySelector("#print-button");
+	const minBtn = document.querySelector("#minimize-button");
+	const maxBtn = document.querySelector("#expand-button");
+	const closeBtn = document.querySelector("#close-button");
+
+	if (printBtn && minBtn && maxBtn && closeBtn) {
+		printBtn.addEventListener("click", printView);
+		minBtn.addEventListener("click", minimizeWindow);
+		maxBtn.addEventListener("click", maxOrRestore);
+		closeBtn.addEventListener("click", closeWindow);
+	}
+}
+
+/**
+ * Print the view.
+ */
+async function printView(): Promise<void> {
+	await openfinWindow.print({content: "views", includeSelf: false});
+}
+/**
+ * Maximize or restore the window.
+ * @returns Nothing.
+ */
+async function maxOrRestore(): Promise<void> {
+	if ((await openfinWindow.getState()) === "normal") {
+		return openfinWindow.maximize();
+	}
+
+	return openfinWindow.restore();
+}
+
+/**
+ * Close the window.
+ * @returns Nothing.
+ */
+async function closeWindow(): Promise<void> {
+	return openfinWindow.close();
+}
+
+/**
+ * Minimize the window.
+ * @returns Nothing.
+ */
+async function minimizeWindow(): Promise<void> {
+	return openfinWindow.minimize();
+}

how-to/use-print/client/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "es2021",
+		"module": "ES2020",
+		"sourceMap": true,
+		"rootDir": "./src",
+		"outDir": "build",
+		"skipLibCheck": true,
+		"strict": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"moduleResolution": "node",
+		"types": ["./types/fin"]
+	},
+	"include": ["./src/**/*.ts"]
+}

how-to/use-print/client/types/fin.d.ts

@@ -0,0 +1,5 @@
+import type { fin as FinApi } from "@openfin/core";
+
+declare global {
+	const fin: typeof FinApi;
+}

how-to/use-print/client/webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+
+module.exports = [
+	{
+		entry: './client/src/provider.ts',
+		devtool: 'inline-source-map',
+		module: {
+			rules: [
+				{
+					test: /\.tsx?$/,
+					use: 'ts-loader',
+					exclude: /node_modules/
+				}
+			]
+		},
+		resolve: {
+			extensions: ['.tsx', '.ts', '.js']
+		},
+		output: {
+			filename: 'provider.bundle.js',
+			path: path.resolve(__dirname, '..', 'public', 'js')
+		}
+	},
+	{
+		entry: './client/src/window.ts',
+		devtool: 'inline-source-map',
+		module: {
+			rules: [
+				{
+					test: /\.tsx?$/,
+					use: 'ts-loader',
+					exclude: /node_modules/
+				}
+			]
+		},
+		resolve: {
+			extensions: ['.tsx', '.ts', '.js']
+		},
+		output: {
+			filename: 'window.bundle.js',
+			path: path.resolve(__dirname, '..', 'public', 'js')
+		}
+	}
+];

how-to/use-print/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "use-print",
+	"version": "40.104.2",
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"kill": "node ./scripts/kill.mjs",
+		"client": "node ./scripts/launch.mjs",
+		"build-client": "webpack build --config ./client/webpack.config.js --mode=development",
+		"build": "npm run build-client",
+		"start": "npx --yes http-server ./public -p 5050 -c-1",
+		"setup": "cd ../../../ && npm install && cd how-to/use-interop/setup-multi-platform-interop && npm run build"
+	},
+	"author": "adam.saland@openfin.co",
+	"license": "SEE LICENSE IN LICENSE.MD",
+	"devDependencies": {
+		"@openfin/node-adapter": "40.100.7",
+		"ts-loader": "^9.5.1",
+		"typescript": "^5.4.5",
+		"webpack": "^5.91.0",
+		"webpack-cli": "^5.1.4",
+		"@openfin/core": "40.100.7"
+	}
+}