cafen 20.0- cafenOFCJS v20

Default Editor

Simple Editor

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>var cafenGlobalConf = {scripturl : 'http://service2.cafen.net/'}</script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>
<textarea id=editorObj name=contents style='width:800px;height:400px' ></textarea>
<script>
onload = function() {
	$('#editorObj').cafenEditor();
}

function onSubmitFnc(formObj) {
	formObj.contents.value = formObj.contents.getContents(); 
	// this script will synk textarea value and editor oject value
	if (formObj.contents.value == '') {
		alert('Input Contents ppl.');
		formObj.contents.focus();
		return false;
	}
}
</script>

Reference

http://service2.cafen.net/example/editor.html

Default Map

Simple Map

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>
var cafenGlobalConf = {
	scripturl : 'http://service2.cafen.net/',
	apiKeys : {
		NAVER : 'a08d0b8d52f4f6d234e7~~~', 
		DAUM : '8f25ed2e582d77737477c~~~', 
		GOOGLE : 'CAFENNET',
		NMap : '343c0d7e907249d72~~~', 
		DMap : '8da903b524b2be1dd7~~~', 
		VEMap : 'AUTO', 
		GMap :'ABQIAAAAs9fFh4qNwsTXeAyGhDSQA~~~',
		YMap: 'PGYzlUbV34Hx.wEYwxUjZcYdU1u~~~'
	}
}
</script>
<script type="text/javascript" src="http://maps.google.co.kr/maps?file=api&v=2&key=ABQIAAAAs9fFh4qNw~~~~" charset=utf-8></script>
<script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=PGYzlUbV34~~~~" charset=utf-8></script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>
<div id=mapObj style='width:800px;height:400px'  apitype='GMap' ></div>
<script>
onload = function() {
	$('#mapObj').cafenMap();
}
</script>

Reference

http://service2.cafen.net/example/map.html

Static Map - image

Static Map - Input

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>
var cafenGlobalConf = {
	scripturl : 'http://service2.cafen.net/',
	apiKeys : {
		GMap :'ABQIAAAAs9fFh4qNwsTXeAyGhDSQA~~~'
	}
}
</script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>
<img id=mapObj src='~~~' style='width:800px;height:400px'  />
<script>
onload = function() {
	$('#mapObj').mapPicker();
}
</script>

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>
var cafenGlobalConf = {scripturl : 'http://service2.cafen.net/'}
</script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>
<input class=colorObj  value='#ff0000'  />
<div class=colorObj  style='background-color:#ff0000' ></div>
<div id=colorlinkObj  style='background-color:#ff0000' ></div> <button class=colorObj linkObj=colorlinkObj >getColor</button>
<script>
onload = function() {
	$('.colorObj').colorPicker();
}
</script>

2002/12/31

2001/01/12

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>
var cafenGlobalConf = {scripturl : 'http://service2.cafen.net/'}
</script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>
<input class=dateObj  value='2001/12/12'  />
<div class=dateObj >2001/12/12</div>
<div id=datelinkObj  >2001/12/12</div> <button class=dateObj linkObj=datelinkObj >getDate</button>
<script>
onload = function() {
	$('.dateObj').datePicker();
}
</script>

Javascript

var 
	// Will speed up references to window, and allows munging its name.
	window = this,
	// Will speed up references to undefined, and allows munging its name.
	undefined,
	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,
	// Map over the $ in case of overwrite
	_$ = window.$,

	jQuery = window.jQuery = window.$ = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context );
	},

	// A simple way to check for HTML strings or ID strings
	// (both of which we optimize for)
	quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
	// Is it a simple selector
	isSimple = /^.[^:#\[\.,]*$/;

PHP

function getRandNo($min =0 , $max = 23) {
	return rand($min, $max);
}

function getRandNos($cnt, $min = 0 , $max = 23) {
	$tmp = Array();
	$lastVal = getRandNo($min +5, $max - 5);
	for($i = 0; $i < $cnt; $i++) {
		$lastVal = getRandNo(max($min, $lastVal - 5), min($max, $lastVal + 5));
		$tmp[] = $lastVal;
	}
	return $tmp;
}

Java

public interface CategoryDAO {

  /**
   * Loads the categories.
   *
   * @param blog    the owning blog
   * @return  a Collection of Category instances
   * @throws  PersistenceException    if categories cannot be loaded
   */
  public Category getCategories(Blog blog) throws PersistenceException;

  /**
   * Adds the specified category.
   *
   * @param category    the Category instance to be added
   * @param blog    the owning blog
   * @throws PersistenceException   if something goes wrong storing the category
   */
  public void addCategory(Category category, Blog blog) throws PersistenceException;
}

Xml

<channel>
	<title><![CDATA[비탐인(非貪人)]]></title>
	<link>http://blog.naver.com/anabaral</link>
	<image>
		<url><![CDATA[http://blogfiles.naver.net/data41/2009/2/19/251/똥쌀참-5126-anabaral.gif]]></url>
		<title><![CDATA[비탐인(非貪人)]]></title>
		<link>http://blog.naver.com/anabaral</link>
	</image>
	<description><![CDATA[자기소개는.. 프로필을..]]></description>
	<language>ko</language>
	<generator>Naver Blog</generator>
	<pubDate>Wed, 05 Aug 2009 14:29:00 +0900</pubDate>
</channel>

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>
var cafenGlobalConf = {scripturl : 'http://service2.cafen.net/'}
</script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>

<textarea id=syntaxObj language='js' >
function aaaa() {
	~~~~
}
</textarea>

<script>
onload = function() {
	$('#syntaxObj').syntaxHighlighter();
}
</script>

Button

Input

Normal :

resize Width :

resize Height :

Textarea

Normal :
resize Width :
resize Height :
resize Both side :

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>
var cafenGlobalConf = {scripturl : 'http://service2.cafen.net/'}
</script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>
<button class=buttonObj>some Text</button>
<script>
onload = function() {
	$('.buttonObj').cafenRender();
}
</script>

Area & Line Chart

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
Star	6	8	8	11	16	12	16	11	7	11	7	10
Bow	13	11	16	19	22	18	15	15	15	13	10	11

Bar Chart

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
Visitor	8	6	1	1	0	0	3	0	4	8	7	11
Hits	14	15	14	12	7	6	4	0	2	1	2	5

Radar Chart

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
Visitor	18	13	10	12	15	15	17	22	18	14	11	6
Hits	6	9	11	8	11	8	11	9	4	4	4	2
Others	6	8	11	11	10	10	11	13	10	8	5	9

Pie Chart

Visitor

6,January,#ff00ff

8,February,#f4cccc

20,March,#fce5cd

10,April,#fff2cc

9,May,#d9ead3

4,June,#d0e0e3

16,July,#cfe2f3

4,August,#d9d2e9

19,September,#ead1dc

0,October,#ea9999

0,November,#f9cb9c

4,December,#ffe599

sampleCode

<script type="text/javascript" src="http://code.jquery.com/jquery-nightly.min.js" charset=utf-8></script>
<script>
var cafenGlobalConf = {scripturl : 'http://service2.cafen.net/'}
</script>
<script type="text/javascript" src="http://service2.cafen.net/cafen.js" charset=utf-8></script>
<table class=chartObj title='Line and Dot Chart' title_style='font-size:14px' y_legend='1/100' x_legend='Month' border=0 width=800 height=400 bgcolor=#f5f5f5  wmode='transparent' background='logo-1.png'>
	<tbody>
		<tr type='xy_axis' colour=#8c8c8c grid_colour=#d5d5d5  stroke=2 min=0 max=25 step=4 rotate=45 size='12' font_colour='#000000'>
			<td></td>
			<td>Jan</td>
			<td>Feb</td>
			<td>Mar</td>
			<td>Apr</td>
			<td>May</td>
			<td>Jun</td>
			<td>Jul</td>
			<td>Aug</td>
			<td>Sep</td>
			<td>Oct</td>
			<td>Nov</td>
			<td>Dec</td>
		</tr>
		<tr type='area' colour=#5aa775 fill_colour='#74d897' fill_alpha=0.5  stroke=2 line='solid' pointer='star' pointersize=10 tooltip="Star of #x_label#(#val#)  ">
			<td>Star</td>
			<td>6</td>
			<td>8</td>
			<td>8</td>
			<td>11</td>
			<td>16</td>
			<td>12</td>
			<td>16</td>
			<td>11</td>
			<td>7</td>
			<td>11</td>
			<td>7</td>
			<td>10</td>
		</tr>
	</tbody>
</table>
<script>
onload = function() {
	$('.chartObj').ofc2js();
}
</script>

Reference

http://service2.cafen.net/example/chart2.html