Category: ‘JavaScript’

JSON.parse() と jQuery.parseJSON()

2011年10月4日 Posted by PURGE

JSONデータがデータインタフェースとして何かと取扱い便利なので利用している。
但し、手元のIE8だと JSONオブジェクトのサポートをしていないのか、下記の関数が利用できない。

var strJson = {"title":"ああああ", "content":"いいいいい"};
var jsonData = JSON.parse(strJson);

ブラウザ互換性の問題として一瞬焦ったが、こんな時は、jQueryでも同様のメソッドがある。

var strJson = {"title":"ああああ", "content":"いいいいい"};
var jsonData = $.parseJSON(strJson);

Love jQuery である・・・。

Seasar2 と DWR連携

2011年10月4日 Posted by PURGE

まずは、DWRのサイトからjarファイルをダウンロードし、/WEB-INF/lib フォルダへ配置してクラスパスを通す。

/WEB-INF/web.xml

<servlet>
	<display-name>DWR Servlet</display-name>
	<servlet-name>dwr-invoker</servlet-name>  
	<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
	<init-param>
		<param-name>debug</param-name>
		<param-value>true</param-value>
	</init-param>
</servlet>
<servlet-mapping>
	<servlet-name>dwr-invoker</servlet-name>
	<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

まずは、DWR Servletのweb.xmlへの設定。
/dwr/* で来たリクエストを同Servletが受けるように設定する。

/WEB-INF/dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC 
  "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" 
  "http://getahead.org/dwr/dwr20.dtd">
<dwr>
	<init>
		<creator id="s2creator" class="packagename.S2Creator" />
	</init>
	<allow>
		<create creator="s2creator" javascript="ajaxService">
			<param name="serviceName" value="ajaxService"/>
		</create>
	</allow>
</dwr>

指定したCreatorクラスが、Seasar2が管理しているServiceクラスを返すように定義する。
<init>では、creator の id (任意)と class属性は対象クラス名を指定する。
<param>では、S2Creator.javaクラスでDIする name(setterでセットするプロパティ名)とvalue(class名)を指定する。

S2Creator.java

package packagename.creator;

import org.directwebremoting.create.AbstractCreator;
import org.seasar.framework.container.factory.SingletonS2ContainerFactory;

public class S2Creator extends AbstractCreator {
	
	private String serviceName;
	
	@Override
	public Object getInstance() throws InstantiationException {
		
		return SingletonS2ContainerFactory
				.getContainer()
				.getComponent(serviceName);
	}

	@Override
	public Class<?> getType() {
		return SingletonS2ContainerFactory
				.getContainer()
				.getComponentDef(serviceName)
				.getComponentClass();
	}

	public void setServiceName(String serviceName) {
		this.serviceName = serviceName;
	}
}

dwr.xmlで指定したサービス名で、コンテナからserviceクラスを返す。

AjaxService.java

package packagename.service;

public interface AjaxService {
	
	/**
	 * @param name
	 * @return
	 */
	String hello(String name);

}

実際のServiceが定義されたインタフェースクラス。

AjaxServiceImpl.java

package packagename.service.impl;

import package.name.service.AjaxService;

public class AjaxServiceImpl implements AjaxService {

	@Override
	public String hello(String name) {
		return "Hello " + name + "!!!";
	}
}

実際のサーバ処理を行うServiceクラス

index.jsp

<script src="/dwr/interface/ajaxService.js" type="text/javascript"></script>
<script src="/dwr/engine.js" type="text/javascript"></script>
<script src="/dwr/util.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
	ajaxService.hello("AJAX", callBack);
});
function callBack(value){
	alert(value);
}
</script>

JSP(HTML)で、サーバ側に自動生成されるjsファイルの場所を定義する。
/dwr/interface/ajaxService.js
/dwr/engine.js
/dwr/util.js

dwr.xml で定義したJavaScript名でメソッドを呼べる。
この場合、第1引数は、サーバへのパラメータで、第2引数は非同期でコールバックされるJavascriptの関数名を指定する。

おそらくこれで動作するはずである。
難しく考えていたが、設定が終わればかなり簡単にAjax通信ができるようになる。

DWRの詳細はこちら(DWR)を参照してください。

JavaScript オブジェクト生成

2011年10月3日 Posted by PURGE

var obj1 = {};
var obj2 = new Object();
var obj3 = {x:0, y:0};
var obj4 = {"name":"ほげ", "address":"東京都"};

var arr = new Array();

jqGridのエラー b.jgrid.formatter is undefined

2011年9月14日 Posted by PURGE

jqGridを利用して、下記エラーが表示された。

b.jgrid.formatter is undefined

解決策として、jQuery Grid Pluginのページから、最新のライブラリをダウンロードし利用する。

問題は、スクリプトの宣言の順番を間違えると上記のエラーとなるようだ。

<script src="path_to_js_files/grid.locale-ja.js" type="text/javascript"></script>
<script src="path_to_js_files/jquery.jqGrid.min.js" type="text/javascript"></script>

install.txt ファイルに書いてある通りにすれば良いだけのこと。

使えそうな jQuery Plugin

2011年8月16日 Posted by PURGE

画像スライダー
Slider Kit

iGoogle風ガジェットI/F
Mimic the iGoogle Interface

ポップアップフォーム
Design Walker

入力チェック
Jquery Inline Form Validation Engine

サムネイル
MyThumbnail jquery plugin

Twitter風スクロール
Infinite Scroll Plugin

Infinite Ajax Scroll

検索
Searcher Plugin

jQueryプラグイン

2011年8月15日 Posted by PURGE

/*
 * jQueryテストプラグイン
 */
;(function($){
	$.fn.myTest = function(options){
		var opts = jQuery.extend({}, $.fn.myTest.defaults, options);

		return this.each(function(){
			$(this).css({width : opts.width, 
						  height : opts.height,
						  background : opts.color});
		});
	};
	//デフォルト値
	$.fn.myTest.defaults = {
		height : '200px',
		width :  '300px',
		color : 'blue'
	};

})(jQuery);

もし、引数にてパラメータを渡した場合デフォルト値が上書きされる。

$(function(){
	$("#test").myTest({width : '400px'});
})
<div id="test"></div>