how to include public resources to typo3 extbase e

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 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($) {

});

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'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>