rMateMapChart 사용설명서
|
|
- 경숙 순
- 5 years ago
- Views:
Transcription
1 rmate MapChart for HTML5 사용설명서 Version 4.0 정품을구입하신고객에게는기술상담및지원을제공합니다 (Tel : , riamore@riamore.net 서울시영등포구영신로 220 KnK 디지털타워 611 호 ) 리아모어소프트
2 목차 1. 개요 rmate MapChart for HTML5 의주요특징 제품구성정보 시스템요구사항 맵차트시스템구성환경설명 기본적인 rmate MapChart 생성 rmate MapChart 라이선스등록하기 제공된샘플을토대로맵차트생성하기 맵차트데이터 맵소스 맵데이타베이스 맵데이타 맵차트레이아웃 rmate MapChart 에서레이아웃의역할 레이아웃작성방법에대하여 레이아웃의 rmatemapchart 노드설정하기 레이아웃의 Style 노드 (CSS 적용 ) 설정하기 맵차트설정및연동방식 mapvars 설정 맵차트에접근가능한함수들 시리즈 맵시리즈 (MapSeries) 버블시리즈 (MapBubbleSeries) 이미지시리즈 (MapImageSeries) 판넬시리즈 (MapPanelSeries) 플롯시리즈 (MapPlotSeries) 루트시리즈 (MapRouteSeries) 스파크시리즈 (MapSparkSeries) Div 시리즈 (MapDivSeries) 색상 일반적인컬러 ( 단색 ) 지정하기 Linear 그라데이션컬러지정하기 Stroke 지정하기 그림자지정하기 /104
3 8. 클릭시불려지는함수설정하기 지역클릭시불려지는함수설정하기 시리즈아이템클릭시불려지는함수설정하기 하위맵상태에서상위맵버튼, 지도외부클릭시불려지는함수설정하기 사용자정의함수설정하기 데이터팁 ( 툴팁 ) 함수사용자정의 라벨사용자정의 타이틀사용자정의 지역색사용자정의 아이템채우기색사용자정의 지역외곽선색사용자정의 범례 (Legend) 넣기 데이터영역범례 (DataRangeLegend) 넣기 고급사용자를위한기능 맵차트생성시효과적용하기 맵네비게이터표시하기 GIS 좌표로표시하기 맵소스의편집및제작 SVG 컴포넌트별속성, 스타일, 함수및이벤트 MapChart MapSeries MapBubbleSeries MapImageSeries MapPlotSeries MapPanelSeries MapRouteSeries MapSparkSeries MapDivSeries Legend LegendItem SubLegend DataRangeLegend SolidColor LinearGradient RadialGradient GradientEntry MapNavigator /104
4 15. rmate MapChart for HTML5 의기타유의사항설명 HMTL5 맵차트에서지원하지않는기능 HTML5 맵차트의리사이즈 기타 HTML5 맵차트의데스크탑 / 모바일브라우저및기기에따른유의사항 SVG 파일의저작권 /104
5 1. 개요 1.1. rmate MapChart for HTML5 의주요특징. rmate MapChart for HTML5 는 ActiveX 기술을배제한순수자바스크립트와 SVG 를바탕으로개발된어플리케이션으로사용자에게지도를이용해데이터를시각적으로알기쉽게제시할수있는솔루션을제공합니다. HTML,.NET, JSP, PHP, ASP, ColdFusion 등과같은웹스크립트언어에구애받지않고, 맵차트를생성할수있습니다. 의데모메뉴에서강력하고쉬운맵차트를직접체험하실수있습니다 제품구성정보 라이선스증서 (1 부 ), 제품 CD ( 요청시제공 ) 1.3. 시스템요구사항 서버사이드 : 순수자바스크립트와 HTML5 기술을바탕으로두기때문에톰캣, IIS, 웹로직, 웹스피어, 제우스, LCDS 등등모든 WAS 서버에서작동하며, 서버스크립트언어에의존적이지 않습니다. 클라이언트사이드 : SVG 를정상적으로지원하는브라우저가필요합니다. IE 파이어폭스 사파리 크롬 아이폰 아이패드 안드로이드 IOS7이상 맵차트시스템구성환경설명 데이터및레이아웃 작성 인터넷을통한데이터 및레이아웃전송 (http) 서버 클라이언트 < 그림 1 서버와클라이언트간의구성도 > 5/104
6 rmate MapChart 를생성하기위해서는맵차트레이아웃과맵차트에표현하고자하는데이터, 맵의이미지정보가들어있는맵데이타베이스, 맵에쓰일이미지소스가필요합니다. 맵차트레이아웃은맵차트를어떻게표현할지를나타내는서식을결정하게됩니다. 예를들면맵차트의서브맵표시여부, 지역의색상및자바스크립트연동등등세밀한부분을제어하는 XML 파일입니다. rmate 맵차트데이터연동은다음 5 가지형태를지원합니다. URL 을호출하여 XML 데이터를받아처리하는형태 URL 을호출하여배열데이터를받아처리하는형태 XML 문자열을자바스크립트를통해전달하는형태 배열데이터를자바스크립트를통해전달하는형태 자바스크립트에서배열을선언하고값을넣어 array 객체를전달하는형태. 2. 기본적인 rmate MapChart 생성 2.1. rmate MapChart 라이선스등록하기 정상적인맵차트를생성하기위해서는 rmate MapChart 라이선스를등록하셔야합니다. 제공된시디의다 음경로에있는파일이맵차트에삽입할라이선스입니다. /LicenseKey/rMateMapChartH5License.js 위자바스크립트파일을 <head> 태그안에삽입하시면됩니다. 다른작업을하실필요는없습니다. <html> <head> <! rmate MapChart 라이선스등록완료모습 --> <script src="rmatemapcharth5license.js" language="javascript"></script> <!-- 사용자정의설정시작 --> <script language="javascript" type="text/javascript"> 6/104
7 < 예제 1 rmate MapChart 라이선스등록예제 > 2.2. 제공된샘플을토대로맵차트생성하기 맵차트를생성하기위해서는제공된 CD 의다음경로를따라각각의파일을복사하여작업디렉토리에 복사하십시오. 데이터파일 Samples/Data/data.txt 레이아웃파일 : Samples/LayoutXml/LayoutBasic.xml 맵데이타베이스파일 : Samples/MapDataBaseXml/KoreaSiDo.xml 맵소스 Svg 파일 : MapSource/KoreaSiDo.svg 맵차트 JS 라이브러리 : rmatemapcharth5/js/rmatemapcharth5.js 라이선스파일 : /LicenseKey/rMateMapChartH5License.js 위파일을다음과같이 html 파일에설정합니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <!-- 사용자정의설정시작 --> <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/> <!-- rmatemapcharth5 라이센스 --> <script language="javascript" type="text/javascript" src="./licensekey/rmatemapcharth5license.js"></script> <!-- 실제적인 rmatemapcharth5 라이브러리 --> <script language="javascript" type="text/javascript" src="..rmatemapcharth5/js/rmatemapcharth5.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // rmatemapchart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) 7/104
8 // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); // 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. // 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7 개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML 을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML 을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { document.getelementbyid(id).setlayouturlex(layouturl); // document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); } // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapSeriesProperties.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. //var dataurl = "./Data/branchdata.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // MapSource 디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg 이미지를지정할수있습니다.( 매뉴얼참조 ) = "./MapSource/KoreaSiDo.svg"; <!-- 사용자정의설정끝 --> </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - Map Sereis 속성 </p> </div> <div class="desc"> <br> <p></p> </div> 8/104
9 <div class="content"> <!-- 맵차트가삽입될 DIV --> <div id="mapholder" style="width:600px; height:400px;"> </div> </div> </div> </body> </html> < 예제 2 HTML 페이지에맵차트삽입하기 > 위처럼정의한후저장후실행시키면다음과같은화면을볼수있습니다. < 그림 2 HTML 페이지에맵차트삽입성공화면 > 사용자가웹페이지를작성할때지켜야할사항은다음과같습니다. 1. HTML 의 doctype 을지정하십시오. ( 다른 doctype 이어도무방합니다 ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> 2. rmatemapcharth5license.js 와 rmatemapcharth5.js 를포함시켜주십시오. <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script> <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script> 9/104
10 3. 필요에따라맵차트에서사용할이미지의 CSS 를포함시켜주십시오. <link rel="stylesheet" type="text/css" href="../rmatemapcharth5/assets/rmatemapcharth5.css"/> 4. 맵차트가생성될 Div 태그를지정하여영역을확보해주십시오. <div id="mapholder" style="width:600px; height:400px;"></div> 5. 맵차트의레이아웃과데이터와맵데이터베이스를작성하여주십시오. 6. rmatemapcharth5.create() 함수호출로맵차트를생성합니다. // rmatemapchart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); 만일 html 문서인코딩을 utf-8이아닌다른문자셋을사용할경우에는다음과같이자바스크립트를포함시키는문장에 charset을 utf-8로설정해주시기바랍니다. ( 자바스크립트는 utf-8로인코딩되어있음 ) <script type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js" charset="utf-8"></script> 3. 맵차트데이터. rmate MapChart 에필요한데이터는맵소스, 맵데이타베이스, 맵데이타입니다. 맵데이타는 XML 형식과, 자바스크립트배열형식을지원합니다. 사용자는몇가지규칙에따라맵차트데이터를작성할필요가 있습니다 3.1. 맵소스 맵차트에서사용할지역이미지를포함하는객체입니다. 현재준비되어있는이미지는시군경계를포함하는전국지도, 시도경계를포함한는전국지도, 남북한지도와대륙을표시하는세계전도등입니다. 그리고이이미지들은 MapSource 디렉토리에저장되어있습니다. 사용시에는 sourceurl 에해당 Svg 의 path 를주면지도이미지가읽혀지도록되어있습니다. 별도의지도를제작하거나기존 Svg 를편집하고자할경우 맵소스의편집및제작 을참고하시기바랍니다. 10/104
11 3.2. 맵데이타베이스 맵소스와매칭되는지도의내용을표현하는 XML 데이터입니다. 맵데이타베이스에는지역코드, 라벨 ( 지역명 ), 심볼명 ( 맵소스의심볼 ), 각지역의중심을조정하기위한 horizontalcentergap, verticalcentergap 과 drilldown 시하위맵의크기를지정하는 scale 과사용자선택가능여부를나타내는 enabled 과인터랙티브비활성화를지정하는 event( 값 :none) 가있습니다. scale 의값의경우 1 을 100% 로표현하며 90% 는 0.9, 110% 는 1.1 형태로입력하면됩니다. 맵차트의보여지는라벨이나코드, 이미지등은모두이맵데이타베이스에서읽어들인정보입니다. 현재맵차트에서지원되는전국지도와세계지도에대해맵데이타베이스가만들어져있으며샘플의 MapDataBaseXml 디렉토리에저장되어있고 Svg 파일명과동일한파일명에확장자만 xml 로바뀌어있습니다. 심볼명을제외한모든부분은개발시필요에따라변경하셔도무방합니다. ( 별도의 Svg 를제작하신다면 Svg 에서의그럼조각의이름과심볼명을맞추어작성하시면됩니다 ) 특히지역코드는특별한코드체계없이가다다순으로정의한코드로사용자가쓰시는코드체계로지역코드를바꿔쓰시면됩니다. 다만변경시주의사항은바꾼지역코드와맵데이타의지역코드는반드시매칭이되어야한다는점입니다. 매칭이안되는데이터는버려지며맵차트에서보이지않게됩니다 맵데이타 맵데이타는사용자데이터를의미하며없을경우에는안넣으셔도됩니다. 샘플에서지역색바꾸기나, 클릭연동시지역마다데이터를연동하고싶을때사용하시면되며 XML 또는 JSON 형식으로작성하여입력하시면됩니다. 이때주의할점은맵데이타에는반드시지역코드가 MapChart 의 areacodefield 속성에서정의한 ( 기본은 code 임 ) 이름으로들어가야하며, 이코드는맵데이타베이스에서정의된 ( 또는사용자가재정의한 ) 코드를사용해야한다는점입니다. 데이타가 JSON 형일경우 chartvas 에아래와같은구문을추가하셔야합니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; 4. 맵차트레이아웃 rmate MapChart 에서레이아웃의역할 rmate MapChart 는미리작성된레이아웃의 XML 을파싱하여동적으로생성됩니다. 사용자가작성한 레이아웃을 rmate MapChart 의 swf 파일에입력하면맵차트는미리내장하고있는 rmate MapChart Component 클래스를기반으로레이아웃에작성된맵차트를생성하고데이터를출력하게됩니다. 11/104
12 다음은이런과정을다이어그램으로표현한것입니다. 레이아웃 rmate MapChart Root 데이터 맵데이터베이스 rmate MapChart JavaScript Library 맵소스 < 그림 3 rmate MapChart 동작다이어그램 > 4.2. 레이아웃작성방법에대하여 rmate MapChart 의모든레이아웃은 <rmatemapchart> 태그로시작하여 </rmatemapchart> 태그로끝납니다. 레이아웃은크게맵차트 UI 요소와맵차트, Style 세부분으로구분됩니다. 맵차트 UI 요소는옵션적으로필요시정의되는요소이며, Style 또한맵차트의스타일제어를위해필요시정의하면됩니다. 레이아웃을작성하는방법은기본적으로 XML 형식을따르시면됩니다. rmate MapChart 는 ID 에의한객체접근을지원합니다. 예를들어 LegendItem 객체의속성으로 fill 이 존재합니다. 이 fill 속성의속성값으로맵차트 UI 요소에서정의한 SolidColor 인스턴스를할당합니다. 이를표현한일반적인방법은아래와같습니다. <rmatemapchart> <MapChart />... <Legend direction="horizontal" borderstyle="solid" bordercolor="#999999" backgroundcolor="#ffffff"> <LegendItem label="30 이하 "> <fill> <SolidColor color="#ff0000"/> </fill> </LegendItem> </Legend> </rmatemapchart> < 예제 3 일반적인속성값할당법 > 12/104
13 그러나사용자의편의를위해 < 예제 4 ID 에의한속성값할당법 > 과같이 SolidColor 인스턴스를미리생성한후그 ID 를통해 SolidColor 인스턴스를활용할수있습니다. 이는여러객체들이하나의 SolidColor 인스턴스에접근하고자할때불필요하게 SolidColor 인스턴스를생성하지않고미리만들어진하나의 SolidColor 에접근하기때문에효율적입니다. 또한어느특정객체를반드시참조해야하는경우에도효율적입니다. <rmatemapchart> <SolidColor id="color" color="#ff0000"/> <MapChart />... <Legend direction="horizontal" borderstyle="solid" bordercolor="#999999" backgroundcolor="#ffffff"> // 객체 ID 인경우엔시작과끝을중괄호 ({,}) 로묶음 <LegendItem label="30 이하 " fill="{color}"> </Legend> </rmatemapchart> < 예제 4 ID 에의한속성값할당법 > 앞으로레이아웃을작성할때 MapChart 와 Series 가자주나오게될것입니다. 이에대한개념을 정리하면아래와같습니다. 맵차트 (MapChart) 시리즈 (Series) 설명 맵차트는 외형을 담당합니다. 배경, 사이즈 등등이포함됩니다. 가장중요한역할로시리즈를 포함하게되며사용자액션에반응하게됩니다. 실질적인데이터를표현합니다. 맵차트는반드시 1개의 MapSeries를가지고있어야하며, 그외에 필요에 따라 다른 시리즈를 추가 하실 수 있습니다. < 표 1 맵차트와시리즈설명표 > 비고 MapChart MapSeries, MapBubbleSeries, MapImageSeries, MapPanelSeries, MapPlotSeries 4.3. 레이아웃의 rmatemapchart 노드설정하기 rmatemapchart 노드는레이아웃의시작과끝을나타냅니다. 또한이노드의속성은맵차트전체의 꾸미기를담당합니다. 속성명 유효값 설명 scalemode auto, manual (auto) 지도의스케일모드. 13/104
14 "auto" 의경우화면의크기에따라지도의배율을조정하여표시하고, manual 의경우지정된배율로지도를표시합니다. backgroundcolor RGB( 기본값 : #FFFFFF) 바탕색을나타냅니다. backgroundalpha 0.0 ~ 1.0( 기본값 :1.0) 바탕투명도를나타냅니다. borderstyle none solid inset outset ( 기본값 :none) 테두리선을정의합니다. bordercolor RGB( 기본값 : #B7BABC) 테두리색을정의합니다. borderthickness Number ( 기본값 :1) 테두리두께를정의합니다. cornerradius Number( 기본값 :0) 모서리를둥글게처리하는정도를나타냅니다. horizontalalign left, right, center ( 기본값 :center) 수평정렬방식을나타냅니다. horizontalgap Number( 기본값 :8) 객체들의가로간격사이여백 verticalalign top, bottom, middle ( 기본값 :middle) 수직정렬방식을나타냅니다. verticalgap Number( 기본값 :6) 객체들의세로간격사이여백 < 표 2 rmatemapchart 노드속성과유효값설명 > 아래는 rmatemapchart 노드의속성사용예를나타낸것입니다. <rmatemapchart cornerradius="12" borderstyle="solid" backgroundcolor="#ffff77"> <MapChart>... </rmatemapchart> < 예제 5 rmatemapchart 노드의속성사용예 > rmatemapchart 에대한속성은맵차트의바탕을표현해야하는경우에만사용하면되며, 기본적으로 별도의속성을주실필요는없습니다 레이아웃의 Style 노드 (CSS 적용 ) 설정하기 <Style> 노드는전반적인스타일을미리정의하는스타일시트이며, html 에서사용하는 CSS 와동일한정 의를사용합니다. <Style/> 을선언하는방법에는몇가지규칙이있습니다. 첫째, <Style/> 노드는반드시 <rmatemapchart> 노드의자식위치에정의하십시오. 둘째, 스타일네임을정의할때시작은도트 (.) 을찍고소문자로시작하는영문자로표기하십시오. 셋째, 스타일네임을정한후그에따른구체적인스타일을정의할때는반드시중괄호 ({,}) 로시작과끝을표시하십시오. 넷째, 속성명과속성값 (value) 의구분은콜론 (:) 이며끝은세미콜론으로나타냅니다. 14/104
15 다음은올바른예와잘못된예를나타낸것입니다. <rmatemapchart> <MapChart>... 올바른예 <Style>.rMateMapChartStyle { backgroundcolor:#fffffe; bordercolor:#77ee9e; borderthickness:3; borderstyle:solid; } </Style> </rmatemapchart> < 표 3 Style 작성예 > 잘못작성된예 <rmatemapchart> <MapChart>... <Style> MapChartStyle [ backgroundcolor:#fffffe; bordercolor: #77EE9E ; borderthickness:3; borderstyle: solid ; ] </Style> </rmatemapchart> 위와같이 rmatemapchartstyle 스타일을정의였습니다. 그렇다면이스타일을적용하는방법에대해보 도록하겠습니다. <rmatemapchart stylename="rmatemapchartstyle"> <MapChart>... <Style>.rMateMapChartStyle { backgroundcolor:#fffffe; bordercolor:#77ee9e; cornerradius:12; borderthickness:3; borderstyle:solid; } </Style> </rmatemapchart> < 예제 6 Style 적용예 > < 예제 6 Style 적용예 > 를보시면 rmatemapchartstyle 은 <rmatemapchart/> 노드의스타일을정의한것이고적용법은 stylename= 정의한스타일이름 즉, stylename= rmatemapchartstyle 과같습니다. <Style/> 에서정의가능한각각의속성은이문서의 < 컴포넌트별속성, 스타일, 함수및이벤트 > 에서각컴포넌트의스타일부분을참조하시면됩니다. 15/104
16 스타일을활용한예제와출력모습은아래와같습니다. <rmatemapchart> <MapChart id="map1" stylename="mapstyle"> </MapChart> <Style>.mapStyle { color:#ff0000; fontweight:bold; textdecoration:underline; fontsize:12; } </Style> </rmatemapchart> < 예제 7 Style 적용한예제 > 5. 맵차트설정및연동방식 HTML5 로작성된 rmate MapChart 와웹브라우져와의연동을위하여 HTML5 속성인 mapvars 를사용합 니다. 이의사용법및기본변수에대해서설명하겠습니다 mapvars 설정 mapvars 변수는 rmate MapChart 의데이터, 레이아웃등을설정할수있는가장기본적인변수입니다. 이변수는스크립트단에서맵차트를임베딩할때함께파라메터로함께삽입하게됩니다. mapvars 변수설정은다음과같은규칙을따릅니다. mapvars 변수는스트링입니다. 두개이상의설정을하기위해구분자 & 를사용합니다. 예를들어맵소스와맵데이터베이스와데이터 XML URL 과레이아웃 XML URL 을설정하는방법은아래와같습니다 var layouturl = "./Layout.xml"; var mapvars = "layouturl="+layouturl; var dataurl = "./singledata.xml ; mapvars += "&dataurl="+dataurl; var mapdatabaseurl = "./MapDataBaseXml/KoreaDrillDown.xml"; mapvars += "&mapdatabaseurl="+mapdatabaseurl; var sourceurl = "./MapSource/KoreaDrillDown.svg"; mapvars += "&sourceurl="+sourceurl; < 예제 8 mapvars 적용예제 > 16/104
17 mapvars 로설정가능한속성값은다음과같습니다. 속성명 유효값 설명 layouturl URL 주소 맵차트레이아웃 XML URL 경로 dataurl URL 주소 맵차트데이터 XML URL 경로 mapdatabaseurl URL 주소 맵차트데이터베이스 XML URL 경로 sourceurl URL 주소 맵차트소스 URL 경로 rmateonloadcallfunction 자바스크립트함수명 스크립트와맵차트동기화시맵차트가호출할함수설정 ( 최초 1번만호출됨 ) mapvars 를설정한후실제적으로맵차트를생성하는함수에설정한 mapvars 를파라메터로넣어줍니 다. rmatemapcharth5.create("map1", mapholder", mapvars, 500, 500, auto ); 이때 rmatemapchartcreate 함수의파라메터는다음과같습니다. ( 순서대로 ) 1. ID ( 임의로정의하십시오 ) 2. 맵차트가생성될 DIV 태그. 3. URL 경로등을정의한 mapvars변수. 4. rmatemapchart 가로사이즈 ( 픽셀이나, % 도가능 ). 5. rmatemapchart 세로사이즈. ( 픽셀이나 % 도가능 ) 5.2. 맵차트에접근가능한함수들 사용자의편의를위해 rmate MapChart 는다음과같은함수를열어놓았습니다. 1. setdataurlex(value) : 데이터 XML URL 경로를맵차트에삽입합니다. 2. setlayouturlex (value): 레이아웃 XML URL 경로를맵차트에삽입합니다. 3. setmapdatabaseurlex (value): 맵데이타베이스 XML URL 경로를맵차트에삽입합니다. 4. setsourceurlex (value): 맵소스 URL 경로를맵차트에삽입합니다. 5. setdata (value): 배열형태또는 XML 스트링형태의데이터를맵차트에삽입합니다. 6. setlayout (value): 스트링형태의레이아웃을맵차트에삽입합니다. 7. setmapdatabase (value): XML 스트링형태의맵데이터베이스를맵차트에삽입합니다. 8. setrootcode(value): 맵차트의 rootcode 를지정합니다. 9. setopencode(value): 맵차트의 opencode 를지정합니다. 10. setselectedcode(value): 맵차트의 selectedcode 를지정합니다. 11. resize(): 맵차트전체의크기를변경하고싶을경우호출합니다. 17/104
18 6. 시리즈 rmate MapChart 는 1 개의 MapChart 에여러개의시리즈를포함하여구성됩니다. 이때포함될수있는시리즈는아래나열된여러종류의시리즈가될수있으며맵시리즈를제외한나머지시리즈는중복되어포함될수있습니다 맵시리즈 (MapSeries) 맵시리즈는맵차트의지역을표시하는시리즈로맵소스와맵데이타베이스를이용하여해당지역의이미지를그리는시리즈이며, 맵차트에는반드시 1 개의맵시리즈가포함되어야하고, 여러개의맵시리즈가포함되면안됩니다. 또한포함시에도제일먼저나열되어야만올바르게표시되며뒷부분에놓이게되면다른시리즈를덮어쓰게되어다른시리즈가안보일수있습니다. 맵시리즈는 <MapSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 맵시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" showdatatips="true" datatipmode="single" scalemode="auto"> <series> <MapSeries id="mapseries" selectionmarking="line" color="#ffffff" labelposition="inside" displayname="map Series"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> 18/104
19 < 예제 9 맵시리즈레이아웃예제 > < 그림 4 맵시리즈출력모습 > 6.2. 버블시리즈 (MapBubbleSeries) 버블시리즈는특정지역의수치를원의크기로나타낼수있는시리즈로지역별차이를시각적으로표현할때쓸수있는시리즈입니다. 수치데이타를 radiusfield 속성으로데이터에서읽어표시할수있으며 maxradius, minradius 속성을통해최대, 최소수치일경우의원의반지름을지정할수있습니다. 표시되는원의중심좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 버블시리즈는 <MapBubbleSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 버블시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap > <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> 19/104
20 </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapBubbleSeries id="bubble" radiusfield="sales" minradius="5" color="#888888" labelposition="inside" displayname=" 지점 "> <fill> <SolidColor color="#c8ec14"/> </fill> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#bbbbbb"/> </stroke> </MapBubbleSeries> </series> </MapChart> </rmatemapchart> < 예제 10 버블시리즈레이아웃예제 > < 그림 5 버블시리즈출력모습 > 6.3. 이미지시리즈 (MapImageSeries) 20/104
21 이미지시리즈는특정지역에이미지를올려놓을수있는시리즈로지역별사진을시각적으로표현할때쓸수있는시리즈입니다. 이미지의 url 을 imageurlfield 속성으로데이터에서읽어이미지를로드할수있으며 imagewidth, imageheight 속성을통해읽어들인이미지의크기를고정으로지정할수있습니다. 표시되는이미지의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 이미지시리즈는 <MapImageSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 사용할수있는이미지는 JPG, PNG, SVG 에한정됩니다. 이미지시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap" > <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <localfill> <SolidColor color="#eeeeee"/> </localfill> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapImageSeries id="image" labelfield="label" imageurlfield="imgurl" horizontalcentergapfield="h" verticalcentergapfield="v" imagewidth="40" imageheight="30" color="#ffffff" labelposition="bottom" displayname=" 관광 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#000000"/> </labelfilters> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapImageSeries> </series> </MapChart> 21/104
22 </rmatemapchart> < 예제 11 이미지시리즈레이아웃예제 > < 그림 6 이미지시리즈출력모습 > 6.4. 판넬시리즈 (MapPanelSeries) 판넬시리즈는특정지역에판넬형태로텍스트를올려놓을수있는시리즈로지역별수치나문자열을시각적으로표현할때쓸수있는시리즈입니다. 표시되는판넬은헤더와바디로구성되며기본적으로헤더에는지역명이사용되고 titilefield, titlejsfunction 을통해변경가능하며, 바디에들어갈문자열은 bodytextfield 속성으로데이터에서읽어표시할수있고, panelwidth, panelheight 속성을통해표시할판넬의크기를고정으로지정할수있습니다. 표시되는판넬의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 또한판넬의형태를 itemrenderer 를통해수직형판넬과수평형판넬중택일할수있습니다. 판넬시리즈는 <MapPanelSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 판넬시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false"> <series> <MapSeries id="mapseries" interactive="false"> 22/104
23 <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <localfill> <SolidColor color="#eeeeee"/> </localfill> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPanelSeries id="panel" titlefield="label" bodytextfield="temperature" horizontalcentergapfield="h" verticalcentergapfield="v" color="#555555" horizontalalign="right" displayname=" 날씨 "> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapPanelSeries> </series> </MapChart> </rmatemapchart> < 예제 12 판넬시리즈레이아웃예제 > < 그림 7 판넬시리즈출력모습 > 23/104
24 6.5. 플롯시리즈 (MapPlotSeries) 플롯시리즈는특정지역에포인트를올려놓을수있는시리즈로지도에특정위치를시각적으로표현할때쓸수있는시리즈입니다. 표시되는포인트는원, 사각형, 삼각형, 볼형태가가능하며 radius 속성을통해포인트의반지름을지정할수있습니다. 표시되는포인트의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 플롯시리즈는 <MapPlotSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 플롯시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPlotSeries id="plot" labelfield="branchname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ffffff" fontweight="bold" labelposition="bottom" displayname=" 지점 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> </series> </MapChart> </rmatemapchart> 24/104
25 < 예제 13 플롯시리즈레이아웃예제 > < 그림 8 플롯시리즈출력모습 > 6.6. 루트시리즈 (MapRouteSeries) 루트시리즈는특정지역과지역을이어주는선을올려놓을수있는시리즈로지도에지역과지역관계선을시각적으로표현할때쓸수있는시리즈입니다. dashed 속성을통해점선을지정할수있습니다. 표시되는루트의좌표는시작과끝, 각각데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, fromhorizontalcentergapfield, tohorizontalcentergapfield 속성과 fromverticalcentergapfield, toverticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 루트시리즈는 <MapRouteSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 하위맵이동 (drilldown) 시에하위맵과상위맵을이어주는 route 는지원되지않습니다. 루트시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> 25/104
26 </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapRouteSeries id="route1" fromcodefield="fc" tocodefield="code" areacodefield="factorycode" weight="1.5" labelfield="flightroute" fromhcentergapfield="fh" fromvcentergapfield="fv" tohcentergapfield="th" labelhcentergapfield="lh" labelvcentergapfield="lv" tovcentergapfield="tv" color="#7598cc" fill="#0000ff" fontweight="bold" displayname=" 공항 " dashed="true" showlabel="false" curvefield="curve">\ <labelfilters>\ <GlowFilter blurx="5" blury="5" color="#111111"/>\ </labelfilters>\ <showdataeffect>\ <SeriesZoom duration="1000"/>\ </showdataeffect>\ </MapRouteSeries>\ </series> </MapChart> </rmatemapchart> < 예제 14 루트시리즈레이아웃예제 > < 그림 9 루트시리즈출력모습 > 26/104
27 6.7. 스파크시리즈 (MapSparkSeries) 스파크시리즈는특정지역에스파크차트를올려놓을수있는시리즈로지도에특정위치의데이터를시각적으로표현할때쓸수있는시리즈입니다. 표시되는스파크는컬럼, 파이형태가가능합니다. 표시되는포인트의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 스파크시리즈는 <MapSparkSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 스파크시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapSparkSeries id="spark1" type="column" datafield="[2013,2014]" color="#333333" labelposition="inside" displayname=" 지점 " columnwidthratio="1" sparkwidth="20" sparkheight="20" horizontalcentergapfield="h" verticalcentergapfield="v" radius="2" minusvaluefill="#0000ff" fill="#ffaaff" firstvaluefill="#00b0ba" lastvaluefill="#1966d8" showfirstvalue="true" showlastvalue="true" fontsize="11"> <showdataeffect> <SeriesZoom duration="1000" direction="left"/> </showdataeffect> </MapSparkSeries> </series> </MapChart> </rmatemapchart> < 예제 15 스파크시리즈레이아웃예제 > 27/104
28 < 그림 10 스파크시리즈출력모습 > 6.8. Div 시리즈 (MapDivSeries) Div 시리즈는특정지역에 <div> Element 를올려놓을수있는시리즈로사용자가원하는 HTML 요소를지도위에표현할때쓸수있는시리즈입니다. customseriesfunction 에서지정한함수에서 HTML 객체를리턴하게되면해당지역의 Div 에 HTML 객체가삽입됩니다. 표시되는포인트의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 생성되는 Div 의 ID 는 SVG 의 ID +MdivItem 으로 target 을통하여원하는데이터를 Div 에삽입하실수있습니다. Effect 중 Zoom 이펙트의경우 Div 의확대할경우내부의 HTML 요소가자체적으로확대가되지않기때문에 Zoom 이펙트는지원되지않습니다. Div 시리즈는 <MapDivSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. Div 시리즈레이아웃작성예입니다. <rmatemapchart> 28/104
29 <MapChart id="mainmap" drilldownenabled="true" showdatatips="false" datatipjsfunction="datatipfunction" itemclickjsfunction="itemclickfunction"> <series> <MapSeries id="mapseries" interactive="true"> <localfill> <SolidColor color="#eeeeee" /> </localfill> <filters> <DropShadowFilter distance="1" angle="45" color="0x888888"/> </filters> <stroke> <Stroke color="#aaa" weight="1" alpha="1"/> </stroke> <showdataeffect> <SeriesInterpolate duration="1000" direction="left"/> </showdataeffect> </MapSeries> <MapDivSeries id="div1" mdivwidth="35" mdivheight="35" customseriesfunction="customseries" horizontalcentergapfield="h" verticalcentergapfield="v"> <showdataeffect> <SeriesInterpolate duration="1000" direction="left"/> </showdataeffect> </MapDivSeries> </series> </MapChart> </rmatemapchart> < 예제 16 Div 시리즈레이아웃예제 > 29/104
30 < 그림 11 Div 시리즈출력모습 > 7. 색상 맵차트전체에서면의컬러를지정하는방법은 SolidColor, LinearGradient, RadialGradient 3 가지가있으며 SolidColor 는단색을표현하고, LinearGradient 와 RadialGradient 는두가지이상의색을이용하여그라데이션효과를표현합니다. 두그라데이션표현의차이는선형과원형이라볼수있습니다. 맵시리즈의스타일중 localfill, disabledfill, rolloverfill, selectionfill, 나머지시리즈의 fill 스타일에적용가능합니다. 선을지정하는방법은 Stroke 이있으며, 맵시리즈의스타일중 disalbedstroke, stroke, rolloverstroke, selectionstroke, 나머지시리즈의 stroke 스타일에적용가능합니다. 다음예제와샘플을참고하십시오 일반적인컬러 ( 단색 ) 지정하기 <MapSeries> < localfill> <SolidColor color="#ffff00 /> </ localfill> </ MapSeries > * 맵시리즈를예로든경우입니다. < 예제 17 맵시리즈에단색컬러를설정한경우 > 7.2. Linear 그라데이션컬러지정하기. 30/104
31 <MapSeries> <localfill> <LinearGradient angle="-45"> <entries> <GradientEntry color="#f3d3db" ratio="0.0"/> <GradientEntry color="#b15c9b" ratio="0.5"/> <GradientEntry color="#6b6bb1"/> </entries> </LinearGradient> </localfill>... </MapSeries> < 예제 18 맵시리즈에 Linear 그라데이션을설정한경우 > 7.3. Stroke 지정하기 <MapSeries> <stroke> <Stroke color="#444444" weight="0.25" alpha="0.25"/> </stroke>... </ MapSeries > < 예제 19 맵시리즈에 Stroke 을설정한경우 > 7.4. 그림자지정하기모든시리즈와라벨에는그림자필터를지정할수있으며, 적용할수있는그림자는 DropShadowFilter 와 GlowFilter 가있습니다. 맵차트를통해전체시리즈에그림자를지정하고자할때는맵차트의 seriesfilters 속성을통해정의하고개별시리즈에적용하고자할때는시리즈의 filters 속성에정의하고, 라벨에정의하고싶을때는시리즈의 labelfilters 속성에정의하시면됩니다. DropShadowFilter 는방향을가지는그림자이며그림자각도와거리등을조절할수있습니다. 31/104
32 안드로이드브라우저와사파리에서는 Filter 효과 (Shadow, Glow) 가표현되지않습니다. <MapSeries> <filters> <DropShadowFilter distance="10" angle="45" color="#4e5979"/> </filters>... </ MapSeries > < 예제 20 DropShadowFilter 예제 > 8. 클릭시불려지는함수설정하기 사용자의클릭을처리하는경우는크게두가지로맵시리즈의지역을클릭하는경우와맵시리즈외의시리즈의아이템을클릭하는경우입니다. 이는맵시리즈의클릭은하위시리즈로의이동등다른액션을동반하나이외시리즈의경우에는그런액션이없기때문이며, 다른이벤트와함수로처리되어야하기때문입니다 지역클릭시불려지는함수설정하기 맵차트의지역을클릭한경우해당지역의정보를스크립트로보낼수있습니다. 이는자바스크립트의함수를설정하여그함수를호출하는방식으로다양한작업을가능케합니다. 먼저, 맵차트에게호출할함수명을지정해줘야합니다. 레이아웃 XML 에서맵차트의속성으로 mapchangejsfunction 을설정하고, 자바스크립트함수명을속성값으로할당합니다. 예로들면아래와같습니다. 이는맵차트의지역을클릭한경우 clickfunction 이라는함수를호출하겠다는의미입니다. 이 clickfunction 함수는자바스크립트에서반드시정의되어야합니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" mapchangejsfunction="clickfunction"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname=" 전국 "> <showdataeffect> <SeriesSlide duration="1000" direction="right"/> 32/104
33 </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 21 맵차트클릭시자바스크립트함수호출하기 > < 예제 21 맵차트클릭시자바스크립트함수호출하기 > 와같이맵차트레이아웃 XML 에서맵차트클릭 시호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <!-- 사용자정의설정시작 --> <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/> <!-- rmatemapcharth5 라이센스 --> <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script> <!-- 실제적인 rmatemapcharth5 라이브러리 --> <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script> <!-- 맵차트생성과관련없음. 샘플을위한스크립트. 따라서실제적용시생략하십시오. --> <script language="javascript" type="text/javascript" src="./samplehelper.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // 데이타가 JSON 형일경우넣어줍니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; 33/104
34 // 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. // 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { document.getelementbyid(id).setlayouturlex(layouturl); document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); } // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapClickFunction.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. var dataurl = "./Data/data.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // Svg디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg이미지를지정할수있습니다.( 매뉴얼참조 ) var sourceurl = "./MapSource/KoreaSiDo.svg"; // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) 34/104
35 // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); /* // 맵클릭연동사용자정의함수 // layout XML 에서 MapChart 속성을넣을때 mapchangejsfunction 주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart mapchangejsfunction="clickfunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 없음 */ function clickfunction(code, label, data) { } alert("code:"+code+"\nlabel:"+label+"\ndata.sales:"+data.sales); <!-- 사용자정의설정끝 --> </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - 클릭시자바스크립트연동 </p> </div> <div class="desc"> <b></b> <button onclick="viewsrc()" style="font:11px Arial">View Source</button> </div> <div class="content"> <!-- 맵차트가삽입될 DIV --> <div id="mapholder" style="width:600px; height:480px;"> </div> </div> </body> </html> 35/104
36 < 예제 22 맵차트클릭시호출하는함수자바스크립트에서정의하기 > < 예제 22 맵차트클릭시호출하는함수자바스크립트에서정의하기 > 를보시면자바스크립트에서정의 한함수의파라메터는 3 개가있습니다. 파라메터명파라메터설명 code 클릭한지역코드 ( 맵데이타베이스에서지정됩니다 ) label 지역명 ( 맵데이타베이스에서지정됩니다 ) 맵데이타에서해당 code와연결된 data 입니다. (data로입력된종류에따라 XML의 data 내용또는배열이됩니다 ) < 표 4 맵차트클릭시호출하는함수의파라메터설명 > 지금까지맵차트의한지역을클릭한경우자바스크립트의 clickfunction 함수를호출하게 설정하였습니다. 이에대한실행화면으로자바스크립트에서알림창을띄워맵차트로부터넘어온 파라메터를보여주고있습니다. < 그림 12 맵차트클릭시함수호출실행화면 > 8.2. 시리즈아이템클릭시불려지는함수설정하기 맵시리즈를제외한나머지시리즈에대해서는아이템 ( 시리즈에서표시한객체를의미합니다 ) 을클릭한 36/104
37 경우해당아이템의정보를스크립트로보낼수있습니다. 먼저, 맵차트에서호출할함수명을지정해줘야합니다. 레이아웃 XML 에서맵차트의속성으로 itemclickjsfunction 을설정하고, 자바스크립트함수명을속성값으로할당합니다. 이는맵시리즈를제외한시리즈의아이템을클릭한경우 itemclickfunction 이라는함수를호출하겠다는의미입니다. 이 itemclickfunction 함수는자바스크립트에서반드시정의되어야합니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" itemclickjsfunction="itemclickfunction"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPlotSeries id="plot" labelfield="branchname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ffffff" fontweight="bold" labelposition="bottom" displayname=" 지점 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> </series> </MapChart> </rmatemapchart> < 예제 23 시리즈아이템클릭시자바스크립트함수호출하기 > < 예제 23 시리즈아이템클릭시자바스크립트함수호출하기 > 과같이맵차트레이아웃 XML 에서아이템클릭시호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
38 transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <!-- 사용자정의설정시작 --> <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/> <!-- rmatemapcharth5 라이센스 --> <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script> <!-- 실제적인 rmatemapcharth5 라이브러리 --> <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script> <!-- 맵차트생성과관련없음. 샘플을위한스크립트. 따라서실제적용시생략하십시오. --> <script language="javascript" type="text/javascript" src="./samplehelper.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // 데이타가 JSON 형일경우넣어줍니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; // 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. // 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { 38/104
39 } document.getelementbyid(id).setlayouturlex(layouturl); document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapPlotSeries.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. var dataurl = "./Data/branchdata.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // Svg디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg이미지를지정할수있습니다.( 매뉴얼참조 ) var sourceurl = "./MapSource/KoreaSiDo.svg"; // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); /* // 지역데이타팁사용자정의함수 // layout XML 에서 MapChart 속성을넣을때 datatipjsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart datatipjsfunction="datatipfunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할데이타팁문자열 39/104
40 */ function datatipfunction(seriesid, code, label, data) { if (seriesid == "plot") { return data.branchname + " - " + data.address; } else return label; } /* // 맵클릭연동사용자정의함수 // layout XML 에서 MapChart 속성을넣을때 itemclickjsfunction 주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart itemclickjsfunction="itemclickfunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 없음 */ function itemclickfunction(seriesid, code, label, data) { } alert("code:"+code+"\nlabel:"+label+"\naddress:"+data.address); <!-- 사용자정의설정끝 --> </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - 지점클릭시자바스크립트연동 </p> </div> <div class="desc"> <b></b> <button onclick="viewsrc()" style="font:11px Arial">View Source</button> </div> <div class="content"> <!-- 맵차트가삽입될 DIV --> <div id="mapholder" style="width:600px; height:480px;"> 40/104
41 </body> </html> </div> </div> </div> < 예제 24 시리즈아이템클릭시호출하는함수자바스크립트에서정의하기 > < 예제 24 시리즈아이템클릭시호출하는함수자바스크립트에서정의하기 > 를보시면자바스크립트에서 정의한함수의파라메터는 4 개가있습니다. 파라메터명파라메터설명 seriesid 레이아웃 XML에서부여한시리즈 (Series) 의 id가있을경우, 해당 id 입니다. code 클릭한지역코드 ( 맵데이타베이스에서지정됩니다 ) label 지역명맵데이타에서해당 code와연결된 data 입니다. (data로입력된종류에따라 XML의 data 내용또는배열이됩니다 ) < 표 5 시리즈아이템클릭시호출하는함수의파라메터설명 > 지금까지시리즈의한아이템을클릭한경우자바스크립트의 itemclickfunction 함수를호출하게 설정하였습니다. 이에대한실행화면으로자바스크립트에서알림창을띄워시리즈로부터넘어온 파라메터를보여주고있습니다. 41/104
42 < 그림 13 시리즈아이템클릭시함수호출실행화면 > 8.3. 하위맵상태에서상위맵버튼, 지도외부클릭시불려지는함수설정하기 맵차트하위맵으로이동한상태에서상위맵으로이동하는버튼을클릭하거나지도외부를클릭하여상위맵으로이동하게될경우자바스크립트의함수를설정하여그함수를호출하는방식으로다양한작업을가능케합니다. 먼저, 맵차트에게호출할함수명을지정해줘야합니다. 레이아웃 XML 에서맵차트의속성으로 backtomapjsfunction 을설정하고, 자바스크립트함수명을속성값으로할당합니다. 예로들면아래와같습니다. 이는맵차트의지역을클릭한경우 backfunction 이라는함수를호출하겠다는의미입니다. 이 backfunction 함수는자바스크립트에서반드시정의되어야합니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" backtomapjsfunction="backfunction"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname=" 전국 "> <showdataeffect> <SeriesSlide duration="1000" direction="right"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> 42/104
43 </series> </MapChart> </rmatemapchart> < 예제 25 상위맵버튼, 지도외영역클릭시자바스크립트함수호출하기 > < 예제 21 맵차트클릭시자바스크립트함수호출하기 > 와같이맵차트레이아웃 XML 에서상위맵버튼클릭시호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <!-- 사용자정의설정시작 --> <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/> <!-- rmatemapcharth5 라이센스 --> <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script> <!-- 실제적인 rmatemapcharth5 라이브러리 --> <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script> <!-- 맵차트생성과관련없음. 샘플을위한스크립트. 따라서실제적용시생략하십시오. --> <script language="javascript" type="text/javascript" src="./samplehelper.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // 데이타가 JSON 형일경우넣어줍니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; // 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. 43/104
44 // 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { document.getelementbyid(id).setlayouturlex(layouturl); document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); } // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapClickFunction.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. var dataurl = "./Data/data.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // Svg디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg이미지를지정할수있습니다.( 매뉴얼참조 ) var sourceurl = "./MapSource/KoreaSiDo.svg"; // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); 44/104
45 /* // 맵클릭연동사용자정의함수 // layout XML 에서 MapChart 속성을넣을때 mapchangejsfunction 주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart mapchangejsfunction="clickfunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 없음 */ function backfunction(code, label, data) { } alert("back to main map ); <!-- 사용자정의설정끝 --> </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - 클릭시자바스크립트연동 </p> </div> <div class="desc"> <b></b> <button onclick="viewsrc()" style="font:11px Arial">View Source</button> </div> <div class="content"> <!-- 맵차트가삽입될 DIV --> <div id="mapholder" style="width:600px; height:480px;"> </div> </div> </body> </html> < 예제 26 상위맵버튼, 지도외영역클릭시호출하는함수자바스크립트에서정의하기 > 45/104
46 지금까지맵차트의상위맵버튼, 지도외영역을클릭한경우자바스크립트의 backfunction 함수를 호출하게설정하였습니다. 이에대한실행화면으로자바스크립트에서알림창을띄워 backfunction 에 설정된 alert 창을보여주고있습니다. < 그림 14 상위맵버튼, 지도외영역클릭시함수호출실행화면 > 9. 사용자정의함수설정하기 사용자정의함수를설정할수있는경우는총 5 가지가존재합니다. 1. 데이터팁사용자정의 2. 라벨 ( 지역명 ) 사용자정의 3. 타이틀사용자정의 4. 지역색사용자정의 5. 채우기색사용자정의 6. 지역외곽선색사용자정의 자바스크립트함수를정의하고레이아웃에그함수명을지시하여맵차트가해당함수를호출하는원리로 46/104
47 사용자정의함수가적용됩니다 데이터팁 ( 툴팁 ) 함수사용자정의. 맵차트에서 showdatatips 속성을 true 로설정후마우스오버시보이는데이터팁을사용자정의할수있습니다. 맵차트에서마우스오버이벤트가발생하면레이아웃에서미리지정된 datatipjsfunction 함수를호출하여그함수가리턴하는값을데이터팁으로표시하게됩니다. 레이아웃 XML 에서 datatipjsfunction 속성을추가하고속성값으로자바스크립트함수명을지정하십시오. 이자바스크립트함수는맵차트에마우스오버시 rmate MapChart 가호출할콜백함수입니다. 다음예제는데이터팁을사용자정의한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true" datatipjsfunction="datatipfunction"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname="map Series"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 27 데이터팁사용자정의레이아웃예제 > 레이아웃에서자바스크립트콜백함수를등록한후 rmate MapChart 를임베딩하는파일, 예를들면 html, jsp, php 파일에서다음과같이콜백함수를실제로정의하십시오. /* // 지역데이타팁사용자정의함수 // layout XML 에서 MapChart 속성을넣을때 datatipjsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart datatipjsfunction="datatipfunction"> // // 파라메터설명 // seriesid : Series의 id 47/104
48 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할데이타팁문자열 */ function datatipfunction(seriesid, code, label, data) { if (seriesid == "plot") { return data.branchname + " - " + data.address; } else return label; } < 예제 28 자바스크립트데이터팁콜백함수예제 > <br> 태그사용시줄바꿈으로인식되어다음줄로표현됩니다. 다음은자바스크립트콜백함수를정의할때함께정의되어야할함수파라메터에대한설명입니다. 파라메터명파라메터설명 seriesid 레이아웃 XML에서부여한시리즈 (Series) 의 id가있을경우, 해당 id 입니다. code 클릭한지역코드 ( 맵데이타베이스에서지정됩니다 ) label 지역명맵데이타에서해당 code와연결된 data 입니다. (data로입력된종류에따라 XML의 data 내용또는배열이됩니다 ) < 표 6 데이터팁사용자정의콜백함수파라메터설명 > 48/104
49 b < 그림 15 데이터팁사용자정의실행모습 > 9.2. 라벨사용자정의 labeljsfunction 속성을가지고있는시리즈 ( 맵시리즈, 버블시리즈, 이미지시리즈, 플롯시리즈 ) 에대해자바스크립트로라벨을변형시키기위해 labeljsfunction 속성을정의하고자바스크립트콜백함수명을지정합니다. 라벨이외에스타일을변형하기위해서는반환값을객체로지정하면됩니다. - 반환값 Object 로사용시 {"text": 라벨, "color": 라벨색상, "fontsize": 폰트사이즈, "fontfamily": 폰트종류, "fontweight": 폰트굵기, "fontstyle": 폰트스타일, "lineheight": 줄바꿈 (<br>) 사용시줄간격 } (Samples 폴더의 LabelJsFunction2.html 를참고하시기바랍니다. 다음은라벨을사용자정의하기위해설정한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" labelposition="inside" hideoversizelabel="false" labeljsfunction="labelfunction"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> 49/104
50 <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 29 라벨사용자정의레이아웃예제 > /* // 지역라벨사용자정의함수 // layout XML 에서 MapSeries 속성을넣을때 labeljsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapSeries labeljsfunction="labelfunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할라벨문자열 // 반환값 Object로사용시 // {"text": 라벨, "color": 라벨색상, "fontsize": 폰트사이즈, "fontfamily": 폰트종류, "fontweight": 폰트굵기, "fontstyle": 폰트스타일, "lineheight": 줄바꿈 (<br>) 사용시줄간격 } */ function labelfunction(seriesid, code, label, data) { if (code == "900") return label+" 특별시 "; else if ((code >= "500" && code <= "800") code == "1000" code == "1100") return label+" 광역시 "; return label; } < 예제 30 라벨자바스크립트콜백함수정의예제 > 50/104
51 < 그림 16 라벨사용자정의실행모습 > <br> 태그사용시줄바꿈으로인식되어다음줄로표현됩니다 타이틀사용자정의 titlejsfunction 속성을가지고있는시리즈 ( 판넬시리즈 ) 에대해자바스크립트로타이틀을변형시키기위해 titlejsfunction 속성을정의하고자바스크립트콜백함수명을지정합니다. 다음은타이틀을사용자정의하기위해설정한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <localfill> <SolidColor color="#eeeeee"/> </localfill> <stroke> 51/104
52 <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPanelSeries id="panel" titlejsfunction="titlefunction" bodytextfield="temperature" horizontalcentergapfield="h" verticalcentergapfield="v" color="#555555" horizontalalign="right" displayname=" 날씨 "> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapPanelSeries> </series> </MapChart> </rmatemapchart> < 예제 31 타이틀사용자정의레이아웃예제 > /* // 타이틀사용자정의함수 // layout XML 에서 MapPanelSeries 속성을넣을때 titlejsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapPanelSeries titlejsfunction="titlefunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할라벨문자열 */ function titlefunction(seriesid, code, label, data) { if (data.id == "w01") return " 영동 "; else if (data.id == "w02") return " 영서 "; return label; } < 예제 32 타이틀자바스크립트콜백함수정의예제 > 52/104
53 < 그림 17 타이틀사용자정의실행모습 > 9.4. 지역색사용자정의 맵시리즈의지역채우기색 (localfill) 을어떤조건에따라또는기호에맞게사용자정의하고자하는경우맵시리즈속성 localfilljsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 함수의리턴값은단일색의경우색의컬러값이되며그외에 LinearGradient 나 RadialGradient 일때는다음형식으로넣어주면됩니다. 패턴일경우에는제품내 rmatemapcharth5/assets/pattern 에있는파일명을문자열로반환하시면됩니다. (both, circle, circle2, cross, diagonal, diagonal_ltr, diagonal_rtl, diamond, down_triangle, horizontal, horizontal_curve, horizontal_pipe, rectangle, rectangle2, right, triangle, up, vertical,vertical_curve, vertical_pipe. - LinearGradient 일경우 1. [#FFFF00,#0000FF] : 원하는색을배열로만들어리턴 2. [{"class":"lineargradient","angle":45,"entries":[{"color":"#ff0000","ratio":0,"alpha":0.5},{"color":"#00ff 00","ratio":0.3,"alpha":0.5},{"color":"#0000FF","ratio":1,"alpha":0.5}]}] : 원하는 LinearGradient 를속성을넣어준후배열형태로리턴 (LinearGradient 에대한속성은컴포넌트별속성, 스타일, 함수및이벤트를참조하시기바랍니다 ) - RadialGradient 일경우 [{"class":"radialgradient","angle":45,"entries":[{"color":"#ff0000","ratio":0,"alpha":0.5},{"color":"#00f F00","ratio":0.3,"alpha":0.5},{"color":"#0000FF","ratio":1,"alpha":0.5}]}] : 원하는 RadialGradient 를속성을넣어준후배열현태로리턴 (RadialGradient 에대한속성은컴포넌트별속성, 스타일, 함수및이벤트를참조하시기바랍니다 ) 다음은맵시리즈의지역색을사용자정의한레이아웃예제입니다. 53/104
54 <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" localfilljsfunction="colorfunction"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 33 지역색사용자정의레이아웃 > 다음은 html, jsp, php, asp 등의스크립트파일에서정의한자바스크립트예제입니다. /* // 지역이미지색상사용자정의함수 // layout XML 에서 MapSeries 속성을넣을때 localfilljsfunction를주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapSeries localfilljsfunction="colorfunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할색상 */ function colorfunction(code, label, data) { if (code == "100" data.sales < 30) return #FF0000; else if (code == "900" data.sales < 50) return #FF6600; else if (code == "1500" data.sales < 90) 54/104
55 else return #FFCC00; return #FFFF00; } < 예제 34 지역색자바스크립트콜백함수예제 > < 그림 18 지역색사용자정의화면 > 9.5. 아이템채우기색사용자정의 시리즈의아이템채우기색 (fill) 을어떤조건에따라또는기호에맞게사용자정의하고자하는경우해 당 Series 속성 filljsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 다음은판넬시리즈의아이템채우기색을사용자정의한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" displayname="map Series"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> 55/104
56 <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPanelSeries id="panel" titlefield="label" bodytextfield="temperature" horizontalcentergapfield="h" verticalcentergapfield="v" color="#555555" horizontalalign="right" filljsfunction="fillfunction" displayname=" 날씨 "> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapPanelSeries> </series> </MapChart> </rmatemapchart> < 예제 35 아이템채우기색사용자정의레이아웃 > 다음은 html, jsp, php, asp 등의스크립트파일에서정의한자바스크립트예제입니다. /* // 아이템색상사용자정의함수 // layout XML 에서 MapSeries 이외의 Series속성을넣을때 filljsfunction를주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapPanelSeries filljsfunction="fillfunction"> // // 파라메터설명 // seriesid : MapSeries의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할색상 */ function fillfunction(seriesid, code, label, data) { if (data.temperature < 8) return #FF0000; else if (data.temperature < 10) return #FF6600; else if (data.temperature < 14) return #FFCC00; else return #FFFF00; 56/104
57 } < 예제 36 아이템채우기색자바스크립트콜백함수예제 > < 그림 19 아이템채우기색사용자정의화면 > 9.6. 지역외곽선색사용자정의 맵시리즈의지역외곽선색 (Stroke) 을어떤조건에따라또는기호에맞게사용자정의하고자하는경우맵시리즈속성 strokejsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 함수의리턴값은단일색의경우색의컬러값이되며그외에선굵기를변경하기위해서는다음과같이지정하시면됩니다. - 선색상과선굵기를지정하는경우 1. 반환값을객체형태로지정함 2. { color : 색상, width : 굵기 } 다음은맵시리즈의지역외곽선색을사용자정의한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" selectionmarking="line" displayname="map Series" strokejsfunction="strokefunction"> <filters> 57/104
58 <DropShadowFilter distance="1" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#f9f9f9" weight="0.8" alpha="1"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 37 지역외곽선색사용자정의레이아웃 > 다음은 html, jsp, php, asp 등의스크립트파일에서정의한자바스크립트예제입니다. /* // 지역외곽선색상사용자정의함수 // layout XML 에서 MapSeries 속성을넣을때 strokejsfunction를주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapSeries strokejsfunction="strokefunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할색상 */ function strokefunction(code, label, data) { if (code == "100" data.sales < 30) return {"color":"#88ff88","width":3}; else if (code == "900" data.sales < 50) return {"color":"#ff8888","width":5}; else if (code == "1500" data.sales < 90) return "#407efb"; else return "#3057d4"; } < 예제 38 지역외곽선색자바스크립트콜백함수예제 > 58/104
59 < 그림 20 지역외곽선색사용자정의화면 > 10. 범례 (Legend) 넣기. 맵차트의범례 (Legend) 는두종류로맵차트의시리즈를표현하는경우와지역색에의한범례처럼사용자 직접범위를표시하여작성하는경우가가능합니다. 첫번째시리즈를표시하는경우에는 Legend 의 dataprovider 속성에 MapChart 의 id 를넣어주면자동으로 Legend 에서 MapChart 의시리즈를추출하여범례를표시하게됩니다. 또한시리즈의속성인 displayname 을정의하여야하며여기서정의한문자열이범례의텍스트로출력됩니다. 두번째경우에는사용자가직접 LegendItem 을사용하여범례의내용을정의하여표시해줘야합니다. 다음은시리즈의내용을이용하여범례를표시한예제입니다. <rmatemapchart horizontalalign="center"> <MapChart id="mainmap> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> 59/104
60 <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPlotSeries id="plot1" areacodefield="branchcode" labelfield="branchname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ffffff" fontweight="bold" labelposition="bottom" displayname=" 지점 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> <MapPlotSeries id="plot2" areacodefield="factorycode" labelfield="factoryname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ddaaaa" fontweight="bold" labelposition="bottom" itemrenderer="triangleitemrenderer" displayname=" 공장 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> </series> </MapChart> <Legend dataprovider="{mainmap}" usevisiblecheck="true" horizontalgap="3" direction="horizontal" borderstyle="solid" bordercolor="#999999"/> </rmatemapchart> < 예제 39 시리즈로범례만들기 > 60/104
61 < 그림 21 시리즈로범례만들기화면 > 다음은사용자가직접 LegendItems 을이용하여범례를정의한예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname="map Series" localfilljsfunction="colorfunction"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> <Box width="100%" horizontalalign="center" paddingtop="20"> <SubLegend direction="horizontal" borderstyle="solid" bordercolor="#999999" backgroundcolor="#ffffff"> <LegendItem label="30이하 "> <fill> <SolidColor color="#ff0000"/> 61/104
62 </fill> </LegendItem> <LegendItem label="50이하 "> <fill> <SolidColor color="#ff6600"/> </fill> </LegendItem> <LegendItem label="90이하 "> <fill> <SolidColor color="#ffcc00"/> </fill> </LegendItem> <LegendItem label="90이상 "> <fill> <SolidColor color="#ffff00"/> </fill> </LegendItem> </SubLegend> </Box> </rmatemapchart> < 예제 40 사용자정의범례만들기 > < 그림 22 사용자정의범례만들기화면 > 62/104
63 11. 데이터영역범례 (DataRangeLegend) 넣기. 맵차트의데이터영역범례 (Legend) 는맵차트의시리즈를표현하는경우와지역색에의한범례처럼 사용자직접범위를표시하여작성하는경우가가능하며설정한데이터값을기준으로데이터영역 형태로범례에표시합니다. 다음은시리즈의내용을이용하여범례를표시한예제입니다. <?xml version="1.0" encoding="utf-8"?> <rmatemapchart horizontalalign="center"> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname="map Series" localfillbyrange="[#ffff00, #ffffee,#ff0000]" rangelegenddatafield="sales" localfilljsfunction="colorfunction"> <filters> <DropShadowFilter distance="1" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#fff" weight="0.8" alpha="1"/> </stroke> </MapSeries> </series> </MapChart> <DataRangeLegend width="200" height="30" minimum="0" maximum="250" datarangeheight="15" fontsize="10" arrowoffset="0" interval="50" showarrow="true" tickgap="5" stroke="#000000" arrowcolor="#ffffff" arrowstroke="#000000" colors = "[#ffff00, #ffffee,#ff0000]"/> </rmatemapchart> < 예제 41 시리즈로데이터영역범례만들기 > 63/104
64 < 그림 23 시리즈로데이터영역범례만들기화면 > 12. 고급사용자를위한기능 맵차트생성시효과적용하기. 맵차트고유의 effect 에는 SeriesInterpolate, SeriesSlide, SeriesZoom 의 3 종류가있습니다. 개별시리즈에 effect 가적용되며, 데이터가화면에표시될때 effect 가적용됩니다. SeriesInterpolate : 맵차트의시리즈계열에서자신이받은수치를표현하기위해초기값 (0) 에서자신의수치로이동하는모습을나타내는이펙트입니다. SeriesSlide : 맵차트의시리즈가오른쪽에서왼쪽으로미끄러지듯나타는이펙트입니다. SeriesZoom : 맵차트의시리즈가점점커지면서나타나는이펙트입니다. 다음과같이효과의설정이가능합니다. <rmatemapchart> <MapChart> <MapSeries> <showdataeffect> 64/104
제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호
제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법
More informationExt JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF
CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',
More informationPowerPoint Template
JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것
More informationEclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일
Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae
More informationPowerPoint 프레젠테이션
05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style
More information이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2
03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width
More information다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");
다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher
More information로거 자료실
redirection 매뉴얼 ( 개발자용 ) V1.5 Copyright 2002-2014 BizSpring Inc. All Rights Reserved. 본문서에대한저작권은 비즈스프링 에있습니다. - 1 - 목차 01 HTTP 표준 redirect 사용... 3 1.1 HTTP 표준 redirect 예시... 3 1.2 redirect 현상이여러번일어날경우예시...
More informationWindows 8에서 BioStar 1 설치하기
/ 콘텐츠 테이블... PC에 BioStar 1 설치 방법... Microsoft SQL Server 2012 Express 설치하기... Running SQL 2012 Express Studio... DBSetup.exe 설정하기... BioStar 서버와 클라이언트 시작하기... 1 1 2 2 6 7 1/11 BioStar 1, Windows 8 BioStar
More information슬라이드 1
핚국산업기술대학교 제 14 강 GUI (III) 이대현교수 학습안내 학습목표 CEGUI 라이브러리를이용하여, 게임메뉴 UI 를구현해본다. 학습내용 CEGUI 레이아웃의로딩및렌더링. OIS 와 CEGUI 의연결. CEGUI 위젯과이벤트의연동. UI 구현 : 하드코딩방식 C++ 코드를이용하여, 코드내에서직접위젯들을생성및설정 CEGUI::PushButton* resumebutton
More information쉽게 풀어쓴 C 프로그래밍
CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.
More informationSOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co
SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES 2012.02.18 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone 02-2108-8030 Fax 02-2108-8031 www.softbase.co.kr Copyright 2010 SOFTBase Inc. All rights reserved 목차 1 장 : HTML 연동개요...
More informationPowerPoint 프레젠테이션
ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례
More informationvar answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");
자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트
More informationISP and CodeVisionAVR C Compiler.hwp
USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler http://www.avrmall.com/ November 12, 2007 Copyright (c) 2003-2008 All Rights Reserved. USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler
More informationJavascript
1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용
More informationMicrosoft PowerPoint - chap02-C프로그램시작하기.pptx
#include int main(void) { int num; printf( Please enter an integer "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 을 작성하면서 C 프로그램의
More informationMicrosoft Word - src.doc
IPTV 서비스탐색및콘텐츠가이드 RI 시스템운용매뉴얼 목차 1. 서버설정방법... 5 1.1. 서비스탐색서버설정... 5 1.2. 컨텐츠가이드서버설정... 6 2. 서버운용방법... 7 2.1. 서비스탐색서버운용... 7 2.1.1. 서비스가이드서버실행... 7 2.1.2. 서비스가이드정보확인... 8 2.1.3. 서비스가이드정보추가... 9 2.1.4. 서비스가이드정보삭제...
More information대량문자API연동 (with directsend)
1 삼정데이타서비스 DIRECTSEND 제공 [ 저작권안내 ] 본문서는삼정데이타서비스 ( 주 ) 에서고객의원활한업무지원을위하여무상으로배포하는사용자매뉴얼및가이드로써저작권과전송권은삼정데이타서비스 ( 주 ) 에있습니다. 따라서당사고객이이를이러한용도로사용하는것에는제한이없으나저작권자에대한허락및표시없이이를제 3 자에게재전송하거나복사및무단전제할때는국내및국제저작권법에의하여서비스이용이제한되고법적인책임이따를수있습니다.
More information리아모어소프트 데스크탑용데모 : 모바일용데모 : 2/170
rmate Chart for HTML5 사용설명서 Version 5.0 정품을구입하신고객에게는기술상담및지원을제공합니다서울시영등포구영신로 220, 611 호 ( 영등포동 8 가, KnK 디지털타워 ) (Tel : 02-2655-9767, riamore@riamore.net) 리아모어소프트 데스크탑용데모 : http://demo.riamore.net/html5demo/chart
More informationMicrosoft PowerPoint - web-part01-ch10-문서객체모델.pptx
과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document
More information쉽게 풀어쓴 C 프로그래밍
CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var
More informationHLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 :
HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : ios 3.0 이상 - 콘텐츠형식 : MP4 (H264,AAC ), MP3 * 디바이스별해상도,
More information웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI C
웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 duskan@pusan.ac.kr Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI Component 로.NET 기반의다양한사용자인터페이스를제공한다. 그중에서도특히 Chart 에대하여
More informationPowerPoint 프레젠테이션
Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.
More informationPowerPoint 프레젠테이션
실습 1 배효철 th1g@nate.com 1 목차 조건문 반복문 System.out 구구단 모양만들기 Up & Down 2 조건문 조건문의종류 If, switch If 문 조건식결과따라중괄호 { 블록을실행할지여부결정할때사용 조건식 true 또는 false값을산출할수있는연산식 boolean 변수 조건식이 true이면블록실행하고 false 이면블록실행하지않음 3
More informationMicrosoft PowerPoint 웹 연동 기술.pptx
웹프로그래밍및실습 ( g & Practice) 문양세강원대학교 IT 대학컴퓨터과학전공 URL 분석 (1/2) URL (Uniform Resource Locator) 프로토콜, 호스트, 포트, 경로, 비밀번호, User 등의정보를포함 예. http://kim:3759@www.hostname.com:80/doc/index.html URL 을속성별로분리하고자할경우
More informationmobile_guide_SA
네이버 모바일배너 모바일 네트워트 GUIDE AD GUIDE Version 1.0 03. 적용위치 04. Appendix 목차 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 네이버 모바일배너 개요 1. 텍스트형 광고 2. 이미지형 광고 3. 롤링형 광고 01/03 네이버 모바일배너 개요 네이버 모바일배너는 네이버 모바일 서비스
More informationPowerPoint 프레젠테이션
HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,
More informationAPI STORE 키발급및 API 사용가이드 Document Information 문서명 : API STORE 언어별 Client 사용가이드작성자 : 작성일 : 업무영역 : 버전 : 1 st Draft. 서브시스템 : 문서번호 : 단계 : Docum
API STORE 키발급및 API 사용가이드 Document Information 문서명 : API STORE 언어별 Client 사용가이드작성자 : 작성일 : 2012.11.23 업무영역 : 버전 : 1 st Draft. 서브시스템 : 문서번호 : 단계 : Document Distribution Copy Number Name(Role, Title) Date
More information미쓰리 파워포인트
computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..
More informationOverall Process
CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents
More information쉽게 풀어쓴 C 프로그래밍
제 5 장생성자와접근제어 1. 객체지향기법을이해한다. 2. 클래스를작성할수있다. 3. 클래스에서객체를생성할수있다. 4. 생성자를이용하여객체를초기화할수 있다. 5. 접근자와설정자를사용할수있다. 이번장에서만들어볼프로그램 생성자 생성자 (constructor) 는초기화를담당하는함수 생성자가필요한이유 #include using namespace
More informationLab10
Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee Map Visualization Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3 d3.js SVG, GeoJSON, TopoJSON
More informationMicrosoft PowerPoint - additional01.ppt [호환 모드]
1.C 기반의 C++ part 1 함수 오버로딩 (overloading) 디폴트매개변수 (default parameter) 인-라인함수 (in-line function) 이름공간 (namespace) Jong Hyuk Park 함수 Jong Hyuk Park 함수오버로딩 (overloading) 함수오버로딩 (function overloading) C++ 언어에서는같은이름을가진여러개의함수를정의가능
More informationPowerPoint 프레젠테이션
HTML5 웹프로그래밍입문 부록. 웹서버구축하기 1 목차 A.1 웹서버시스템 A.2 PHP 사용하기 A.3 데이터베이스연결하기 2 A.1 웹서버시스템 3 웹서버의구축 웹서버컴퓨터구축 웹서버소프트웨어설치및실행 아파치 (Apache) 웹서버가대표적 서버실행프로그램 HTML5 폼을전달받아처리 PHP, JSP, Python 등 데이터베이스시스템 서버측에데이터를저장및효율적관리
More informationSOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax
SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES 2012.02.18 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone 02-2108-8030 Fax 02-2108-8031 www.softbase.co.kr Copyright 2010 SOFTBase Inc. All rights reserved 목차 1 장 : ActiveX
More information3장
C H A P T E R 03 CHAPTER 03 03-01 03-01-01 Win m1 f1 e4 e5 e6 o8 Mac m1 f1 s1.2 o8 Linux m1 f1 k3 o8 AJAX
More information금오공대 컴퓨터공학전공 강의자료
C 프로그래밍프로젝트 Chap 14. 포인터와함수에대한이해 2013.10.09. 오병우 컴퓨터공학과 14-1 함수의인자로배열전달 기본적인인자의전달방식 값의복사에의한전달 val 10 a 10 11 Department of Computer Engineering 2 14-1 함수의인자로배열전달 배열의함수인자전달방식 배열이름 ( 배열주소, 포인터 ) 에의한전달 #include
More information- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl
제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 )
More informationMicrosoft Word - ntasFrameBuilderInstallGuide2.5.doc
NTAS and FRAME BUILDER Install Guide NTAS and FRAME BUILDER Version 2.5 Copyright 2003 Ari System, Inc. All Rights reserved. NTAS and FRAME BUILDER are trademarks or registered trademarks of Ari System,
More informationMicrosoft PowerPoint - web-part01-ch05-함수.pptx
과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch05. 함수 2014년 1학기 Professor Seung-Hoon Choi 5. 1 익명함수 함수 코드의집합을나타내는자료형 형식 var 함수이름 = function( ) { }; function( ) { } 부분은이름이없는익명함수임
More information<322EBCF8C8AF28BFACBDC0B9AEC1A6292E687770>
연습문제해답 5 4 3 2 1 0 함수의반환값 =15 5 4 3 2 1 0 함수의반환값 =95 10 7 4 1-2 함수의반환값 =3 1 2 3 4 5 연습문제해답 1. C 언어에서의배열에대하여다음중맞는것은? (1) 3차원이상의배열은불가능하다. (2) 배열의이름은포인터와같은역할을한다. (3) 배열의인덱스는 1에서부터시작한다. (4) 선언한다음, 실행도중에배열의크기를변경하는것이가능하다.
More informationPowerPoint 프레젠테이션
How to produce table XHTML 임정희 M2community 1 Table of Contents 1. XHTML - XHTML 과 HTML 2. Table XHTML - Table의이해 - Table 링크연결 - Table 작성 2 15 th KCSE Editor s Workshop, Seoul 2015 XHTML XHTML 기존에사용되던 HTML
More informationAPI - Notification 메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어
메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어서가장중요한부분이라고도할수있기때문입니다. 1. 새로운메크로생성 새메크로만들기버튺을클릭하여파일을생성합니다. 2. 메크로저장 -
More informationMicrosoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx
과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi 20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버
More information슬라이드 1
-Part3- 제 4 장동적메모리할당과가변인 자 학습목차 4.1 동적메모리할당 4.1 동적메모리할당 4.1 동적메모리할당 배울내용 1 프로세스의메모리공간 2 동적메모리할당의필요성 4.1 동적메모리할당 (1/6) 프로세스의메모리구조 코드영역 : 프로그램실행코드, 함수들이저장되는영역 스택영역 : 매개변수, 지역변수, 중괄호 ( 블록 ) 내부에정의된변수들이저장되는영역
More informationTcl의 문법
월, 01/28/2008-20:50 admin 은 상당히 단순하고, 커맨드의 인자를 스페이스(공백)로 단락을 짓고 나열하는 정도입니다. command arg1 arg2 arg3... 한행에 여러개의 커맨드를 나열할때는, 세미콜론( ; )으로 구분을 짓습니다. command arg1 arg2 arg3... ; command arg1 arg2 arg3... 한행이
More informationBuilding Mobile AR Web Applications in HTML5 - Google IO 2012
Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)
More informationStuduino소프트웨어 설치
Studuino 프로그래밍환경 Studuino 소프트웨어설치 본자료는 Studuino 프로그래밍환경설치안내서입니다. Studuino 프로그래밍 환경의갱신에따라추가 / 수정될수있습니다. 목차 1. 소개... 1 2. Windows... 2 2.1. 프로그래밍환경설치... 2 2.1.1. 웹설치버전설치방법... 2 2.2. Studuino 프로그래밍환경실행...
More informationchap 5: Trees
5. Threaded Binary Tree 기본개념 n 개의노드를갖는이진트리에는 2n 개의링크가존재 2n 개의링크중에 n + 1 개의링크값은 null Null 링크를다른노드에대한포인터로대체 Threads Thread 의이용 ptr left_child = NULL 일경우, ptr left_child 를 ptr 의 inorder predecessor 를가리키도록변경
More informationView Licenses and Services (customer)
빠른 빠른 시작: 시작: 라이선스, 라이선스, 서비스 서비스 및 주문 주문 이력 이력 보기 보기 고객 가이드 Microsoft 비즈니스 센터의 라이선스, 서비스 및 혜택 섹션을 통해 라이선스, 온라인 서비스, 구매 기록 (주문 기록)을 볼 수 있습니다. 시작하려면, 비즈니스 센터에 로그인하여 상단 메뉴에서 재고를 선택한 후 내 재고 관리를 선택하십시오. 목차
More information안드로이드기본 11 차시어댑터뷰 1 학습목표 어댑터뷰가무엇인지알수있다. 리스트뷰와스피너를사용하여데이터를출력할수있다. 2 확인해볼까? 3 어댑터뷰 1) 학습하기 어댑터뷰 - 1 -
11 차시어댑터뷰 1 학습목표 어댑터뷰가무엇인지알수있다. 리스트뷰와스피너를사용하여데이터를출력할수있다. 2 확인해볼까? 3 어댑터뷰 1) 학습하기 어댑터뷰 - 1 - ArrayAdapter ArrayAdapter adapter = new ArrayAdapter(this, android.r.layout.simple_list_item_1,
More informationMicrosoft PowerPoint - web-part02-ch15-문서객체조작.pptx
과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가
More informationMicrosoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]
Google Map View 구현 학습목표 교육목표 Google Map View 구현 Google Map 지원 Emulator 생성 Google Map API Key 위도 / 경도구하기 위도 / 경도에따른 Google Map View 구현 Zoom Controller 구현 Google Map View (1) () Google g Map View 기능 Google
More informationVisual Basic 반복문
학습목표 반복문 For Next문, For Each Next문 Do Loop문, While End While문 구구단작성기로익히는반복문 2 5.1 반복문 5.2 구구단작성기로익히는반복문 3 반복문 주어진조건이만족하는동안또는주어진조건이만족할때까지일정구간의실행문을반복하기위해사용 For Next For Each Next Do Loop While Wend 4 For
More information[ 마이크로프로세서 1] 2 주차 3 차시. 포인터와구조체 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Functi
2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Function) 1. 함수의개념 입력에대해적절한출력을발생시켜주는것 내가 ( 프로그래머 ) 작성한명령문을연산, 처리, 실행해주는부분 ( 모듈 ) 자체적으로실행되지않으며,
More informationC H A P T E R 2
C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =
More informationMF3010 MF Driver Installation Guide
한국어 MF 드라이버설치설명서 사용자소프트웨어 CD-ROM................................................ 1.................................................................... 1..............................................................................
More information학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2
학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 6.1 함수프로시저 6.2 서브프로시저 6.3 매개변수의전달방식 6.4 함수를이용한프로그래밍 3 프로시저 (Procedure) 프로시저 (Procedure) 란무엇인가? 논리적으로묶여있는하나의처리단위 내장프로시저 이벤트프로시저, 속성프로시저, 메서드, 비주얼베이직내장함수등
More informationJavascript
1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.
More informationMicrosoft PowerPoint - e pptx
Import/Export Data Using VBA Objectives Referencing Excel Cells in VBA Importing Data from Excel to VBA Using VBA to Modify Contents of Cells 새서브프로시저작성하기 프로시저실행하고결과확인하기 VBA 코드이해하기 Referencing Excel Cells
More informationPowerPoint Presentation
웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력
More information1809_2018-BESPINGLOBAL_Design Guidelines_out
베스핀글로벌 디자인 가이드라인 베스핀글로벌은 경험과 기술을 바탕으로 고객에게 신뢰를 주는 기업이기를 지향합니다. 모든 서비스와 소통채널에서 우리의 가치를 일관되게 표현하도록 합니다. SIGNATURE SIGNATURE + SLGAN SIGNATURE [CHINA] SIGNATURE + SYMBL 2018년 1.ver 베스핀글로벌 디자인 가이드라인 디자인 가이드라인을
More informationMicrosoft Word - windows server 2003 수동설치_non pro support_.doc
Windows Server 2003 수동 설치 가이드 INDEX 운영체제 설치 준비과정 1 드라이버를 위한 플로피 디스크 작성 2 드라이버를 위한 USB 메모리 작성 7 운영체제 설치 과정 14 Boot Sequence 변경 14 컨트롤러 드라이버 수동 설치 15 운영체제 설치 17 운영체제 설치 준비 과정 Windows Server 2003 에는 기본적으로
More information혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가
혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가웹페이지내에뒤섞여있어서웹페이지의화면설계가점점어려워진다. - 서블릿이먼저등장하였으나, 자바내에
More informatione-비즈니스 전략 수립
CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용
More informationiii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다.
Eclipse 개발환경에서 WindowBuilder 를이용한 Java 프로그램개발 이예는 Java 프로그램의기초를이해하고있는사람을대상으로 Embedded Microcomputer 를이용한제어시스템을 PC 에서 Serial 통신으로제어 (Graphical User Interface (GUI) 환경에서 ) 하는프로그램개발예를설명한다. WindowBuilder:
More informationLab1
Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,
More informationMicrosoft PowerPoint - ch09 - 연결형리스트, Stack, Queue와 응용 pm0100
2015-1 프로그래밍언어 9. 연결형리스트, Stack, Queue 2015 년 5 월 4 일 교수김영탁 영남대학교공과대학정보통신공학과 (Tel : +82-53-810-2497; Fax : +82-53-810-4742 http://antl.yu.ac.kr/; E-mail : ytkim@yu.ac.kr) 연결리스트 (Linked List) 연결리스트연산 Stack
More informationMicrosoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]
Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp
More information아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상
Android 용 Brother Image Viewer 설명서 버전 0 KOR 아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상표입니다. Android는
More informationWeek8-Extra
Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4
More informationadfasdfasfdasfasfadf
C 4.5 Source code Pt.3 ISL / 강한솔 2019-04-10 Index Tree structure Build.h Tree.h St-thresh.h 2 Tree structure *Concpets : Node, Branch, Leaf, Subtree, Attribute, Attribute Value, Class Play, Don't Play.
More information사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사
IDIS Mobile Android 사용설명서 Powered by 사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사양 및 버전에 따라 일부
More informationPowerPoint 프레젠테이션
빅데이터분석활용센터 분석활용인프라매뉴얼 목 차 1 분석활용인프라 1. 개요 1.1 개요 1 2. 메뉴구조도 2.1 메뉴구조도 2 3.1 플라밍고로그인 3 3.2 데스크탑화면 8 3.3 대시보드 9 3.4 워크플로우디자이너 13 3.5 파일시스템브라우저 27 3.6 Apache Hive 편집기 42 3.7 Apache Pig 편집기 48 3.8 BI Matrix
More informationPowerPoint Presentation
WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용
More information쉽게 풀어쓴 C 프로그래밍
CHAPTER 14. HTML5 웹스토리지, 파일 API, 웹소켓 웹스토리지 웹스토리지 (web storage) 는클라이언트컴퓨터에데이터를저장하는메카니즘 웹스토리지는쿠키보다안전하고속도도빠르다. 약 5MB 정도까지저장이가능하다. 데이터는키 / 값 (key/value) 의쌍으로저장 localstorage 와 sessionstorage localstorage 객체
More informationXSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks
XSS s XSS, s, May 25, 2010 XSS s 1 2 s 3 XSS s MySpace 사건. Samy (JS.Spacehero) 프로필 페이지에 자바스크립트 삽입. 스크립트 동작방식 방문자를 친구로 추가. 방문자의 프로필에 자바스크립트를 복사. 1시간 만에 백만 명이 친구등록. s XSS s 위험도가 낮은 xss 취약점을 다른 취약점과 연계하여
More information<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D>
Power Java 제 8 장클래스와객체 I 이번장에서학습할내용 클래스와객체 객체의일생직접 메소드클래스를 필드작성해 UML 봅시다. QUIZ 1. 객체는 속성과 동작을가지고있다. 2. 자동차가객체라면클래스는 설계도이다. 먼저앞장에서학습한클래스와객체의개념을복습해봅시다. 클래스의구성 클래스 (class) 는객체의설계도라할수있다. 클래스는필드와메소드로이루어진다.
More informationPowerPoint Template
16-1. 보조자료템플릿 (Template) 함수템플릿 클래스템플릿 Jong Hyuk Park 함수템플릿 Jong Hyuk Park 함수템플릿소개 함수템플릿 한번의함수정의로서로다른자료형에대해적용하는함수 예 int abs(int n) return n < 0? -n : n; double abs(double n) 함수 return n < 0? -n : n; //
More information학습목차 2.1 다차원배열이란 차원배열의주소와값의참조
- Part2- 제 2 장다차원배열이란무엇인가 학습목차 2.1 다차원배열이란 2. 2 2 차원배열의주소와값의참조 2.1 다차원배열이란 2.1 다차원배열이란 (1/14) 다차원배열 : 2 차원이상의배열을의미 1 차원배열과다차원배열의비교 1 차원배열 int array [12] 행 2 차원배열 int array [4][3] 행 열 3 차원배열 int array [2][2][3]
More information게시판 스팸 실시간 차단 시스템
오픈 API 2014. 11-1 - 목 차 1. 스팸지수측정요청프로토콜 3 1.1 스팸지수측정요청프로토콜개요 3 1.2 스팸지수측정요청방법 3 2. 게시판스팸차단도구오픈 API 활용 5 2.1 PHP 5 2.1.1 차단도구오픈 API 적용방법 5 2.1.2 차단도구오픈 API 스팸지수측정요청 5 2.1.3 차단도구오픈 API 스팸지수측정결과값 5 2.2 JSP
More informationOCW_C언어 기초
초보프로그래머를위한 C 언어기초 2 장 : C 프로그램시작하기 2012 년 이은주 학습목표 을작성하면서 C 프로그램의구성요소 주석 (comment) 이란무엇인지알아보고, 주석을만드는방법 함수란무엇인지알아보고, C 프로그램에반드시필요한 main 함수 C 프로그램에서출력에사용되는 printf 함수 변수의개념과변수의값을입력받는데사용되는 scanf 함수 2 목차 프로그램코드
More informationMF Driver Installation Guide
Korean MF 드라이버 설치설명서 사용자 소프트웨어 CD-ROM... 드라이버 및 소프트웨어 정보...1 지원되는 운영 체제...1 MF 드라이버 및 MF Toolbox 설치... [쉬운 설치]를 사용한 설치...2 [사용자 정의 설치]를 사용한 설치...10 USB 케이블 연결(USB를 이용해 연결하는 경우만)...20 설치 결과 확인...21 온라인
More information하둡을이용한파일분산시스템 보안관리체제구현
하둡을이용한파일분산시스템 보안관리체제구현 목 차 - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - 1. 사용자가웹서버에로그인하여다양한서비스 ( 파일업 / 다운로드, 폴더생성 / 삭제 ) 를활용 2. 웹서버와연동된하둡서버에서업 / 다운로드된파일을분산저장. ( 자료송수신은 SSH 활용 ) - 9 - - 10 - - 11 -
More informationJSP 의내장객체 response 객체 - response 객체는 JSP 페이지의실행결과를웹프라우저로돌려줄때사용되는객체이다. - 이객체는주로켄텐츠타입이나문자셋등의데이터의부가정보 ( 헤더정보 ) 나쿠키 ( 다음에설명 ) 등을지정할수있다. - 이객체를사용해서출력의방향을다른
JSP 의내장객체 response 객체 - response 객체는 JSP 페이지의실행결과를웹프라우저로돌려줄때사용되는객체이다. - 이객체는주로켄텐츠타입이나문자셋등의데이터의부가정보 ( 헤더정보 ) 나쿠키 ( 다음에설명 ) 등을지정할수있다. - 이객체를사용해서출력의방향을다른 URL로바꿀수있다. 예 ) response.sendredirect("http://www.paran.com");
More information슬라이드 1
전자정부개발프레임워크 1 일차실습 LAB 개발환경 - 1 - 실습목차 LAB 1-1 프로젝트생성실습 LAB 1-2 Code Generation 실습 LAB 1-3 DBIO 실습 ( 별첨 ) LAB 1-4 공통컴포넌트생성및조립도구실습 LAB 1-5 템플릿프로젝트생성실습 - 2 - LAB 1-1 프로젝트생성실습 (1/2) Step 1-1-01. 구현도구에서 egovframe>start>new
More informationSIGIL 완벽입문
누구나 만드는 전자책 SIGIL 을 이용해 전자책을 만들기 EPUB 전자책이 가지는 단점 EPUB이라는 포맷과 제일 많이 비교되는 포맷은 PDF라는 포맷 입니다. EPUB이 나오기 전까지 전 세계에서 가장 많이 사용되던 전자책 포맷이고, 아직도 많이 사 용되기 때문이기도 한며, 또한 PDF는 종이책 출력을 위해서도 사용되기 때문에 종이책 VS
More informationPowerPoint Presentation
#include int main(void) { int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 을작성하면서 C 프로그램의구성요소에대하여알아본다.
More informationPowerPoint 프레젠테이션
How to produce ChemML and MathML 조윤상 ( 과편협기획운영위원 ) 1 Applications of XML Applications of XML RDF (Resource Description Framework) : 자원의정보를표현하기위한규격, 구문및구조에대한공통적인규칙을지원. RSS (Rich Site Summary) : 뉴스나블로그사이트에서주로사용하는콘텐츠표현방식.
More information17장 클래스와 메소드
17 장클래스와메소드 박창이 서울시립대학교통계학과 박창이 ( 서울시립대학교통계학과 ) 17 장클래스와메소드 1 / 18 학습내용 객체지향특징들객체출력 init 메소드 str 메소드연산자재정의타입기반의버전다형성 (polymorphism) 박창이 ( 서울시립대학교통계학과 ) 17 장클래스와메소드 2 / 18 객체지향특징들 객체지향프로그래밍의특징 프로그램은객체와함수정의로구성되며대부분의계산은객체에대한연산으로표현됨객체의정의는
More information슬라이드 1
- 1 - 전자정부모바일표준프레임워크실습 LAB 개발환경 실습목차 LAB 1-1 모바일프로젝트생성실습 LAB 1-2 모바일사이트템플릿프로젝트생성실습 LAB 1-3 모바일공통컴포넌트생성및조립도구실습 - 2 - LAB 1-1 모바일프로젝트생성실습 (1/2) Step 1-1-01. 구현도구에서 egovframe>start>new Mobile Project 메뉴를선택한다.
More informationMicrosoft PowerPoint UI-Event.Notification(1.5h).pptx
To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 UI 이벤트 Event listener Touch mode Focus handling Notification Basic toast notification Customized toast notification Status bar notification 2 사용자가인터랙션하는특정 View
More informationPowerPoint Presentation
Package Class 3 Heeseung Jo 목차 section 1 패키지개요와패키지의사용 section 2 java.lang 패키지의개요 section 3 Object 클래스 section 4 포장 (Wrapper) 클래스 section 5 문자열의개요 section 6 String 클래스 section 7 StringBuffer 클래스 section
More information제8장 자바 GUI 프로그래밍 II
제8장 MVC Model 8.1 MVC 모델 (1/7) MVC (Model, View, Controller) 모델 스윙은 MVC 모델에기초를두고있다. MVC란 Xerox의연구소에서 Smalltalk 언어를바탕으로사용자인터페이스를개발하기위한방법 MVC는 3개의구성요소로구성 Model : 응용프로그램의자료를표현하기위한모델 View : 자료를시각적으로 (GUI 방식으로
More informationRHEV 2.2 인증서 만료 확인 및 갱신
2018/09/28 03:56 1/2 목차... 1 인증서 확인... 1 인증서 종류와 확인... 4 RHEVM CA... 5 FQDN 개인 인증서... 5 레드햇 인증서 - 코드 서명 인증서... 6 호스트 인증... 7 참고사항... 8 관련링크... 8 AllThatLinux! - http://allthatlinux.com/dokuwiki/ rhev_2.2_
More information임베디드시스템설계강의자료 6 system call 2/2 (2014 년도 1 학기 ) 김영진 아주대학교전자공학과
임베디드시스템설계강의자료 6 system call 2/2 (2014 년도 1 학기 ) 김영진 아주대학교전자공학과 System call table and linkage v Ref. http://www.ibm.com/developerworks/linux/library/l-system-calls/ - 2 - Young-Jin Kim SYSCALL_DEFINE 함수
More information1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과
1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과 학습내용 1. Java Development Kit(JDK) 2. Java API 3. 자바프로그래밍개발도구 (Eclipse) 4. 자바프로그래밍기초 2 자바를사용하려면무엇이필요한가? 자바프로그래밍개발도구 JDK (Java Development Kit) 다운로드위치 : http://www.oracle.com/technetwork/java/javas
More information슬라이드 1
웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음
More information