Chaiporn: หน้าที่ถูกสร้างด้วย '== การแยกโค้ด javascript เป็นส่วน == '''ก่อนเริ่ม:''' ดาวน์โหล...'

2014-04-17T08:27:23Z

หน้าที่ถูกสร้างด้วย '== การแยกโค้ด javascript เป็นส่วน == '''ก่อนเริ่ม:''' ดาวน์โหล...'

หน้าใหม่

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

'''ก่อนเริ่ม:''' ดาวน์โหลดโค้ด [http://theory.cpe.ku.ac.th/~jittat/openerp/histest.zip histest.zip] จากครั้งก่อน

=== histest.js ===

<syntaxhighlight lang="javascript">
openerp.histest = function(instance) {

openerp.histest.message(instance);
openerp.histest.patient(instance);

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

};
</syntaxhighlight>

=== histest_message.js ===

<syntaxhighlight lang="javascript">
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;
});
}
});
};
</syntaxhighlight>

=== histest_patient.js ===
<syntaxhighlight lang="javascript">
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: {},
});
}
});
};
</syntaxhighlight>

== Responsive CSS ==

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

<syntaxhighlight lang="diff">
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>
</syntaxhighlight>

=== addons/web/controllers/main.py ===

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

=== histest/static/src/css/histest.css ===

<syntaxhighlight lang="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;
}
}
</syntaxhighlight>

== Asynchronous request ==

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

==== ไฟล์ <code>histest_view.xml</code> ====

แก้ไข view <code>histest.patient.form</code> โดยระบุชนิด widget ที่สร้างขึ้นมาให้กับฟิลด์ <code>first_name</code> <code>last_name</code> และ <code>id_number</code>
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

==== ไฟล์ <code>static/src/xml/histest.xml</code> ====
เพิ่มเทมเพลทเพื่อใข้กับ widget สำหรับฟิลด์ <code>first_name</code> <code>last_name</code> และ <code>id_number</code> ในฟอร์มเพิ่มข้อมูลผู้ป่วย

<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
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');
};
</syntaxhighlight>

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

<syntaxhighlight lang="python">
{
:
'js': [
'static/src/js/histest.js',
'static/src/js/histest_message.js',
'static/src/js/histest_patient.js',
'static/src/js/histest_regis.js',
],
:
}
</syntaxhighlight>

=== สร้าง web controller เพื่อรับคำร้องการค้นหา ===
web controller ที่สร้างขึ้นมีขั้นตอนการทำงานดังนี้

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

==== ไฟล์ <code>controllers/__init__.py</code> ====

<syntaxhighlight lang="python">
import my_controller
</syntaxhighlight>

==== ไฟล์ <code>controllers/my_controller.py</code> ====

<syntaxhighlight lang="python">
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()
</syntaxhighlight>

==== ไฟล์ <code>__init__.py</code> ====
เพิ่มคำสั่ง import แพคเกจ controllers

<syntaxhighlight lang="python">
import histest
import controllers
</syntaxhighlight>

== เอกสารครั้งก่อน ๆ ==
* [[Openerp/histest1|โค้ดสำหรับการทดสอบครั้งที่ 1 วันที่ 27 มี.ค. 2557]] - เกี่ยวกับ web module และการเรียก message

Openerp/histest2 - ประวัติรุ่นแก้ไข

Chaiporn: หน้าที่ถูกสร้างด้วย '== การแยกโค้ด javascript เป็นส่วน == '''ก่อนเริ่ม:''' ดาวน์โหล...'