diff -r 76ab3c71aff2 -r c67bcee93248 doc/tutorials/base/discovering-the-ui.rst --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/doc/tutorials/base/discovering-the-ui.rst Thu Jan 08 22:11:06 2015 +0100 @@ -0,0 +1,161 @@ + +.. _TutosBaseDiscoveringTheUI: + +Discovering the web interface +----------------------------- + +You can now access your web instance to create blogs and post messages +by visiting the URL http://localhost:8080/. + +By default, anonymous access is disabled, so a login form will appear. If you +asked to allow anonymous access when initializing the instance, click on the +'login' link in the top right hand corner. To login, you need then use the admin +account you specified at the time you initialized the database with +``cubicweb-ctl create``. + +.. image:: ../../images/tutos-base_login-form_en.png + :alt: the login form + + +Once authenticated, you can start playing with your instance. The default index +page looks like the following: + +.. image:: ../../images/tutos-base_index_en.png + :alt: the index page + + +Minimal configuration +~~~~~~~~~~~~~~~~~~~~~ + +Before creating entities, let's change that 'unset title' thing that appears +here and there. This comes from a |cubicweb| system properties. To set it, +click on the 'site configuration link' in the pop-up menu behind your login name +in the upper left-hand corner + +.. image:: ../../images/tutos-base_user-menu_en.png + :alt: the user pop-up menu + +The site title is in the 'Ui' section. Simply set it to the desired value and +click the 'validate' button. + +.. image:: ../../images/tutos-base_siteconfig_en.png + :alt: the site configuration form + +You should see a 'changes applied' message. You can now go back to the +index page by clicking on the |cubicweb| logo in the upper left-hand corner. + +You will much likely still see 'unset title' at this point. This is because by +default the index page is cached. Force a refresh of the page (by typing Ctrl-R +in Firefox for instance) and you should now see the title you entered. + + +Adding entities +~~~~~~~~~~~~~~~ + +The ``blog`` cube defines several entity types, among them ``Blog`` which is a +container for ``BlogEntry`` (i.e. posts) on a particular topic. We can get a +graphical view of the schema by clicking on the 'site schema' link in the user +pop-up menu we've already seen: + +.. image:: ../../images/tutos-base_schema_en.png + :alt: graphical view of the schema (aka data-model) + +Nice isn't it? Notice that this, as most other stuff we'll see in this tutorial, +is generated by the framework according to the model of the application. In our +case, the model defined by the ``blog`` cube. + +Now let us create a few of these entities. + + +Add a blog +********** + +Clicking on the `[+]` at the left of the 'Blog' link on the index page will lead +you to an HTML form to create a blog. + +.. image:: ../../images/tutos-base_blog-form_en.png + :alt: the blog creation form + +For instance, call this new blog 'Tech-blog' and type in 'everything about +technology' as the description , then validate the form by clicking on +'Validate'. You will be redirected to the `primary` view of the newly created blog. + +.. image:: ../../images/tutos-base_blog-primary_en.png + :alt: the blog primary view + + +Add a blog post +*************** + +There are several ways to add a blog entry. The simplest is to click on the 'add +blog entry' link in the actions box on viewing the blog you have just created. +You will then see a form to create a post, with a 'blog entry of' field preset +to the blog we're coming from. Enter a title, some content, click the 'validate' +button and you're done. You will be redirected to the blog primary view, though you +now see that it contains the blog post you've just created. + +.. image:: ../../images/tutos-base_blog-primary-after-post-creation_en.png + :alt: the blog primary view after creation of a post + +Notice there are some new boxes that appears in the left column. + +You can achieve the same thing by following the same path as we did for the blog +creation, e.g. by clicking on the `[+]` at the left of the 'Blog entry' link on +the index page. The diffidence being that since there is no context information, +the 'blog entry of' selector won't be preset to the blog. + + +If you click on the 'modify' link of the action box, you are back to +the form to edit the entity you just created, except that the form now +has another section with a combo-box entitled 'add relation'. It +provisos a generic way to edit relations which don't appears in the +above form. Choose the relation you want to add and a second combo box +appears where you can pick existing entities. If there are too many +of them, you will be offered to navigate to the target entity, that is +go away from the form and go back to it later, once you've selected +the entity you want to link with. + +.. image:: ../../images/tutos-base_form-generic-relations_en.png + :alt: the generic relations combo box + +This combo box can't appear until the entity is actually created. That's why you +haven't seen it at creation time. You could also have hit 'Apply' instead of +'validate' and it would have showed up. + + +About ui auto-adaptation +~~~~~~~~~~~~~~~~~~~~~~~~ + +One of the things that make |cubicweb| different of other frameworks is +its automatic user interface that adapts itself according to the data being +displayed. Let's see an example. + +If you go back to the home page an click on the 'Blog' link, you will be redirected +to the primary view of the blog, the same we've seen earlier. Now, add another +blog, go back to the index page, and click again on this link. You will see +a very different view (namely the 'list' view). + +.. image:: ../../images/tutos-base_blogs-list_en.png + :alt: the list view when there are more than one blog to display + +This is because in the first case, the framework chose to use the 'primary' +view since there was only one entity in the data to be displayed. Now that there +are two entities, the 'list' view is more appropriate and hence is being used. + +There are various other places where |cubicweb| adapts to display data in the best +way, the main being provided by the view *selection* mechanism that will be detailed +later. + + +Digging deeper +~~~~~~~~~~~~~~ + +By following principles explained below, you should now be able to +create new users for your application, to configure with a finer +grain, etc... You will notice that the index page lists a lot of types +you don't know about. Most are built-in types provided by the framework +to make the whole system work. You may ignore them in a first time and +discover them as time goes. + +One thing that is worth playing with is the search box. It may be used in various +way, from simple full text search to advanced queries using the :ref:`RQL` .