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