From 4c2f0031f5a55a0db9fef62e4027ac863795032f Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 28 Mar 2018 16:54:29 +0200 Subject: [PATCH] Make some fixes --- How-to-port-an-app-to-et2.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/How-to-port-an-app-to-et2.md b/How-to-port-an-app-to-et2.md index c896d29..d71c8c6 100644 --- a/How-to-port-an-app-to-et2.md +++ b/How-to-port-an-app-to-et2.md @@ -7,7 +7,7 @@ As a show case scenario, we would like to port an app like Timesheet from epl 11 ### Step 1: Use new etemplate class With all new api changes, first we need to add Etemplate namespace to the begining of our class. -``` +```php use EGroupware\Api\Etemplate; ``` @@ -15,13 +15,13 @@ use EGroupware\Api\Etemplate; Then we should look for lines where we have old etemplate definitions and replace them with new Etemplate class definition. **Original Code:** -``` +```php function edit($content = null,$view = false) { $etpl = new etemplate ('timesheet.edit'); ``` **New Code:** -``` +```php function edit($content = null,$view = false) { $etpl = new Etemplate ('timesheet.edit'); @@ -32,7 +32,7 @@ We need to add new version dependency in our app dependency. For instance, add v timesheet/setup/setup.inc.php **Original Code:** -``` +```php /* Dependencies for this app to work */ $setup_info[TIMESHEET_APP]['depends'][] = array( 'appname' => 'phpgwapi', @@ -44,7 +44,7 @@ $setup_info[TIMESHEET_APP]['depends'][] = array( ); ``` **New Code:** -``` +```php $setup_info[TIMESHEET_APP]['depends'][] = array( 'appname' => 'api', 'versions' => Array('17.1') @@ -56,7 +56,7 @@ $setup_info[TIMESHEET_APP]['depends'][] = array( In order to actually get advantage of et2 technology and writing our own application javascript specific codes by using lots of powerful client-side APIs, its a good practice to define a app.js under AppFolder?/js folder. In this case we would create an app.js file under timesheet\js\app.js. -``` +```javascript app.classes.timesheet = AppJS.extend( { appname: 'timesheet', @@ -108,10 +108,13 @@ app.classes.timesheet = AppJS.extend( ``` **Note: this is just a good practice example to show how to define an app.js for timesheet app. Options for defining new object and functions inside that app.js object is endless.** -Inline Scripts and Content Security Policy (CSP): et2 uses CSP which is very restricted about inline scripts, therefore in order to take advantage of CSP we should make our code compatible with it by not using inline scripts and instead trying to implement them in our app.js. For instance in our timesheet scenario we do have couple of inline javascript statements which we need to port them, like: +> **Inline Scripts and Content Security Policy (CSP):** *et2 uses CSP which is very restricted about inline scripts, therefore in order to take advantage of CSP we should make our code compatible with it by not using inline scripts and instead trying to implement them in our app.js.* + + +For instance in our timesheet scenario we do have couple of inline javascript statements which we need to port them, like: **Original Code** -``` +```php function index($content = null,$msg='') { ... @@ -129,7 +132,7 @@ function index($content = null,$msg='') ``` **New Code** -``` +```php function index($content = null,$msg='') { ... @@ -146,7 +149,7 @@ function index($content = null,$msg='') ``` And we need to implement our filter_change method in app.js file, like: -``` +```javascript filter_change: function() { var filter = this.et2.getWidgetById('filter');