threadLocal...

이번 MoneyPlanner에 사용하였다... (Lucy에것을 참조하여)

간단히 말하여 thread가 살아있는 동안 계속 살아있는 저장소 개념이다...

Map형식으로 되어 있으며...  thread가 살아있는 동안 계속 존재하므로...

전역변수처럼... 사용할 수도 있겠다...


MoneyPlanner에서는.... 하나의 웹어플리케이션이 실행될때... request, response를 ServiceContext라는

객체에 셋팅을 해주는데... ServiceContext는 저 threadLocal 변수를 하나 가지고 있다. static으로....

그러므로 thread가 살아있는 동안 (Dispose() 시키기 전까지) 계속 이용할 수있게 된다.

MoneyPlanner에서는 웹어플리케이션이 끝날때... Dispose()시킨다.


클라이언트는 접속할때마다 하나의 Thread를 가지게 되므로 각 클라이언트마다 별도의 Map정보를

유지할 수 있는 구조를 가지게 된다.

function refreshModelList(billGubun, prevSeq, classDivj)
{
 if(classDivj != null && classDivj != "")
 {
  classDiv = classDivj;
 }
 
 currentGubun = billGubun;  
 currentClass = prevSeq;
 
 var url = headUrl + "/servlet/BillClassificationServlet?billGubun=" + billGubun + "&prevSeq=" + prevSeq;

 createXMLHttpRequest();
 xmlHttp.onreadystatechange = handleStateChange;
 xmlHttp.open("GET", url, true);
 xmlHttp.send(null);
}

function handleStateChange()
{
 if(xmlHttp.readyState == 4)
 {
  if(xmlHttp.status == 200)
  {
   updateModelsList();
  }
 }
}

// 분류 테이블 구성
// xml로 리턴된 데이터로 분류를 나타내는 테이블을 만들어서 출력해준다.
// currentClass가 값이 없으면 최상위 분류인 1차 분류를 나타내는 테이블을 만들고
// 값이 존재하면 sub테이블인 2차 분류를 나타내는 테이블을 만든다.
function updateModelsList()
{
 ShowSelectClassDiv();
 
 var results = xmlHttp.responseXML.getElementsByTagName("classification");
 
 var option = null;
 
 var tableDiv = "<table border='0' cellspacing='1' cellpadding='2' bgcolor='#000000' width='100' align='center' valign='top'>";
 for(var i = 0; i < results.length ; i++)
 {
  tableDiv += "<tr bgcolor='#FFFFFF'><td>";
  tableDiv += "<input type='hidden' value='" + results[i].childNodes[0].text + "'>";
  if(currentClass != "")
  {
   // 서브 노드를 선택했으면 input폼에 value를 넣어주기 위해 setClassValue를 호출해준다.
   tableDiv += "<a href='#' onclick=\"setClassValue('" + results[i].childNodes[0].text + "','" + results[i].childNodes[1].text + "')\">";
   tableDiv += results[i].childNodes[1].text;
   tableDiv += "</a>";
  }
  else
  {
   // 최상위 노드를 선택했으면 해당 선택노드의 서브노드를 가져오는 refreshModelList를 호출한다.
   tableDiv += "<a href='#' onclick=\"refreshModelList(currentGubun,'" + results[i].childNodes[0].text + "','')\">";
   tableDiv += results[i].childNodes[1].text;
  }
 
  tableDiv += "</a>";
  tableDiv += "</td></tr>";
 }
 tableDiv += "</tale>";
 
 var ChildClassDiv = document.getElementById("ChildClassDiv");
 var ClassDiv = document.getElementById("ClassDiv");
 
 // 자식노드들이 나온다
 if(currentClass != "")
 {
  ChildClassDiv.innerHTML = tableDiv;
 }
 else // 최상위 노드
 {
  // 최상위 노드가 나왔으니 서브 노드는 지워주고 선택한 최상위 노드를 출력해준다.
  ChildClassDiv.innerHTML = "";
  ClassDiv.innerHTML = tableDiv;
 }
}



 var url = headUrl + "/servlet/BillClassificationServlet?billGubun=" + billGubun + "&prevSeq=" + prevSeq;
여기 URL로 request를 보내서 xml로 리턴받은 값을 table로 만들어 준다.
물론 비동기 방식으로...-_-;;

클릭할때마다 테이블을 만들어 주며...
두번째 분류일 경우에는 setClassValue메소드를 호출하여 해당 input폼에 값을 넣어준다...

function setClassValue(classSeq, classNm)
{
 var divId = document.getElementById("typeClass" + classDiv);
 divId.value=classSeq;
 var divName = document.getElementById("classDiv_" + classDiv);
 divName.innerHTML = classNm;
 
 HideSelectClassDiv();
}

<table bgcolor="#000000" width="300" height="300" align="center" border='0' cellspacing='1' id="SelectClassTable"  style="position:absolute; background-color: #CCFF99">
<tr align='center' bgcolor='#FFFFFF' height='20'>
 <td width='50%'>1차분류</td>
 <td>2차분류</td>
</tr>
<tr bgcolor='#FFFFFF'>
 <td valign='top'>
  <div id="ClassDiv">
  </div>
 </td>
 <td valign='top'>
  <div id="ChildClassDiv">
  </div>
 </td>
</tr>
<tr bgcolor='#FFFFFF' height='20'>
 <td colspan='2' align='center'><a href='#' onclick='HideSelectClassDiv()'>[닫기]</a></td>
</table>
</div>



<javascript >
function ShowSelectClassDiv()
{
 var SelectClassDiv = document.getElementById("SelectClassDiv");
 SelectClassDiv.style.visibility = "visible";
 
 var divTag = document.getElementById("SelectClassDiv");
 var iFrameTag = document.getElementById("selectblocker");
 var tableTag = document.getElementById("SelectClassTable");
 
 divTag.style.left=420;
 divTag.style.top=150;
 divTag.style.width=300;
 divTag.style.height=300;
 iFrameTag.style.left = 0;
 iFrameTag.style.top = 0;
 iFrameTag.style.width = divTag.style.width;
 iFrameTag.style.height = divTag.style.height;
 iFrameTag.style.zIndex = divTag.style.zIndex-1;
 
 tableTag.style.left = 0;
 tableTag.style.top = 0;
 tableTag.style.width = divTag.style.width;
 tableTag.style.height = divTag.style.height;
 tableTag.style.zIndex = divTag.style.zIndex;
 divTag.style.display = "block";

}
</javascript>