Create Simple WordPress Mobile Theme Using Sencha Touch – Part 2

September 24th, 2011 by aditia rahman / 2 Comments  

     

These are the second part of my previous post about creating simple wordpress mobile theme using sencha touch, there are two screen left that we have to do, they are single post and comment list.

sencha touch wordpress

Single Post

The model used in single post are the same as on the Index page, the different is just the total post that returned from the server. In this single post screen I put a button on the bottom toolbar for displaying comment form that will appear as a floating panel, my thought so the reader can submitting a comment after reading the post.

Download

Get Single Post: get-single.php

<?php

$posts = array();
$my_id = intval($_GET['id']);
$the_post = get_post($my_id);

$posts[] = array(
    'id' => $the_post->ID,
    'title' => $the_post->post_title,
    'permalink' => $the_post->guid,
    'date' => str_replace("-", "/", substr($the_post->post_date, 0, 11)),
    'author_id' => $the_post->post_author,
    'author' => get_userdata($the_post->post_author)->display_name,
    'content' => wpautop($the_post->post_content)
);

echo(json_encode(array('posts' => $posts)));

?>

Insert Comment: insert-comment.js, like the others submitting a comment is using ajax too, some of field are need to be hidden field like author agent and author ip, you can see on the views section.

<?php

$time = current_time('mysql');

$comment_data = array(
    'comment_post_ID'       => $_POST['post_id'],
    'comment_author'        => $_POST['author'],
    'comment_author_email'  => $_POST['email'],
    'comment_author_url'    => $_POST['url'],
    'comment_content'       => $_POST['content'],
    'comment_parent'        => 0,
    'comment_author_IP'     => $_POST['author_ip'],
    'comment_agent'         => $_POST['author_agent'],
    'comment_date'          => $time,
    'comment_approved'      => 1
);

wp_insert_comment($comment_data);

echo '{"success": true}';

?>

Controller: app/controller/Post.js, in this controller there are many button event that we have to implement button for navigation and button for reset and saving the submitted comment, these are basic comment form without validation.

// single post
single: function(post_id) {
    var singlePost = this.render({
        xtype: 'wp_touch-single'
    });
    singlePost.dataView.store.proxy.url = SINGLE_URL + '&id=' + post_id;

    // back to index
    singlePost.query('#homeButton')[0].on({
        tap: function() {
            this.index(1);
        },
        scope: this
    });

    // move to comment list
    singlePost.query('#commentButton')[0].on({
        tap: function() {
            var post = singlePost.dataView.store.data.items[0].data;
            this.comment(post.id, post.title);
        },
        scope: this
    });

    // show comment form
    singlePost.query('#addCommentButton')[0].on({
       tap: function() {
           singlePost.formComment.show();
       },
       scope: this
    });

    // submit a comment
    singlePost.formComment.query('#cSaveButton')[0].on({
       tap: function() {
           singlePost.formComment.submit({
              params: {
                  post_id: post_id
              },
              success: function(e) {
                  singlePost.formComment.reset();
                  singlePost.formComment.hide();
              }
           });
       },
       scope: this
    });

    // reset comment form
    singlePost.formComment.query('#cResetButton')[0].on({
       tap: function() {
           singlePost.formComment.reset();
       }
    });

    singlePost.dataView.store.addListener('datachanged', function() {
        var title = singlePost.dataView.store.data.items[0].data.title
        singlePost.query('#singlePostToolbar')[0].setTitle(
            BLOG_TITLE + ': ' + title
        );
    });

    wp_touch.viewport.setActiveItem(singlePost, {
        type: 'slide'
    });
},

Views: app/views/Post/Single.js, the comment form are implemented in this file, and there are some field which it have to be defined as a hidden field, and the value are from javascript variable from index.php (VISITOR_AGENT & VISITOR_IP)

wp_touch.views.Single = Ext.extend(Ext.Panel, {
    layout: 'fit',
    initComponent: function() {
        this.formComment = new Ext.form.FormPanel({
            url: ICOMMENT_URL,
            floating: true,
            centered: true,
            modal: true,
            items: [{
                xtype: 'hiddenfield',
                name: 'author_agent',
                value: VISITOR_AGENT
            }, {
                xtype: 'hiddenfield',
                name: 'author_ip',
                value: VISITOR_IP
            }, {
                xtype: 'textfield',
                name: 'author',
                label: 'Name'
            }, {
                xtype: 'emailfield',
                name: 'email',
                label: 'Email',
                useClearIcon: true
            }, {
                xtype: 'urlfield',
                name: 'url',
                label: 'Website',
                useClearIcon: true
            }, {
                xtype: 'textareafield',
                name: 'content',
                label: 'Comment'
            }],
            dockedItems: [{
                    xtype: 'toolbar',
                    title: 'Add Your Comment'
            }, {
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'light',
                items: [{xtype: 'spacer'}, {
                    text: 'Reset',
                    itemId: 'cResetButton'
                }, {
                    text: 'Save',
                    ui: 'confirm',
                    itemId: 'cSaveButton'
                }]}
            ]
        });

        this.dockedItems = [{
            xtype: 'toolbar',
            dock: 'top',
            title: '',
            itemId: 'singlePostToolbar',
            style: 'font-size:11px'
        }, {
            xtype: 'toolbar',
            ui: 'light',
            dock: 'bottom',
            items: [{
                itemId: 'homeButton',
                ui: 'back',
                text: 'Back'
            }, { xtype: 'spacer' }, {
                iconCls: 'chat',
                iconMask: true,
                itemId: 'commentButton'
            }, {
                iconCls: 'chat1',
                itemId: 'addCommentButton',
                iconMask: true
            }]
        }];

        this.store = new Ext.data.Store({
            autoLoad: true,
            model: 'Post'
        });

        this.xtpl = new Ext.XTemplate(
            '<div class="post single">',
            '<tpl for=".">',
                '<h2>{title}</h2>',
                '<div class="meta">by {author} on {date}</div>',
                '<p><p>{content}</p></p>',
            '</tpl>',
            '</div>'
        );

        this.dataView = new Ext.DataView({
            store: this.store,
            tpl: this.xtpl,
            itemSelector: 'div.node'
        });

        this.items = [this.dataView];

        wp_touch.views.Single.superclass.initComponent.apply(this, arguments);
    }
});

Ext.reg('wp_touch-single', wp_touch.views.Single);
Comment List

Comment list screen are the most easier screen, it only show all the comment on each page, the toolbar button only contain button for navigation to other screen.

Model: app/models/Comment.js

Ext.regModel("Comment", {
    fields: [
        {name: "id",         type: "integer"},
        {name: "post_id",    type: "string"},
        {name: "author",     type: "string"},
        {name: "author_url", type: "string"},
        {name: "date",       type: "string"},
        {name: "content",    type: "string"}
    ],

    proxy: {
        type: 'ajax',
        url: COMMENT_URL,
        reader: {
            root: 'comments',
            type: 'json'
        }
    }
});

Get Comment List: get-comment.php

<?php

$comments_array = array();

$comments = get_comments('post_id='.$_GET['post_id']);

foreach ($comments as $c) :
    $comments_array[] = array(
        'id'         => $c->comment_ID,
        'post_id'    => $c->comment_post_ID,
        'author'     => $c->comment_author,
        'author_url' => $c->comment_author_url,
        'date'       => str_replace("-", "/", substr($c->comment_date, 0, 11)),
        'content'    => $c->comment_content
    );
endforeach;

echo json_encode(array("comments" => $comments_array));

?>

Controller: app/controllers/Post.js

// comment page for each post
comment: function(post_id, title) {
    var commentPanel = this.render({
        xtype: 'wp_touch-comment'
    });

    commentPanel.dataViewComment.store.proxy.url = COMMENT_URL + '&post_id=' + post_id;

    commentPanel.query('#commentPostToolbar')[0].setTitle('Comments On: ' + title);
    commentPanel.query('#backButton')[0].on({
        tap: function() {
            this.single(post_id);
        },
        scope: this
    });

    commentPanel.query('#homeButton')[0].on({
        tap: function() {
            this.index(1);
        },
        scope: this
    });

    wp_touch.viewport.setActiveItem(commentPanel, {
        type: 'slide'
    });
}

Views: app/models/Comment.js

wp_touch.views.Comment = Ext.extend(Ext.Panel, {
    layout: 'fit',
    initComponent: function() {
        this.dockedItems = [{
            xtype: 'toolbar',
            dock: 'top',
            title: '',
            itemId: 'commentPostToolbar',
            style: 'font-size:11px'
        }, {
            xtype: 'toolbar',
            ui: 'light',
            dock: 'bottom',
            items: [{
                itemId: 'backButton',
                ui: 'back',
                text: 'Back'
            }, { xtype: 'spacer' }, {
                itemId: 'homeButton',
                iconMask: true,
                iconCls: 'home'
            }]
        }];

        this.storeComment = new Ext.data.Store({
            autoLoad: true,
            model: 'Comment'
        });

        this.xtplComment = new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="comments">',
                '<div class="cmeta"><i><b>{author}</b></i> on <b>{date}</b></div>',
                '<p class="ccontent">{content}</p>',
            '</div>',
            '</tpl>'
        );

        this.dataViewComment = new Ext.DataView({
            store: this.storeComment,
            tpl: this.xtplComment,
            itemSelector: 'div.node'
        });

        this.items = [this.dataViewComment];

        wp_touch.views.Comment.superclass.initComponent.apply(this, arguments);
    }
});

Ext.reg('wp_touch-comment', wp_touch.views.Comment);

And that all I cannot give the live demo, but you can download it and try it on the your installed local wordpress.

Download

Comment Form

Comment List

        submit to reddit Delicious

2 Comments Leave a Comment Subscribe RSS

Leave a Comment