How to setup and use KSS on Plone 3.1
This How-to applies to:
Any version.
This How-to is intended for:
Site Administrators, Integrators, Customizers, Developers, Advanced Developers
1. Setup
1.1 How to disable kss completely?
If you go out to the ZMI, to the portal_javacripts tool, you see the resources ++resource++kukit.js and ++resource++kukit-devel.js. If you disable both of them, kss javascript is not loaded and kss is inactive.
To disable these resources, uncheck the checkbox left to these two resources, scroll down, and press Save. Then go back to the resources to see that they are in the desired state.
1.2 How to load kss on some pages only, or enable kss for anonymous users?
By default kss is default loaded for authenticated users only. The conditions of the resources mentioned in 1.1 are:
Condition for ++resource++kukit.js:
python: not here.restrictedTraverse('@@plone_portal_state').anonymous() and here.restrictedTraverse('@@kss_devel_mode').isoff()
Condition for ++resource++kukit-devel.js:
python: not here.restrictedTraverse('@@plone_portal_state').anonymous() and here.restrictedTraverse('@@kss_devel_mode').ison()
If the first part of the expressions. not here.restrictedTraverse('@@plone_portal_state').anonymous() is deleted from both conditions, kss will be active in all pages. Similarly, you can combine them with any other condition.
The second parts of the expressions need to stay on the condition always, they control the switching between the development and production modes of kss.
Do not change other parameters of these resources.
1.3 How to disable certain kss features?
Kss features can be disabled one by one, by manually commenting out their rules from kss files.
The list of kss files can be viewed in the portal_kss tool. You can see there are inactive files that contain features not supported by default, but that can be used for testing them.
The two active resources are located at:
Products/CMFPlone/skins/plone_kss/plone.kss
Products/Archetypes/skins/archetypes_kss/at.kss
If you edit these files, you will notice kss rules dedicated to the activation of a given feature, grouped with an initial comment. You can simply use commenting to deactivate the group you do not want in the following way:
/* Functionality that I don't want */
/*
#id-element:click {
...
}
*/
After this you need to reload your browser page and make sure caching is switched off. You also need to restart Zope, unless the Debug mode of portal_kss tool is switched on.
1.4 How to disable in-line editing globally?
Although it is possible to do this in the way described in 1.4, there is a global variable you can define in your template:
tal:define="kss_inline_editable python:False;"
This should be put to the template generating the outer level of the page, for example, around the top of main_template.pt.
This will deactivate all inline editing, and also prevent the visual cueing that shows that the feature is available.
2. Migration
Plone 3.1 core is completely migrated to using kss.core 1.4. However if you have custom kss code, it may happen that the 3.0 -> 3.1 migration makes your kss fail with a parsing error, if you have not become aware of the deprecation warnings that appear in the kss console log (cyan lines).
Fortunately, of all the things we promised we only deprecated the followings:
2.1. Deprecated form() and currentForm() in normal value providers
currentForm()
You must change rules that use currentForm() in a normal value provider:
action-server: myServerAction;to:
myServerAction-data: currentForm();
action-server: myServerAction currentForm();Or, if you want to keep compatibility with Plone 3.0 (kss 1.2):
action-server: myServerAction;
myServerAction-kssSubmitForm: currentForm();
form()
action-server: myServerAction;to:
myServerAction-data: form();
action-server: myServerAction form();Or, if you want to keep compatibility with Plone 3.0 (kss 1.2):
action-server: myServerAction;
myServerAction-kssSubmitForm: form();
Necessary server side changes
the values directly in the method signature, or access them from the form directly.
So the following old code:
def method(self, data):
field1 = data['field1']
field2 = data.get('field2', None)
def method(self, field1, field2=None):
...
An alternate way is to get them from the request:def method(self):
request = self.request
field1 = request.form['field1']
field2 = request.form.get('field2', None)
2.1. How to use currentFormVar on multiselect widgets?
Instead of currentFormVar and formVar please consider using the following to send up an entire form:
action-server: myServerAction;
myServerAction-kssSubmitForm: currentForm();
This has the disadvantage that it sends up all form fields, but it works naturally with all the :list, etc. variables.
In the future we plan to implement a way to filter fields in this construct.
Please also have a look at kss.demo, there is an example case.
3. Testing (Selenium)
3.1 Additional package dependencies
The following branch of kss.demo must be present to run the Selenium tests
https://codespeak.net/svn/kukit/kss.demo/branch/1.4-kss-test
When installed into Zope, it needs to have its configure and meta zcml loaded as "slugs".
In addition the Zelenium product needs to be installed from:
svn://svn.zope.org/repos/main/Zelenium/trunk
For a better installation experience, we suggest to check out the following buildout. This contains all the necessary dependancies:
https://svn.plone.org/svn/plone/ploneout/branches/3.1-kss-test
This howto tells all the instructions for running and creating tests, and it is a very suggested reading.
4. Programming
4.1 What browser setup should I use for development?
For developing or debugging kss in Plone, we use the FireFox browser In addition we use the following extensions:
- FireBug, this is inevitable for introspecting nodes and viewing the kss log
- Web Developer, contains a useful menu bar to complement FireBug
On Safari, the kss log is placed into the console. On IE, the Firebug Lite can be used.
4.2 How to enable Firebug Lite on IE?
- add a new resource ++resource++firebuglite/firebug.js. Walk it up so that it is before ++resource++kukit.js and resource++kukit-devel.js. Press Save.
- Reload your page in IE. Pressing F12 toggles the tool in the bottom of the page area. The functionality is very simple: it comes with a console and an area to show kss logs.
It also works in Safari.
It is harmless to enable this file for all the time during development.
4.3 Why are my changes not coming alive?
To do development, it is a good idea to avoid caching, otherwise you change some file, but the result will not be shown.
To achieve this, first you must disable caching from your browser. The Firefox Developer Extension gives a convenient switch for this. You can also force the browser to reload the page each time manually.
Second, if you change kss files you need to switch portal_kss tool to Debug mode, similarly if you change javascript you need to do similarly with portal_javascripts, to have your changes in effect without restarting Zope. Restarting after each change is another option.
4.4 Where is all the kss code?
kss.core in lib/python of your instance contains the server side python, and the javascript of kss, including the core kss plugins.
The component plone.app.kss contains the kss application part of Plone. It contains the "zope" and "plone" kss plugins. It is at the moment scattered between different packages:
- plone.app.kss and archetypes.kss contain the kss application part of Plone.
- Products.CMFPlone contains the GS profile needed to load kss, as well as skins/plone_kss/plone.kss. that contains the kss rules. Similarly Products.Archetypes contains skins/archatypes_kss/at.kss.
- Products.CMFPlone and Products.Archetypes contain several other templates that contain kss markup.
- In addition to the core, other components can also define their kss application, inside their own package space. This means that if you install that component, its kss plugin becomes available globally.
4.5 What about version numbers of kss?
plone.app.kss is released with version number 1.4 in Plone 3. The current development version of plone.app.kss is 1.5, and it will be usable with Plone 3.2.
kss.core also followed the same versioning scheme, so 1.4 version is for the 3.1 release, 1.5 will be usable with 3.2.
Versioning is summarized int he following table:
| Plone version |
kss.core kss.demo |
plone.app.kss archetypes.kss |
|---|---|---|
| 3.0 |
1.2 | 1.2 |
| - | (1.3 reserved) |
- |
| 3.1 | 1.4 | 1.4 |
| planned for 3.2 |
1.5 (trunk) |
trunk |
4.6 What are the new kss features in this kss.core version?
Several syntax improvements, significantly faster page load due to using base2 for css selection, improved demos and testing, refactored code.
More be read in the NEWS:txt
4.7 How to control Development and Production modes for kss?
Kss runs in Production mode as default. This means that although you will get a visible javascript error, the error message will be meaningless. In return the javascript code is slightly faster and more compact.
You can switch at any time to Development mode, to see the error. Visit the url anywhere in your portal: @@kss_devel_mode/ui. You can switch between the two modes and currently active mode is displayed. After that, you need to reload your page to operate it in the selected mode.
This setting works with browser cookies. So you can use this method to debug a production server. However if Debug mode is switched on in the portal_javascripts tool, kss will always operate in Development mode, regardless of the cookie setting. If yyou have one instance that you use for development continously, this may also be a comfortable way of switching.
4.8 How to report bugs about kss?
Kss bugs in Plone3 should go into Plone's bug tracker, by selecting "KSS (Ajax)" as component name. Besides a detailed description of your problem, you should give in particular
- your
browser version where you discovered it,
- and the kss log transcript from the loading of the page until the error, including the full traceback, copypasted from Firebug. To do this you must run kss in Development mode, as described in 2.8.
If you report a bug on IE, you need to copy the kss log transcript from Firebug Lite, after enabling it as described in point 2.2.
4.9 I get a javascript error and I don't see any log on the server or on the client.
Switch on KSS Development Mode as described in 2.8.
Visit your error_log object from the ZMI, and remove Unauthorized and NotFound from the filter. Save.
Restart Zope, and reload your page in the client. You are supposed to see any log now, both on the client side (kss log console) and the server side (event.log).
If you have an Unauthorized bug, please enable VerboseSecurity as described here, and attach the information to the report.