Openerp/histest2

การแยกโค้ด 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

เพิ่มปุ่ม Search ในฟอร์มให้เรียกค้นกลับไปยังเซิร์ฟเวอร์ของ OpenERP

ไฟล์ histest_view.xml

แก้ไข view histest.patient.form โดยระบุชนิด widget ที่สร้างขึ้นมาให้กับฟิลด์ first_name last_name และ id_number

<record model="ir.ui.view" id="view_histest_patient_form">
  <field name="name">histest.patient.form</field>
  <field name="model">histest.patient</field>
  <field name="arch" type="xml">
    <form string="Patient" version="7.0">
      <group cols="2">
        <group colspan="1">
          <field name="title"/>
          <field name="first_name" widget="firstname" />
          <field name="last_name" widget="lastname" />
        </group>
        <group colspan="1">
          <field name="sex"/>
          <field name="id_number" widget="person_id" />
        </group>
      </group>
    </form>
  </field>
</record>

ไฟล์ static/src/xml/histest.xml

เพิ่มเทมเพลทเพื่อใข้กับ widget สำหรับฟิลด์ first_name last_name และ id_number ในฟอร์มเพิ่มข้อมูลผู้ป่วย

<templates>
  :
  <t t-name="histest.FieldPID" t-extend="FieldChar">
    <t t-jquery="input">
      this.parent().append('<button class="oe_histest_pid_search">Search</button>');
    </t>
  </t>

  <t t-name="histest.FieldFirstName" t-extend="FieldChar">
    <t t-jquery="input">
      this.addClass("oe_histest_firstname");
    </t>
  </t>

  <t t-name="histest.FieldLastName" t-extend="FieldChar">
    <t t-jquery="input">
      this.addClass("oe_histest_lastname");
    </t>
  </t>
  :
</templates>

ไฟล์ static/src/js/histest_regis.js

เป็นไฟล์ใหม่ที่สร้างขึ้นมาเพื่อผูก widget ใหม่เข้ากับเทมเพลท รวมถึงบรรจุโค้ดที่ดำเนินการส่งคำร้องการค้นหาตามรหัสผู้ป่วยแบบ asynchronous กลับมายัง OpenERP Server เมื่อผู้ใช้คลิ้กปุ่ม Search ซึ่งเมื่อได้รับคำตอบแล้วจะนำไปอัพเดตในฟิลด์ first_name และ last_name ที่อยู่ในฟอร์มอีกที

openerp.histest.regis = function(instance) {
    instance.histest.regis = {}

    instance.histest.regis.FieldPID = instance.web.form.FieldChar.extend({

        template: 'histest.FieldPID',

        events: {
          'click .oe_histest_pid_search': function(e) {
            var url = "/histest/ajax?pid="+$(".oe_histest_pid_search").parent().find("input").val();
            $.getJSON(url, function(data) {
              $(".oe_histest_firstname").val(data.firstname);
              $(".oe_histest_lastname").val(data.lastname);
            });
          },
        },

    });

    instance.histest.regis.FieldFirstName = instance.web.form.FieldChar.extend({
        template: 'histest.FieldFirstName',
    });

    instance.histest.regis.FieldLastName = instance.web.form.FieldChar.extend({
        template: 'histest.FieldLastName',
    });

    instance.web.form.widgets.add('person_id', 'instance.histest.regis.FieldPID');
    instance.web.form.widgets.add('firstname', 'instance.histest.regis.FieldFirstName');
    instance.web.form.widgets.add('lastname', 'instance.histest.regis.FieldLastName');
};

ไฟล์ __openerp__.py

ระบุให้โค้ดจาวาสคริปต์ static/src/js/histest_regis.js ถูกโหลดพร้อมกับมอดูล

{
    :
    'js': [
        'static/src/js/histest.js',
        'static/src/js/histest_message.js',
        'static/src/js/histest_patient.js',
        'static/src/js/histest_regis.js',
    ],
    :
}

สร้าง web controller เพื่อรับคำร้องการค้นหา

web controller ที่สร้างขึ้นมีขั้นตอนการทำงานดังนี้

1. รับคำร้องในรูป AJAX request เมื่อผู้ใช้กดปุ่มค้นหาในฟอร์มวิว โดยส่งมาในรูปของ URL localhost:8069/histest/ajax/?pid=<รหัสผู้ป่วย>
2. ส่งเลขประจำตัวผู้ป่วยไปยังเซิร์ฟเวอร์ให้บริการข้อมูล (อาทิเช่นเซิร์ฟเวอร์ทะเบียนราษฎร์) เพื่อขอรายละเอียดผู้ป่วย ในการอบรมนี้สมมติว่าเซิร์ฟเวอร์รอรับคำร้องขออยู่ที่ URL http://theory.cpe.ku.ac.th:8080
3. คืนผลลัพธ์กลับไปที่ฟอร์มในรูปของ JSON

ไฟล์ controllers/__init__.py

import my_controller

ไฟล์ controllers/my_controller.py

import openerp.addons.web.http as http
import simplejson as json
import urllib2

class MyController(http.Controller):
    _cp_path = '/histest/ajax'

    @http.httprequest
    def index(self, req, s_action=None, **kwargs):
        pid = req.params['pid']
        request_url = "http://theory.cpe.ku.ac.th:8080/%s" % pid
        contents = urllib2.urlopen(request_url)
        return contents.read()

ไฟล์ __init__.py

เพิ่มคำสั่ง import แพคเกจ controllers

import histest
import controllers

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

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