1 |
|
2 .. _TutosBaseDiscoveringTheUI: |
|
3 |
|
4 Discovering the web interface |
|
5 ----------------------------- |
|
6 |
|
7 You can now access your web instance to create blogs and post messages |
|
8 by visiting the URL http://localhost:8080/. |
|
9 |
|
10 By default, anonymous access is disabled, so a login form will appear. If you |
|
11 asked to allow anonymous access when initializing the instance, click on the |
|
12 'login' link in the top right hand corner. To login, you need then use the admin |
|
13 account you specified at the time you initialized the database with |
|
14 ``cubicweb-ctl create``. |
|
15 |
|
16 .. image:: ../../images/tutos-base_login-form_en.png |
|
17 :alt: the login form |
|
18 |
|
19 |
|
20 Once authenticated, you can start playing with your instance. The default index |
|
21 page looks like the following: |
|
22 |
|
23 .. image:: ../../images/tutos-base_index_en.png |
|
24 :alt: the index page |
|
25 |
|
26 |
|
27 Minimal configuration |
|
28 ~~~~~~~~~~~~~~~~~~~~~ |
|
29 |
|
30 Before creating entities, let's change that 'unset title' thing that appears |
|
31 here and there. This comes from a |cubicweb| system properties. To set it, |
|
32 click on the 'site configuration link' in the pop-up menu behind your login name |
|
33 in the upper left-hand corner |
|
34 |
|
35 .. image:: ../../images/tutos-base_user-menu_en.png |
|
36 :alt: the user pop-up menu |
|
37 |
|
38 The site title is in the 'Ui' section. Simply set it to the desired value and |
|
39 click the 'validate' button. |
|
40 |
|
41 .. image:: ../../images/tutos-base_siteconfig_en.png |
|
42 :alt: the site configuration form |
|
43 |
|
44 You should see a 'changes applied' message. You can now go back to the |
|
45 index page by clicking on the |cubicweb| logo in the upper left-hand corner. |
|
46 |
|
47 You will much likely still see 'unset title' at this point. This is because by |
|
48 default the index page is cached. Force a refresh of the page (by typing Ctrl-R |
|
49 in Firefox for instance) and you should now see the title you entered. |
|
50 |
|
51 |
|
52 Adding entities |
|
53 ~~~~~~~~~~~~~~~ |
|
54 |
|
55 The ``blog`` cube defines several entity types, among them ``Blog`` which is a |
|
56 container for ``BlogEntry`` (i.e. posts) on a particular topic. We can get a |
|
57 graphical view of the schema by clicking on the 'site schema' link in the user |
|
58 pop-up menu we've already seen: |
|
59 |
|
60 .. image:: ../../images/tutos-base_schema_en.png |
|
61 :alt: graphical view of the schema (aka data-model) |
|
62 |
|
63 Nice isn't it? Notice that this, as most other stuff we'll see in this tutorial, |
|
64 is generated by the framework according to the model of the application. In our |
|
65 case, the model defined by the ``blog`` cube. |
|
66 |
|
67 Now let us create a few of these entities. |
|
68 |
|
69 |
|
70 Add a blog |
|
71 ********** |
|
72 |
|
73 Clicking on the `[+]` at the left of the 'Blog' link on the index page will lead |
|
74 you to an HTML form to create a blog. |
|
75 |
|
76 .. image:: ../../images/tutos-base_blog-form_en.png |
|
77 :alt: the blog creation form |
|
78 |
|
79 For instance, call this new blog 'Tech-blog' and type in 'everything about |
|
80 technology' as the description , then validate the form by clicking on |
|
81 'Validate'. You will be redirected to the `primary` view of the newly created blog. |
|
82 |
|
83 .. image:: ../../images/tutos-base_blog-primary_en.png |
|
84 :alt: the blog primary view |
|
85 |
|
86 |
|
87 Add a blog post |
|
88 *************** |
|
89 |
|
90 There are several ways to add a blog entry. The simplest is to click on the 'add |
|
91 blog entry' link in the actions box on viewing the blog you have just created. |
|
92 You will then see a form to create a post, with a 'blog entry of' field preset |
|
93 to the blog we're coming from. Enter a title, some content, click the 'validate' |
|
94 button and you're done. You will be redirected to the blog primary view, though you |
|
95 now see that it contains the blog post you've just created. |
|
96 |
|
97 .. image:: ../../images/tutos-base_blog-primary-after-post-creation_en.png |
|
98 :alt: the blog primary view after creation of a post |
|
99 |
|
100 Notice there are some new boxes that appears in the left column. |
|
101 |
|
102 You can achieve the same thing by following the same path as we did for the blog |
|
103 creation, e.g. by clicking on the `[+]` at the left of the 'Blog entry' link on |
|
104 the index page. The diffidence being that since there is no context information, |
|
105 the 'blog entry of' selector won't be preset to the blog. |
|
106 |
|
107 |
|
108 If you click on the 'modify' link of the action box, you are back to |
|
109 the form to edit the entity you just created, except that the form now |
|
110 has another section with a combo-box entitled 'add relation'. It |
|
111 provisos a generic way to edit relations which don't appears in the |
|
112 above form. Choose the relation you want to add and a second combo box |
|
113 appears where you can pick existing entities. If there are too many |
|
114 of them, you will be offered to navigate to the target entity, that is |
|
115 go away from the form and go back to it later, once you've selected |
|
116 the entity you want to link with. |
|
117 |
|
118 .. image:: ../../images/tutos-base_form-generic-relations_en.png |
|
119 :alt: the generic relations combo box |
|
120 |
|
121 This combo box can't appear until the entity is actually created. That's why you |
|
122 haven't seen it at creation time. You could also have hit 'Apply' instead of |
|
123 'validate' and it would have showed up. |
|
124 |
|
125 |
|
126 About ui auto-adaptation |
|
127 ~~~~~~~~~~~~~~~~~~~~~~~~ |
|
128 |
|
129 One of the things that make |cubicweb| different of other frameworks is |
|
130 its automatic user interface that adapts itself according to the data being |
|
131 displayed. Let's see an example. |
|
132 |
|
133 If you go back to the home page an click on the 'Blog' link, you will be redirected |
|
134 to the primary view of the blog, the same we've seen earlier. Now, add another |
|
135 blog, go back to the index page, and click again on this link. You will see |
|
136 a very different view (namely the 'list' view). |
|
137 |
|
138 .. image:: ../../images/tutos-base_blogs-list_en.png |
|
139 :alt: the list view when there are more than one blog to display |
|
140 |
|
141 This is because in the first case, the framework chose to use the 'primary' |
|
142 view since there was only one entity in the data to be displayed. Now that there |
|
143 are two entities, the 'list' view is more appropriate and hence is being used. |
|
144 |
|
145 There are various other places where |cubicweb| adapts to display data in the best |
|
146 way, the main being provided by the view *selection* mechanism that will be detailed |
|
147 later. |
|
148 |
|
149 |
|
150 Digging deeper |
|
151 ~~~~~~~~~~~~~~ |
|
152 |
|
153 By following principles explained below, you should now be able to |
|
154 create new users for your application, to configure with a finer |
|
155 grain, etc... You will notice that the index page lists a lot of types |
|
156 you don't know about. Most are built-in types provided by the framework |
|
157 to make the whole system work. You may ignore them in a first time and |
|
158 discover them as time goes. |
|
159 |
|
160 One thing that is worth playing with is the search box. It may be used in various |
|
161 way, from simple full text search to advanced queries using the :ref:`RQL` . |
|