출처 : http://jsdo.it/nomotch/rMoU 

/**
 * 
 */

//Load the Google data JavaScript client library.
google.load('gdata', '2.x', {packages: ['analytics']});

//Load the Google Libraries jQuery and jQuery UI
//google.load('jquery', '1.5.2');
//google.load('jqueryui', '1.8.12');

//Set the callback function when the library is ready.
google.setOnLoadCallback(init);

/**
 * This is called once the Google Data JavaScript library has been loaded.
 * It creates a new AnalyticsService object, adds a click handler to the
 * authentication button and updates the button text depending on the status.
 */
function init() {
	myService = new google.gdata.analytics.AnalyticsService('gaExportAPI_acctSample_v1.0');
	scope = 'https://www.google.com/analytics/feeds';

	// Add a click handler to the Authentication button.
	jQuery('#authButton').click( function() {
		// Test if the user is not authenticated.
		if (!google.accounts.user.checkLogin(scope)) {
			// Authenticate the user.
			google.accounts.user.login(scope);
		} else {
			// Log the user out.
			google.accounts.user.logout();
			getStatus();
		}
	});
	getStatus();
}

/**
 * Utility method to display the user controls if the user is 
 * logged in. If user is logged in, get Account data and
 * get Report Data buttons are displayed.
 */
function getStatus() {
	jQuery('#getData').click(getAccountFeed);

	if (!google.accounts.user.checkLogin(scope)) {
		jQuery('#dataControls').css('display', 'none');   // hide control div
		jQuery('#authButton').html('Access Google Analytics');

	} else {
		jQuery.datepicker.setDefaults({
			showOn: 'both',
			buttonImageOnly: true,
			buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif',
			buttonText: 'Calender',
			dateFormat: 'yy-mm-dd' },
			jQuery.datepicker.regional["ja"] );
		jQuery(function(){jQuery('#startDate').datepicker()});
		jQuery(function(){jQuery('#endDate').datepicker()});
		jQuery('#dataControls').css('display', 'block');  // show control div
		jQuery('#authButton').html('Logout');
	}
}

/**
 * Main method to get account data from the API.
 */
function getAccountFeed() {
	var myFeedUri =
		'https://www.google.com/analytics/feeds/accounts/default?max-results=50';
	myService.getAccountFeed(myFeedUri, handleAccountFeed, handleError);
}

/**
 * Handle the account data returned by the Export API by constructing the inner parts
 * of an HTML table and inserting into the HTML file.
 * @param {object} result Parameter passed back from the feed handler.
 */
function handleAccountFeed(result) {
	// An array of analytics feed entries.
	var entries = result.feed.getEntries();

	rows = new Array();

	var table = jQuery('').attr('id', 'outputTable');

	var header = jQuery('').attr('id', 'header').css('text-align', 'center');
	header.append('');
	header.append('');
	header.append('');
	header.append('');
	table.append(header);
	jQuery('#outputDiv').append(table);

	// Iterate through the feed entries and add the data as table rows.
	for (var i = 0, entry; entry = entries[i]; ++i) {

		// Add a row in the HTML Table array for each value.
		var row = {
				'profileId':entry.getPropertyValue('ga:profileId'),
				'title':entry.getTitle().getText(),
				'tableId':entry.getTableId().getValue()
		};

		var tableId = entry.getTableId().getValue();

		rows.push(row);
	}

	getDataFeed();

	/*
  var data = jQuery('').attr('id', 'data');
  data.append('');
  table.append(data);

  jQuery('#outputDiv').append(table);

  getDataFeed(rows[1]['tableId']);
	 */
}

/**
 * Main method to get report data from the Export API.
 */
function getDataFeed() {
	for (var i = 0, row; row = rows[i]; ++i) {
		setTimeout( function(row) {
			var myFeedUri = 'https://www.google.com/analytics/feeds/data' +
			'?start-date=' + jQuery('#startDate').val() +
			'&end-date=' + jQuery('#endDate').val() +
			'&dimensions=ga:entrances' +
			'&metrics=ga:visits,ga:pageviews' +
			'&sort=-ga:pageviews' +
			'&max-results=10' +
			'&ids=' + row['tableId'];

			myService.getDataFeed(myFeedUri, handleDataFeed, handleError);
		}, 5000, row);
	}
}

/**
 * Handle the data returned by the Export API by constructing the 
 * inner parts of an HTML table and inserting into the HTML File.
 * @param {object} result Parameter passed back from the feed handler.
 */
function handleDataFeed(result) {

	// An array of Analytics feed entries.
	var entries = result.feed.getEntries();
	var title = result.feed.getDataSources()[0].getTableName().getValue();
	console.log(title);

	// Iterate through the feed entries and add the data as table rows.
	for (var i = 0, entry; entry = entries[i]; ++i) {

		var data = jQuery('').attr('id', 'data');
		data.append('');
		data.append('');
		data.append('');
		data.append('');
		jQuery('#outputTable').append(data);
		jQuery('td#num').css('text-align', 'center');
	}
}

/**
 * Alert any errors that come from the API request.
 * @param {object} e The error object returned by the Analytics API.
 */
function handleError(e) {
	var error = 'There was an error!\n';
	if (e.cause) {
		error += e.cause.status;
	} else {
		error.message;
	}
	alert(error);
}


Profile Name ga:month ga:visits ga:pageviews
' + rows[1]['title'] + '
' + title + ' ' + entry.getValueOf('ga:month') + ' ' + entry.getValueOf('ga:visits') + ' ' + entry.getValueOf('ga:pageviews') + '
특수문자 강제 치환하기.



function removeSpCharacter( value ) {
	var specialChars='~`!@#$%%^&*-=+\|[{]};:\',<.>,()/?';
    var str = value;
    var i, j;
    if (str == '') return;
    for (i = 0; i < str.length; i++) {
    	for (j = 0; j < specialChars.length; j++) {
    		if (str.charAt(i) == specialChars.charAt(j)) str = str.replace(str.charAt(i), " ");
    	}
    }
    return str;
}


jQuery로 만들기엔 너무 귀찮다..


Eclipse에서 Web Project 생성.

Project Name : DWR-Test

dwr.jar 파일을 Project내의 WEB-INF/lib에 넣어준다.


web.xml에 아래 내용 추가.

     dwr-invoker                  org.directwebremoting.servlet.DwrServlet                        debug               true                 dwr-invoker         /dwr/* 


중간 파란색 부분은 dwr 버전이 1.x라면 uk.ltd로 시작하는것을 servlet-class로 적어주어야만 한다. 무조건.


dwr.xml 만들기.

                                                      

<dwr> 위에 아래 docType을 추가한다. (코드 하이라이터에서 docType을 빼버려서..)
 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

creator에 new라는 것은 객체를 만들어서 사용한다는 것이고.. HelloTest는 jsp나 html에서 객체의 이름으로 사용할 것을 적는당.
param의 class란 java파일이므로 class라 한 것이고... value의 dwr.test.SimpleText는 java파일의 경로를 적은 것.
hello란 것은 SimpleText Class의 메소드로 hello가 있다는 것을 정의해준 것.(그냥 쓸거 정의하면 됨..)

SimpleText.java 만들기

src 아래에 패키지 만들기를 통해 dwr.test를 만든 후 test 아래에 SimpleText class를 만든다.

package dwr.test;    public class SimpleText {            public String hello(String value){                   return "Hello ~ "+value;            } }

hello는 dwr.xml에서 정의한 것(자신이 쓸 메소드)과 일치시켜주면 된다.

이제 톰캣에 Project를 올리고 서버를 실행시킨후에
http://localhost:{your_port}/{your_app}/dwr/
위 주소로 들어가게 되면 dwr.xml에 정의했던 Class 목록이 나오게 된다.

위와 똑같이 했다면 이런 화면....

그리고 HelloTest를 눌러보면은.. 아래와 같이 나오게 된다..

위 그림에서 보면 script 구문이 3줄이 있다.
DWR이 알아서 저걸 만들어 준다는 것이다.
그리고 그 아래에는 Test를 할 수 있는 부분이 있다.

WebContent/index.jsp 만들기.


<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>   


send를 클릭하게 되면 JavaScript의 test() function이 호출이 된다.
test에서는 demo에 적혀진 text를 value로 저장해 DWR에서  정의한 객체(HelloTest)의 메소드(hello)를 호출한다.
그런데 hello 메서드를 보게 되면 매개변수가 하나 였는데 script내에서는 2개이다..

why? 

이를 callback function이라 하는데, return값이 있다면 return 값을 처리하는 함수이다.
왜 저렇게 쓰냐고 하면... 그냥 간단히 하기 위해서??
왜 복잡한지 궁금하다면..

function test(){     var value = dwr.util.getValue("demo");     HelloTest.hello(value, cb_function);}function cb_function(data){     dwr.util.setValue("here", data);}


이렇게 사용하느니 그냥 줄여서 사용한다 이거다. 

위 예제는 정말 간단하게 DWR 설명이 가능한 예제이다..
jsp -> Java로 가는 대부분의 과정을 DWR이 처리해주고 있다..

무분별한 사용은 금지..
데이터가 많을 경우 메모리 급상승 최악에는 서버가 죽어버린다..

아래 링크에서 확인할 수 있다.
http://javaora.tistory.com/109



'Web' 카테고리의 다른 글

Tomcat console encoding.  (0) 2010.09.01
[Script] 특수문자 강제 치환.  (0) 2010.07.23
Apache error : client denied by server configuration  (0) 2010.03.31
DWR 간단 테스트  (0) 2010.03.29
JSP 에러 모음  (0) 2010.03.29
브라우저 구분하기.  (0) 2010.03.29


위와 같은 그림이 있는데 -
직장/집 을 선택하면 주소를 넣어야하고, 수신거부를 선택하면 패스되는 유효성 검사를 해보려하는데 -

html을 이용한 for문을 사용한 것, jQuery를 이용하는 것 2가지를 비교해보면..

if(frm.p_addressGubun.length > 0){
	var b = 0; 
	for(var i=0; i<frm.p_addressGubun.length; i++){
		// 직장-집 일 경우
		if(frm.p_addressGubun[i].checked && frm.p_addressGubun[i].value != '3'){
			b = 1; break;
		// 수신거부일 경우
		}else if(frm.p_addressGubun[i].checked && frm.p_addressGubun[i].value == '3'){
			b = 2; break;
		}
	}
	if(b == 0){
		alert("주소 구분을 선택해 주세요. 주소가 없는 경우 수신거부를 선택하십시오.");
		 return false;
	}else if(b == 1 && frm.p_zipCode.value == ""){
		 alert("주소를 입력하세요. 주소가 없는 경우 수신거부를 선택하십시오.");
		 return false;
	}
	return true;
}


위 코드를 jQuery 코드로 바꾸면.. 아래와 같다..
if(frm.p_addressGubun.length > 0){
	if($j(':radio[name="p_addressGubun"]:checked').length < 1){
		alert("주소 구분을 선택해 주세요. 주소가 없는 경우 수신거부를 선택하십시오.");
		return false;
	}
	}else if($(':radio[name="p_addressGubun"]:checked').val() != 3 && frm.p_zipCode.value == ""){
		 alert("주소를 입력하세요. 주소가 없는 경우 수신거부를 선택하십시오.");
		 return false;
	}
	return true;
}


정말 간단해 진다..
:radio -> elements 중 radio 버튼 들
[name="elements_name"] -> elements_name 을 가진
합치면 :radio[name="p_addressGubun"] -> p_addressGubun 이름을 가진 radio 버튼을 선택한다.
:checked 선택된 것만.


+ Recent posts