cubicweb: doc/book/en/tutorials/advanced/part05_ui-advanced.rst@9bbf83f68bcc (annotated)

6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	1	Building my photos web site with \|cubicweb\| part V: let's make it even more user friendly
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	2	=========================================================================================
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	3
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	4	We'll now see how to benefit from features introduced in 3.9 and 3.10 releases of CubicWeb
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	5
7529 2fdc310be7cd [book] add autoload section from code and fix sphinx warnings Julien Jehannet <julien.jehannet@logilab.fr> parents: 6880 diff changeset	6	.. _uiprops:
2fdc310be7cd [book] add autoload section from code and fix sphinx warnings Julien Jehannet <julien.jehannet@logilab.fr> parents: 6880 diff changeset	7
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	8	Step 1: tired of the default look?
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	9	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	10
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	11	OK... Now our site has its most desired features. But... I would like to make it look
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	12	somewhat like my website. It is not www.cubicweb.org after all. Let's tackle this
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	13	first!
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	14
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	15	The first thing we can to is to change the logo. There are various way to achieve
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	16	this. The easiest way is to put a :file:`logo.png` file into the cube's :file:`data`
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	17	directory. As data files are looked at according to cubes order (CubicWeb
4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	18	resources coming last), that file will be selected instead of CubicWeb's one.
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	19
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	20	.. Note::
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	21	As the location for static resources are cached, you'll have to restart
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	22	your instance for this to be taken into account.
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	23
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	24	Though there are some cases where you don't want to use a :file:`logo.png` file.
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	25	For instance if it's a JPEG file. You can still change the logo by defining in
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	26	the cube's :file:`uiprops.py` file:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	27
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	28	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	29
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	30	LOGO = data('logo.jpg')
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	31
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	32	The uiprops machinery has been introduced in `CubicWeb 3.9`_. It is used to define
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	33	some static file resources, such as the logo, default Javascript / CSS files, as
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	34	well as CSS properties (we'll see that later).
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	35
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	36	.. Note::
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	37	This file is imported specifically by \|cubicweb\|, with a predefined name space,
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	38	containing for instance the `data` function, telling the file is somewhere
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	39	in a cube or CubicWeb's data directory.
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	40
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	41	One side effect of this is that it can't be imported as a regular python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	42	module.
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	43
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	44	The nice thing is that in debug mode, change to a :file:`uiprops.py` file are detected
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	45	and then automatically reloaded.
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	46
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	47	Now, as it's a photos web-site, I would like to have a photo of mine as background...
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	48	After some trials I won't detail here, I've found a working recipe explained `here`_.
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	49	All I've to do is to override some stuff of the default CubicWeb user interface to
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	50	apply it as explained.
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	51
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	52	The first thing to to get the ``<img/>`` tag as first element after the
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	53	``<body>`` tag. If you know a way to avoid this by simply specifying the image
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	54	in the CSS, tell me! The easiest way to do so is to override the
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	55	:class:`HTMLPageHeader` view, since that's the one that is directly called once
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	56	the ``<body>`` has been written. How did I find this? By looking in the
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	57	:mod:`cubiweb.web.views.basetemplates` module, since I know that global page
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	58	layouts sits there. I could also have grep the "body" tag in
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	59	:mod:`cubicweb.web.views`... Finding this was the hardest part. Now all I need is
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	60	to customize it to write that ``img`` tag, as below:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	61
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	62	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	63
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	64	class HTMLPageHeader(basetemplates.HTMLPageHeader):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	65	# override this since it's the easier way to have our bg image
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	66	# as the first element following <body>
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	67	def call(self, **kwargs):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	68	self.w(u'<img id="bg-image" src="%sbackground.jpg" alt="background image"/>'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	69	% self._cw.datadir_url)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	70	super(HTMLPageHeader, self).call(**kwargs)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	71
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	72
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	73	def registration_callback(vreg):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	74	vreg.register_all(globals().values(), __name__, (HTMLPageHeader))
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	75	vreg.register_and_replace(HTMLPageHeader, basetemplates.HTMLPageHeader)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	76
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	77
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	78	As you may have guessed, my background image is in a :file:`background.jpg` file
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	79	in the cube's :file:`data` directory, but there are still some things to explain
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	80	to newcomers here:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	81
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	82	* The :meth:`call` method is there the main access point of the view. It's called by
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	83	the view's :meth:`render` method. It is not the only access point for a view, but
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	84	this will be detailed later.
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	85
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	86	* Calling `self.w` writes something to the output stream. Except for binary views
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	87	(which do not generate text), it must be passed an Unicode string.
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	88
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	89	* The proper way to get a file in :file:`data` directory is to use the `datadir_url`
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	90	attribute of the incoming request (e.g. `self._cw`).
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	91
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	92	I won't explain again the :func:`registration_callback` stuff, you should understand it
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	93	now! If not, go back to previous posts in the series :)
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	94
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	95	Fine. Now all I've to do is to add a bit of CSS to get it to behave nicely (which
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	96	is not the case at all for now). I'll put all this in a :file:`cubes.sytweb.css`
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	97	file, stored as usual in our :file:`data` directory:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	98
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	99	.. sourcecode:: css
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	100
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	101
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	102	/* fixed full screen background image
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	103	* as explained on http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	104	*
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	105	* syt update: set z-index=0 on the img instead of z-index=1 on div#page & co to
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	106	* avoid pb with the user actions menu
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	107	*/
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	108	img#bg-image {
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	109	position: fixed;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	110	top: 0;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	111	left: 0;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	112	width: 100%;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	113	height: 100%;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	114	z-index: 0;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	115	}
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	116
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	117	div#page, table#header, div#footer {
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	118	background: transparent;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	119	position: relative;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	120	}
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	121
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	122	/* add some space around the logo
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	123	*/
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	124	img#logo {
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	125	padding: 5px 15px 0px 15px;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	126	}
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	127
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	128	/* more dark font for metadata to have a chance to see them with the background
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	129	* image
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	130	*/
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	131	div.metadata {
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	132	color: black;
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	133	}
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	134
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	135	You can see here stuff explained in the cited page, with only a slight modification
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	136	explained in the comments, plus some additional rules to make things somewhat cleaner:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	137
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	138	* a bit of padding around the logo
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	139
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	140	* darker metadata which appears by default below the content (the white frame in the page)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	141
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	142	To get this CSS file used everywhere in the site, I have to modify the :file:`uiprops.py` file
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	143	introduced above:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	144
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	145	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	146
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	147	STYLESHEETS = sheet['STYLESHEETS'] + [data('cubes.sytweb.css')]
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	148
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	149	.. Note::
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	150	`sheet` is another predefined variable containing values defined by
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	151	already process `:file:`uiprops.py`` file, notably the CubicWeb's one.
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	152
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	153	Here we simply want our CSS in addition to CubicWeb's base CSS files, so we
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	154	redefine the `STYLESHEETS` variable to existing CSS (accessed through the `sheet`
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	155	variable) with our one added. I could also have done:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	156
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	157	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	158
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	159	sheet['STYLESHEETS'].append(data('cubes.sytweb.css'))
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	160
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	161	But this is less interesting since we don't see the overriding mechanism...
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	162
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	163	At this point, the site should start looking good, the background image being
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	164	resized to fit the screen.
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	165
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	166	.. image:: ../../images/tutos-photowebsite_background-image.png
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	167
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	168	The final touch: let's customize CubicWeb's CSS to get less orange... By simply adding
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	169
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	170	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	171
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	172	contextualBoxTitleBg = incontextBoxTitleBg = '#AAAAAA'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	173
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	174	and reloading the page we've just seen, we know have a nice greyed box instead of
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	175	the orange one:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	176
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	177	.. image:: ../../images/tutos-photowebsite_grey-box.png
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	178
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	179	This is because CubicWeb's CSS include some variables which are
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	180	expanded by values defined in uiprops file. In our case we controlled the
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	181	properties of the CSS `background` property of boxes with CSS class
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	182	`contextualBoxTitleBg` and `incontextBoxTitleBg`.
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	183
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	184
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	185	Step 2: configuring boxes
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	186	~~~~~~~~~~~~~~~~~~~~~~~~~
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	187
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	188	Boxes present to the user some ways to use the application. Let's first do a few
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	189	user interface tweaks in our :file:`views.py` file:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	190
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	191	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	192
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	193	from cubicweb.selectors import none_rset
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	194	from cubicweb.web.views import bookmark
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	195	from cubes.zone import views as zone
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	196	from cubes.tag import views as tag
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	197
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	198	# change bookmarks box selector so it's only displayed on startup views
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	199	bookmark.BookmarksBox.__select__ = bookmark.BookmarksBox.__select__ & none_rset()
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	200	# move zone box to the left instead of in the context frame and tweak its order
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	201	zone.ZoneBox.context = 'left'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	202	zone.ZoneBox.order = 100
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	203	# move tags box to the left instead of in the context frame and tweak its order
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	204	tag.TagsBox.context = 'left'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	205	tag.TagsBox.order = 102
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	206	# hide similarity box, not interested
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	207	tag.SimilarityBox.visible = False
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	208
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	209	The idea is to move all boxes in the left column, so we get more space for the
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	210	photos. Now, serious things: I want a box similar to the tags box but to handle
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	211	the `Person displayed_on File` relation. We can do this simply by adding a
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	212	:class:`AjaxEditRelationCtxComponent` subclass to our views, as below:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	213
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	214	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	215
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	216	from logilab.common.decorators import monkeypatch
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	217	from cubicweb import ValidationError
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	218	from cubicweb.web import uicfg, component
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	219	from cubicweb.web.views import basecontrollers
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	220
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	221	# hide displayed_on relation using uicfg since it will be displayed by the box below
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	222	uicfg.primaryview_section.tag_object_of(('', 'displayed_on', ''), 'hidden')
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	223
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	224	class PersonBox(component.AjaxEditRelationCtxComponent):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	225	__regid__ = 'sytweb.displayed-on-box'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	226	# box position
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	227	order = 101
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	228	context = 'left'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	229	# define relation to be handled
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	230	rtype = 'displayed_on'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	231	role = 'object'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	232	target_etype = 'Person'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	233	# messages
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	234	added_msg = _('person has been added')
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	235	removed_msg = _('person has been removed')
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	236	# bind to js_* methods of the json controller
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	237	fname_vocabulary = 'unrelated_persons'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	238	fname_validate = 'link_to_person'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	239	fname_remove = 'unlink_person'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	240
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	241
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	242	@monkeypatch(basecontrollers.JSonController)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	243	@basecontrollers.jsonize
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	244	def js_unrelated_persons(self, eid):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	245	"""return tag unrelated to an entity"""
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	246	rql = "Any F + ' ' + S WHERE P surname S, P firstname F, X eid %(x)s, NOT P displayed_on X"
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	247	return [name for (name,) in self._cw.execute(rql, {'x' : eid})]
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	248
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	249
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	250	@monkeypatch(basecontrollers.JSonController)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	251	def js_link_to_person(self, eid, people):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	252	req = self._cw
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	253	for name in people:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	254	name = name.strip().title()
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	255	if not name:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	256	continue
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	257	try:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	258	firstname, surname = name.split(None, 1)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	259	except:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	260	raise ValidationError(eid, {('displayed_on', 'object'): 'provide <first name> <surname>'})
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	261	rset = req.execute('Person P WHERE '
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	262	'P firstname %(firstname)s, P surname %(surname)s',
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	263	locals())
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	264	if rset:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	265	person = rset.get_entity(0, 0)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	266	else:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	267	person = req.create_entity('Person', firstname=firstname,
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	268	surname=surname)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	269	req.execute('SET P displayed_on X WHERE '
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	270	'P eid %(p)s, X eid %(x)s, NOT P displayed_on X',
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	271	{'p': person.eid, 'x' : eid})
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	272
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	273	@monkeypatch(basecontrollers.JSonController)
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	274	def js_unlink_person(self, eid, personeid):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	275	self._cw.execute('DELETE P displayed_on X WHERE P eid %(p)s, X eid %(x)s',
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	276	{'p': personeid, 'x': eid})
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	277
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	278
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	279	You basically subclass to configure with some class attributes. The `fname_*`
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	280	attributes give the name of methods that should be defined on the json control to
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	281	make the AJAX part of the widget work: one to get the vocabulary, one to add a
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	282	relation and another to delete a relation. These methods must start by a `js_`
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	283	prefix and are added to the controller using the `@monkeypatch` decorator. In my
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	284	case, the most complicated method is the one which adds a relation, since it
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	285	tries to see if the person already exists, and else automatically create it,
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	286	assuming the user entered "firstname surname".
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	287
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	288	Let's see how it looks like on a file primary view:
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	289
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	290	.. image:: ../../images/tutos-photowebsite_boxes.png
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	291
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	292	Great, it's now as easy for me to link my pictures to people than to tag them.
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	293	Also, visitors get a consistent display of these two pieces of information.
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	294
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	295	.. Note::
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	296	The ui component system has been refactored in `CubicWeb 3.10`_, which also
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	297	introduced the :class:`AjaxEditRelationCtxComponent` class.
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	298
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	299
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	300	Step 3: configuring facets
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	301	~~~~~~~~~~~~~~~~~~~~~~~~~~
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	302
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	303	The last feature we'll add today is facet configuration. If you access to the
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	304	'/file' url, you'll see a set of 'facets' appearing in the left column. Facets
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	305	provide an intuitive way to build a query incrementally, by proposing to the user
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	306	various way to restrict the result set. For instance CubicWeb proposes a facet to
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	307	restrict based on who created an entity; the tag cube proposes a facet to
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	308	restrict based on tags; the zoe cube a facet to restrict based on geographical
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	309	location, and so on. In that gist, I want to propose a facet to restrict based on
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	310	the people displayed on the picture. To do so, there are various classes in the
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	311	:mod:`cubicweb.web.facet` module which simply have to be configured using class
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	312	attributes as we've done for the box. In our case, we'll define a subclass of
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	313	:class:`RelationFacet`.
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	314
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	315	.. Note::
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	316
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	317	Since that's ui stuff, we'll continue to add code below to our
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	318	:file:`views.py` file. Though we begin to have a lot of various code their, so
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	319	it's may be a good time to split our views module into submodules of a `view`
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	320	package. In our case of a simple application (glue) cube, we could start using
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	321	for instance the layout below: ::
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	322
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	323	views/__init__.py # uicfg configuration, facets
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	324	views/layout.py # header/footer/background stuff
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	325	views/components.py # boxes, adapters
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	326	views/pages.py # index view, 404 view
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	327
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	328	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	329
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	330	from cubicweb.web import facet
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	331
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	332	class DisplayedOnFacet(facet.RelationFacet):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	333	__regid__ = 'displayed_on-facet'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	334	# relation to be displayed
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	335	rtype = 'displayed_on'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	336	role = 'object'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	337	# view to use to display persons
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	338	label_vid = 'combobox'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	339
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	340	Let's say we also want to filter according to the `visibility` attribute. This is
0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	341	even simpler as we just have to derive from the :class:`AttributeFacet` class:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	342
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	343	.. sourcecode:: python
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	344
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	345	class VisibilityFacet(facet.AttributeFacet):
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	346	__regid__ = 'visibility-facet'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	347	rtype = 'visibility'
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	348
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	349	Now if I search for some pictures on my site, I get the following facets available:
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	350
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	351	.. image:: ../../images/tutos-photowebsite_facets.png
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	352
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	353	.. Note::
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	354
6879 54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	355	By default a facet must be applyable to every entity in the result set and
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	356	provide at leat two elements of vocabulary to be displayed (for instance you
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	357	won't see the `created_by` facet if the same user has created all
54944faf9b61 [book] advanced tutorial part 5 improvments: add some roles, talk about cube's layout, strip image Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6877 diff changeset	358	entities). This may explain why you don't see yours...
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	359
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	360
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	361	Conclusion
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	362	~~~~~~~~~~
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	363
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	364	We started to see the power behind the infrastructure provided by the
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	365	framework, both on the pure ui (CSS, Javascript) side and on the Python side
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	366	(high level generic classes for components, including boxes and facets). We now
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	367	have, with a few lines of code, a full-featured web site with a personalized look.
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	368
6877 0e8fc441b38b blog proofreading Alexandre Fayolle <alexandre.fayolle@logilab.fr> parents: 6876 diff changeset	369	Of course we'll probably want more as time goes, but we can now
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	370	concentrate on making good pictures, publishing albums and sharing them with
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	371	friends...
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	372
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	373
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	374
6880 4be32427b2b9 [book] fixes some references and other doc construction pbs Sylvain Thénault <sylvain.thenault@logilab.fr> parents: 6879 diff changeset	375	.. _`CubicWeb 3.10`: http://www.cubicweb.org/blogentry/1330518
6876 4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	376	.. _`CubicWeb 3.9`: http://www.cubicweb.org/blogentry/1179899
4b0b9d8207c5 [doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5 Sylvain Thénault <sylvain.thenault@logilab.fr> parents: diff changeset	377	.. _`here`: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

author	Sylvain Thénault <sylvain.thenault@logilab.fr>
	Thu, 22 Sep 2011 16:12:23 +0200
changeset 7827	9bbf83f68bcc
parent 7529	2fdc310be7cd
child 8190	2a3c1b787688
permissions	-rw-r--r--