Filter (2)

💻 Programming/JSP

[JSP] Filters ( 필터 사용하기 )

Servlet과 JSP 필터는 서블릿과 JSP프로그래밍에서 아래와 같은 목적으로 사용될 수 있는 Java 클래스입니다.

  • 클라이언트로부터의 요청이 백엔드로 가기 전에 가로채기 위해서

  • 서버로부터의 응답이 클라이언트로 보내지기 전에 조작하기 위해서

아래는 많이 사용되는 필터들의 종류입니다.

  • Authentication Filters.

  • Data compression Filters

  • Encryption Filters .

  • Filters that trigger resource access events.

  • Image Conversion Filters .

  • Logging and Auditing Filters.

  • MIME-TYPE Chain Filters.

  • Tokenizing Filters .

  • XSL/T Filters That Transform XML Content.

Filter는 deployment descriptor 파일인 web.xml을 통해서 디플로이 되고 servlet 이나 JSP에 매핑이 됩니다. web.xml 파일은 <Tomcat-installation-directory>\conf 디렉토리에서 찾으실 수 있습니다.

JSP 컨테이너가 웹애플리케이션을 시작할 때, 컨테이너는 각 필터의 인스턴스를 생성합니다. 당신이 deployment descriptor에 선언한 필터들을 말이죠. 그 필터들은 정의된 순서대로 실행이 됩니다. 


Servlet Filter Methods:

필터는 간단히 말해서 그냥 Java 클래스입니다.  javax.servlet.Filter 인터페이스를 구현한 클래스라고 할 수 있죠. The javax.servlet.Filter interface 는 아래의 세가지 메소드를 선언하고있습니다.

S.N.Method & Description
1public void doFilter (ServletRequest, ServletResponse, FilterChain)
This method is called by the container each time a request/response pair is passed through the chain due to a client request for a resource at the end of the chain.
2public void init(FilterConfig filterConfig)
This method is called by the web container to indicate to a filter that it is being placed into service.
3public void destroy()
This method is called by the web container to indicate to a filter that it is being taken out of service.


JSP Filter 예제

아래는 JSP Filter 예제입니다. 무엇을 하는고 하니, 요청이 들어올 때마다 클라이언트의 IP주소를 프린트하고 현재 시간을 뿌려줍니다. 이 예제를 통해서 JSP Filter의 기본적인 사용법을 익힐 수 있을거에요.  

// Import required java libraries import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import java.util.*; // Implements Filter class public class LogFilter implements Filter { public void init(FilterConfig config) throws ServletException{ // Get init parameter String testParam = config.getInitParameter("test-param"); //Print the init parameter System.out.println("Test Param: " + testParam); } public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws java.io.IOException, ServletException { // Get the IP address of client machine. String ipAddress = request.getRemoteAddr(); // Log the IP address and current timestamp. System.out.println("IP "+ ipAddress + ", Time " + new Date().toString()); // Pass request back down the filter chain chain.doFilter(request,response); } public void destroy( ){ /* Called before the Filter instance is removed from service by the web container*/ } }

이제 LogFilter.java를 컴파일하고 LogFilter.class 파일을 <Tomcat-installation-directory>/webapps/ROOT/WEB-INF/classes 디렉토리에 넣어주세요. 그리고 아래에서 매핑시켜주는 작업을 더 해야합니다. 


JSP Filter Mapping in Web.xml:

web.xml 에서 필터를 매핑할 때는 아래처럼 사용하시면 됩니다.

<filter> <filter-name>LogFilter</filter-name> <filter-class>LogFilter</filter-class> <init-param> <param-name>test-param</param-name> <param-value>Initialization Paramter</param-value> </init-param> </filter> <filter-mapping> <filter-name>LogFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

위 소스처럼 매핑하면 모든 서블릿과 JSP에 적용이 됩니다.  url pattern에서 /* 이 의미하는 것이 모든 것이기 때문입니다. 즉, 이곳에 특정 servlet 이나 JSP를 넣어 줄 수도 있다는 말이죠.

이제 JSP페이지를 요청하면 웹서버 로그에서 생성된 로그를 보실 수 있습니다.  Log4J 로거를 사용해서 다른 파일에 로그를 기록할 수도 있다는점도 참고하시기 바랍니다.


Filter 여러개 사용하기

여러개의 필터를 사용해야 한다면 아래처럼 사용하시면 됩니다. 각각의 필터를 정의하고 각각 매핑을 하는거죠. 

<filter> <filter-name>LogFilter</filter-name> <filter-class>LogFilter</filter-class> <init-param> <param-name>test-param</param-name> <param-value>Initialization Paramter</param-value> </init-param> </filter> <filter> <filter-name>AuthenFilter</filter-name> <filter-class>AuthenFilter</filter-class> <init-param> <param-name>test-param</param-name> <param-value>Initialization Paramter</param-value> </init-param> </filter> <filter-mapping> <filter-name>LogFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>AuthenFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

Filters Application Order:

필터의 적용 순서를 바꿀 수도 있습니다. 먼저 정의된 필터가 먼저 적용이 되는거죠. 위 예제에서는 LogFilter가 AuthenFilter보다 우선 적용이 되는거고 아래 예제에서는 AuthenFilter가 LogFilter보다 우선 적용됩니다.

<filter-mapping> <filter-name>AuthenFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>LogFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

 

 

 

Reference : http://www.tutorialspoint.com/jsp/jsp_writing_filters.htm 

 

자~ 오늘은 CSS 필터에 대해서 알아볼 텐데요~ 순수한 CSS를 이용해서 텍스트나 이미지 등등에 효과를 주는 방법을 알아볼 것입니다.

이 필터는 IE 4.0 이상에서만 작동합니다. 

( 테스트를 해봤는데 이 CSS 필터는 최근 브라우저( Chrome, IE, FireFox )에서는 지원을 안하는 것 같네요..^^;; 그냥 이런 것도 있구나 하시면 될것 같습니다.)


자, 그럼 CSS 필터에 대해서 하나하나 알아보도록 할까요?


모든 예제는 브라우저 별로 결과가 다르게 보일 수 있다는 것을 명심하세요. 적용이 안되는 브라우저도 있습니다.


Alpha Channel

이건 뭐 이미 다 아시리라 생각합니다. 알파 값이죠. 객체의 투명도를 설정하는 필터입니다.

다음은 이 필터에서 사용할 수 있는 파라미터와 그에대한 설명입니다.

ParameterDescription
opacityLevel of the opacity. 0 is fully transparent, 100 is fully opaque.
finishopacityLevel of the opacity at the other end of the object.
styleThe shape of the opacity gradient.

0 = uniform
1 = linear
2 = radial
3 = rectangular
startXX coordinate for opacity gradient to begin.
startYY coordinate for opacity gradient to begin.
finishXX coordinate for opacity gradient to end.
finishYY coordinate for opacity gradient to end.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>




Motion Blur

This will be used to create blurred pictures or text with the direction and strength. Following are the parameters which can be used in this filter:

ParameterDescription
addTrue or false. If true the image is added to the blurred image and if false the image is not added to the blurred image.
directionThe direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left
strengthThe number of pixels the blur will extend. The default is 5 pixels.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>


Chroma Filter

This will be used to make any particular color transparent and usually it is used with images. You can use it with scrollbars also.Following are the parameters which can be used in this filter:

ParameterDescription
color The color that you'd like to be transparent.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)">

<p>Text Example:</p>
<div style="width: 580; height: 50; font-size: 30pt; font-family: Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>




Drop Shadow Effect

This will be used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color. . Following are the parameters which can be used in this filter:

ParameterDescription
color The color, in #RRGGBB format, of the dropshadow.
offX Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.
offY Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.
positiveIf true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)">CSS Tutorials</div>




Flip Effect

This will be used to create a mirror image of the object. Following are the parameters which can be used in this filter:

ParameterDescription
FlipH Creates a horizontal mirror image
FlipV Creates a vertical mirror image

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipH">

<img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipV">

<p>Text Example:</p>
<div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipV">CSS Tutorials</div>




Glow Effect

This will be used to create a glow around the object. If it is a transparent image then glow is created around the opaque pixels of it. Following are the parameters which can be used in this filter:

ParameterDescription
color The color you want the glow to be.
strengthThe intensity of the glow (from 1 to 255).

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>




Grayscale Effect

This will be used to convert the colors of the object to 256 shades of gray. Following are the parameters which can be used in this filter:

ParameterDescription
gray Converts the colors of the object to 256 shades of gray.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Gray">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Gray">CSS Tutorials</div>




Invert Effect

This will be used to map the colors of the object to their opposite value in the color spectrum ie. to create a negative image. Following are the parameters which can be used in this filter:

ParameterDescription
InvertMaps the colors of the object to their opposite value in the color spectrum.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: invert">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: invert">CSS Tutorials</div>


Mask Effect

This will be used to turn transparent pixels to a specified color and makes opaque pixels transparent. Following are the parameters which can be used in this filter:

ParameterDescription
color The color that the transparent areas will become.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">CSS Tutorials</div>




Shadow Filter

This will be used to create an attenuated shadow in the direction and color specified. This is a filter lies in between Dropshadow and a Glow. Following are the parameters which can be used in this filter:

ParameterDescription
color The color that you want the shadow to be.
directionThe direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>




Wave Effect

This will be used to gives the object a sine wave distortion to make it look wavey. Following are the parameters which can be used in this filter:

ParameterDescription
addA value of 1 adds the original image to the waved image, 0 does not.
freq The number of waves.
lightThe strength of the light on the wave (from 0 to 100).
phase At what degree the sine wave should start (from 0 to 100).
strength The intensity of the wave effect.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div>




X-Ray Effect

This will be used to grayscales and flattens the color depth. Following are the parameters which can be used in this filter:

ParameterDescription
xrayGrayscales and flattens the color depth.

예제:

<p>Image Example:</p>
<img src="/images/css.gif" alt="CSS Logo" style="Filter: Xray"">

<p>Text Example:</p>
<div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; style="Filter: Xray">CSS Tutorials</div>






Reference : http://www.tutorialspoint.com/css/css_text_effects.htm