..
DEV/html/css/js/img (61)
클릭시 레이어 창 뜨기
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
<div id="point_rank" style="display:none;width:120px;height:100%;position:absolute;cursor:hand;z-index:99999999999;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id='myPointAndRank' onclick="close_myrank();">
  <tr>
    <td width="70"><b>나의 포인트</b></td>
    <td><div id="my_point"></div></td> // 포인트를 넣을 자리
  </tr>
  <tr>
    <td><b>나의 랭킹</b></td>
    <td><div id="my_rank"></div></td> // 랭킹을 넣을 자리
  </tr>
</table>
</div>


<div id="medal">
<img src="../image/myhome/level$!{userInfo.myRankResult}.png" width="119" height="110" class="iePngFix" style="cursor:pointer" onclick="show_myrank('$!userInfo.point','$!userInfo.myrank','$!userInfo.totalrank','5000');">
</
div>

스크립트

show_myrank=function(point, rank, total, time){
 //alert(point+"\n\n"+rank+"\n\n"+total+"\n\n"+time);
 var layer_name = $('point_rank');
 var my_point = $('my_point');
 var my_rank = $('my_rank');
 var width = 170;

 
 if(rank.length >= point.length)
  width += (rank.length)*7
 else if(rank.length < point.length)
  width += (point.length)*7

 my_point.innerHTML = point+"P";
 my_rank.innerHTML = rank+"/"+total;
 layer_name.style.width= width;
 layer_name.style.top = window.event.clientY - 5;
 layer_name.style.left = window.event.clientX - 170;
 layer_name.style.display = "";
 
 setTimeout(close_myrank,time);
}

close_myrank=function(){
 var layer_name = $('point_rank');
 layer_name.style.display = "none";
}

  Comments,     Trackbacks
[javascirpt] javascript로 원하는 값 전달 받아서 submit 하기!!
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
function submitTest(v1, v2){
var frm = document.frmTest;
frm.col.value = v1;
frm.col2.value = v2;
frm.submit();
}

<from name = "frmTest">
<input type = "hidden" name = "col" value = "$!{params.col}">
<input type = "hidden" name = "col2" value = "$!{params.col2}">

<a href="javascript:submitTest('D01','DESC')">버튼</a>
</form>


'DEV > html/css/js/img' 카테고리의 다른 글

클릭시 레이어 창 뜨기  (0) 2008.12.24
[velocity] 총 정리  (0) 2008.12.23
[velocity] 반복문 Loops  (0) 2008.12.23
  Comments,     Trackbacks
[velocity] 총 정리
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Spring과 함께 사용

전형적인 디렉토리 구조

그림:VelocityDirectoryStructure.png

  • velocity와 velocity tool을 사용하기 위해 필요한 jar 파일을 lib에 넣어야 한다.
    • velocity-dep-*.jar : velocity 그리고 관련된 클래스 파일
    • velocity-tools-*.jar : velocity tool
    • commons-digester
    • commons-collections
    • commons-beanutils
  • /WEB-INF/velocity 를 velocity template 루트로 잡는다.
  • /WEB-INF/velocity/VM_global_library.vm 가 디폴트 매크로 파일이 된다.
  • /WEB-INF/toolbox.xml 은 velocity tool의 설정이다.
  • 각 설정파일의 위치를 변경하려면 *-servlet.xml에서 한다.

*-servlet.xml

  • -servlet.xml 에 velocity 관련 설정을 넣어 사용할 수 있다.

SpringMVC를 참고할 것.

velocity properties

velocity 관련 설정은 별도의 velocity.properties를 만들어 할 수도 있지만, *-servlet.xml에서 직접 할 수도 있다. 'velocityConfig' 부분의 'velocityProperties' 부분에 property를 추가하면 된다. velocity property의 전체 항목은 velocity jar 파일의 /org/apache/velocity/runtime/default/velocity.properties 에서 확인할 수 있다.

VM_global_library.vm

예를들어 다음과 같이 만들 수 있다.

#macro (xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#end

VTL (Velocity Template Language) 문법

간단한 예제

<html>
<body>
#set ($foo = "Velocity")
Hello $foo World!
</body>
<html>

코멘트

## 로 시작하면 한 줄 코멘트

## 한 줄 코멘트 single-line comment

#* 로 시작하고 *#로 끝나면, 여러 줄 코멘트

#*
 여러 줄 코멘트. 
 여기에 표시되는 내용은 
 Velocity Template Engine이 무시해버린다.
*#

#** 로 시작하고 *#로 끝나면, 블록 코멘트. 사실 여러 줄 코멘트와 다를 것은 별로 없다. 저자나 버전 등을 넣는데 주로 사용한다.

#**
 This is a VTL comment block and
 may be used to store such information
 as the document author and versioning
 information:
 @author
 @version 5
*#

변수 Variable

변수는 $로 시작하며, [a-zA-Z0-9-_] 문자가 변수에 사용될 수 있다.

#set로 변수에 값을 세팅할 수 있다.

#set ($foo = "bar")

원래는 ${foo} 형태가 정식적인(formal) 표현이다. 텍스트 중간에 변수가 들어갈 때 잘못 파싱되는 것을 방지하기 위해, 반드시 이 형태를 사용해야 할 경우가 있다.

Jack is a $vicemaniac.
Jack is a ${vice}maniac.

프라퍼티 Property

변수 안의 프라퍼티에 접근할 수 있다.

$customer.address
$purchase.total

Java Beans 표준의 property 규칙이 그대로 사용된다. (getX(), setX() 등)

메소드 Method

변수로부터 메소드를 곧바로 실행할 수도 있다.

$customer.getAddress()
$date.format("yyyy-MM-dd", $createTime)

조용한 레퍼런스 Quiet Reference

만약 $foo 라고 썼는데 foo 라는 이름의 객체가 존재하지 않는다면, $foo 라는 글자가 결과에 그대로 표현된다. 객체가 존재하지 않을 때 아무것도 표현되지 않게 하려면, $ 다음에 !를 붙인다.

<input type="text" name="email" value="$email"/>
<input type="text" name="email" value="$!email"/>

물론 정식적인 표현도 가능하다.

<input type="text" name="email" value="$!{email}"/>

escaping

'$' 를 표현하려면 \$ 로 한다. '\$' 는 '\\$' 로 표시한다.

혹은 다음과 같이 할 수 있다.

#set ($dollar = "$")
$dollar

지시자 Directive

지시자는 #로 시작한다. ${..}와 같은 이유로, #{..} 표현도 가능하다.

#if($a==1)true enough#elseno way!#end
#if($a==1)true enough#{else}no way!#end

#set

변수에 값을 지정하기 위해 사용한다.

#set ($primate = "monkey") ## literal
#set ($monkey = $bill) ## variable reference
#set ($monkey.Friend = "monica") ## string literal
#set ($monkey.Blame = $whitehouse.Leak) ## property reference
#set ($monkey.Plan = $spindoctor.weave($web)) ## method reference
#set ($monkey.Number = 123) ## number literal
#set ($monkey.Say = ["Not", $my, "fault"]) ## ArrayList
#set ($monkey.Map = {"banana" : "good", "roast beef" : "bad"}) ## Map

#set ($value = $foo + 1)
#set ($value = $bar - 1)
#set ($value = $foo * $bar)
#set ($value = $foo / $bar)

같은 변수에 다른 값을 넣으면, 마지막 넣은 값이 저장된다.

값을 unset 하는 기능은 없다.

Literal

set 할때 문자열은 큰따옴표(") 로 감싸진다. 이 안에 변수가 있으면, 그것도 해석(parse)된다.

#set( $directoryRoot = "www" )
#set( $templateName = "index.vm" )
#set( $template = "$directoryRoot/$templateName" )
$template

결과값은

www/index.vm

하지만 작은따옴표(')로 감싸면 해석되지 않는다.

#set( $foo = "bar" )
$foo
#set( $blargh = '$foo' )
$blargh

결과는

bar
$foo

조건문 if-else

#if ($foo < 10)
   Go North
#elseif ($foo == 10)
   Go East
#elseif ($bar == 6)
   Go South
#else
   Go West
#end

== 연산은 primitive, string, object를 비교하는데, object의 경우 toString()의 값이 비교된다.

AND 연산 : &&

#if ($foo && $bar)
   This AND that
#end

OR 연산 : ||

#if ($foo || $bar)
   This OR That
#end

NOT 연산 : !

#if (!$foo)
  NOT that
#end

$!foo 와 !$foo 를 혼동하지 말 것!

반복문 Loops

$allProducts가 List나 Array인 경우에는 이렇게 한다.

#foreach( $product in $allProducts )
   $product
#end

$allProducts가 Map이나 Hashtable이라면, 이렇게 할 수 있다.

#foreach( $key in $allProducts.keySet() )
   Key: $key -> Value: $allProducts.get($key)
#end

현재 루프 카운트는 $velocityCount로 알아올 수 있다.

#foreach( $customer in $customerList )
   $velocityCount : $customer.Name
#end

$velocityCount 이름과 0부터 시작하는지 1부터 시작하는지 등은 설정 가능하다.

include

#include ("one.txt")
#include ("one.gif","two.txt","three.htm")
#include ("greetings.txt", $seasonalstock)

파일의 내용을 그대로 include한다. 여러 파일을 한꺼번에 include할 수 있다. 파일 이름에 변수가 들어갈 수 있다.

parse

#parse ("me.vm")

파일을 파싱해서 그 결과를 include한다. 한번에 하나의 파일만 가능하다.

Count down.
#set ($count = 8)
#parse ("parsefoo.vm")
All done with dofoo.vm!
#set ($count = $count - 1)
#if ($count > 0)
   #parse ("parsefoo.vm")
#else
   All done with parsefoo.vm!
#end

재귀적으로 사용 가능한데, 깊이가 정해져있다. 깊이는 설정 가능하고, 디폴트로 10이다.

stop

#stop

파싱을 멈춘다.

매크로

일종의 함수 같은 것이다.

다음과 같이 정의하고,

#macro (d)
   <tr><td></td></tr>
#end

다음과 같이 사용한다.

#d()

파라미터를 매크로 이름 뒤에 변수로 받을 수 있다.

#macro (callme $a)
   $a $a $a
#end

이렇게 사용한다.

#callme ($foo.bar())

Velocity Tool

Cookie Tool

$cookie.foo.value
$cookie.add("cookieName", "cookieValue")

Import Tool

$import.read("http://www.rolizen.com/import/url")

Parameter Tool

$params.foo
$params.getString("foo")
$params.getNumber("foo")
$params.getInt("foo")

Alternator Tool

예를들어, 루프를 돌면서 table의 tr을 찍는데, 홀수줄은 흰색으로, 짝수줄은 회색으로 찍고 싶은 경우,

#set ($color = $alternator.auto(["fff", "eee"))
#foreach ($item in $listItems)
<tr style="background-color:#$color">...</tr>
#end

Date Tool

$date                                          -> 2007. 2. 5 오후 3:14:43 
$date.get("yyyy-MM-dd HH:mm:ss")               -> 2007-02-05 15:14:43
$date.format("yyyy-MM-dd HH:mm:ss", $myDate)   -> 2007-02-03 16:31:34

Number Tool

#set ($val = 1234567)
$number.format("currency", $val)   -> ₩1,234,567
$number.format("integer", $val)    -> 1,234,567
$number.format("0,000", $val)      -> 1,234,567
$number.format("0,0000", $val)     -> 123,4567
$number.format("0", $val)          -> 1234567

Escape Tool

$html                        -> "bread" & "butter"
$esc.html($html)             -> "bread" & "butter"
$xml                         -> "bread" & "butter"
$esc.xml($xml)               -> "bread" & "butter"
$javascript                  -> He didn't say, "Stop!"
$esc.javascript($javascript) -> He didn\'t say, \"Stop!\"
$esc.dollar                  -> $
$esc.d                       -> $
$esc.hash                    -> #
$esc.h                       -> #
$esc.backslash               -> \
$esc.b                       -> \
$esc.quote                   -> "
$esc.q                       -> "
$esc.singleQuote             -> '
$esc.s                       -> '
$esc.exclamation             -> !
$esc.e                       -> !

Iterator Tool

List Tool

List나 Array에서 엘리먼트를 get / set 할 수 있다.

$primes                    -> new int[] {2, 3, 5, 7}
$list.size($primes)        -> 4
$list.get($primes, 2)      -> 5
$list.set($primes, 2, 1)   -> (primes[2] becomes 1)
$list.get($primes, 2)      -> 1
$list.isEmpty($primes)     -> false
$list.contains($primes, 7) -> true

Math Tool

Sorter Tool

Velocity Tool 만드는 법

일반적인 Tool

그냥 일반적인 class를 만들면 된다. public한 field와 method를 사용할 수 있다.

context 를 갖는 Tool

public class MemberUtil {
   private HttpServletRequest request;
   private HttpSession session;
   private MemInfoData meminfo;

   public void init(Object obj) {
      ChainedContext cc = (ChainedContext)obj;
      this.request = cc.getRequest();
      this.session = request.getSession(true);
      meminfo = (MemInfoData)session.getAttribute(MemInfoData.MEMINFO_SESSION_KEY);
      if (!validMemInfo(meminfo))
         meminfo = null;
   }

   private boolean validMemInfo(MemInfoData mid) {
      return (mid != null) && (mid.getMemNo() > 0) && (mid.getOpenid() != null);
   }

   public HttpServletRequest getRequest() {
      return request;
   }

   public HttpSession getSession() {
      return session;
   }

   public MemInfoData getMeminfo() {
      return meminfo;
   }

   public boolean isLogin() {
      return (meminfo != null);
   }
}

위와 같이 init() 메소드를 이용해 context를 받을 수 있다.

참고사이트  : http://velocity.apache.org

출처 :http://technet.ui2.co.kr/wiki/index.php/Velocity

'DEV > html/css/js/img' 카테고리의 다른 글

[javascirpt] javascript로 원하는 값 전달 받아서 submit 하기!!  (0) 2008.12.24
[velocity] 반복문 Loops  (0) 2008.12.23
#set  (0) 2008.12.23
  Comments,     Trackbacks
[velocity] 반복문 Loops
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

$allProducts가 List나 Array인 경우에는 이렇게 한다.

$allProducts가 Map이나 Hashtable이라면, 이렇게 할 수 있다.

현재 루프 카운트는 $velocityCount로 알아올 수 있다.


'DEV > html/css/js/img' 카테고리의 다른 글

[velocity] 총 정리  (0) 2008.12.23
#set  (0) 2008.12.23
[velocity] 변수 지정  (0) 2008.12.23
  Comments,     Trackbacks
#set
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

변수에 값을 지정하기 위해 사용한다.

#set ($primate = "monkey") ## literal
#set ($monkey = $bill) ## variable reference
#set ($monkey.Friend = "monica") ## string literal
#set ($monkey.Blame = $whitehouse.Leak) ## property reference
#set ($monkey.Plan = $spindoctor.weave($web)) ## method reference
#set ($monkey.Number = 123) ## number literal
#set ($monkey.Say = ["Not", $my, "fault"]) ## ArrayList
#set ($monkey.Map = {"banana" : "good", "roast beef" : "bad"}) ## Map

#set ($value = $foo + 1)
#set ($value = $bar - 1)
#set ($value = $foo * $bar)
#set ($value = $foo / $bar)

'DEV > html/css/js/img' 카테고리의 다른 글

[velocity] 반복문 Loops  (0) 2008.12.23
[velocity] 변수 지정  (0) 2008.12.23
[velocity] Data 포맷하기  (0) 2008.12.23
  Comments,     Trackbacks
[velocity] 변수 지정
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

$변수 이름 - ex) $foo

${변수이름} - ex) ${foo}very good -> 변수와 다른 문자를 구분하기 위해서

${!변수 이름} -  객체가 존재 하지 않을 경우 $foo 이것이 그대로 출력되어 버린다.  !는 공백으로 처리해준다.

'DEV > html/css/js/img' 카테고리의 다른 글

#set  (0) 2008.12.23
[velocity] Data 포맷하기  (0) 2008.12.23
[velocity] integer형으로 변환  (0) 2008.12.23
  Comments,     Trackbacks
[velocity] Data 포맷하기
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

$date.format("yyyy-MM-dd", $createTime)

'DEV > html/css/js/img' 카테고리의 다른 글

[velocity] 변수 지정  (0) 2008.12.23
[velocity] integer형으로 변환  (0) 2008.12.23
[javascript] 새창 window.open()  (0) 2008.12.23
  Comments,     Trackbacks
[velocity] integer형으로 변환
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
$math.toInteger()

'DEV > html/css/js/img' 카테고리의 다른 글

[velocity] Data 포맷하기  (0) 2008.12.23
[javascript] 새창 window.open()  (0) 2008.12.23
select 클릭시 달리 선택되도록 하기  (0) 2008.12.22
  Comments,     Trackbacks
[javascript] 새창 window.open()
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
window.open("../새창 띄울 경로(요청)","newWin","속성(ex)width=520,height=450","_blank");

'DEV > html/css/js/img' 카테고리의 다른 글

[velocity] integer형으로 변환  (0) 2008.12.23
select 클릭시 달리 선택되도록 하기  (0) 2008.12.22
삭제버튼 클릭시 reload 하기  (0) 2008.12.22
  Comments,     Trackbacks
select 클릭시 달리 선택되도록 하기
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
넘어오는 Parameter 값에 의해서 select box가 다르게 선택되도록 한다.

<script>
function getYyyyMM(){
    var yyyy = $('yyyy').value;
    var mm = $('mm').value;
   
    location.href = "../목록화면 요청 경로.do?yyyy="+yyyy+"&mm="+mm   
}
</script>

<select name="mm" id="mm" style="width:40px" onchange="getYyyyMM()">
        <option value="01" #if("$!mm" =="01") selected #end>01</option>
                                         ....중간 생략....
        <option value="12" #if("$!mm" =="12") selected #end>12</option>
</select>

'DEV > html/css/js/img' 카테고리의 다른 글

[javascript] 새창 window.open()  (0) 2008.12.23
삭제버튼 클릭시 reload 하기  (0) 2008.12.22
날짜 나타내기  (0) 2008.12.22
  Comments,     Trackbacks