Using Liferay Web Application Intigrator (WAI)

In case you already have web application (war), just put it in deployment folder ( “deploy” folder for tomcat and “deployment” folder for jboss )

After it is deployed, Liferay will see it as a portlet. To use portlet, go to your liferay homepage > add a page. Then select manage that page, your portlet will be located in “undefined” category. Add it to your page and you are ready to go.

Advertisements

Migrating EAR from JBOSS 5 to JBOSS 7

#1 your war in your ear has to has .war extension, even it is a folder.

#2 If you use JAX-RS for RESTful webservice, make sure you comment out 

<extension module=”org.jboss.as.jaxrs”/>

and

<subsystem xmlns=”urn:jboss:domain:jaxrs:1.0″/>  

in standalone.xml  (or domain)

 

Besides, for jersey, you have to deploy your webservice as an exploded folder in delpoyment folder ( and make sure it has .war extension )

using log4j with JBOSS AS 7.1.1

put this jboss-deployment-structure.xml to your ear’s META-INF

<?xml version="1.0" encoding="UTF-8"?>
<jboss-deployment-structure>
 <deployment>
 <exclusions>
 <module name="org.apache.log4j" />
 </exclusions>
 </deployment>
 <sub-deployment name="your_war_folder.war">
 <exclusions>
 <module name="org.apache.log4j" />
 </exclusions>
 </sub-deployment> 
</jboss-deployment-structure>

for war deployment, put it in your WEB-INF

<?xml version="1.0" encoding="UTF-8"?>
<jboss-deployment-structure>
<deployment>
<exclusions>
<module name="org.apache.log4j" />
</exclusions>
</deployment> 
</jboss-deployment-structure>

 

CSS : position fixed และ absolute

ข้อแตกต่างระหว่าง fixed และ absolute

Absolute

absolute ใช้สำหรับกำหนดตำแหน่งของ container โดยอ้างอิงจากขอบนอกสุดของหน้านั้น

position : absolute
top: 100px;
left: 600px;

คือแสดง container โดยห่างจากขอบบนสุด 100px ขอบซ้าย 600px

นอกจากนี้ยังสามารถอ้างอิงจากกรอบของ container ที่มันอาศัยอยู่แทนการอ้างอิงจากกรอบ  browser ได้ด้วย โดย container ที่คลุมมันต้องมี position เป็น relative
ex. ตอนกด icon notification / friend request/ message ใน facebook


Fixed

ใช้สำหรับกำหนดตำแหน่งของ container โดยอ้างอิงจากตำแหน่งหน้าจอของ browser ขณะนั้น

position:fixed;
top: 100px;
left: 600px;

คือแสดง container โดยอ้างจากขอบบนของหน้าจอตอนนั้น 100px และซ้าย 600px (เช่นเลื่อนลงมาครึ่งจอแล้วค่อยสร้าง container)
ex. พวกแบนเนอร์โฆษณาที่วิ่งตามเวลาเรา scroll หนี, ตอนกด delete post ใน wall facebook

//delete post ใน wall facebook ไม่ได้ใช้ fixed ธรรมดา แต่ใช้ fixed ผสมกับ absolute เพื่อไม่ให้ container เลื่อนตามจอ
//สร้างเส้นไว้กำหนดตำแหน่งด้วย fix -> กดปุ่ม delete -> javascript คำนวนตำแหน่งของเส้น ณ ตอนนั้น -> สร้าง container absolute ณ ตำแหน่ง ของเส้นตอนนั้น

Using both jQuery and Prototype (javascript)

วันนี้เอาโค้ด enlarge image แบบที่ blur ข้างหลัง (lightbox?) มาจากเพื่อน ซึ่งมันเขียนโดยใช้ jquery มา

ทีนี้เนื่องจากทั้ง jquery และ prototype ใช้ namespace “$” ในการเข้าถึง element ต่างๆในหน้าเหมือนกัน

พอเอาโค้ดจากเพื่อนมารวมกับโค้ดที่ทำไว้แล้ว (ซึ่งใช้ prototype) ก็เลยใช้งานไม่ได้ – –

สำหรับวิธีแก้ก็ไม่ยาก
แค่เพิ่ม บรรทัด jQuery.noConfilct(); เข้าไป
แล้วเวลาต้องการใช้ jQuery ก็ให้ใช้คำว่า ‘jQuery’ แทนเครื่องหมาย $
ส่วนเครื่องหมาย $ ก็ให้ prototype ใช้ตามเดิม

ตัวอย่าง

โค้ดจากเพื่อน
<script type="text/javascript" src="jquery.js" language="javascript"> </script>
<script type="text/javascript" language="javascript">
function getH(v,w){
var x = $(v).children().width();
var y = $(v).children().height();
return w*y/x;
}
$(document).ready(function(){

var $enlargedCover = $('<img/>').addClass('enlarged').css('opacity',0.9).hide().appendTo('body');
var $backCover = $('<div/>').addClass('back').css('opacity',0.6).hide().appendTo('body');

var $enlargeRollover = $('<img/>').attr('src','enlargeIcon.png').attr('border',0)
.addClass('control')
.css('opacity',0.6);

var $covers = $('.thumb');
$covers.click(function(event){
var h = getH(this,800);
$enlargedCover.attr('src', $(this).attr('href'))
.css({
'left' : ($('body').width()-800)/2 ,
'top' : 100,
'width': 800,
'height': h
}).fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
$backCover.fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
event.preventDefault();
}).hover(
function(){
$enlargeRollover.appendTo(this).show();
}, function(){
$enlargeRollover.hide();
}
);

});
</script>

เมื่อแปลงแล้วจะได้แบบนี้

<script type="text/javascript">
jQuery.noConflict();

function getH(v,w){
var x = jQuery(v).children().width();
var y = jQuery(v).children().height();

return w*y/x;
}

jQuery(document).ready(function(){
var $enlargedCover = jQuery('<img/>').addClass('enlarged').css('opacity',0.9).hide().appendTo('body');

var $backCover = jQuery('<div/>').addClass('back').css('opacity',0.6).hide().appendTo('body');

var $enlargeRollover = jQuery('<img/>').attr('src','enlargeIcon.png').attr('border',0)
.addClass('control')
.css('opacity',0.6);

var $covers = jQuery('.thumb');
$covers.click(function(event){
var h = getH(this,800);

$enlargedCover.attr('src', jQuery(this).attr('href'))
.css({
'left' : (jQuery('body').width()-800)/2 ,
'top' : 100,
'width': 800,
'height': h
}).fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});

$backCover.fadeIn('slow')
.one('click',function(){
$enlargedCover.fadeOut();
$backCover.fadeOut();
});
event.preventDefault();
}).hover(
function(){
$enlargeRollover.appendTo(this).show();
}, function(){
$enlargeRollover.hide();
}
);

 

});

 

 

 

 

 

 

(ยังต้องแก้เรื่องสเกลกับตำแหน่งอีกสินะ = =)

HTML5: changing URL without refreshing page

ใช้ object  history ของ javascript

โดยใช้ function history.pushState( data,”title”,”url”);
โดย data  ใส่อยู่ใน format ของ JSON
title ใส่เป็น String อะไรก็ได้ (ไม่สำคัญ)
url ใส่เป็น url ที่ต้องการจะต่อท้ายจาก page เดิม โดยเป็นแบบ relative

ตัวอย่าง

function toFollow(param){ 
new Ajax.Request("<%=request.getContextPath()%>;/viewFollowList.do?show="+param,
{method : "get", 
onComplete : function(xhr) { 
document.getElementById("main_of_profile_body").innerHTML = ""+ xhr.responseText;}});}
history.pushState(null, "", "viewWall.do?page="+param);

นอกจาก history.pushState แล้ว เรายังสามารถใช้ history.replaceState ได้ โดยข้อแตกต่างคือ replaceState จะทำการเปลี่ยน state ปัจจุบันทำให้ไม่สามารถกด back กลับมาได้ ส่วน pushState จะเป็นการใส่เพิ่มลงไปแทน

<script type="text/javascript">
var stateObj = { foo: "bar"};
history.replaceState(stateObj, "index", "\\");>
</script>

สำหรับ function อื่นได้แก่ history.forward() , history.back() , history.go(1), history.go(-1)

อ่านเพิ่ม https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history