Openerp/histest3

หน้านี้รวมข้อมูลสำหรับการทดสอบการพัฒนาระบบด้วย OpenERP

การแยกโค้ด javascript เป็นส่วน

ก่อนเริ่ม: ดาวน์โหลดโค้ด histest.zip จากครั้งก่อน

histest.js

openerp.histest = function(instance) {

    openerp.histest.message(instance);
    openerp.histest.patient(instance);
    
    instance.web.client_actions.add('histest.indexAction',
                                    'instance.histest.patient.indexAction');

};

histest_message.js

openerp.histest.message = function(instance) {

    instance.histest.message = {};
    instance.histest.message.popupInterval = null;
    instance.histest.message.MsgManagerWidget = instance.web.Widget.extend({

        start: function() {
            var self = this;
            console.log("MsgMan started...");
            if(instance.histest.message.popupInterval) {
                clearInterval(instance.histest.message.popupInterval);
            }
            instance.histest.message.popupInterval = setInterval(function() {
                self.popup();
            },5000);
            this.shownMsgId = 0;
            this.fetchNewMessage(this.shownMsgId, function(msgId) {
                self.shownMsgId = msgId;
            });
        },

        fetchNewMessage: function(recentId, callback) {
            var model = new instance.web.Model('histest.message');
            model.query().filter([['id','>',recentId]]).all().done(function(results){
                if (results.length > 0) {
                    msgId = results[results.length-1].id;
                    callback(msgId);
                }
            });
        },
        
        popup: function() {
            var self = this;
            this.fetchNewMessage(this.shownMsgId, function(msgId) {
                self.do_action({
                    type: 'ir.actions.act_window',
                    res_model: "histest.message",
                    res_id: msgId,
                    views: [[false, 'form']],
                    target: 'new',
                    context: {},
                });
                self.shownMsgId = msgId;
            });
        }
    });
};

histest_patient.js

openerp.histest.patient = function(instance) {
    
    instance.histest.patient = {};
    instance.histest.patient.indexAction = instance.web.Widget.extend({
        template: 'histest.index',
        events: {
            'click .oe_histest_patient_new_link': 'linkClick',
            'click .oe_histest_patient_query_link': 'patientQuery',
        },

        start: function() {
            var msgManager = new instance.histest.message.MsgManagerWidget(this);
            msgManager.appendTo('.oe_application');
        },

        patientQuery: function() {
            var model = new instance.web.Model('histest.patient');
            var self = this;
            self.$(".oe_histest_patient_results").html("");
            model.query().all().done(function(results) {
                for(var i=0; i < results.length; i++) {
                    self.$(".oe_histest_patient_results")
                        .append('<li>' + results[i].first_name + '</li>');
                }
            });
        },

        linkClick: function() {
            this.do_action({
                type: 'ir.actions.act_window',
                res_model: 'histest.patient',
                views: [[false,'form']],
                target: 'current',
                context: {},
            });
        }
    });
};

Responsive CSS

addons/web/static/src/xml/base.xml

453c453
<             <td colspan="2" class="oe_topbar">
---
>             <td colspan="1" class="oe_topbar">
460c460,461
<             <td class="oe_leftbar" valign="top">
---
>           <td>
>             <div class="oe_leftbar" style="float: left;" valign="top">
470,472c471,474
<             </td>
<             <td class="oe_application">
<             </td>
---
>             </div>
>             <div class="oe_application" style="float: left">
>             </div>
>           </td>

addons/web/controllers/main.py

546a547
>         <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

histest/static/src/css/histest.css

.openerp .oe_histest_index {
    padding: 10px;
    background: black;
    color: white;
}
.openerp .oe_histest_index h1 {
    font-size: 40px;
}
.openerp .oe_application {
    width: calc(100% - 221px);
}

@media screen and (max-width: 800px) {
    .openerp .oe_leftbar {
        width: 100%;
    }
    .openerp .oe_application {
        width: 100%;
    }
    .openerp a.oe_logo {
        display: none;
    }
}

Asynchronous request

ขั้นตอนคร่าว ๆ

1. เพิ่มปุ่ม search ในฟอร์มให้เรียกค้นกลับไปยัง server ของ openerp
2. เพิ่ม web controller ที่รับการค้นหา
3. ให้ web controller เรียกค้นไปยังเซิร์ฟเวอร์ให้บริการข้อมูล
4. web controller คืนผลลัพธ์กลับไปที่ฟอร์มในรูปของ JSON

เอกสารครั้งก่อน ๆ

• โค้ดสำหรับการทดสอบครั้งที่ 1 วันที่ 27 มี.ค. 2557 - เกี่ยวกับ web module และการเรียก message