guide:oss:barcode_coder [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== jquery-barcode 샘플 가이드 ======

이 화면은 https://barcode-coder.com/en/ 사이트에서 제공하는 라이브러리를 이용한 바코드 생성 샘플 화면이다.

템플릿이 저장된 디렉토리의 jquery-barcode.min.js 파일(Version : 2.2)을 활용하세요.

라이브러리에 대한 자셍한 설명은 https://barcode-coder.com/en/ 사이트를 참조하세요.
===== 예시 =====

템플릿 위치: /HTML5/OSS/barcode_coder

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/OSS/barcode_coder.xml|barcode_coder.xml]]
  * [[xf5projecthome>template/screen/HTML5/OSS/barcode_coder.js|barcode_coder.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/barcode_coder|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/OSS/barcode_coder"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
function b1_on_mouseup(objInst)
{
	// 바코드 생성 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
	// 템플릿이 저장된 디렉토리의 jquery-barcode.min.js 파일을 활용하세요.
	// screen.loadjs("./project/terminal/ext/lib/jquery-barcode.min.js");
	screen.loadjs("./ext/lib/jquery-barcode.min.js");
}

function btn_generatebarcode_on_mouseup(objInst)
{
    var barcode_data, div_jdom, i, row_count;

    // DIV 오브젝트에 해당하는 jQuery 오브젝트를 구함
	div_jdom = this.div_barcode.getjdom();

	row_count = this.grd.getrowcount();
	for (i = 0; i < row_count; i++) {
		// 바코드 데이터를 구해 바코드 생성 API 호출 (jquery-barcode.min.js 라이브러리 기능)
		barcode_data = this.grd.getitemtext(i, 0);
    	div_jdom.barcode(barcode_data, "code128", { barHeight:30 });

		// 바코드 생성 내용을 DIV로 감싸서 그리드 아이템에 값 설정
		this.grd.setitemtext(i, 1, '<div data-type="barcode" style="display:block;">' + this.div_barcode.getinnerhtml() + '</div>', false);
	}

	// 그리드 Refresh
	this.grd.refresh();

	// 바코드 생성 API 호출 (jquery-barcode.min.js 라이브러리 기능)
    div_jdom.barcode("1234567890128", "code128", { barHeight:30 });
}

function btn_printbarcodegrid_on_mouseup(objInst)
{
	var html_tbody, arr_line;

	arr_line = [];

	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 HTML 기본 상단부 시작
	/////////////////////////////////////////////////////////////////////////////////
	arr_line.push('<!doctype html>');
	arr_line.push('<html lang="ko">');
	arr_line.push('<head>');
	arr_line.push('<meta charset="utf-8">');
	arr_line.push('<meta name="viewport" content="width=device-width, initial-scale=1">');
	arr_line.push('<meta http-equiv="cache-control" content="no-cache">');
	arr_line.push('<meta http-equiv="pragma" content="no-cache">');
	arr_line.push('<link rel="stylesheet" type="text/css" href="./xf5/html/report.css"/>');
	arr_line.push('<link rel="shortcut icon" href="./xframe5.ico"/>');
	arr_line.push('<style>');
	arr_line.push('</style>');

	arr_line.push('<body oncontextmenu="return false;">');

	arr_line.push('<div class="xf_report">');

	var html_info = this.grd.getprinthtml({
		page_break: true,  // 여러개 그리드 출력시, 그리드별 페이지 분할 여부
		line_number: true  // 순번 컬럼 포함 여부
	});

	// 그리드 내용 HTML 표시 시작
	arr_line.push(html_info.html_grid_start);
	arr_line.push(html_info.html_colgroup_arr.join(''));
	arr_line.push(html_info.html_thead_arr.join(''));

	// barcode 출력 부분을 inline-block 형태로 변경
	// arr_line.push(html_info.html_tbody_arr.join(''));
	html_tbody = html_info.html_tbody_arr.join('');
	html_tbody = html_tbody.replaceAll('data-type="barcode" style="display:block;', 'data-type="barcode" style="display:inline-block;margin:4px;');
	arr_line.push(html_tbody);

	arr_line.push(html_info.html_grid_end);
	arr_line.push(html_info.html_grid_end);
	// 그리드 내용 HTML 표시 끝

	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 HTML 기본 하단부 시작
	/////////////////////////////////////////////////////////////////////////////////
	arr_line.push('</div>');
	arr_line.push('</body>');
	arr_line.push('</html>');
	/////////////////////////////////////////////////////////////////////////////////
	// 인쇄용 HTML 기본 하단부 끝
	/////////////////////////////////////////////////////////////////////////////////

	// 웹브라우저 컴포넌트 내부 HTML 내용 설정, 페이지 로드 완료시, on_pageload 이벤트 발생함
	this.web.sethtml(arr_line.join(''));
}

function btn_print_on_mouseup(objInst)
{
	var browser_window;
	browser_window = this.web.getbrowserwindow();
	browser_window.print();
}
</sxh>