tag:blogger.com,1999:blog-38559918730258559922024-02-06T19:46:21.881-08:00Weak ProgrammerAnonymoushttp://www.blogger.com/profile/09131978679878831785noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-3855991873025855992.post-65781550068955656682014-08-21T21:49:00.003-07:002014-08-21T21:49:39.150-07:00"Hello World" in Oracle BPEL<a href="http://en.wikipedia.org/wiki/Business_Process_Execution_Language">BPEL</a> (Business Process Execution Language) เป็นภาษาที่เขียนขึ้นรองรับสถาปัตยกรรม <a href="http://en.wikipedia.org/wiki/Service-oriented_architecture">SOA</a><br />
คร่าวๆในความเข้าใจของผมคือภาษาที่เขียนเพื่อสร้าง WebService โดยเรียกใช้ Web Service ที่มีอยู่เดิมให้ทำงานตามที่เราต้องการได้ครับ โดยโพสนี้คือการเขียนแบบ Basic เลย (ผมเองก็พึ่งศึกษาเหมือนกัน )<br />
<br />
Environment ที่ใช้ครับ<br />
<br />
<ul>
<li><a href="http://www.oracle.com/technetwork/middleware/soasuite/downloads/index.html">Oracle SOA Suite 12c</a></li>
<li><a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html">JDK 1.7u67</a> (ไม่แนะนำให้ใช้ 1.8 นะครับเพราะเจอปัญหาแน่นอน)</li>
</ul>
<div>
<br /></div>
<div>
หลังจากที่เราลงตัว Oracle SOA Suite แล้วให้เปิดตัว Oracle JDeveloper Studio มาได้เลยครับ</div>
<div>
เลือก New Application > SOA Application</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudY8xfdDwqfYKPR2zqDCRhp5oiLCu4fJr9uiAgfnSxqLEn_IvxHZ3fxmsI8f4Rk7VXE17qXzWcGNWBRKJdzaqeemS6kaBRYk7Jvl35_FIam0M7IomZxm570_fO4lDpLvZjefIPDyWNtk/s1600/001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudY8xfdDwqfYKPR2zqDCRhp5oiLCu4fJr9uiAgfnSxqLEn_IvxHZ3fxmsI8f4Rk7VXE17qXzWcGNWBRKJdzaqeemS6kaBRYk7Jvl35_FIam0M7IomZxm570_fO4lDpLvZjefIPDyWNtk/s1600/001.PNG" height="347" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
จะมีหน้าให้กำหนดชื่อ Application และ Directory ที่เก็บ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCl0Ux-risbL7Iq4MtKiublh0cxODu4gUEsQPxEICi1n1YtqVx02Qj0kcVqdGpvFyCBLYiELmzouL_lFdT_1Ic5VHXW8l2GZrG2h71iBEPteGGBfKROdUOHgYA8ekzUtI5qy-9AvX71Y/s1600/002.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFCl0Ux-risbL7Iq4MtKiublh0cxODu4gUEsQPxEICi1n1YtqVx02Qj0kcVqdGpvFyCBLYiELmzouL_lFdT_1Ic5VHXW8l2GZrG2h71iBEPteGGBfKROdUOHgYA8ekzUtI5qy-9AvX71Y/s1600/002.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
กด Next ไปจะเป็นหน้าให้กำหนดชื่อ Project และ Directory ที่เก็บ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfU6XkXUxpzWN_SPIDKUklt6LRRyTs8dhUzlM-NSfd2Hhw0K0xxJn5wRGtBeFh2mL_bUkHJVQz2dE0VOClfwQ07pOxtcIDGkEs5JgjNSkDvyiqB19iTViJjKBB6hHzTFUuHzCi0Hd00A/s1600/003.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfU6XkXUxpzWN_SPIDKUklt6LRRyTs8dhUzlM-NSfd2Hhw0K0xxJn5wRGtBeFh2mL_bUkHJVQz2dE0VOClfwQ07pOxtcIDGkEs5JgjNSkDvyiqB19iTViJjKBB6hHzTFUuHzCi0Hd00A/s1600/003.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Step สุดท้ายเลือก Composite With BPEL Process แล้ว Finish เลยครับ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbt78O3sfaw44-gMTbrNYqFakKbRI5Yult8ZAWOQozjGo42Z5aLh9lq3Oo211wf6OY9CdJ1AEBP7NiQYPsL4z2GQhJmq0KEF3BiMrMux277ZCjgUuN9nZQqEYs_qrmf2BUP8BdFqHc90/s1600/004.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbt78O3sfaw44-gMTbrNYqFakKbRI5Yult8ZAWOQozjGo42Z5aLh9lq3Oo211wf6OY9CdJ1AEBP7NiQYPsL4z2GQhJmq0KEF3BiMrMux277ZCjgUuN9nZQqEYs_qrmf2BUP8BdFqHc90/s1600/004.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ตัว JDev จะสร้าง Application ตามที่เรากำหนดไว้ให้พอเสร็จแล้วจะมีหน้าต่างให้กำหนดค่าตัว BPEL Process </div>
<div class="separator" style="clear: both; text-align: left;">
กำหนดค่าตามรูปเลยครับ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTZjqPUnXNLufRcsy548IDEk15b2i6dsr-TH7Du45de8GsNj4eSFyVlurw9Ac6j_m0oWjgGfdY6Zjf0I7MPFe3msDDpoJM3TYPwdh5rB4L074kp0PCgWfroNPzOuBE5WS1K41dRUsNXY/s1600/005.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTZjqPUnXNLufRcsy548IDEk15b2i6dsr-TH7Du45de8GsNj4eSFyVlurw9Ac6j_m0oWjgGfdY6Zjf0I7MPFe3msDDpoJM3TYPwdh5rB4L074kp0PCgWfroNPzOuBE5WS1K41dRUsNXY/s1600/005.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
พอกด OK ไปตัว JDev จะเปิดไฟล์ Hello.bpel ที่เรากำหนดค่าไว้ขึ้นมาให้เลยซึ่งเราจะเห็นเป็นหน้า Design คล้ายๆ Flow Diagram </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfg2ER0UdZwERWhNN3N3vpL_w2s7HcrlSO-UlBqnjuSOoZZAAlDqIu1-lyssy1YGdBjodNDwrFbQDLtwncdS_QkiqazyTRAYZYjw8X5Gj3LqK8dASa2gZ1Cy2Rji5H8sSE0k0EtwAANM0/s1600/006.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfg2ER0UdZwERWhNN3N3vpL_w2s7HcrlSO-UlBqnjuSOoZZAAlDqIu1-lyssy1YGdBjodNDwrFbQDLtwncdS_QkiqazyTRAYZYjw8X5Gj3LqK8dASa2gZ1Cy2Rji5H8sSE0k0EtwAANM0/s1600/006.PNG" height="348" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ซึ่งเราจะลากตัว Assign ที่อยู่ใน BPEL Constructs ทางด้านขวามาใส่</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFilzgVVymI2yKYVGIhG3zdUehrAd_Y_op9dZR1MKJy0bqx95KwmveqUFxGslQZP2GYiV1oS6y3cToUGLV19wpQeHMtxTgDnmiv5Eo3OCXbIE2GS-4F7pel9fgE21j0A77_l75OA3dBjg/s1600/007.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFilzgVVymI2yKYVGIhG3zdUehrAd_Y_op9dZR1MKJy0bqx95KwmveqUFxGslQZP2GYiV1oS6y3cToUGLV19wpQeHMtxTgDnmiv5Eo3OCXbIE2GS-4F7pel9fgE21j0A77_l75OA3dBjg/s1600/007.PNG" height="348" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
จากนั้น Double Click ที่ตัว Assign ที่เราใส่เข้าไปครับจะมีหน้าต่างขึ้นมาจะอยู่ใน Tab Copy Rules</div>
<div class="separator" style="clear: both; text-align: left;">
ให้เราลาก client:input string ไป client:result string อีกด้านนึงเลยครับ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYs4SkVPgAIBMenJ5cakX2hm2pn8M340NNZHZEkO6JMFuwAIKnOs9bIbi_STxIVWtTiPlD1nlgPwIjLjsnZxXnot4NPqb-fpHnP1RF58j5BDd9PvdbnGE-XwJCITcr9FK7x2DbvivZ5wA/s1600/008.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYs4SkVPgAIBMenJ5cakX2hm2pn8M340NNZHZEkO6JMFuwAIKnOs9bIbi_STxIVWtTiPlD1nlgPwIjLjsnZxXnot4NPqb-fpHnP1RF58j5BDd9PvdbnGE-XwJCITcr9FK7x2DbvivZ5wA/s1600/008.PNG" height="320" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
ให้เรา Double Click ตรง client:result string ด้านขวาเพื่อแก้ไขจะมีหน้าจอ Expression Builder ขึ้นมาผมแก้ expression ตามนี้ครับ</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRo7KsNlvdxcAMNgtpktgyK9QDzIwxl6HQ4VF7BDEtsLiTDmF8OTnXrfIBx7R40c-Zrwp-8-vXhsYml94Vwus1_7-n6ZnPzuBy9m0sgba3NRVO5agSzUJm77qhBusFnIYOLKSrXqVZbbo/s1600/009.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRo7KsNlvdxcAMNgtpktgyK9QDzIwxl6HQ4VF7BDEtsLiTDmF8OTnXrfIBx7R40c-Zrwp-8-vXhsYml94Vwus1_7-n6ZnPzuBy9m0sgba3NRVO5agSzUJm77qhBusFnIYOLKSrXqVZbbo/s1600/009.PNG" height="512" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBjjridF5rpkU4_QQayD4rU6cKUv-XrYbtS1kVRGtLBU4LPNwcKv1t7Cj1Ed3p0Cx1jv94J5lcUrM2oLod44jAffuLLreL7KZK7gbuiKq62egLPjX2VlkAhex3jq82p5N5-S9w9w2VhE/s1600/009.1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBjjridF5rpkU4_QQayD4rU6cKUv-XrYbtS1kVRGtLBU4LPNwcKv1t7Cj1Ed3p0Cx1jv94J5lcUrM2oLod44jAffuLLreL7KZK7gbuiKq62egLPjX2VlkAhex3jq82p5N5-S9w9w2VhE/s1600/009.1.png" height="320" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
จากนั้นให้เราเปิด Window > Application Server(Ctrl+Shift-G)</div>
<div class="separator" style="clear: both; text-align: left;">
คลิกขวาที่ IntregratedWeblogicServer > Start Server Instance หลังจากนั้นรอจน Server Start เสร็จ(สักพักใหญ่ๆเลย)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Vo4zzgTofCoebR3o74_Nt6ZV1MZjcmYr-s_TRe4cY3D6Xd0xDG-ILUkcfftWKgO1coyMnBxP0220oiONe-DVYsTxA9iarYjRYqlIFX5EKkE45KfJeRG-bEyHDzcWTg4xB1jXBs4KQFE/s1600/010.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Vo4zzgTofCoebR3o74_Nt6ZV1MZjcmYr-s_TRe4cY3D6Xd0xDG-ILUkcfftWKgO1coyMnBxP0220oiONe-DVYsTxA9iarYjRYqlIFX5EKkE45KfJeRG-bEyHDzcWTg4xB1jXBs4KQFE/s1600/010.PNG" height="348" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
กลับไปที่ Tab Application ครับ คลิกขวาที่ Project เลือก Deploy</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPi7fcPNelmXU_WhbcRgPP90rOI_IfgxIMcLaS88v6aac67z6VToyRVEWi7iuZuazqSF5MRhyphenhyphenHLoJ2ibwAvbanMuCyKQBfutcnc0sBYpmLw6BbJ1yAbvyQeDBzVPRwyRX9qKfq18XLa5k/s1600/011.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPi7fcPNelmXU_WhbcRgPP90rOI_IfgxIMcLaS88v6aac67z6VToyRVEWi7iuZuazqSF5MRhyphenhyphenHLoJ2ibwAvbanMuCyKQBfutcnc0sBYpmLw6BbJ1yAbvyQeDBzVPRwyRX9qKfq18XLa5k/s1600/011.png" height="349" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
จะมีหน้า Deploy Action ให้เลือก Deploy to Application Server</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOR4Jr4b_FbpkqemD3GdhGLaEhDLDnJoSPfwcXY0wXpOyxukotkpLBWtJQSHCnFho6ONIjR-gut-WTB9HzqypQ8cawXqpDaeld4a5HKRPCYy_yZwL5V4u6QE5mHNPwb-B_f93YKXwh06Q/s1600/012.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOR4Jr4b_FbpkqemD3GdhGLaEhDLDnJoSPfwcXY0wXpOyxukotkpLBWtJQSHCnFho6ONIjR-gut-WTB9HzqypQ8cawXqpDaeld4a5HKRPCYy_yZwL5V4u6QE5mHNPwb-B_f93YKXwh06Q/s1600/012.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
กด Next จะเป็นหน้า Deploy Configuration </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6j31TgqklP6rk2pwGbASJwDT5LcIx5LeRhb8u-YztZzfks9tTIN6tutf9AQTykmgvRKSQU6un3cJdo4PmEro0oZByp3u06iNr-8g7-4xdKVc7VUpQMi01v62isUfuNWP6V2wHsXLLJsI/s1600/013.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6j31TgqklP6rk2pwGbASJwDT5LcIx5LeRhb8u-YztZzfks9tTIN6tutf9AQTykmgvRKSQU6un3cJdo4PmEro0oZByp3u06iNr-8g7-4xdKVc7VUpQMi01v62isUfuNWP6V2wHsXLLJsI/s1600/013.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ถัดมาจะเป็นหน้า Select Server ให้เราเลือก IntregratedWebLogicServer เสร็จแล้วกด Finish ได้เลยครับ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Dz7ehwYk7nh6NL2ju6SdHPwkZ1cqDrMun7UzZeVefH5uchTt_pTaacaWuLiHDkicajocier3rpy18s9WARsadXRiBQ3Kaqc-6zA2-iiDouIsdUMdbfG7vCi8Ru9w_QzWdIFqSUEROlM/s1600/014.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Dz7ehwYk7nh6NL2ju6SdHPwkZ1cqDrMun7UzZeVefH5uchTt_pTaacaWuLiHDkicajocier3rpy18s9WARsadXRiBQ3Kaqc-6zA2-iiDouIsdUMdbfG7vCi8Ru9w_QzWdIFqSUEROlM/s1600/014.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
พอเรียบร้อยแล้วเรากลับไปที่ Tab Application Server </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gqhiUo7_dyh4Q49qhmApqDLqZuwaU8G_JkpKXZFGgOG9rMA6LXB22ZYbcjl9yqMAzuyKPMtoIqp02NbOlvz5YUpIbcucvV73LZdbBZgIe19PuW4BkqvF2c9Dj7kklz2oVBX0sw-8tS4/s1600/015.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gqhiUo7_dyh4Q49qhmApqDLqZuwaU8G_JkpKXZFGgOG9rMA6LXB22ZYbcjl9yqMAzuyKPMtoIqp02NbOlvz5YUpIbcucvV73LZdbBZgIe19PuW4BkqvF2c9Dj7kklz2oVBX0sw-8tS4/s1600/015.png" height="348" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
คลิกขวาที่ตัว WebService ของเราแล้วกด Test Web Service จะมีหน้าให้เราทดสอบ WebService </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKwrnE3IeCZMO8vJeIpgx5CWk3j5OlYbx5xjsgvhfTB32YnhYwby6FClTKUqTZ-Z7f92YZOpvxrZhgee0_toUp1TpFiTs1ChERIuYZ1EiddA04R3oT9rtc27Qk2qoMOIlomYRy4dE1nM/s1600/016.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKwrnE3IeCZMO8vJeIpgx5CWk3j5OlYbx5xjsgvhfTB32YnhYwby6FClTKUqTZ-Z7f92YZOpvxrZhgee0_toUp1TpFiTs1ChERIuYZ1EiddA04R3oT9rtc27Qk2qoMOIlomYRy4dE1nM/s1600/016.png" height="349" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
เรียบร้อยแล้วครับ (รูปเยอะเลย) เดี๋ยวถ้ามีเรื่องน่่าสนใจเกี่ยวกับ BPEL จะมาลงอีกนะครับ</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/09131978679878831785noreply@blogger.com0tag:blogger.com,1999:blog-3855991873025855992.post-75711310040457578182014-08-14T21:48:00.003-07:002014-08-14T22:15:24.658-07:00การเรียกใช้ AngularJS ผ่าน Javascript อื่นหลายคนคงเคยได้ยินชื่อ AngularJS มาบ้างนะครับ (ช่วงนี้เห็นคนพูดถึงกันเยอะ) เป็น JavaScript Framework ตัวนึงที่ผมรู้สึกทึ่งกับความสามารถของมันมากเลย อีกอย่างคือการเขียนหรือการใช้งานก็ง่ายด้วย โดยตัว angularjs ใช้สถาปัตยกรรม <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> ตัวผมเองก็เคยลองใช้มาเมื่อประมาณ 2 ปีที่แล้ว ยังไม่มีโอกาสได้ใช้อีกเลย(ยังไม่ชำนาญเท่าไหร่ครับ :D ) เพราะว่างานส่วนใหญ่เจอกับ Javascript น้อยมาก ถ้าใครเคยใช้คงจะมีปัญหานึงคือ แล้วเราจะเรียกใช้ตัวแปรหรือฟังก์ชั่นที่อยู่ใน scope ของ angularjs ยังไงล่ะ (ผมคิดว่าถ้าเราใช้ angularjs แบบเต็มรูปแบบอาจจะไม่ต้องเรียกใช้เลยนะ) แต่เผื่อใครต้องใช้ตัว angularjs ก็เตรียมมาไว้ให้ครับ<br />
<div>
<br />
<div>
Environment ที่ใช้</div>
<div>
<br /></div>
<div>
<ul>
<li><a href="https://atom.io/">Atom Editor</a> (อันนี้มีคนแนะนำจาก <a href="https://www.facebook.com/groups/programmerthai/">Programmer Thai Blood</a> ครับ แจ๋วดี )</li>
<li><a href="https://angularjs.org/">AngularJS</a> 1.2.22</li>
<li>JQuery-ui 1.11 (ผมเอามาเรียกใช้ตัว dialog ครับ)</li>
</ul>
<div>
<br /></div>
</div>
<div>
<u>hello.html</u></div>
<div>
<u><br /></u></div>
<div>
<div>
<!doctype html></div>
<div>
<html ></div>
<div>
<head></div>
<div>
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.min.css"></div>
<div>
<script src="jquery-ui/external/jquery/jquery.js"></script></div>
<div>
<script src="jquery-ui/jquery-ui.min.js"></script></div>
<div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script></div>
<div>
</head></div>
<div>
<body></div>
<div>
<div id="my-app" ng-app></div>
<div>
<button id="input-name" type="button" >Input Name</button></div>
<div>
<hr/></div>
<div>
<h1>Hello {{name}} !!</h1></div>
<div>
</div></div>
<div>
<div id="dlg-input"></div>
<div>
<label>Name:</label></div>
<div>
<input id="text-name" type="text" /></div>
<div>
</div></div>
<div>
</body></div>
<div>
<br /></div>
<div>
<script type="text/javascript" ></div>
<div>
$(function(){</div>
<div>
$("#dlg-input").dialog({</div>
<div>
autoOpen:false,</div>
<div>
resizable: false,</div>
<div>
height:200,</div>
<div>
modal: true,</div>
<div>
buttons: {</div>
<div>
"OK": function() {</div>
<div>
var scope = $("#my-app").scope();</div>
<div>
scope.$apply(function(){</div>
<div>
scope.name = $("#text-name").val();</div>
<div>
});</div>
<div>
$( this ).dialog( "close" );</div>
<div>
},</div>
<div>
"Cancel": function() {</div>
<div>
$( this ).dialog( "close" );</div>
<div>
}</div>
<div>
}</div>
<div>
});</div>
<div>
<br /></div>
<div>
$("#input-name").button().on( "click", function() {</div>
<div>
$( "#dlg-input" ).dialog("open");</div>
<div>
});</div>
<div>
});</div>
<div>
</script></div>
<div>
</html></div>
<div>
<br /></div>
<div>
ตัวอย่างนี้ผมเอามาจากเว็บ <a href="https://angularjs.org/">https://angularjs.org/</a> เลยแต่เอามาปรับนิดหน่อยเพื่อจะได้เห็นภาพการใช้งาน</div>
<div>
จุดหลักของตัวอย่างคือโค๊ดจุดนี้ครับ</div>
<div>
<br /></div>
<div>
<div>
var scope = $("#my-app").scope();</div>
<div>
scope.$apply(function(){</div>
<div>
scope.name = $("#text-name").val();</div>
<div>
});</div>
</div>
<div>
<br /></div>
<div>
เราสามารถเรียกใช้ฟังก์ชั่น scope() เพื่อเรียกตัว scope ของ angularjs มาใช้ได้โดยเราต้องเรียกผ่าน $apply เพื่อให้โค๊ดส่วนนั้นทำงาน</div>
<div>
<br /></div>
<div>
ข้อสังเกตคือเราสามารถเรียก scope() ได้ทุกตัวที่อยู่ใน element ที่เราใส่ ng-app เข้าไปครับ</div>
<div style="text-decoration: underline;">
<br /></div>
</div>
<div>
Source Code : <a href="https://drive.google.com/file/d/0B7Hz_KUT6mf_N1B1U3R3UWVYZzA/edit?usp=sharing">t002.zip</a></div>
<div>
<br /></div>
<div>
<br />
<div>
<br /></div>
<div>
<br /></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/09131978679878831785noreply@blogger.com0tag:blogger.com,1999:blog-3855991873025855992.post-33272198277640691762014-08-13T02:10:00.003-07:002016-10-19T20:27:04.927-07:00สร้าง Project JSF 2โพสนี้โพสแรกครับ ก็ขอพูดถึงการสร้าง JSF(JavaServer Faces) Project (ของ่ายๆก่อน)<br />
<br />
Environment ที่ใช้ครับ<br />
<br />
<br />
<ul>
<li>Eclipse 4.4</li>
<li>JSF 2.2</li>
<li>Maven 3</li>
<li>JDK 1.8</li>
<li>Tomcat 8</li>
</ul>
<div>
<div>
<br /></div>
</div>
<div>
เริ่มทีละขั้นตอนเลยนะครับ</div>
<div>
<br /></div>
<div>
1. เปิด Eclipse Add <b>Dynamic Web Project </b>ในหน้า New Dynamic Web Project Wizard จะมีรายละเอียดของ Project ให้กำหนดค่า ใส่ชื่อ Project และกำหนดค่าอื่นตามภาพเลยครับ </div>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxYd28PF_b_vttg8hDTjc9o-VxtUjLQfPp5wlgtGMcnPNP-zD5X_7RQb7ClDKgaspxvMwRVw86u7ckQ6tcNOmeC3gLH1cScOeNtz98e8wxY3UyIlu02TindXc3q8O7BO-0D4Iw1fPRIY/s1600/001.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxYd28PF_b_vttg8hDTjc9o-VxtUjLQfPp5wlgtGMcnPNP-zD5X_7RQb7ClDKgaspxvMwRVw86u7ckQ6tcNOmeC3gLH1cScOeNtz98e8wxY3UyIlu02TindXc3q8O7BO-0D4Iw1fPRIY/s1600/001.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
ส่วนในช่องของ Configuration ให้คลิก Modify... จะมี Window <b>Project Facets </b>ขึ้นมาให้เลือก JavaServer Faces ตามภาพแล้วคลิก OK ได้เลยครับ</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pQzxZuIy8tyW9hvH3Cg1bn0criD07g6eZgRQZfXHTjGh1leCnON52faoUGYswTxRFlJjEUASIXUSikxv04SkHXMYKyobmxVankEGQCD8-imFaMWPEL_G65jOhx8oIhRM6nR2MzFttjY/s1600/002.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="523" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6pQzxZuIy8tyW9hvH3Cg1bn0criD07g6eZgRQZfXHTjGh1leCnON52faoUGYswTxRFlJjEUASIXUSikxv04SkHXMYKyobmxVankEGQCD8-imFaMWPEL_G65jOhx8oIhRM6nR2MzFttjY/s1600/002.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
จะกลับมาในหน้าจอเดิมให้คลิก Next ไปจนถึงหน้าจอ JSF Capabilities </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qVZyy8KSthnv700AXkcGJq-PnAesku1ruAeT5KsY4jG1mG1TlCS0YtvU8B3VDSpmf9y5AuYOUgIDrkM7LtZTzD8o2yKR-EHQXD5BGsDC-VEP2EpBXFYzQaWo-SmIZivrx4MXCBBhIm8/s1600/003.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qVZyy8KSthnv700AXkcGJq-PnAesku1ruAeT5KsY4jG1mG1TlCS0YtvU8B3VDSpmf9y5AuYOUgIDrkM7LtZTzD8o2yKR-EHQXD5BGsDC-VEP2EpBXFYzQaWo-SmIZivrx4MXCBBhIm8/s1600/003.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ในส่วนนี้จะเป็นการ Config ตัว JSF ครับ ตัว JSF Implement Library Type ผม Disable ไปก่อนเพื่อจะไป Add Dependency ทีหลังครับ </div>
<div class="separator" style="clear: both; text-align: left;">
ส่วนของ URL Mapping Patterns จะเป็น Pattern ตอนเราเรียกหน้า Page ครับ ซึ่งเรากำหนดเองได้เลยว่าจะเรียกยังไง ผมเลยแก้เป็น *.jsf ครับ (จริงๆแล้วตรงนี้ก็ไป Config ทีหลังได้หมดนะครับ) </div>
<div class="separator" style="clear: both; text-align: left;">
เสร็จแล้วก็กด Finish โลดหลังจากนั้นตัว Eclipse ก็จะสร้างตัว Web Project ให้เราซึ่ง Config ค่าต่างๆเพื่อรองรับ JSF มาให้เรียบร้อยแล้วว</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6v07T_cnVFSzLu8okkaBdsWFvzz0FBSWszphf_MBhx23WCg-Lik8hPcYUrHCaimDgJzqyGMtKZVZmrMCaeQlKtKMWHFPPbWH7onhJMB_FM1AVkyRCmkO6OQJrXTlyDOjiFrehriFt-A/s1600/004.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6v07T_cnVFSzLu8okkaBdsWFvzz0FBSWszphf_MBhx23WCg-Lik8hPcYUrHCaimDgJzqyGMtKZVZmrMCaeQlKtKMWHFPPbWH7onhJMB_FM1AVkyRCmkO6OQJrXTlyDOjiFrehriFt-A/s1600/004.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. เรามาจัดการเรื่อง Library ที่ค้างไว้ในส่วนแรกกันเลยนะครับ พอเราได้ Project แล้วให้คลิกขวาที่ Project เลือก Menu <b>Configure </b>แล้วเลือก <b>Convert to Maven Project </b>ก็จะมีหน้าจอให้กำหนดค่า POM descriptor for Maven. ซึ่งถ้าไม่ได้กำหนดอะไรก็ Finish ไปได้เลย</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDT7CAAlVhhUH2ItdWeZ4UuYvkuA51rnPSUxKUHNf7oEbeZwIAhlf2qDOsOt4PtkO5KxC9v84aoFftTK5KWemaNXGdPQ6mn9uoBFQeZ-qV_mOddyhrMMqtxgXTwStV-9qWonAkjINri0/s1600/005.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZDT7CAAlVhhUH2ItdWeZ4UuYvkuA51rnPSUxKUHNf7oEbeZwIAhlf2qDOsOt4PtkO5KxC9v84aoFftTK5KWemaNXGdPQ6mn9uoBFQeZ-qV_mOddyhrMMqtxgXTwStV-9qWonAkjINri0/s1600/005.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
เสร็จแล้วจะมีหน้าจอ Identify Maven Dependencies ซึ่งตัว Plugin maven จะเช็ค Dependencies จาก Library ที่เราใช้ใน Project อยู่เดิมแล้ว Add ให้ครับซึ่งตรงนี้เรายังไม่ได้ทำอะไร กด Skip Dependencies Conversion ไปได้เลย</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgFdDagSfLZnC7xuHmo8CTLgB7ksRRf1tsvbFNbN-cC3RWUQxv66VTxRB9_W_TgoQ3ppg4DHH99YH84S7bNsSbx01SxKs_4m_NhHCOd4gCjjood0SDXqU1s9NJZ-mwmF-_kbxv8LCbo84/s1600/006.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="607" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgFdDagSfLZnC7xuHmo8CTLgB7ksRRf1tsvbFNbN-cC3RWUQxv66VTxRB9_W_TgoQ3ppg4DHH99YH84S7bNsSbx01SxKs_4m_NhHCOd4gCjjood0SDXqU1s9NJZ-mwmF-_kbxv8LCbo84/s1600/006.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
พอกดเสร็จให้สังเกต Project จะขึ้นตัว M แสดงว่ามันสำเร็จแล้ว : D</div>
<div>
(ส่วนถ้าใครไม่เจอ Menu เกี่ยวกับ Maven ต้องลง Plugin เพิ่มเข้าไปนะครับ ซึ่งตัวผมเอง ใช้ Eclipse for JavaEE แล้วลง Plugin <b>Jboss Tool </b>ครับมีให้ครบเลยสะดวกดี)</div>
<div>
<br /></div>
<div>
ในส่วนของ pom.xml ให้ add dependency ตามนี้เลยครับ</div>
<div>
<br />
<pre> <dependencies>
<dependency>
<groupId>org.glassfish</groupId>
<artifactId>javax.faces</artifactId>
<version>2.2.7</version>
</dependency>
</dependencies></pre>
<pre></pre>
<pre></pre>
<pre>ซึ่งผมใช้ตัว Mojarra JSF นะครับถ้าใช้ของตัวอื่นก็เปลี่ยน Dependency ได้เลย</pre>
<pre>(link รายละเอียดการ download ของตัว Mojarra ครับ <a href="https://javaserverfaces.java.net/download.html">https://javaserverfaces.java.net/download.html</a> )</pre>
<pre></pre>
<pre></pre>
<pre>เสร็จแล้วครับสำหรับการ Config ตัว JSF Project ต่อไปเรามาลอง Test กันเลย</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre> 3. เพิ่ม Managed Bean </pre>
<pre></pre>
<pre></pre>
<pre><u>MyBean.java</u></pre>
<pre><u>
</u></pre>
<pre></pre>
<pre><span style="background-color: white;">package org.web.manage;
<code>
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;
}
</code>
}</span>
</pre>
<pre></pre>
<pre>เพิ่มหน้า Page </pre>
<pre></pre>
<pre><u>hello.xhtml</u></pre>
<pre><u>
</u></pre>
<pre><!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>
</pre>
<pre></pre>
<pre>ทดสอบหลังจากนั้นลองทดสอบรันดูครับ :)</pre>
<pre></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5HrXcVV8ZdROKdNsV5nAHzyNtcviM8wjoSDa-5L1qDavBlrzTc4nCCSWHUvJwCZMC1ekSHzE_SAYsGUZBeqlytFHSmfe_2Dh7OmYnefIyn4lvLjWa5drAqdjZi2Ucw1yoL3q-tTocBs/s1600/007.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5HrXcVV8ZdROKdNsV5nAHzyNtcviM8wjoSDa-5L1qDavBlrzTc4nCCSWHUvJwCZMC1ekSHzE_SAYsGUZBeqlytFHSmfe_2Dh7OmYnefIyn4lvLjWa5drAqdjZi2Ucw1yoL3q-tTocBs/s1600/007.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ถ้าแสดงผลออกมาตามข้อมูลที่ใส่ไว้ใน Managed Bean ก็แสดงว่าใช้ได้ละครับ </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Source Code: <a href="https://drive.google.com/file/d/0B7Hz_KUT6mf_aDBPV2QwdGxiS2s/edit?usp=sharing">jsf2.zip</a></div>
<pre></pre>
<pre></pre>
<pre></pre>
<div>
<u><br /></u></div>
<pre>
</pre>
</div>
Anonymoushttp://www.blogger.com/profile/09131978679878831785noreply@blogger.com0tag:blogger.com,1999:blog-3855991873025855992.post-15558102965765827142014-08-12T22:37:00.001-07:002014-08-12T22:37:33.092-07:00สวัสดิ์ดีครับBlog นี้ผมอยากจะแชร์ประสบการณ์การเขียนโปรแกรมที่ผ่านมา ทั้งปัญหา และวิธีการต่างๆ อีกอย่างนึงคือเผื่อตัวผมเองลืม กลับมาย้อนดูได้เลยไม่ต้องไปค้นอีกครับ (แหะๆ) ถ้ามีอะไรผิดพลาด ก็รบกวนช่วยแนะนำ หรือ ชี้แนะได้เลยนะครับ ขอบคุณครับ :)Anonymoushttp://www.blogger.com/profile/09131978679878831785noreply@blogger.com0