Magento development notes 3_PHP tutorial

Magento development Note 3. In this section, let's take a look at Layouts and Blocks in the View. Unlike other mainstream PHPMVC architectures, magento's ActionController does not pass the data object to the view or set the View object. in this section, let's take a look at Layouts and Blocks in the View.

Unlike other mainstream PHPMVC architectures, magento's ActionController does not pass data objects to views or set properties in view objects. View is used to obtain the required information through the system module.

The result of this design is that the View is divided into Blocks and Templates. Blocks is a PHP object, and Templates is a mix of PHP code and HTML (PHP can also be considered as a template language ). Each Block is bound to a Template file. In a Phtml file, the PHP keyword $ this will contain references to the corresponding Block of Temeplate.

The following is a quick example. View the template file app/design/frontend/base/default/template/catalog/product/list. phtml

The following code is displayed:

GetLoadedProductCollection ()?>

Count ():?>

_ ("There are no products matching the selection.")?>

The getLoadedProudctController can be found in the corresponding block file.

App/code/core/Mage/Catalog/Block/Product/List. php

Public functiongetLoadedProductCollection ()

{

Return $ this-> _ getProductCollection ();

}

The _ getProductCollection instance instantiates models and obtains the data to the corresponding template.

Embedded Block

The real strength of Blocks/Templates is the getChildHtml method. This allows us to include the next-level Block/Template in the main Block/Template (xml format)

Bloyout calls Blocks to make up our entire HTMLlayout. Let's look at an example.

App/design/frotend/base/default/template/page/1column. phtml

GetChildHtml ('head')?> GetChildHtml ('content')?> GetChildHtml ('before _ body_end ')?>

GetAbsoluteFooter ()?>

This file is not long, but every call is $ this-> getChildHtml (...), This will include and render other blocks. These blocks may also call other blocks.

Layout

Although Block and Template are good, you may have the following questions:

1. how can I tell Magento which Block is used on the page?

2. how can we tell Magento is initial?

3. how can I tell each Block to call the following block?

In this case, the Layout object is required. The Layout object is in Xml format and defines which Blocks is contained in a page and which Blocks is used to render the page.

In the previous Hello World project, we did this directly on the Action Method. This time we create a simple HTMLtemplate to serve this module.

First create an object

App/design/frontend/base/default/layout/local. xml

Then write the following content

Create another file.

App/design/frontend/base/default/template/simple_page.phtml (note that it is consistent with the template in the configuration)

Write the following content

Untitled

Body {background-color: # f00 ;}

Finally, the layout process is started in Aciton Controller. Add the following two lines of code:

Public functionindexAction (){

// Remove our previous echo

// Echo 'hello Index! ';

$ This-> loadLayout ();

$ This-> renderLayout ();

}

Clear the cache and reload the Hello World controller page. you can see that the page background is hi red, and the Html source code corresponds to simple_page.phtml.

What happened?

Everything just now looks mysterious. Let's take a closer look at this process. First, we want to install the Layoutviewer module. This module is similar to Configviewer.

Once installed, you can use the following URL

Http: // localhost/magento/helloworld/index? ShowLayout = page

This is a layout xml page corresponding to the request. By And Tags. When you call the loadLaout method,

1. generate a Layout xml

2. instantiation And The following Block class. Find the tag with the tag name attribute, find the corresponding tag in the global configuration file, and store it in the internal_blocks array of the Layout object.

3. if The tag contains the output attribute, and its value is added to the internal_blocks array of the Layout object.

In this way, when we call renderLayout in Action Controller, Mageno iterates all blocks in the _ Blocks array and uses the corresponding output attribute as the callback function. This is equivalent to the conversion to Html, which means that the Template of the Block is the starting point of the output.

The following section describes how to instantiate a Block, how to generate a Layout file, and how to end the output.

Block instantiation

In LayoutXml, Or There is a type equivalent to URI

URI specifies an address in the global configuration file. The first part of URI is used to find the global configuration file and the Page class name. The second part is followed by the first part to form a new class and then instantiate the class.

Take page/html as an example. Magento first looks for the following in the global configuration file:

/Global/blocks/page

Then find

Mage_Page_Block

In this way, the MagePageBlock class is obtained. Then, the second part of URI becomes MagePageBlock_Html. This class will be instantiated later.

Blocks is also a group class in Magento, and all share similar instantiation methods. This section will be detailed later.

And Between

We talked about And Block can be instantiated. what is the difference between them.

First available

Then there are

Blocks does not replace blocks. Instead, they add or modify the existing blocks. In the above example, a new root block is inserted into the existing rootblock. This is not defined in Magento Layout. The final result is that the old one is replaced, but it is a bad idea to ensure consistency.

How to generate a Layout file

Now we should have a clear understanding of Layout XML. But where does Layout XML come from? To answer this question, we need to introduce two new concepts: Handles and Package Layout.

Handles

Each request in Magento generates several different Handles. The Layoutview module can display these values with URLs.

Http: // localhost/magento/helloworld/index? ShowLayout = handles

We will see a similar

1. default

2. STORE_bare_us

3. THEME_frontend_default_default

4. Helloworld_index_index

5. Customer_logged_out

Each of these is a Handle. Handle is set in many places of Magento. We need to pay attention to two of them: default and helloworld_index_index .. The default Handle is displayed for each request. Helloworld_index_indexHandle is composed of frontName (helloworld), Actioncontroller (index), and Action Controller Action Method (index. This means that each ActionController method may correspond to a Handle.

Remember that "index" is Magento's default value for each Action Controller and ActionMethods. Therefore, the following request

Http: // localhost/magento/helloworld /? ShowLayout = handles

Similarly, the Handle name is handed over to helloworld_index_index.

Package Layout

You can think that PackageLayout is equivalent to global configuration. It is a large XML file that contains every possible Layout configuration in Magento. Let's take a look.

Http: // localhost/magento/helloworld/index? ShowLayout = package

This may load for a while. If the browser is down in xml, switch to text mode.

Http: // localhost/magento/helloworld/index? ShowLayout = package & showLayoutFormat = text

You can see a large XML file. This is Package Layout. It combines all XMLLayout files under the current topic. The default installation is

App/design/frontend/base/default/layout/

There is The node contains all the names to be loaded. Once the files in the configuration file are merged, Magento will be merged into the previous xml file, local. xml. This can increase the features you want.

Merge Hanldes and Packge Layout

If you see Package Layout, you can see some familiar labels, such And But they all overwrite tags like this.

Etc...

These are Handle labels. The Layout of a request is generated by the Package Layout of all Handles that match the request. Therefore, in the above example, our layout is generated in the following section

We need to pay attention to another tag. Allow us to include other Handle. For example

This means that the request to customeraccountindex should contain The following And .

Application

After reading the theory, let's review the previous work.

This means that the root tag is overwritten. While This ensures that each request will occur. This may not be the expected effect.

If you access any other page, we will also be a blank page, or a red background (as in the previous helloworl page ). So we can improve local. xml to make sure it is only used for the helloworld page. Modify as follows:

Clear the cache. at this time, your other pages should be restored.

Then apply it to googbye Aciton Method

Public function goodbyeAction () {$ this-> loadLayout (); $ this-> renderLayout ();}

Load http: // localhost/magento/helloworld/index/goodbye at this time

The blank page is displayed. At this time, we need to add an actionname in the local. xml file. the content is as follows:

Clear cache. at this time, the following two pages will have the same effect.

Http: // localhost/magento/helloworld/index

Http: // localhost/magento/helloworld/index/goodbye

Start output and getChildHtml

In the standard configuration, the output starts with a Block named root (this is the output feature ). We have rewritten the root template = "simple_page.phtml"

The template is obtained from the home directory of the current or base topic, as shown in figure

App/design/frontend/base/default/template

You can add a template to your own topic or default topic.

App/design/frontend/default/template

App/design/frontend/default/custom/template

The base directory is the last directory to be searched. if magento cannot be found under other topics, it will return to the base directory. However, you don't want to add this directory as mentioned earlier, because magento updates will overwrite them.

Add content block

The red tragedy is boring. So we add some content on the page. Change , As shown below

I added two embedded blocks to the root account. Magento will allocate it and display a page for customer registration. We need to explicitly call this blockblock in simple_page.html. So we use the getChildHtml method of Block as follows:

GetChildHtml ('custom_form_register ');?>

Clear the Cache and reload the page. At this time, we can see the registration page on the red background. There is also a Block named top. links. Add the following

Links

GetChildHtml ('Top. link');?>

When we reload the page, we can see that the Links is rendered, but the top. links is not rendered. This is because we didn't add it in local. xml. In Layout, getChildHtml can only contain Blocks displayed as a sub-block. This allows Magento to instantiate the blocks it wants, and allows us to set different templates for the Block based on the display content.

We can add blocks for top. links in local. xml.

Clear the cache and you will see the effect of the top. links module.

Bytes. Unlike other mainstream PHPMVC architectures, magento's ActionController does not pass data objects to views or set view objects...