Weak Programmer: 2014

Thursday, August 21, 2014

"Hello World" in Oracle BPEL

BPEL (Business Process Execution Language) เป็นภาษาที่เขียนขึ้นรองรับสถาปัตยกรรม SOA
คร่าวๆในความเข้าใจของผมคือภาษาที่เขียนเพื่อสร้าง WebService โดยเรียกใช้ Web Service ที่มีอยู่เดิมให้ทำงานตามที่เราต้องการได้ครับ โดยโพสนี้คือการเขียนแบบ Basic เลย (ผมเองก็พึ่งศึกษาเหมือนกัน )

Environment ที่ใช้ครับ

Oracle SOA Suite 12c
JDK 1.7u67 (ไม่แนะนำให้ใช้ 1.8 นะครับเพราะเจอปัญหาแน่นอน)

หลังจากที่เราลงตัว Oracle SOA Suite แล้วให้เปิดตัว Oracle JDeveloper Studio มาได้เลยครับ

เลือก New Application > SOA Application

จะมีหน้าให้กำหนดชื่อ Application และ Directory ที่เก็บ

กด Next ไปจะเป็นหน้าให้กำหนดชื่อ Project และ Directory ที่เก็บ

Step สุดท้ายเลือก Composite With BPEL Process แล้ว Finish เลยครับ

ตัว JDev จะสร้าง Application ตามที่เรากำหนดไว้ให้พอเสร็จแล้วจะมีหน้าต่างให้กำหนดค่าตัว BPEL Process

กำหนดค่าตามรูปเลยครับ

พอกด OK ไปตัว JDev จะเปิดไฟล์ Hello.bpel ที่เรากำหนดค่าไว้ขึ้นมาให้เลยซึ่งเราจะเห็นเป็นหน้า Design คล้ายๆ Flow Diagram

ซึ่งเราจะลากตัว Assign ที่อยู่ใน BPEL Constructs ทางด้านขวามาใส่

จากนั้น Double Click ที่ตัว Assign ที่เราใส่เข้าไปครับจะมีหน้าต่างขึ้นมาจะอยู่ใน Tab Copy Rules

ให้เราลาก client:input string ไป client:result string อีกด้านนึงเลยครับ

ให้เรา Double Click ตรง client:result string ด้านขวาเพื่อแก้ไขจะมีหน้าจอ Expression Builder ขึ้นมาผมแก้ expression ตามนี้ครับ

จากนั้นให้เราเปิด Window > Application Server(Ctrl+Shift-G)

คลิกขวาที่ IntregratedWeblogicServer > Start Server Instance หลังจากนั้นรอจน Server Start เสร็จ(สักพักใหญ่ๆเลย)

กลับไปที่ Tab Application ครับ คลิกขวาที่ Project เลือก Deploy

จะมีหน้า Deploy Action ให้เลือก Deploy to Application Server

กด Next จะเป็นหน้า Deploy Configuration

ถัดมาจะเป็นหน้า Select Server ให้เราเลือก IntregratedWebLogicServer เสร็จแล้วกด Finish ได้เลยครับ

พอเรียบร้อยแล้วเรากลับไปที่ Tab Application Server

คลิกขวาที่ตัว WebService ของเราแล้วกด Test Web Service จะมีหน้าให้เราทดสอบ WebService

เรียบร้อยแล้วครับ (รูปเยอะเลย) เดี๋ยวถ้ามีเรื่องน่่าสนใจเกี่ยวกับ BPEL จะมาลงอีกนะครับ

Thursday, August 14, 2014

การเรียกใช้ AngularJS ผ่าน Javascript อื่น

หลายคนคงเคยได้ยินชื่อ AngularJS มาบ้างนะครับ (ช่วงนี้เห็นคนพูดถึงกันเยอะ) เป็น JavaScript Framework ตัวนึงที่ผมรู้สึกทึ่งกับความสามารถของมันมากเลย อีกอย่างคือการเขียนหรือการใช้งานก็ง่ายด้วย โดยตัว angularjs ใช้สถาปัตยกรรม MVC ตัวผมเองก็เคยลองใช้มาเมื่อประมาณ 2 ปีที่แล้ว ยังไม่มีโอกาสได้ใช้อีกเลย(ยังไม่ชำนาญเท่าไหร่ครับ :D ) เพราะว่างานส่วนใหญ่เจอกับ Javascript น้อยมาก ถ้าใครเคยใช้คงจะมีปัญหานึงคือ แล้วเราจะเรียกใช้ตัวแปรหรือฟังก์ชั่นที่อยู่ใน scope ของ angularjs ยังไงล่ะ (ผมคิดว่าถ้าเราใช้ angularjs แบบเต็มรูปแบบอาจจะไม่ต้องเรียกใช้เลยนะ) แต่เผื่อใครต้องใช้ตัว angularjs ก็เตรียมมาไว้ให้ครับ

Environment ที่ใช้

Atom Editor (อันนี้มีคนแนะนำจาก Programmer Thai Blood ครับ แจ๋วดี )
AngularJS 1.2.22
JQuery-ui 1.11 (ผมเอามาเรียกใช้ตัว dialog ครับ)

hello.html

<!doctype html>

<html >

<head>

</head>

<body>

<button id="input-name" type="button" >Input Name</button>

<hr/>

<h1>Hello {{name}} !!</h1>

</div>

</div>

</body>

$(function(){

$("#dlg-input").dialog({

autoOpen:false,

resizable: false,

height:200,

modal: true,

buttons: {

"OK": function() {

var scope = $("#my-app").scope();

scope.$apply(function(){

scope.name = $("#text-name").val();

});

$( this ).dialog( "close" );

"Cancel": function() {

$( this ).dialog( "close" );

}

});

$("#input-name").button().on( "click", function() {

$( "#dlg-input" ).dialog("open");

});

</script>

</html>

ตัวอย่างนี้ผมเอามาจากเว็บ https://angularjs.org/ เลยแต่เอามาปรับนิดหน่อยเพื่อจะได้เห็นภาพการใช้งาน

จุดหลักของตัวอย่างคือโค๊ดจุดนี้ครับ

var scope = $("#my-app").scope();

scope.$apply(function(){

scope.name = $("#text-name").val();

});

เราสามารถเรียกใช้ฟังก์ชั่น scope() เพื่อเรียกตัว scope ของ angularjs มาใช้ได้โดยเราต้องเรียกผ่าน $apply เพื่อให้โค๊ดส่วนนั้นทำงาน

ข้อสังเกตคือเราสามารถเรียก scope() ได้ทุกตัวที่อยู่ใน element ที่เราใส่ ng-app เข้าไปครับ

Source Code : t002.zip

Wednesday, August 13, 2014

สร้าง Project JSF 2

โพสนี้โพสแรกครับ ก็ขอพูดถึงการสร้าง JSF(JavaServer Faces) Project (ของ่ายๆก่อน)

Environment ที่ใช้ครับ

Eclipse 4.4
JSF 2.2
Maven 3
JDK 1.8
Tomcat 8

เริ่มทีละขั้นตอนเลยนะครับ

1. เปิด Eclipse Add Dynamic Web Project ในหน้า New Dynamic Web Project Wizard จะมีรายละเอียดของ Project ให้กำหนดค่า ใส่ชื่อ Project และกำหนดค่าอื่นตามภาพเลยครับ

ส่วนในช่องของ Configuration ให้คลิก Modify... จะมี Window Project Facets ขึ้นมาให้เลือก JavaServer Faces ตามภาพแล้วคลิก OK ได้เลยครับ

จะกลับมาในหน้าจอเดิมให้คลิก Next ไปจนถึงหน้าจอ JSF Capabilities

ในส่วนนี้จะเป็นการ Config ตัว JSF ครับ ตัว JSF Implement Library Type ผม Disable ไปก่อนเพื่อจะไป Add Dependency ทีหลังครับ

ส่วนของ URL Mapping Patterns จะเป็น Pattern ตอนเราเรียกหน้า Page ครับ ซึ่งเรากำหนดเองได้เลยว่าจะเรียกยังไง ผมเลยแก้เป็น *.jsf ครับ (จริงๆแล้วตรงนี้ก็ไป Config ทีหลังได้หมดนะครับ)

เสร็จแล้วก็กด Finish โลดหลังจากนั้นตัว Eclipse ก็จะสร้างตัว Web Project ให้เราซึ่ง Config ค่าต่างๆเพื่อรองรับ JSF มาให้เรียบร้อยแล้วว

2. เรามาจัดการเรื่อง Library ที่ค้างไว้ในส่วนแรกกันเลยนะครับ พอเราได้ Project แล้วให้คลิกขวาที่ Project เลือก Menu Configure แล้วเลือก Convert to Maven Project ก็จะมีหน้าจอให้กำหนดค่า POM descriptor for Maven. ซึ่งถ้าไม่ได้กำหนดอะไรก็ Finish ไปได้เลย

เสร็จแล้วจะมีหน้าจอ Identify Maven Dependencies ซึ่งตัว Plugin maven จะเช็ค Dependencies จาก Library ที่เราใช้ใน Project อยู่เดิมแล้ว Add ให้ครับซึ่งตรงนี้เรายังไม่ได้ทำอะไร กด Skip Dependencies Conversion ไปได้เลย

พอกดเสร็จให้สังเกต Project จะขึ้นตัว M แสดงว่ามันสำเร็จแล้ว : D

(ส่วนถ้าใครไม่เจอ Menu เกี่ยวกับ Maven ต้องลง Plugin เพิ่มเข้าไปนะครับ ซึ่งตัวผมเอง ใช้ Eclipse for JavaEE แล้วลง Plugin Jboss Tool ครับมีให้ครบเลยสะดวกดี)

ในส่วนของ pom.xml ให้ add dependency ตามนี้เลยครับ

 <dependencies>
  <dependency>
   <groupId>org.glassfish</groupId>
   <artifactId>javax.faces</artifactId>
   <version>2.2.7</version>
  </dependency>
 </dependencies>

ซึ่งผมใช้ตัว Mojarra JSF นะครับถ้าใช้ของตัวอื่นก็เปลี่ยน Dependency ได้เลย

(link รายละเอียดการ download ของตัว Mojarra ครับ https://javaserverfaces.java.net/download.html )

เสร็จแล้วครับสำหรับการ Config ตัว JSF Project ต่อไปเรามาลอง Test กันเลย

 3. เพิ่ม Managed Bean

MyBean.java

package org.web.manage;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class MyBean {

 /**
  * 
  */
 public String output = "";
 public MyBean() {
  output = "Hello World.";
 }
 public String getOutput() {
  return output;
 }
 public void setOutput(String output) {
  this.output = output;
 }

 

}

เพิ่มหน้า Page

hello.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head></h:head> 
<h:body> 
 <h:form>
 <h:outputText value="#{myBean.output}" />
 </h:form>
</h:body> 
</html>

ทดสอบหลังจากนั้นลองทดสอบรันดูครับ :)

ถ้าแสดงผลออกมาตามข้อมูลที่ใส่ไว้ใน Managed Bean ก็แสดงว่าใช้ได้ละครับ

Source Code: jsf2.zip

Tuesday, August 12, 2014

สวัสดิ์ดีครับ

Blog นี้ผมอยากจะแชร์ประสบการณ์การเขียนโปรแกรมที่ผ่านมา ทั้งปัญหา และวิธีการต่างๆ อีกอย่างนึงคือเผื่อตัวผมเองลืม กลับมาย้อนดูได้เลยไม่ต้องไปค้นอีกครับ (แหะๆ) ถ้ามีอะไรผิดพลาด ก็รบกวนช่วยแนะนำ หรือ ชี้แนะได้เลยนะครับ ขอบคุณครับ :)