mirror of
https://github.com/nextcloud/documentation.git
synced 2026-01-03 10:20:02 +07:00
more content for normal app development
This commit is contained in:
Bernhard Posselt
@@ -3,4 +3,39 @@ CSS
|
||||
|
||||
.. sectionauthor:: Bernhard Posselt <nukeawhale@gmail.com>
|
||||
|
||||
If you have to include an image or css file in your CSS, prepend the following to your path:
|
||||
|
||||
* **%appswebroot%**: gets the absolute path to your app
|
||||
* **%webroot%**: gets the absolute path to owncloud
|
||||
|
||||
For example:
|
||||
|
||||
.. code-block:: css
|
||||
|
||||
.folder > .title {
|
||||
background-image: url('%webroot%/core/img/places/folder.svg');
|
||||
}
|
||||
|
||||
|
||||
|
||||
Formfactors
|
||||
-----------
|
||||
ownCloud automatically detects what kind of form factor you are using.
|
||||
|
||||
Currently supported are:
|
||||
|
||||
* **mobile**: works well on mobiles
|
||||
* **tablet**: optimized for devices like iPads or Android Tablets
|
||||
* **standalone**: mode where only the content are an App is shown. The header, footer and side navigation is not visible. This is useful if ownCloud is embedded in other applications.
|
||||
|
||||
The auto detection can be overwritten by using the “formfactor” GET variable in the url::
|
||||
|
||||
index.php/myapp?formfactor=mobile
|
||||
|
||||
If you want to provide a different stylesheet or javascript file for mobile devices just suffix the formfactor in the filename, like::
|
||||
|
||||
style.mobile.css
|
||||
|
||||
or::
|
||||
|
||||
script.tablet.css
|
||||
|
||||
@@ -10,6 +10,7 @@ App Developement (ownCloud App API)
|
||||
classloader
|
||||
schema
|
||||
database
|
||||
templates
|
||||
static
|
||||
css
|
||||
javascript
|
||||
|
||||
@@ -9,66 +9,4 @@ Static content consists of:
|
||||
* **js/**: all JavaScript files
|
||||
* **css/**: all CSS files
|
||||
|
||||
.. note:: CSS and JavaScript are compressed by ownCloud so if the CSS or JavaScript do not seem to get updated, check if the debug mode is enabled. To enable it see :doc:`../intro/gettingstarted`
|
||||
|
||||
|
||||
|
||||
JavaScript and CSS
|
||||
------------------
|
||||
|
||||
JavaScript files go to the **js/** directory, CSS files to the **css/** directory. They are both minified in production and must therefore be declared in your controller method.
|
||||
|
||||
To add a script in your controller method, use the controller's **addScript** and **addStyle** methods.
|
||||
|
||||
.. code-block:: php
|
||||
|
||||
<?php
|
||||
|
||||
// in your controller
|
||||
public function index(){
|
||||
|
||||
// adds the js/admin.js file
|
||||
$this->api->addScript('admin');
|
||||
|
||||
// adds the css/admin.css file
|
||||
$this->api->addStyle('admin');
|
||||
|
||||
// etc
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
If you have to include an image or css file in your CSS, prepend the following to your path:
|
||||
|
||||
* **%appswebroot%**: gets the absolute path to your app
|
||||
* **%webroot%**: gets the absolute path to owncloud
|
||||
|
||||
For example:
|
||||
|
||||
.. code-block:: css
|
||||
|
||||
.folder > .title {
|
||||
background-image: url('%webroot%/core/img/places/folder.svg');
|
||||
}
|
||||
|
||||
Formfactors
|
||||
-----------
|
||||
ownCloud automatically detects what kind of form factor you are using.
|
||||
|
||||
Currently supported are:
|
||||
|
||||
* **mobile**: works well on mobiles
|
||||
* **tablet**: optimized for devices like iPads or Android Tablets
|
||||
* **standalone**: mode where only the content are an App is shown. The header, footer and side navigation is not visible. This is useful if ownCloud is embedded in other applications.
|
||||
|
||||
The auto detection can be overwritten by using the “formfactor” GET variable in the url::
|
||||
|
||||
index.php/myapp?formfactor=mobile
|
||||
|
||||
If you want to provide a different stylesheet or javascript file for mobile devices just suffix the formfactor in the filename, like::
|
||||
|
||||
style.mobile.css
|
||||
|
||||
or::
|
||||
|
||||
script.tablet.css
|
||||
.. note:: CSS and JavaScript are compressed by ownCloud so if the CSS or JavaScript do not seem to get updated, check if the debug mode is enabled. To enable it see :doc:`../intro/gettingstarted`
|
||||
44
developer_manual/app/app/templates.rst
Normal file
44
developer_manual/app/app/templates.rst
Normal file
@@ -0,0 +1,44 @@
|
||||
Templates
|
||||
=========
|
||||
|
||||
.. sectionauthor:: Bernhard Posselt <nukeawhale@gmail.com>
|
||||
|
||||
ownCloud provides its own templating system.
|
||||
|
||||
In every template file you can easily access the template functions listed in :doc:`../app/api/templates`. To access the assigned variables in the template, use the **$_[]** array. The variable will be availabe under the key that you defined (e.g. $_['key']).
|
||||
|
||||
:file:`templates/main.php`
|
||||
|
||||
.. code-block:: php
|
||||
|
||||
<?php foreach($_['entries'] as $entry){ ?>
|
||||
<p><?php p($entry); ?></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
print_unescaped($this->inc('sub.inc'));
|
||||
|
||||
?>
|
||||
|
||||
.. warning::
|
||||
.. versionchanged:: 5.0
|
||||
|
||||
To prevent XSS the following PHP **functions for printing are forbidden: echo, print() and <?=**. Instead use the **p()** function for printing your values. Should you require unescaped printing, **double check for XSS** and use: :php:func:`print_unescaped`.
|
||||
|
||||
Templates can also include other templates by using the **$this->inc('templateName')** method. Use this if you find yourself repeating a lot of the same HTML constructs.
|
||||
|
||||
The parent variables will also be available in the included templates, but should you require it, you can also pass new variables to it by using the second optional parameter as array for **$this->inc**.
|
||||
|
||||
|
||||
|
||||
:file:`templates/sub.inc.php`
|
||||
|
||||
.. code-block:: php
|
||||
|
||||
<div>I am included but i can still access the parents variables!</div>
|
||||
<?php p($_['name']); ?>
|
||||
|
||||
<?php print_unescaped($this->inc('other_template', array('variable' => 'value'))); ?>
|
||||
|
||||
|
||||
**For more info, see** :doc:`../app/api/templates`
|
||||
@@ -14,6 +14,7 @@ App Developement (App Framework)
|
||||
schema
|
||||
database
|
||||
templates
|
||||
static
|
||||
css
|
||||
javascript
|
||||
angularsetup
|
||||
|
||||
1
developer_manual/app/appframework/static.rst
Normal file
1
developer_manual/app/appframework/static.rst
Normal file
@@ -0,0 +1 @@
|
||||
.. include:: ../app/static.rst
|
||||
@@ -1,9 +1,5 @@
|
||||
Templates
|
||||
=========
|
||||
.. include:: ../app/templates.rst
|
||||
|
||||
.. sectionauthor:: Bernhard Posselt <nukeawhale@gmail.com>
|
||||
|
||||
ownCloud provides its own templating system. The App Framework also provides the option of using `Twig Templates <http://twig.sensiolabs.org/>`_ which can optionally be enabled. Templates reside in the **templates/** folder.
|
||||
|
||||
Templates are abstracted by the TemplateResponse object and used and returned inside the controller method. Variables can be assigned to the Template by using the :php:class:`OCA\\AppFramework\\Http\\TemplateResponse::setParams` method:
|
||||
|
||||
@@ -27,6 +23,9 @@ Templates are abstracted by the TemplateResponse object and used and returned in
|
||||
return $response;
|
||||
}
|
||||
|
||||
The App Framework also provides the option of using `Twig Templates <http://twig.sensiolabs.org/>`_ which can optionally be enabled. Templates reside in the **templates/** folder.
|
||||
|
||||
|
||||
Twig Templates (recommended)
|
||||
----------------------------
|
||||
ownCloud templates do a bad job at preventing `XSS <http://en.wikipedia.org/wiki/Cross-site_scripting>`_. Therefore the App Framework comes with a second option: the `Twig Templating Language <http://twig.sensiolabs.org/>`_.
|
||||
@@ -184,42 +183,3 @@ The App Framework comes with additional template functions for Twig to better in
|
||||
<a href="{{ link_to('files/my.pdf') }}">my pdf</a>
|
||||
|
||||
|
||||
ownCloud Templates
|
||||
------------------
|
||||
In every template file you can easily access the template functions listed in :doc:`../app/api/templates`. To access the assigned variables in the template, use the **$_[]** array. The variable will be availabe under the key that you defined (e.g. $_['key']).
|
||||
|
||||
:file:`templates/main.php`
|
||||
|
||||
.. code-block:: php
|
||||
|
||||
<?php foreach($_['entries'] as $entry){ ?>
|
||||
<p><?php p($entry); ?></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
print_unescaped($this->inc('sub.inc'));
|
||||
|
||||
?>
|
||||
|
||||
.. warning::
|
||||
.. versionchanged:: 5.0
|
||||
|
||||
To prevent XSS the following PHP **functions for printing are forbidden: echo, print() and <?=**. Instead use the **p()** function for printing your values. Should you require unescaped printing, **double check for XSS** and use: :php:func:`print_unescaped`.
|
||||
|
||||
Templates can also include other templates by using the **$this->inc('templateName')** method. Use this if you find yourself repeating a lot of the same HTML constructs.
|
||||
|
||||
The parent variables will also be available in the included templates, but should you require it, you can also pass new variables to it by using the second optional parameter as array for **$this->inc**.
|
||||
|
||||
|
||||
|
||||
:file:`templates/sub.inc.php`
|
||||
|
||||
.. code-block:: php
|
||||
|
||||
<div>I am included but i can still access the parents variables!</div>
|
||||
<?php p($_['name']); ?>
|
||||
|
||||
<?php print_unescaped($this->inc('other_template', array('variable' => 'value'))); ?>
|
||||
|
||||
|
||||
**For more info, see** :doc:`../app/api/templates`
|
||||
@@ -31,6 +31,28 @@ You can choose between the traditional and MVC style (App Framework) approach. T
|
||||
|
||||
* :doc:`app/tutorial`
|
||||
|
||||
|
||||
General
|
||||
~~~~~~~
|
||||
|
||||
Database
|
||||
~~~~~~~~
|
||||
Database access
|
||||
|
||||
* :doc:`app/schema` | :doc:`app/database`
|
||||
|
||||
Templates
|
||||
~~~~~~~~~
|
||||
HTML and inclusion of JavaScript and CSS
|
||||
|
||||
* :doc:`app/templates`
|
||||
|
||||
JavaScript & CSS
|
||||
~~~~~~~~~~~~~~~~
|
||||
* :doc:`app/static`
|
||||
* :doc:`app/javascript`
|
||||
* :doc:`app/css`
|
||||
|
||||
API Documentation
|
||||
~~~~~~~~~~~~~~~~~
|
||||
* `ownCloud App API <http://api.owncloud.org/namespaces/OCP.html>`_
|
||||
@@ -48,6 +70,8 @@ Inner parts of an app
|
||||
* :doc:`appframework/classloader`
|
||||
* :doc:`appframework/container` | :doc:`general/dependencyinjection`
|
||||
* :doc:`appframework/routes`
|
||||
* :doc:`appframework/info`
|
||||
* :doc:`general/debugging`
|
||||
|
||||
Controllers
|
||||
~~~~~~~~~~~
|
||||
@@ -69,6 +93,7 @@ HTML and inclusion of JavaScript and CSS
|
||||
|
||||
JavaScript & CSS
|
||||
~~~~~~~~~~~~~~~~
|
||||
* :doc:`appframework/static`
|
||||
* :doc:`appframework/javascript`
|
||||
* :doc:`general/angular` | :doc:`appframework/angularsetup` | :doc:`appframework/angular`
|
||||
* :doc:`appframework/css`
|
||||
@@ -81,7 +106,7 @@ Hook before or after controller execution
|
||||
|
||||
Testing
|
||||
~~~~~~~
|
||||
* :doc:`appframework/unittesting` | :doc:`general/debugging`
|
||||
* :doc:`appframework/unittesting`
|
||||
|
||||
API Documentation
|
||||
~~~~~~~~~~~~~~~~~
|
||||
|
||||
Reference in New Issue
Block a user