["WebApp Open Format"]

WebApp Open Format

ArOZ Online WebApps sometime will be required to open files / folders from file explorer or Desktop module. There are three main way to open an WebApp on any viewing interface on this system.

Direct Open Mode - Open directly like a webpage.
FloatWindow Open Mode - Open with FloatWindow.php with module defined launching parameters
Embedded Open Mode - Open a given file or folder with filepath and filename parameters

Opening Modes

Direct Open Mode

This opening mode is straight forward. The user's browser will be redirected to the index.html or index.php of the module's root and like a normal websites, there is nothing special other than checking for VDI Mode and hide the buttons / functions that might accidentally bring the user back into the grid menu.

FloatWindow Open Mode

FloatWindow Open Mode / fwMode is the method in which Desktop calls while launching an WebApp using Desktop Icons. This function is provided by the "FloatWindow.php" function inside the WebApp root and the php file will be loaded into an iframe hidden in the Function Bar interface. The php should create a FloatWindow using Function Bar build in floatWindow control API.

Here is an example for the FloatWindow.php

<?php
include_once '../auth.php';
?>
<html>
<body>
Now Loading...
<script src="FloatWindow.js"></script>
<script>
var uid = (new Date()).getTime();
var fw = new FloatWindow("index.php?mode=fw","Audio","music", uid,545,765,undefined,undefined,undefined,true);
fw.launch();
</script>
</body>
</html>

Here is an example of FloatWindow.js

class FloatWindow {
  constructor(src, title, iconTag="folder", uid ,ww=undefined, wh=undefined, posx=undefined, posy=undefined, resizable=true, glassEffect=false) {
	this.src =  location.href.replace(/[^/]*$/, '') + src;
	this.title = title;
	this.iconTag = iconTag;
	this.uid = uid;
    this.ww = ww;
    this.wh = wh;
	this.posx = posx;
	this.posy = posy;
	this.resizable = resizable;
	this.glassEffect = glassEffect;
  }
  
  // Method
  launch() {
    parent.newEmbededWindow(this.src,this.title,this.iconTag,this.uid,this.ww,this.wh,this.posx,this.posy,this.resizable,this.glassEffect);
	//console.log(this.src,this.title,this.iconTag,this.uid,this.ww,this.wh,this.posx,this.posy,this.resizable,this.glassEffect);
  }
}

More detail information of floatWindow launching can be found in "Float Window" page.

Embedded Open Mode

Embedded Open Mode (or in another commonly known term: Open {...} with {...}) is a function that allow users to open a file with a module. This function require two script: index.php and embedded.php. Developers can use either one of them to perform the external file opening request. In most case, there are two opening method.

Opening Embedded Mode in Virtual Desktop Mode

Under VDI Mode, the opening of files on Desktop will require embedded.php for launching. The filename and filepath can be get from two get variable filename and filepath.

filename: The filename in human-readable format. This might sometime be empty and for reference only.
filepath: The relative path of the file located from the /AOR.

Here is an example php section to receive the filename and filepath from the launching paramter.

<?php
$filepath = "";
$filename = "";
if (isset($_GET['filepath'])){
	$filepath = str_replace("./","",str_replace("../","",str_replace("\\","/",$_GET['filepath'])));
}
if (isset($_GET['filename'])){
	$filename = $_GET['filename'];
}
?>

If you prefer using a seperate php to handle external file inputs, you can program the handling interface in embedded.php and add the following code in index.php to redirect any File Explorer open-with request to the embedded.php.

if (isset($_GET['filepath'])){
	header("Location: embedded.php?filepath=" . $_GET['filepath']);
}

Open-With on File Explorer

If the user request embedded open mode in File Explorer, the request will be sent to index.php instead of embedded.php. In this case, the user can choose to redirect the request to embedded.php or handle the request in index.php. In most case, we recommended redirect the request either from index.php to embedded.php or from embedded.php to index.php as this will reduce the development cost of the WebApp.

However, it is worth notice that in most case, users will launch WebApps in either VDI mode or Normal Mode in which in both opening case, the developer should check for VDI Mode for arranging the WebApp interface.

Background Worker (Deprecated)

Provide background worker function with backgroundworker.php. This access method is no longer used since BETA phrase.

Pass-in Access Path

The filepath paramter will provide the file location in relative to /AOR or absolute path from /media/. Your WebApp module might recive one of the three types of incoming filepaths.

Internal Filepath, start with ./ (aka /AOR), e.g. ./Audio/uploads/test.mp3
External Filepath with extDiskAccess handler, start with ./SystemAOB/functions/extDiskAccess.php?file=...
External Filepath without extDiskAccess handler, e.g. /media/storage1/test.mp3

For type 1 and 2, you can directly load them to the user by putting the filepath in src elements. However, for type 3 filepaths, you will need to call to the External Disk Handler using ./SystemAOB/functions/extDiskAccess.php?file= and follow by the absolute path of the file.

Here is a quick example for checking the filepath, referenced from Video module

if (file_exists($_GET['filepath'])|| strpos($_GET['filepath'],"extDiskAccess.php")){
	echo '<video id="player" style="position:fixed; height:100%; max-width:100% ;top:0; left:0;" src="'.$_GET['filepath'].'" autoplay controls></video>';
	$filename = basename($_GET['filepath'], ".mp4");
	if (ctype_xdigit(str_replace("inith","",$filename)) && strlen(str_replace("inith","",$filename)) % 2 == 0) {
		$decodedName = hex2bin(str_replace("inith","",$filename));
	}else{
		$decodedName = $filename;
	}
}else{
	die('<i class="remove icon"></i>API call error: 404 File not found.');
}

4.md 6.0 KB Historique Raw