Overview of the Views user interface

Video loading...

  • 0:00
    INTRO TO VIEWS FOR DRUPAL 7
  • 0:03
    Overview of the Views User Interface
  • 0:05
    With Jeff Easton
  • 0:07
    JEFF EATON: In this chapter, we're going
  • 0:09
    to be taking a look at the basics of the Views user interface,
  • 0:12
    learning our way around its administration screens,
  • 0:14
    and figuring out how to customize a couple of basic views
  • 0:17
    that come with the module.
  • 0:18
    The first thing we need to do is go to the Modules page in Drupal
  • 0:22
    and turn on Views.
  • 0:24
    Views is actually divided into several modules.
  • 0:27
    Views itself handles actually displaying views, pulling content
  • 0:30
    of the Drupal database, and displaying it to users.
  • 0:33
    The views UI module is what we'll be using to look at the existing views
  • 0:37
    that are there, customize them, and build our own.
  • 0:40
    If we check both of those, hit Save Configuration.
  • 0:44
    Drupal warns us that we also need to enable the Chaos Tools module.
  • 0:48
    Chaos Tools is an API module that Views uses to do certain things
  • 0:51
    like exporting and importing definitions of views,
  • 0:54
    displaying it's Ajax popup windows, and so on.
  • 0:57
    We actually don't need to worry too much about Chaos Tools,
  • 1:00
    other than making sure that it's turned on when we enable Views.
  • 1:03
    So we can hit Continue and allow Drupal to enable it.
  • 1:07
    Now that we've turned all those modules on,
  • 1:09
    we can close this screen and go to the Structure view.
  • 1:13
    On the Structure page, we can see there's
  • 1:15
    a new entry for the Views module.
  • 1:17
    If we drill down to that page, we get our first look
  • 1:20
    at the Views Administration screen.
  • 1:23
    Here Views lists all of the different views
  • 1:25
    that have been defined.
  • 1:27
    These come with views automatically and they provide
  • 1:29
    useful examples of some of its capabilities.
  • 1:32
    None of them are turned on by default,
  • 1:33
    but they're there in case we want to look at them.
  • 1:36
    A couple examples are the Archive view that displays
  • 1:39
    a monthly listing of what content has been posted on the site,
  • 1:42
    the Back Links view that displays what content is referencing
  • 1:46
    other content on the site, and the Front Page.
  • 1:49
    We're going to take a look at the Front Page view.
  • 1:51
    One of the reasons it's useful for people who are starting out
  • 1:54
    is that it provides an exact duplicate
  • 1:56
    of the normal default Drupal front page.
  • 1:59
    But because it's built with Views, all of its settings
  • 2:01
    can be customized.
  • 2:02
    We can change the sort order, how nodes that are on the front page
  • 2:06
    get displayed, and so on.
  • 2:08
    So we'll click this Enable link here.
  • 2:11
    You can see that it pops up to the top of the list.
  • 2:13
    Now it's highlighted, indicating that it's turned on.
  • 2:16
    On this screen, we can see that it provides
  • 2:18
    several URL paths, front page, and RSS.xml.
  • 2:24
    And we can also pull down this drop down menu
  • 2:27
    and see what actions can be performed.
  • 2:29
    We can edit the view, disable it again, clone it and build
  • 2:32
    our own version from scratch, or export it,
  • 2:34
    so that it could be reused on other sites.
  • 2:37
    Right now, we'll click the Edit link.
  • 2:39
    This is the main interface screen for the Views module.
  • 2:42
    It's what we'll be looking at whenever we customize a view,
  • 2:44
    build one from scratch, or just take a look
  • 2:47
    at how an existing view is built.
  • 2:49
    At the very top, we can see a listing
  • 2:51
    of the displays that are part of this view.
  • 2:53
    Page is the most common type of displays used by Views.
  • 2:57
    It allows you to define a URL that lives on the Drupal site, that
  • 3:00
    lists content in some form that's visible to end users.
  • 3:03
    Feed is another common type.
  • 3:05
    It allows you to generate an RSS feed or, using third-party modules,
  • 3:09
    Atom feeds, JSON feeds, or other types of data
  • 3:12
    intended for use by news readers or external applications that will be
  • 3:16
    pulling information from your website.
  • 3:18
    By using a page view and feed view together,
  • 3:21
    we can provide a listing of content that's both viewable by users
  • 3:25
    and by software that pulls in that information.
  • 3:28
    Under the Add button, there's a list of additional display types
  • 3:31
    that can be added to this view.
  • 3:33
    Block, References, and Attachment are three types
  • 3:37
    that we'll be taking a look at later.
  • 3:40
    At the other side, we can also see actions
  • 3:42
    that can be performed on the view itself.
  • 3:44
    We can edit the name and description of the view, run an Analyze tool
  • 3:48
    to see what SQL queries are being generated.
  • 3:50
    And we can also clone and export the view here, too.
  • 3:53
    The important thing to keep in mind is that all the different displays
  • 3:56
    that are added up here are just different views
  • 3:58
    of the same underlying information.
  • 4:02
    In section below, we can see where that stuff is customized.
  • 4:06
    You can see different views-related settings,
  • 4:08
    like the title of the view, what format
  • 4:11
    the information should be presented in.
  • 4:13
    The Front Page view presents things in unformatted list
  • 4:17
    and shows teaser views of each one of the nodes that are in the list.
  • 4:21
    The Filter criteria allows you to control
  • 4:23
    what things will appear in the listing.
  • 4:26
    Right now we've got it set to show nodes that are both
  • 4:28
    promoted to the front page and published.
  • 4:31
    And then the Sort criteria allow you to determine what stuff
  • 4:35
    should appear at the top of the list.
  • 4:38
    In order to match the behavior of the Front Page view
  • 4:41
    that Drupal comes with automatically,
  • 4:43
    this view is sorting so that sticky nodes appear at the very top,
  • 4:47
    and then it's sorting by post date.
  • 4:50
    In the middle of the screen, you can also
  • 4:52
    see settings that are specific to this particular kind of display,
  • 4:55
    the page.
  • 4:57
    We can set what path the page appears
  • 4:58
    at, in this case front page.
  • 5:00
    And we can also choose whether or not
  • 5:02
    a menu item for this particular view appears
  • 5:04
    in Drupal's navigation items.
  • 5:07
    If desired, you can also set Access Controls.
  • 5:09
    We won't be doing that right now, but we'll
  • 5:11
    take advantage of that feature later.
  • 5:13
    And then you can also change header and footer information.
  • 5:16
    For example, if you want to provide some useful information about what
  • 5:19
    kind of content people will be looking at on this view,
  • 5:22
    you can put that into the header.
  • 5:24
    The pager also allows you to customize the appearance
  • 5:27
    of the forward and backward arrows that appear beneath a view
  • 5:31
    if there's too much content to fit on just one page.
  • 5:35
    Finally, there's an Advanced tab.
  • 5:37
    Underneath the Advanced tab, we can find a couple more complex options
  • 5:40
    that can be set on any given view.
  • 5:43
    There's Contextual filters, Relationships, the behavior
  • 5:46
    of the view when no results are found,
  • 5:49
    Exposed Form settings, and other miscellaneous settings that
  • 5:52
    can be configured for any given view.
  • 5:55
    We'll be looking at these in detail later.
  • 5:57
    We don't have to worry about them too much for now.
  • 5:59
    But it's important to remember that if you're looking around for any
  • 6:02
    of those options, they are underneath the Advanced tab.
  • 6:04
    In Drupal 6 they were mixed with the rest of the Views user interface,
  • 6:07
    and it can take a little getting used to.
  • 6:10
    If we scroll down to the very bottom of the Views administration screen,
  • 6:14
    we can see a section that's very, very helpful
  • 6:16
    if you're building out complex views.
  • 6:18
    It's the Automatic Preview area.
  • 6:20
    Whenever you're building out a view, this area
  • 6:22
    will keep updating itself to reflect the changes that you're making.
  • 6:25
    Right now, we can see a listing of what content would appear
  • 6:28
    in this view if we actually went to the front page URL
  • 6:32
    that it provides.
  • 6:33
    In this drop down, you can even jump to change
  • 6:36
    any of the individual settings for this view,
  • 6:38
    adding and editing filters, changing fields
  • 6:41
    if it's appropriate for the particular display you're looking
  • 6:43
    at, changing the sorts, adding contextual filters
  • 6:46
    and relationships, and so on.
  • 6:49
    It's the same type of popup screens that you would be able to see using
  • 6:52
    the administrative screen above, but down here it's in context,
  • 6:56
    and you can edit it while you're actually looking at the preview.
  • 6:59
    Let's scroll up a bit and actually change some of the settings
  • 7:01
    and see how it works in Views.
  • 7:04
    One of the simplest settings that we can change on this view
  • 7:06
    is the number of items that are displayed on each page.
  • 7:10
    By default Views has limited this view to 10 items per page.
  • 7:15
    If any more than that appear, we'll see forward
  • 7:17
    and backward pagers appear at the bottom of the listing.
  • 7:19
    If we click on that item in the Views administration screen,
  • 7:22
    it'll pop up a second window and allow us to change the settings.
  • 7:26
    If we change that too much smaller number,
  • 7:28
    let's say two items per page, and hit Apply,
  • 7:33
    we can immediately scroll down and see that reflected in the preview.
  • 7:39
    Since we had three items in the list previously,
  • 7:42
    we will see two now and new pager appearing at the bottom.
  • 7:46
    And, as I mentioned earlier, the Pager section
  • 7:49
    has its own drop down right here in the preview.
  • 7:53
    We can pop up that Editing screen again, change it back to 10 items,
  • 7:58
    hit Apply.
  • 8:00
    Whether you want to use the contextual drop
  • 8:01
    downs in Views preview or use the Overview
  • 8:05
    section of the administration screen and edit directly
  • 8:08
    is completely up to you.
  • 8:10
    Either one gives you access to the same Settings pages.
  • 8:13
    You'll notice that because we've been making changes to the view,
  • 8:16
    at the very top of the administration screen
  • 8:18
    there's a warning that's appeared.
  • 8:20
    It says that all changes are stored temporarily
  • 8:22
    and that we need to click Save to make them permanent.
  • 8:25
    Views is able to hold onto the edits we've
  • 8:27
    been making in this particular view.
  • 8:29
    It's even smart enough to be able to keep track of if we close the page
  • 8:32
    and navigate back to it.
  • 8:33
    But if we added a second view or do anything that causes views to lose
  • 8:37
    track of that temporary cache, all of our changes will be lost.
  • 8:41
    It's important to click Save on the View screen any time
  • 8:44
    you've made changes that you want to hold onto.
  • 8:48
    It tells us that our view has been saved,
  • 8:50
    and we can go back to editing without worrying
  • 8:51
    about losing our changes.
  • 8:54
    Some settings in Views, primarily the ones
  • 8:55
    that deal with the actual structure of the information that's being
  • 8:58
    pulled back from the database, like filters, sorts, fields, and so on,
  • 9:02
    have the potential to affect all of the displays that are currently
  • 9:06
    in use on the view, in our case, both the page and the feed display.
  • 9:11
    If I click on the Content Published filter,
  • 9:14
    Views will pop up a screen that lets me
  • 9:16
    change the settings for that filter.
  • 9:18
    Now, it's important to note that at the very top of that edit popup,
  • 9:22
    there's a drop down that allows us to choose whether or not
  • 9:25
    this change should affect all of the displays that are part
  • 9:28
    of this view or just the page display.
  • 9:32
    If we choose to only edit the page display,
  • 9:34
    it effectively overrides all of the shared defaults
  • 9:38
    that all displays in this view will be using.
  • 9:41
    You could change that to show Unpublished
  • 9:43
    Content instead of Published Content.
  • 9:45
    Hit Apply.
  • 9:46
    Because we've overridden this setting on this particular display,
  • 9:50
    you can see that there's an icon indicating that this setting is
  • 9:54
    overridden on the fit page display.
  • 9:57
    Now, on a real view that we're using on a live site,
  • 10:00
    we probably wouldn't want to set the filter
  • 10:02
    to only show unpublished content.
  • 10:05
    That would mean that anyone who visits this page would see nodes,
  • 10:08
    even if they aren't intended to be seen by the public.
  • 10:11
    So we'll go in and change that back.
  • 10:15
    But you can see that the Override icon is still displayed.
  • 10:20
    Any changes we make to the Filter criteria for this page display
  • 10:24
    are now unique to the page display rather than all displays.
  • 10:28
    If we want to change it back to use the default settings that are
  • 10:31
    shared by all displays, we can click on it
  • 10:35
    and select All Displays from this drop down again.
  • 10:39
    Once we click Apply, the icon will disappear, indicating
  • 10:43
    that this display is using the Shared Filter criteria
  • 10:47
    that are in use across all displays.
  • 10:49
    It takes a bit of getting used to, but if you pay attention
  • 10:51
    to the visual cues that the Views module gives you, should be
  • 10:54
    able to keep track of whether you're editing something that's
  • 10:57
    specific to a display or shared across all of them.
  • 11:00
    Before we go on, we're going to make one more change to our view.
  • 11:03
    One of most common tweaks that people want
  • 11:05
    to make to the front page of a default Drupal site
  • 11:07
    is changing the sort order.
  • 11:08
    By default, Drupal displays all the front page nodes
  • 11:11
    in reverse chronological order, the newest items first.
  • 11:14
    If you want to reverse that, you need Views.
  • 11:17
    On our Front Page View, we're going to change the sort order
  • 11:20
    so that the oldest items are first.
  • 11:23
    We can go to the Sort Criteria section
  • 11:25
    and click on the Post Date Sort.
  • 11:29
    We click on it.
  • 11:30
    We can change from Sort Descending to Sort Ascending
  • 11:34
    and apply that change.
  • 11:37
    If we scroll down, in the preview we can see that older items are
  • 11:41
    appearing at the top, and newer items are appearing below.
  • 11:46
    We'll scroll to the top, hit Save, and then go back to the Main Views
  • 11:53
    administration page, where we can see
  • 11:54
    a list of all the current views on the site.
  • 11:58
    Our Front Page View is still being displayed here,
  • 12:01
    and we can see the different paths that it provides.
  • 12:03
    The front page URL and the RSS.xml URL
  • 12:06
    is provided by the feed display.
  • 12:09
    If we click on that front page path, it will take us to the actual view
  • 12:14
    that we've created.
  • 12:15
    We can see our content being displayed oldest first, but other
  • 12:21
    than that it looks just like the normal Drupal front page.
  • 12:24
    The only difference is when you mouse over this screen,
  • 12:28
    you'll see that there's a contextual drop down that allows you to jump
  • 12:31
    right to the Views Editing screen from the page
  • 12:34
    that it is being displayed on.
  • 12:36
    Right now, you can see that we're looking
  • 12:38
    at the view on the front page URL.
  • 12:40
    If we wanted to use our view as the actual front page at the Drupal
  • 12:43
    site, we would need to change the front page configuration.
  • 12:47
    We can go up the Configuration menu, click Site Information,
  • 12:52
    and scroll down to the bottom of the Administration page.
  • 12:55
    Here, we can see what the default front page is.
  • 12:59
    We enter in the URL of our view then save the configuration.
  • 13:05
    If we click on the Home tab to go to the front page of our site,
  • 13:08
    we can see that our view is now in use.
  • 13:11
    Oldest items are being displayed at the top of the list.
  • 13:14
    And if we mouse over at the front page,
  • 13:16
    we can see that it's a view, because this context link is allowing us
  • 13:20
    to jump right to the Edit screen for the view.
  • 13:23
    In this chapter, we've taken a look at the Views user interface
  • 13:26
    and learned our way around it's administration screens.
  • 13:29
    If you're used to Views 2 from Drupal 6,
  • 13:31
    it might take a little getting used to.
  • 13:33
    A lot of Views more complex options have
  • 13:35
    been moved underneath the Advanced tab.
  • 13:37
    But overall, the interface is quite a bit more streamlined
  • 13:41
    and should be pretty easy to use once you get used to it.
  • 13:44
    In the next chapter, we'll be taking a look
  • 13:46
    at how to build out our own custom views from scratch.
  • 0:00
    INTRODUÇÃO DE VIEWS PARA DRUPAL 7
  • 0:03
    Visão geral da interface de usuário de Views
  • 0:05
    Com Jeff Eaton
  • 0:07
    JEFF EATON: Nesse capítulo, iremos
  • 0:09
    dar uma olhada no básico da interface de usuário de Views,
  • 0:12
    aprendendo sobre as telas de administração,
  • 0:14
    e descobrindo como customizar algumas das views básicas
  • 0:17
    que vem com o módulo.
  • 0:18
    A primeira coisa que precisamos fazer é ir na página Modules no Drupal
  • 0:22
    e habilitar Views.
  • 0:24
    Views é na verdade dividido em vários módulos.
  • 0:27
    Views por si só trata da exibição de views, puxar conteúdo
  • 0:30
    do banco de dados Drupal, e exibir para os usuários.
  • 0:33
    O módulo Views UI é o que iremos utilizar para dar uma olhada nas views existentes
  • 0:37
    que estão ali, customiza-las, e construir nossas próprias views.
  • 0:40
    Se marcarmos ambos, aperte em Save Configuration.
  • 0:44
    O Drupal nos avisa que também precisamos habilitar o módulo Chaos Tools.
  • 0:48
    Chaos Tools é um módulo API que Views usa para fazer algumas coisas
  • 0:51
    como exportar e importar definições de views,
  • 0:54
    exibir seus popups AJAX e por aí vai.
  • 0:57
    Na verdade não precisamos nos preocupar muito sobre Chaos Tools,
  • 1:00
    além de ter certeza que está habilitado quando habilitamos Views.
  • 1:03
    Então podemos apertar em Continue e permitir que o Drupal o habilite.
  • 1:07
    Agora que habilitamos todos esses módulos,
  • 1:09
    podemos fechar essa tela e ir na visualização de Structure.
  • 1:13
    Na página Structure, podemos ver que há
  • 1:15
    uma nova entrada para o módulo Views.
  • 1:17
    Se formos para essa página, temos nossa primeira visão
  • 1:20
    da tela de administração de Views.
  • 1:23
    Aqui, Views lista todas as views diferentes
  • 1:25
    que foram definidas.
  • 1:27
    Essas vem com Views automaticamente e fornecem
  • 1:29
    exemplos úteis de algumas de suas capacidades.
  • 1:32
    Nenhuma delas são habilitadas por padrão,
  • 1:33
    mas estão lá caso queremos dar uma olhada.
  • 1:36
    Alguns exemplos são a view Archive que mostra
  • 1:39
    uma listagem mensal de qual conteúdo foi postado no site,
  • 1:42
    a view Back Links que exibe qual conteúdo está referenciando
  • 1:46
    outro conteúdo no site, e a Front Page.
  • 1:49
    Iremos dar uma olhada na view Front Page.
  • 1:51
    Uma das razões que é útil para pessoas que estão começando
  • 1:54
    é que fornece uma cópia exata
  • 1:56
    da página inicial padrão do Drupal.
  • 1:59
    Mas porque é construído com Views, todas suas configurações
  • 2:01
    podem ser customizadas.
  • 2:02
    Podemos mudar a ordem de classificação, como os nodes que estão na página inicial
  • 2:06
    são exibidos, e por aí vai.
  • 2:08
    Então clicamos nesse link Enable aqui.
  • 2:11
    Você pode ver que agora aparece aqui no topo da lista.
  • 2:13
    Agora está destacado, indicando que está habilitado.
  • 2:16
    Nessa tela, podemos ver que fornece
  • 2:18
    vários caminhos de URL, página inicial, e RSS, XML.
  • 2:24
    E também podemos abrir esse menu drop down
  • 2:27
    e ver quais ações podem ser realizadas.
  • 2:29
    Podemos editar a view, desabilita-la novamente, clonar e construir
  • 2:32
    nossa própria versão do zero, ou exporta-la
  • 2:34
    para que possa ser reusada em outros sites.
  • 2:37
    Agora, iremos clicar no link Edit.
  • 2:39
    Essa é a tela principal da interface para o módulo Views.
  • 2:42
    É o que veremos quando quisermos customizar uma view,
  • 2:44
    construir uma do zero, ou apenas dar uma olhada
  • 2:47
    em como uma view existente é construída.
  • 2:49
    No topo, podemos ver uma listagem
  • 2:51
    dos displays que fazem parte dessa view.
  • 2:53
    Page é o tipo mais comum de display usado por Views.
  • 2:57
    Permite que você defina uma URL que esteja no site Drupal, que
  • 3:00
    liste conteúdo de uma forma visível para usuários finais.
  • 3:03
    Feed é outro tipo comum.
  • 3:05
    Permite que você gere um feed RSS, utilizando módulos terceiros,
  • 3:09
    feeds Atom, feeds JSON, ou outros tipos de dados
  • 3:12
    destinados para utilização de leitores de notícias ou aplicações externas que
  • 3:16
    estarão puxando informações a partir do seu site.
  • 3:18
    Utilizando uma view page e uma view feed juntas,
  • 3:21
    podemos fornecer uma listagem de conteúdo que é visível para ambos usuários
  • 3:25
    e software que puxa essas informações.
  • 3:28
    Debaixo do botão Add, há uma lista de tipos de display adicionais
  • 3:31
    que podem ser usados nessa view.
  • 3:33
    Block, References, e Attachment são três tipos
  • 3:37
    que iremos dar uma olhada depois.
  • 3:40
    No outro lado, também podemos ver ações
  • 3:42
    que podem ser realizadas na própria view.
  • 3:44
    Podemos editar o nome e descrição da view, executar uma ferramenta de análise
  • 3:48
    para ver quais consultas SQL estão sendo geradas.
  • 3:50
    E também podemos clonar e exportar a view aqui, também.
  • 3:53
    A coisa importante para se manter em mente é que todos os displays diferentes
  • 3:56
    que são adicionados aqui são apenas views diferentes
  • 3:58
    da mesma informação base.
  • 4:02
    Na seção abaixo, vemos onde essas coisas são customizadas.
  • 4:06
    Você pode ver diferentes configurações relacionadas a Views,
  • 4:08
    como o título da view, qual formato
  • 4:11
    que a informação deve ser apresentada.
  • 4:13
    A view Front Page apresenta as coisas numa lista não formatada
  • 4:17
    e mostra visualizações teaser de cada um dos nodes que estão na lista.
  • 4:21
    O Filter criteria permite que você controle
  • 4:23
    quais coisas irão aparecer na listagem.
  • 4:26
    Agora temos definido para mostrar nodes que são ambos
  • 4:28
    promovidos a página inicial e publicados.
  • 4:31
    E depois, temos o Sort criteria que permite que você determine quais coisas
  • 4:35
    devem aparecer no topo da lista.
  • 4:38
    Para corresponder o comportamento da view Front Page
  • 4:41
    com a qual o Drupal vem automaticamente,
  • 4:43
    essa view está classificando para que nodes sticky fiquem no topo,
  • 4:47
    e depois está classificando por data do post.
  • 4:50
    No meio da tela, você também pode ver
  • 4:52
    configurações que são específicas para esse tipo particular de display,
  • 4:55
    o page.
  • 4:57
    Podemos definir qual caminho em que a página aparece
  • 4:58
    nesse caso, página inicial.
  • 5:00
    E também podemos escolher ter ou não
  • 5:02
    um item de menu para essa view
  • 5:04
    nos itens de navegação do Drupal.
  • 5:07
    Se desejado, você também pode definir controles de acesso.
  • 5:09
    Não iremos fazer isso agora, mas iremos
  • 5:11
    aproveitar essa funcionalidade depois.
  • 5:13
    E depois você pode também mudar informações do header e footer.
  • 5:16
    Por exemplo, se você quer fornecer alguma informação útil sobre qual tipo
  • 5:19
    de conteúdo as pessoas estarão olhando nessa view,
  • 5:22
    você pode colcoar isso no header.
  • 5:24
    O pager permite também que você customize a aparência
  • 5:27
    das setas para frente/trás que aparecem embaixo de uma view
  • 5:31
    se há muito conteúdo para colocar em apenas uma página.
  • 5:35
    Por último, tem uma aba Advanced.
  • 5:37
    Debaixo da aba Advanced, podemos encontrar algumas opções mais complexas
  • 5:40
    que podem ser definidas em qualquer view.
  • 5:43
    Há Contextual filters, Relationships, o comportamento
  • 5:46
    da view quando não há resultados encontrados,
  • 5:49
    configurações do Exposed form, e outras configurações diversas que
  • 5:52
    podem ser configuradas em qualquer view.
  • 5:55
    Iremos dar uma olhada nessas em detalhe depois.
  • 5:57
    Não temos que nos preocupar com isso por enquanto.
  • 5:59
    Mas é importante lembrar que se você está procurando por qualquer
  • 6:02
    uma dessas opções, estão debaixo da aba Advanced.
  • 6:04
    No Drupal 6 estavam misturadas com o resto da interface de usuário de Views,
  • 6:07
    e pode levar um tempo até se acostumar.
  • 6:10
    Se rolarmos para baixo na parte inferior da tela administrativa de Views,
  • 6:14
    podemos ver uma seção que é muito, muito útil
  • 6:16
    se você está construindo views complexas.
  • 6:18
    É a área Automatic Preview.
  • 6:20
    Quando você está construindo uma view, essa área
  • 6:22
    irá continuar a se atualizar sozinha para refletir as mudanças que você está fazendo.
  • 6:25
    Agora, vemos uma listagem de qual conteúdo apareceria
  • 6:28
    nessa view se fôssemos na URL da página inicial
  • 6:32
    que isso fornece.
  • 6:33
    Nesse drop down, você pode até mesmo mudar
  • 6:36
    qualquer uma dessas configurações individuais para essa view,
  • 6:38
    adicionando e editando filters, mudando fields
  • 6:41
    se é apropriado para o display em particular que você está vendo
  • 6:43
    mudando classificações, adicionando contextual filters
  • 6:46
    e relationships, e por aí vai.
  • 6:49
    É o mesmo tipo de tela pop up que você poderia ver usando
  • 6:52
    a tela administrativa acima, mas aqui em baixo está em contexto
  • 6:56
    e você pode editar enquanto você está olhando para a pré-visualização.
  • 6:59
    Vamos rolar para cima um pouco e mudar algumas dessas configurações
  • 7:01
    e ver como funciona em Views.
  • 7:04
    Uma das configurações mais simples que podemos mudar nessa view
  • 7:06
    é o número de itens que são exibidos em cada página.
  • 7:10
    Por padrão Views tem limitado essa view em 10 itens por página.
  • 7:15
    Se mais do que isso aparecer, iremos ver
  • 7:17
    paginadores para frente e para trás na parte inferior da listagem.
  • 7:19
    Se clicarmos nesse item na tela de administração de Views,
  • 7:22
    irá exibir uma segunda janela e nos permitir a mudar as configurações.
  • 7:26
    Se mudarmos isso para um número bem menor,
  • 7:28
    digamos dois itens por página e apertar em Apply,
  • 7:33
    podemos imediatamente rolar para baixo e ver isso refletido na pré-visualização.
  • 7:39
    Já que tínhamos três itens na lista anteriormente,
  • 7:42
    iremos ver dois agora e um novo paginador aparecendo na parte inferior.
  • 7:46
    E, como mencionei antes, a seção do paginador
  • 7:49
    tem seu próprio drop down aqui na pré-visualização.
  • 7:53
    Podemos abrir aquela tela de edição novamente, mudar para 10 itens,
  • 7:58
    apertar em Apply.
  • 8:00
    Se você quer mudar o drop down contextual
  • 8:01
    na pré-visualização de Views ou usar a seção Overview
  • 8:05
    da tela de administração e editar diretamente,
  • 8:08
    depende de você.
  • 8:10
    Ambos lhe dão acesso as mesmas páginas de configurações.
  • 8:13
    Você irá perceber que porque fizemos mudanças nessa view,
  • 8:16
    no topo da tela de administração
  • 8:18
    há um aviso que apareceu.
  • 8:20
    Diz que todas as mudanças estão armazenadas temporariamente
  • 8:22
    e precisamos clicar em Save para torna-las permanentes.
  • 8:25
    Views é capaz de segurar as edições que
  • 8:27
    fizemos nessa view em particular.
  • 8:29
    É até mesmo inteligente o suficiente para poder rastrear se fecharmos a página
  • 8:32
    e navegarmos de volta para ela.
  • 8:33
    Mas se adicionássemos uma segunda view ou qualquer outra coisa que faça com que Views
  • 8:37
    pare de rastrear o cache temporário, todas nossas mudanças serão perdidas.
  • 8:41
    É importante clicar em Save na tela da View quando você
  • 8:44
    fizer mudanças que queira manter.
  • 8:48
    Nos diz que nossa view foi salva,
  • 8:50
    e podemos voltar para edição sem ter que se preocupar
  • 8:51
    com a perda das nossas mudanças.
  • 8:54
    Algumas configurações em Views, principalmente as
  • 8:55
    que tratam da estrutura das informações que estão sendo
  • 8:58
    puxadas do banco de dados, como filtros, classificações, fields, e assim por diante,
  • 9:02
    tem o potencial de afetar todos os displays que estão
  • 9:06
    em uso na nossa view, no nosso caso, ambos displays feed e page.
  • 9:11
    Se eu clicar no filtro Content Published
  • 9:14
    Views irá abrir uma tela que me permite
  • 9:16
    mudar as configurações para esse filtro.
  • 9:18
    Agora, é importante observar que no topo do popup de edição,
  • 9:22
    há um drop down que nos permite escolher se
  • 9:25
    essa mudança deveria afetar todos os displays que são parte
  • 9:28
    dessa view ou apenas o display page.
  • 9:32
    Se escolhermos apenas editar o display page,
  • 9:34
    isso sobrescreve efetivamente todos os padrões compartilhados
  • 9:38
    que todos displays nessa view irão usar.
  • 9:41
    Você poderia mudar isso para mostrar conteúdo não publicado
  • 9:43
    ao invés de conteúdo publicado.
  • 9:45
    Aperte Apply.
  • 9:46
    Porque sobrescrevemos essa configuração nesse display em particular,
  • 9:50
    você pode ver que há um ícone indicando que essa configuração
  • 9:54
    está sobrescrita no display page.
  • 9:57
    Agora, numa view real que estamos usando num site em produção,
  • 10:00
    provavelmente não iríamos querer definir o filtro
  • 10:02
    para mostrar apenas conteúdo não publicado.
  • 10:05
    Isso significaria que qualquer um que visitasse a página veria nodes,
  • 10:08
    até mesmo se eles não fossem destinados ao público.
  • 10:11
    Então iremos mudar isso de volta.
  • 10:15
    Mas você pode ver que o ícone de sobrescrição ainda é exibido.
  • 10:20
    Qualquer mudança que fizermos em Filter criteria para esse display page
  • 10:24
    agora são únicas ao display page ao invés de todos os displays.
  • 10:28
    Se quisermos mudar de volta para usar as configurações padrão
  • 10:31
    que são compartilhadas por todos os displays, podemos clicar nisso
  • 10:35
    e selecionar All Displays nesse drop down novamente.
  • 10:39
    Uma vez que clicarmos em Apply, o ícone irá desaparecer, indicando que
  • 10:43
    esse display está usando o Filter criteria Shared
  • 10:47
    que estamos usando em todos displays.
  • 10:49
    Leva um pouco de tempo para se acostumar com isso, mas se você prestar atenção
  • 10:51
    nas dicas visuais que o módulo Views dá, você poderá
  • 10:54
    monitorar se você está editando algo que é
  • 10:57
    específico a um display ou é compartilhado em todos eles.
  • 11:00
    Antes de continuarmos, iremos fazer mais uma mudança na nossa view.
  • 11:03
    Um dos ajustes mais comuns que as pessoas querem
  • 11:05
    fazer numa página inicial de um site Drupal
  • 11:07
    é mudar a classificação.
  • 11:08
    Por padrão, o Drupal exibe todos os nodes da página inicial
  • 11:11
    em ordem cronológica reversa, os itens mais novos por primeiro.
  • 11:14
    Se você quiser reverter isso, você precisa de Views.
  • 11:17
    Na nossa view Front Page, iremos mudar a classificação
  • 11:20
    para que os itens mais velhos sejam os primeiros.
  • 11:23
    Podemos ir na seção Sort Criteria
  • 11:25
    e clicar na classificação Post Date.
  • 11:29
    Clicamos nissso.
  • 11:30
    Podemos mudar de ordem decrescente para ordem ascendente
  • 11:34
    e aplicar essa mudança.
  • 11:37
    Se rolarmos para baixo, na pré-visualização podemos ver que itens mais antigos
  • 11:41
    estão aparecendo no topo, e itens mais novos estão aparecendo embaixo.
  • 11:46
    Iremos rolar até o topo, apertar em Save, e depois voltar para a página principal
  • 11:53
    de administração de Views, onde podemos ver
  • 11:54
    uma lista de todas views atuais no site.
  • 11:58
    Nossa view Front Page ainda está sendo exibida aqui,
  • 12:01
    e podemos ver que os caminhos diferentes que fornece.
  • 12:03
    A URL da página inicial e a URL rss.xml
  • 12:06
    é fornecida pelo display feed.
  • 12:09
    Se clicarmos naquele caminho da página inicial nos levará para a view
  • 12:14
    que criamos.
  • 12:15
    Podemos ver nosso conteúdo sendo exibido por mais velho primeiro,
  • 12:21
    mas além disso se parece com a página inicial normal do Drupal.
  • 12:24
    A única diferença é quando seu mouse passa por cima dessa tela,
  • 12:28
    você verá que há um drop down contextual que lhe permite ir
  • 12:31
    para a tela de edição de Views a partir da página
  • 12:34
    que está sendo exibida.
  • 12:36
    Agora, você pode ver que estamos vendo
  • 12:38
    a view na URL da página inicial.
  • 12:40
    Se quiséssemos usar nossa view como a página inicial do Drupal de fato
  • 12:43
    precisaríamos mudar a configuração da página inicial.
  • 12:47
    Podemos ir no menu Configuration, clicar em Site Information,
  • 12:52
    e rolar para baixo até a parte inferior da página de administração.
  • 12:55
    Aqui, podemos ver o que é a página inicial padrão.
  • 12:59
    Colocamos a URL da nossa view e depois salvamos a configuração.
  • 13:05
    Se clicarmos na aba Home para ir para a página inicial do nosso site
  • 13:08
    podemos ver que nossa view agora está em uso.
  • 13:11
    Itens mais antigos estão sendo exibidos no topo da lista.
  • 13:14
    E se passarmos o mouse em cima da página inicial,
  • 13:16
    podemos ver que é uma view, porque esse link contextual está nos permitindo
  • 13:20
    ir para a tela de edição para a view.
  • 13:23
    Nesse capítulo, demos uma olhada na interface de usuário de Views,
  • 13:26
    e aprendemos sobre suas telas de administração.
  • 13:29
    Se você está acostumado com Views 2 do Drupal 6,
  • 13:31
    talvez leve um pouco de tempo para você se acostumar.
  • 13:33
    Várias das opções mais complexas de Views
  • 13:35
    foram movidas para debaixo da aba Advanced.
  • 13:37
    Mas em geral, a interface está bem mais simplificada
  • 13:41
    e deve ser bastante fácil de usar uma vez que você se acostumar.
  • 13:44
    No próximo capítulo, iremos dar uma olhada
  • 13:46
    em como construir nossas próprias views customizadas do zero.

Overview of the Views User Interface

Loading...

In this video we'll take a tour of the Views user interface, starting with looking at existing views, editing one of them, seeing what we have to work with, and then making som edits. The Views interface has a lot of configuration options so it's good to have a sense of what is available and where things are located. We'll use many of the pieces throughout the series, but this video gets you started by making a few simple edits and then reviewing our changes.

This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.