Nov 27, 2010
admin

A first view

The Simple MVC views follow the two-step view pattern. This allows you to specify a global container page in which you can specify your head page, your foot page and may be some lateral columns. In the main part of your page, you will display each time the contents of your specific action (index, detail, add etc.).
The views also deal with JavaScript and CSS libraries. In Simple MVC, the view is also a class which is placed under business/{your-module-application}/views/ . Since the view has to deal with templates and partial views, we have some other files to store the template folder and the view folder. We call a template the global container page, and view the partial specific view.
Since the templates will be used by many views, they are pretty independent, so they are placed under business/{your-module-application}/templates.
Here is a structure of the files we should have at the end:

$ tree business/front/views/
views
|-- Feed
|   |-- add.php
|   |-- detail.php
|   `-- index.php
|-- FeedView.php
|-- Main
|   |-- footer.php
|   `-- header.php
`-- MainView.php
$ tree business/front/templates/
templates
`-- default.php

The views folder contains Two sections: Feed and Main, each one is composed by a View.php file and a folder. Actually, the Feed.php file will handle the view class itself, whereas the folder wil contain the html related to each action.
The Main section is a common section which is extended by the other views. this allows reusing common calls, script calls, css calls, common html code etc.
You will understand better with an example. So let’s write our index view:
First, we will create our FeedView and MainViews classes under views (placed under business/front/views/FeedView.php and business/front/views/FeedView.php)

/**
 * Feed Front View
 */
class FeedView extends MainView
{
}
class MainView extends CoreView
{
    /**
     * index Action
     *
     */
    public function alwaysAction()
    {
        $this->addJs('/scripts/jquery-1.4.4.min.js');
        $this->enableJQueryMobile();
    }
 
    /**
     * Adds the js and css for the jqueryMobile Framework
     *
     */
    private function enableJQueryMobile()
    {
        $this->addCss('/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css');
        $this->addJs('/scripts/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js');
    }
}

Since all the code we need to have is a common code untill now, we wrote it in the MainView. Basically, we just need to include our Javascript and CSS needed. In this case, and since we are using jQueryMobile as a framework for our iphone application, all we need to do is to include the javascriot for the jQuery Framework, and the Javascript and CSS for jQueryMobile.
For purpose of simplicity, the jQuery Mobile is directly bundled in the default www folder of Simple MVC. You can change the scripts and styles if a new version has been released.

Next step is to write our first template. Usually, we need to do this once for every module, unless you want different templates for your sections. so We will add a default template under business/front/templates/default.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title><?php echo $this->languages['title']?></title>
       <?php $this->renderCss();?>
       <?php $this->renderJs();?>
    </head>
<body>
<div data-role="page">
    <?php
        $this->render('header', 'Main');
        $this->renderMessages();
        $this->main();
        $this->render('footer', 'Main');
    ?>
</div>
</body>
</html>

Not too long. Let’s explain :
- in the head section, to display the title, we used $this->languages['title'], this allows you to have a multilingual application. Later on, we will have to fill a language file with the needed variables. Next in the head section, we have to call the renderCss and renderJs methods to get the previously pushed css and js code in the view.
- in the body section, the first php line uses the method render. this allows actually to call specific blocks in the view, here we are calling the header block and the footer block.
Thos blocks are actually under the Main view (see the file hierarchy above). The main() method will get the specific view to display it in the middle of the page.

Allright, what we are missing to get the work complete ? I’ll tell you:
- the partials (header, footer, feed index)
- the language file
Let’s start to write our header file, this one has to be under business/front/views/Main/header.php

<div data-role="header">
    <h1><?php echo $this->languages['title']?></h1>
</div>
<div data-role="content"><!--begin content -->
    <div id="jqm-homeheader">
        <h1><?php echo $this->languages['title']?></h1>
        <p><?php echo $this->languages['description']?></p>
    </div>

Notice always here that we are using the languages to display our text. Also notice the attributes and the specific classes of the jQueryMobile framework. Those will allow it to display correctly the styles and effects under iphone. This is what I like in this framework, it is the progressive enhancement method!
Anyway :-) lets write our footer file under business/front/views/Main/footer.php

</div><!-- end content -->
<div data-role="footer" class="ui-bar">
    <div data-role="controlgroup" data-type="horizontal">
    <a href="/" data-role="button" data-icon="home"><?php echo $this->languages['home']?></a>
        <a href="/?controller=Feed&action=add" data-role="button" data-icon="plus"><?php echo $this->languages['add']?></a>
    </div>
</div>

Lets write the index specific view, this view will list the feeds. open a new file under business/front/views/Feed/index.php and add the following lines :

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="list-divider"><?php echo $this->languages['list']?></li>
        <?php
        if (count($this->feeds))
        {
            foreach ($this->feeds as $feed)
            {
        ?>
            <li><a href="/?controller=Feed&action=detail&id=<?php echo $feed->id?>"><?php echo $feed->name;?></a></li>
        <?php }
        } else { ?>
 
        <li><?php echo $this->languages['no_feeds']?></li>
        <?php }?>
        </ul>

In the index.php, all we do is that we are looping through the feed items to display the name and add a link to the detail page.
With those files, the view part is almost complete. We should move forward to add the language variables. This will be explained in the next section The configuration and helpers.

1 Comment

Leave a comment to Building an Iphone Application with SimpleMVC in a few hours « Simple MVC, a light PHP5 Framework