How to include public resources in frontend plugin typo3

Question

I'm building a weather widget extension for typo3 6.1.4 using Extbase/Fluid. The extension skeleton was created with extension_builder

My question is : How can i include css and js files to the template ?

When trying to add a viewHelper i get this cryptic error

1297645190: Ext Direct error in "TYPO3\CMS\Core\ExtDirect\ExtDirectApi" with namespace: "TYPO3"
Try to clear the TYPO3 cache and / or use paramater no_cache=1 as parameter in URL typo3/ajax.php
Check also the following points:
- configuration in ext_localconf.php: registration key should be like TYPO3.MyExtension.Sample"
- URL typo3/ajax.php: namespace parameter should be like: "TYPO3.MyExtension"
- javascript: method\'s name should be like: "TYPO3.MyExtension.Sample.myMethod

I have another question closely related

Why does the backend module and the frontend plugin use the same template file ?

How to distinguish between the two ?

Answer 1

For your FrontendPlugin you probably want to add your JavaScript and CSS with TypoScript. In extbase extensions this is normally done in Configuration/TypoScript/setup.txt:

page.includeCSS.myExtension = EXT:my_extension/Resources/Public/Css/MyCss.css
page.includeJS.myExtension = EXT:my_extension/Resources/Public/JavaScript/MyJs.js

As for your 2nd question. You specified the same default Controller/Action for both your frontend plugin and your backend module.

array(
    'Weather' => 'list',
),

So both are using the same action wich is using its template.

Answer 2

Put your CSS / Javascript etc. into the resources public folder ie Resources/Public/Css/style.css

In the fluid template you can access those by using:

<link href="{f:uri.resource(path:'css/style.css')}" rel="stylesheet" type="text/css" media="all">

Answer 3

For your second question regarding the templates for the backend view:

In the setup.txt (.ts) you can define different template roots for the backend with something like this:

module.tx_foobar {
    persistence < plugin.tx_foobar.persistence
    view {
        templateRootPath = {$module.tx_foobar.view.templateRootPath}
        partialRootPath = {$module.tx_foobar.view.partialRootPath}
        layoutRootPath = {$module.tx_foobar.view.layoutRootPath}
    }
}