author | Sylvain Thénault <sylvain.thenault@logilab.fr> |
Wed, 19 Oct 2016 22:31:32 +0200 | |
branch | 3.23 |
changeset 11722 | 4b52c358b0ff |
parent 10491 | c67bcee93248 |
child 12405 | 99e150b6a876 |
permissions | -rw-r--r-- |
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 |
|
7529
2fdc310be7cd
[book] add autoload section from code and fix sphinx warnings
Julien Jehannet <julien.jehannet@logilab.fr>
parents:
6880
diff
changeset
|
4 |
.. _uiprops: |
2fdc310be7cd
[book] add autoload section from code and fix sphinx warnings
Julien Jehannet <julien.jehannet@logilab.fr>
parents:
6880
diff
changeset
|
5 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
6 |
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
|
7 |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
8 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
9 |
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
|
10 |
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
|
11 |
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
|
12 |
|
4b0b9d8207c5
[doc] 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 |
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
|
14 |
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
|
15 |
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
|
16 |
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
|
17 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
18 |
.. 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
|
19 |
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
|
20 |
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
|
21 |
|
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
|
22 |
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
|
23 |
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
|
24 |
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
|
25 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
26 |
.. 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
|
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 |
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
|
29 |
|
9256
697a8181ba30
remove 3.9 bw compat
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents:
8665
diff
changeset
|
30 |
The uiprops machinery is used to define some static file resources, |
697a8181ba30
remove 3.9 bw compat
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents:
8665
diff
changeset
|
31 |
such as the logo, default Javascript / CSS files, as well as CSS |
697a8181ba30
remove 3.9 bw compat
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents:
8665
diff
changeset
|
32 |
properties (we'll see that 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
|
33 |
|
4b0b9d8207c5
[doc] 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 |
.. 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
|
35 |
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
|
36 |
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
|
37 |
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
|
38 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
39 |
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
|
40 |
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
|
41 |
|
4b0b9d8207c5
[doc] 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 |
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
|
43 |
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
|
44 |
|
4b0b9d8207c5
[doc] 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 |
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
|
46 |
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
|
47 |
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
|
48 |
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
|
49 |
|
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
|
50 |
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
|
51 |
``<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
|
52 |
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
|
53 |
: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
|
54 |
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
|
55 |
: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
|
56 |
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
|
57 |
: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
|
58 |
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
|
59 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
60 |
.. 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
|
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 |
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
|
63 |
# 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
|
64 |
# 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
|
65 |
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
|
66 |
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
|
67 |
% 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
|
68 |
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
|
69 |
|
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
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
|
72 |
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
|
73 |
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
|
74 |
|
4b0b9d8207c5
[doc] 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 |
|
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
|
76 |
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
|
77 |
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
|
78 |
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
|
79 |
|
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
|
80 |
* 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
|
81 |
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
|
82 |
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
|
83 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
84 |
* 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
|
85 |
(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
|
86 |
|
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
|
87 |
* 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
|
88 |
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
|
89 |
|
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
|
90 |
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
|
91 |
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
|
92 |
|
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
|
93 |
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
|
94 |
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
|
95 |
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
|
96 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
97 |
.. 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
|
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 |
|
4b0b9d8207c5
[doc] 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 |
/* 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
|
101 |
* 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
|
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
|
103 |
* 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
|
104 |
* 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
|
105 |
*/ |
4b0b9d8207c5
[doc] 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 |
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
|
107 |
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
|
108 |
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
|
109 |
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
|
110 |
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
|
111 |
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
|
112 |
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
|
113 |
} |
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
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
|
116 |
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
|
117 |
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
|
118 |
} |
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
/* 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
|
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 |
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
|
123 |
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
|
124 |
} |
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
/* 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
|
127 |
* 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
|
128 |
*/ |
4b0b9d8207c5
[doc] 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 |
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
|
130 |
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
|
131 |
} |
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
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
|
134 |
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
|
135 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
136 |
* 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
|
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 |
* 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
|
139 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
140 |
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
|
141 |
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
|
142 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
143 |
.. 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
|
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 |
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
|
146 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
147 |
.. 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
|
148 |
`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
|
149 |
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
|
150 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
151 |
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
|
152 |
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
|
153 |
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
|
154 |
|
4b0b9d8207c5
[doc] 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 |
.. 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
|
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 |
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
|
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 |
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
|
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 |
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
|
162 |
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
|
163 |
|
4b0b9d8207c5
[doc] 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 |
.. 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
|
165 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
166 |
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
|
167 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
168 |
.. 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
|
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 |
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
|
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 |
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
|
173 |
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
|
174 |
|
4b0b9d8207c5
[doc] 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 |
.. 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
|
176 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
177 |
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
|
178 |
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
|
179 |
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
|
180 |
`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
|
181 |
|
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
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
|
184 |
~~~~~~~~~~~~~~~~~~~~~~~~~ |
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
|
185 |
|
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
|
186 |
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
|
187 |
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
|
188 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
189 |
.. 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
|
190 |
|
8190
2a3c1b787688
[vreg] move base registry implementation to logilab.common. Closes #1916014
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
7529
diff
changeset
|
191 |
from cubicweb.predicates import 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
|
192 |
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
|
193 |
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
|
194 |
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
|
195 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
196 |
# 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
|
197 |
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
|
198 |
# 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
|
199 |
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
|
200 |
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
|
201 |
# 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
|
202 |
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
|
203 |
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
|
204 |
# 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
|
205 |
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
|
206 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
207 |
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
|
208 |
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
|
209 |
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
|
210 |
: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
|
211 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
212 |
.. 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
|
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 |
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
|
215 |
from cubicweb import ValidationError |
8665
e65af61bde7d
[uicfg] uicfg.py moves from web/ to web/views/ (prepares #2406609)
Aurelien Campeas <aurelien.campeas@logilab.fr>
parents:
8190
diff
changeset
|
216 |
from cubicweb.web.views import uicfg, component |
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
|
217 |
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
|
218 |
|
4b0b9d8207c5
[doc] 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 |
# 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
|
220 |
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
|
221 |
|
4b0b9d8207c5
[doc] 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 |
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
|
223 |
__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
|
224 |
# 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
|
225 |
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
|
226 |
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
|
227 |
# 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
|
228 |
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
|
229 |
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
|
230 |
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
|
231 |
# 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
|
232 |
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
|
233 |
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
|
234 |
# 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
|
235 |
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
|
236 |
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
|
237 |
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
|
238 |
|
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
@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
|
241 |
@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
|
242 |
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
|
243 |
"""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
|
244 |
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
|
245 |
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
|
246 |
|
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
@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
|
249 |
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
|
250 |
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
|
251 |
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
|
252 |
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
|
253 |
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
|
254 |
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
|
255 |
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
|
256 |
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
|
257 |
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
|
258 |
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
|
259 |
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
|
260 |
'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
|
261 |
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
|
262 |
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
|
263 |
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
|
264 |
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
|
265 |
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
|
266 |
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
|
267 |
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
|
268 |
'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
|
269 |
{'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
|
270 |
|
4b0b9d8207c5
[doc] 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 |
@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
|
272 |
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
|
273 |
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
|
274 |
{'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
|
275 |
|
4b0b9d8207c5
[doc] 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 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
277 |
You basically subclass to configure with some class attributes. The `fname_*` |
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
278 |
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
|
279 |
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
|
280 |
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
|
281 |
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
|
282 |
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
|
283 |
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
|
284 |
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
|
285 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
286 |
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
|
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 |
.. 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
|
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 |
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
|
291 |
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
|
292 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
293 |
.. 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
|
294 |
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
|
295 |
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
|
296 |
|
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
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
|
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 |
|
4b0b9d8207c5
[doc] 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 |
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
|
302 |
'/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
|
303 |
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
|
304 |
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
|
305 |
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
|
306 |
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
|
307 |
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
|
308 |
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
|
309 |
: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
|
310 |
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
|
311 |
: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
|
312 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
313 |
.. 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
|
314 |
|
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
|
315 |
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
|
316 |
: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
|
317 |
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
|
318 |
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
|
319 |
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
|
320 |
|
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 |
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
|
322 |
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
|
323 |
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
|
324 |
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
|
325 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
326 |
.. 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
|
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 |
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
|
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 |
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
|
331 |
__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
|
332 |
# 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
|
333 |
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
|
334 |
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
|
335 |
# 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
|
336 |
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
|
337 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
338 |
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
|
339 |
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
|
340 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
341 |
.. 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
|
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 |
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
|
344 |
__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
|
345 |
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
|
346 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
347 |
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
|
348 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
349 |
.. 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
|
350 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
351 |
.. 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
|
352 |
|
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
|
353 |
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
|
354 |
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
|
355 |
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
|
356 |
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
|
357 |
|
4b0b9d8207c5
[doc] backport part 3 & 4 of the sytweb's tutorial + to be published part 5
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff
changeset
|
358 |
|
4b0b9d8207c5
[doc] 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 |
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
|
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 |
|
4b0b9d8207c5
[doc] 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 |
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
|
363 |
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
|
364 |
(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
|
365 |
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
|
366 |
|
6877
0e8fc441b38b
blog proofreading
Alexandre Fayolle <alexandre.fayolle@logilab.fr>
parents:
6876
diff
changeset
|
367 |
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
|
368 |
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
|
369 |
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
|
370 |
|
4b0b9d8207c5
[doc] 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 |
|
4b0b9d8207c5
[doc] 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 |
|
6880
4be32427b2b9
[book] fixes some references and other doc construction pbs
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
6879
diff
changeset
|
373 |
.. _`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
|
374 |
.. _`here`: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm |