Smartface framework does not contain the DOM layer unlike browsers. For this reason, any JS library that depends on the DOM will not work. The goal of this repository is to create alternatives that make Smartface runtime work similar to popular libraries for the browser, including libraries that use the DOM.
As a convention, the libraries are added under the scripts/libs
folder.
When including files, the required syntax is to call the include
function of the Smartface framework. This function requires that all files are given relative to the scripts
folder.
In this repository, files that need to be placed under the libs
folder are located under the libs
folder.
If one were to look at SMFAjax.js
file, it conditionally includes certain files with the assumptions stated above.
if (typeof Object.assign !== 'function') {
include('libs/Smartface/polyfills.js');
}
if (typeof formUrlEncoded !== 'function') {
include('libs/Smartface/formUrlEncoded.js');
}
When developing your own libraries, you can use this pattern for your conditional imports.
Before adding or extending a library, first step requires checking which features Smartface runtime supports. Existing libraries may provide support for almost complete functionality of what is required. Most of the time, easiest libraries to use are those that are small, and do not try to do everything. Larger a framework gets, more likely that it will have dependencies that are browser related. In certain cases, a library might almost work out-of-the-box, but it might be required to handle some browser related code. In those cases, one can either implement a shim / polyfill to add or fake those features in Smartface, or simply remove some of its code that depend on those browser features.
Examples for are placed under relative folder of examples
folder. In order to run the examples place the files and use some of the libraries provided as instructed.
include("libs/Smartface/SMFAjax.js");
is to use the library. This library internaly uses polyfills
and formUrlEncoded
libraries to be placed under same folder libs/Smartface/
.
You can either review code blocks, copy paste them or include
them from the places where you are putting them. In order to use examples you can use the following web server with the code given below:
var MyApp = {
BASE_URL : "http://jslibs.azurewebsites.net/examples"
};
While developing application in some cases it will be helpful to observe the network transfer informatin sent and recieved from XHR.
include("libs/Smartface/XHRProfiler.js");
is to use the library. After adding this line, it is possible to change profiling from code.
XMLHttpRequest.profiling.enabled = true;
from XMLHttpRequest.profiling.
other properties shows what will be included within the displayed log:
- requestHeaders
- requestBody
- responseBody
- responseHeaders
- method
- url
- digestLog - Combines request & response in single message, after response is recieved
Since Android 6.0 (Marshmallow) some intensive permissions are asked to user regardles they are being stated in manifest file. Smartface has implemented same usage of Native Android Permission management. However in terms of JavaScript using the same structure is not that effective. With using this library:
checkPermission
function checks & requests permissions if required with a callback. It is possible to state a rationale (reason) why those permissions are requiredapplyPermission
function is same asFunction.prototype.apply
withcheckPermission
functionality
This library mimics nodeJS require implementation on Smartface. This is just the require pattern library, does not provide any nodeJS internal features. In that case it will throw error for module not found.
- Does not support built-in internal node modules (such as fs, http)
- Works only with files within the scripts folder. Does not fetch files on the web like load and include does
- Requires an entry point, other than the project flow. Files included or loaded by other flow which does not link with entry point are not in require scope
- initRequire only once
- In order to work with npm, node_modules folder should be under scripts folder
You need to have a seperate js file which will be your entry point. In the example it is given as mainfile.js
include("libs/require.js");
initRequire("mainfile.js");
Within mainfile, it is possible to use require. Also the files required within will get require, module and exports variables. Other files loaded with load or include will not have access to those variables. When opting in into a require scope, in order to remain in require scope, other files should be loaded only with require.
To create node_modules folder:
mkdir -p ~/workspace/scripts/node_modules
cd ~/workspace/scripts
make sure that current directory is ~/workspace/scripts
while using npm
Fileviewer.js is a simple file viewer. It dynamically creates a new viewer page and shows the file according to extension. To see it in a action, just pass your file path to fileViewer.openDocument() .
var fileViewer = new SMF.Utils.Fileviewer();
fileViewer.openDocument(filePath);
Oracle libray readme file is located under libs/Oracle/README.md
Akbank libray readme file is located under libs/Akbank/README.md
- Repeatbox helper library
- View library
fetch
polyfill- Could use code transpilation tools like
Babel
to userequire
like inNode.js
. Transpilation could convertrequire
call intoinclude
in the background. - XHRProfiler with console.log