how to include public resources to typo3 extbase extension - php

Question

I'm building an extension that creates a backend module that enables be_users to resize images.
I'm trying to add / include css and javascript files by using the pageRenderer but the files are never included I can only apply css if add it directly in the fluid Template using a style tag and include the javascript file with a script tag.
I tried something like this in the controller
protected $pageRenderer;
....
$this->pageRenderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Core\\Page\\PageRenderer');
$this->pageRenderer->addCssFile('/typo3conf/ext/extKey/Resources/Public/css/styles.css');
$this->pageRenderer->loadJquery();
also tried with a viewHelper
namespace Vendor\ExtKey\ViewHelpers;
class AddJsFileViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\Be\AbstractBackendViewHelper {
public function render() {
$doc = $this->getDocInstance();
$pageRenderer = $doc->getPageRenderer();
$pageRenderer->loadJquery();
}
}
and in my tempate
{namespace pager=Vendor\ExtKey\ViewHelpers}
<f:layout name="Default" />
<f:section name="main">
<pager:addJsFile />
...
still nothing

Answer 1

I'm not sure how you define the template for your backend, but it seems this usually happens using the backend container view helper which already has functions for that:
<f:be.container
addCssFile="{f:uri.resource(path:'css/style.css')}"
addJsFile="{f:uri.resource(path:'js/scripts.js')}">
[your templates content]
</f:be.container>

Answer 2

In TYPO3 7.6.X, It has to be like following
<f:be.container
includeCssFiles="{style:'{f:uri.resource(path:\'css/style.css\')}'}"
includeJsFiles="{script:'{f:uri.resource(path:\'js/script.js\')}'}"
>
<!-- Template Code -->
</f:be.container>
As includeCssFiles and includeJsFiles requires array to be passed, we
can include any number of js and css.

Answer 3

i think the problem was my ViewHelper need to renderChilden and start/end page
current implementation is like this
the ViewHelper
namespace Vendor\ExtKey\ViewHelpers;
class AddPublicResourcesViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\Be\AbstractBackendViewHelper {
public function render() {
$doc = $this->getDocInstance();
$pageRenderer = $doc->getPageRenderer();
$extRelPath = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath("ext_key");
$pageRenderer->addCssFile($extRelPath . "Resources/Public/css/styles.css");
$pageRenderer->loadJquery();
$pageRenderer->addJsFile($extRelPath . "Resources/Public/js/app.js");
$output = $this->renderChildren();
$output = $doc->startPage("title") . $output;
$output .= $doc->endPage();
return $output;
}
}
the template
{namespace pager=Vendor\ExtKey\ViewHelpers}
<f:layout name="Default" />
<f:section name="main">
<pager:addPublicResources />
Pagerender::loadJjquery is working and accessible like this
TYPO3.jQuery(function($) {
});