티스토리 툴바


HTML A Tag href

HTML 2012/02/15 16:56
크리에이티브 커먼즈 라이선스
Creative Commons License
이미지에도 onclick 이벤트를 걸수 있다만.
퍼블리셔 분들이 a Tag를 항상 이미지 위에 걸어 주신다.

<a href="#"  />

#자신의 페이지를 뜻하기 때문에 화면이 변경되는건 아니지만. 새로고침 되며 위치는 상단으로 이동된다.

이를 방지 하기 위한 몇가지 방법이 있는데

내가 알고 있는 몇가지 방법을 제외 하고도 여러 브라우저에서 테스트한 내용이 아래 링크에 담겨있다.
http://blog.naver.com/ymobius?Redirect=Log&logNo=30095324654 


굳이 A Tag를 쓰겠다면은 아래와 같이 사용한다.

<a href="javascript:" />
<a href="javascript:void(0)" /> 
<a href="#;return false;" /> 
<a href="#" onclick="test();return false;"/>  
<a href="http://localhost____" onclick="test();return false;"/>  



머릿속에 모든걸 기억할수 없으니, 키워드는 기억하자
저작자 표시

'HTML' 카테고리의 다른 글

HTML A Tag href  (0) 2012/02/15
http://www.corechain.com/index.html  (0) 2010/11/19
common.js div 라운드 둥글게  (3) 2010/07/23
JSTL expected  (0) 2010/07/07
Posted by 안상길 Think of me
크리에이티브 커먼즈 라이선스
Creative Commons License
1. embed
<embed src='mms://~~~'>

세부 Attribute
....

2. object
<object src='~~' >

세부 Attribute
...




 
저작자 표시
Posted by 안상길 Think of me
TAG Embed, object
크리에이티브 커먼즈 라이선스
Creative Commons License
twitter 라든지 facebook 요즘 대세로 꼽히고 있는 SNS들의 주요기능중 하나인 더보기 기능 .
스크롤 감지로 더보기를 클릭하지 않더라도 다른 내용들을 긁어와 사용자의 화면에 보여준다. 

우선 위 기능을 구현하기 위해
첫번째로 더보기를 사용자가 클릭한 내용을 사용자 화면에 어떤 식으로 보여줄것인가에 대해 생각해보자.
단순하게 Ajax Call을 이용해서 비동기방식으로 데이터를 가져온다 생각하면 
jquery를 사용해도 되고 직접  XMLHttpRequest를 생성하여 사용하여 해당 parentId에 DOM 으로 + 해준다면 더보기 데이터 불러오기 완료

자 이제 더보기를 클릭하지 않고 스크롤 움직임 만으로 데이터를 불러와야 하는데 이것은 어찌 할까. 고민하다가 
역시나 검색, 네이년에는 나올생각도 않고 역시 구글링이..  최고

예전에 DWR로 채팅창을 만들다가 스크롤 고정에 대해 고민하면서 찾았던
scrollHeight  scrollTop  이 두놈을 가지고 아래와 같이 스크롤을 감지한다.

$(window).scroll(function(){

if ($(window).scrollTop() == $(document).height() - $(window).height()){

lastAddedLiveFunc();

}

});


 lastAddedLiveFunc ()  Function을 이용해 AddOn 한다면  스크롤 이동으로 More 기능이 완성.


* sample Site
   - http://www.webresourcesdepot.com/dnspinger/ 
 

* jquery plug-in 
   - jquery.endless
 

http://www.infinite-scroll.com/the-history-of-infinite-scroll/          <- 

DHTML Document

scrollHeight

스크롤 시키지 않았을때의 전체 높이를 구한다.
Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.



clientheight


눈에 보이는 많큼의 높이를 구한다.
Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

 


scrollTop

스크롤되어 올라간 많큼의 높이를 구한다. 
Mozilla Developer Center의 그림예제를 보면 쉽게 이해할 수 있다.

 


브라우저별 차이점

scrollHeight / clientheight / scrollTop 모두 W3C의 표준이 아니며 브라우저별로 다르게 표현된다.
같은 효과를 내더라도 경우(Dtd 여부와 종류, 수직 가운데 정렬 등)에 따라서 0~40픽셀 이상의 차이가 생길 수 있으며 올바르게 적용되는 속성과 잘못 적용되는 속성이 뒤섞여있다. 
 
저작자 표시
Posted by 안상길 Think of me

Jrebel - 작서중

분류없음 2012/01/26 11:32
크리에이티브 커먼즈 라이선스
Creative Commons License

사용화 버전이라 달러를 주고 사용해야 하지만 social 버전은 무료로 가용이 가능하다.
social 버전은 페이스북과 트윗 아이디만 있으면 
https://social.jrebel.com/dashboard 
페이지에서 로그인 한뒤 무료 라이센스를 발급받을수 있다.


사용이유.
class 파일을 변경할때마다 서버가 재가동 되는 시간만 줄일수 있어도 프로그램 개발시 많은 시간을 줄일수가 있다. 즉, 퍼블리싱 되는 시간까지 조절 할 수 있다. 

java파일 뿐만아니라 플러그인을 통해 스트럿츠, 아이바티스(마이바티스),스프링 등등 xml도 런타임에 적용 할 수 있다



 
* 플러그인 설치 후 사용과정.
http://zeroturnaround.com/jrebel/eclipse-jrebel-tutorial/
저작자 표시
Posted by 안상길 Think of me
크리에이티브 커먼즈 라이선스
Creative Commons License
transaction rollback 누구나가 programming 을 하다보면 트랜잭션 처리에 대해 생각을 하게 된다.
물론 학부시절에는 롤백보다는 일단 life cycle 을 익히고 실행/동작하는것에 focus가 맞춰있다보니 이젠 이런 내용들을 .....



선언적 트랜잭션
특징 : 1. Transaction Template과 달리 트랜잭션 처리를 코드에서 수행하지 않음.
         2. 설정 파일이나 어노테이션을 이용해서 트랜잭션의 범위, 롤백의 규칙을 정의

방법 :
        1.<tx:advice> 태그를 이용한 트랜잭션 처리
        2.TransactionProxyFactoryBean Class를 이용한 트랜잭션 처리 
        3. @Transaction  어노테이션을 이용한 처리.


여기서 소개할 트랜잭션 처리 방식은 2.TransactionProxyFactoryBean과 3.@Transaction 을 이용한 두가지 방법이다.  

 
1. 먼저 TransactionProxyFactoryBean 을 이용한 트랜잭션 처리

<bean id="sqlMapClient" class="org.springframework.orm.ibatis.SqlMapClientFactoryBean">

<property name="configLocations">

<list>

<value>classpath:ibatis/sql-map-config.xml</value>

</list>

</property>

<property name="useTransactionAwareDataSource">

<value>true</value>

</property>

<property name="dataSource" ref="dataSource" />

</bean>


<!-- Transaction manager for a single JDBC DataSource -->

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

<property name="dataSource" ref="dataSource" />

</bean>

<bean id="abstractTxDefinition" class="org.springframework.transaction.interceptor.TransactionProxyFactoryBean" abstract="true">

<property name="transactionManager" ref="transactionManager" />

<property name="transactionAttributes">

<props>

<prop key="update*">PROPAGATION_REQUIRED</prop>

<prop key="delete*">PROPAGATION_REQUIRED</prop>

<prop key="insert*">PROPAGATION_REQUIRED</prop>

<prop key="add*">PROPAGATION_REQUIRED</prop>

<prop key="remove*">PROPAGATION_REQUIRED</prop>

<prop key="clear*">PROPAGATION_REQUIRED</prop>

<prop key="rename*">PROPAGATION_REQUIRED</prop>

<prop key="move*">PROPAGATION_REQUIRED</prop>

<prop key="import*">PROPAGATION_REQUIRED</prop>

<prop key="set*">PROPAGATION_REQUIRED</prop>

<prop key="create*">PROPAGATION_REQUIRED</prop>

<prop key="store*">PROPAGATION_REQUIRED</prop>

<prop key="import*">PROPAGATION_REQUIRED</prop>

<prop key="request*">PROPAGATION_REQUIRED</prop>

<prop key="approve*">PROPAGATION_REQUIRED</prop>

<prop key="start*">PROPAGATION_REQUIRED</prop>

<prop key="execute*">PROPAGATION_REQUIRED</prop>

<prop key="*confirm*">PROPAGATION_REQUIRED</prop>

<prop key="*report*">PROPAGATION_REQUIRED</prop>

<prop key="*save*">PROPAGATION_REQUIRED</prop>

<prop key="redraft*">PROPAGATION_REQUIRED</prop>

<prop key="report*">PROPAGATION_REQUIRED</prop>

<prop key="apporove*">PROPAGATION_REQUIRED</prop>

<prop key="reject*">PROPAGATION_REQUIRED</prop>

<prop key="redraft*">PROPAGATION_REQUIRED</prop>

<prop key="accept*">PROPAGATION_REQUIRED</prop>

<prop key="copy*">PROPAGATION_REQUIRED</prop>

<prop key="get*">PROPAGATION_REQUIRED</prop>

<prop key="eval*">PROPAGATION_REQUIRED</prop>

<prop key="multi*">PROPAGATION_REQUIRED</prop>

<prop key="handle*">PROPAGATION_REQUIRED</prop>

<prop key="*">PROPAGATION_SUPPORTS, readOnly</prop>

</props>

</property>

</bean>


<!-- DataSource  -->

<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">

<property name="driverClassName" value="${jdbc.driverClassName}" />

<!-- <property name="driverClassName" value="com.p6spy.engine.spy.P6spyDriver" /> -->

<property name="url" value="${jdbc.url}" />

<property name="username" value="${jdbc.username}" />

<property name="password" value="${jdbc.password}" />

</bean>


1.1  TransactionProxyFactoryBean 
트랜잭션을 처리해주는 프록시를 생성해주는 클래스
1.2 프로퍼티
*target
-트랜잭션을 적용할 대상 객체를 설정.
*transactionManager
-트랜잭션 관리자 설정
*transactionAttributes
-트랜잭션 속성 설정에 사용되는 Properties 객체 설정.
*<prop> key & 형식

PROPAGATION_NAME, ISOLATION_NAME,readOnly,timeout,+Exception1,-Exception2


PROPAGATION_NAME : 
- 필수항목
- PROPAGATION_REQUEST와 같은 트랜잭션 전파 규칙이 위치한다.
ISOLATION_NAME :
- ISOLATION_DEFAULT 와 같은 트랜잭션 결리 레벨이 위치.
readOnly :
- 트랜잭션을 읽기 전용으로 설정
timeout :
- 트랜잭션의 타임 아웃 시간을 초 단위로 설정
롤백규칙 :
- '+' , '-'를 이용하여 설정
- 예외클레스 이름앞에 '+'를 붙이면 해당 예외가 발생하더라도 커밋을 수행.
- '-'를 붙이면 롤백을 수행.




2. @Transactional 을 이용한 처리 방법
-2.5 ver. 에서 사용가능하며 메서드나 클래스에 적용하여 사용한다.
Class 사용예제

@Transactional
public class TestServiceImpl implements ITestService{


Method 사용예제


 
 


저작자 표시
Posted by 안상길 Think of me