Cop: Web 1,a) 1,b) GUI, UI,,., GUI, Java Swing., Web HTML CSS,. CSS,, CSS,.,, HTML CSS Cop. Cop, JavaScript,,. Cop, Web,. Web, HTML, CSS, JavaScript, 1., GUI, Web., HTML CSS (UI), JavaScript, Web GUI. Web, Web,, 1 a) yryu@ipl.cs.uec.ac.jp b) iwasaki@cs.uec.ac.jp., Web,.,, Web., Web Web. GUI, UI, [3]., Web 119
., HTML, CSS, JavaScript,., CSS, CSS., Web Cop. Cop, HTML, CSS, JavaScript,.,,. Cop, HTML, CSS, JavaScript JavaScript,. JavaScript,, Cop.. 2 Web. 3 Web. 4 Cop, 5 Cop. 6, 7. 2. Web Web, HTML CSS, JavaScript. 1 Web., count ID DOM 0, input 1. Web, HTML <html> <body onload="init()"> <div> <span id="count"></span> <input type="button" onclick="countup()"> Count UP </input> </div> </body> </html> (a) HTML #count { color: gray; (b) CSS var cnt; function init() { cnt = 0; document.getelementbyid("count").innerhtml = cnt; function countup() { cnt = cnt + 1; document.getelementbyid("count").innerhtml = cnt; (c) JavaScript 1: Web UI., span, input., div. div,. id class., CSS JavaScript DOM. HTML 120
, id, class. CSS, UI., count ID DOM, gray. JavaScript,. HTML, DOM JavaScript., 1(c) input onclick="countup()"., input DOM, JavaScript countup., JavaScript, document DOM. 1(c) init countup, cnt DOM. 3. 3.1 GUI GUI, UI..,,., Java Swing [2]. Swing GUI, 2.,,., Java. Swing Java 3. JButton,. new, Java., button settext 2: Swing GUI JButton button = new JButton(); button.settext("this is a button"); 3: Swing Java, This is a button. 3.2,., [1]. A B., A B., B, B, A., B A., B. B A, B A.,., B 121
4: Web., B,,. Java Swing, UI,. Java Swing,. 3.3 Web Web, 4. Web, HTML, CSS, JavaScript. HTML, CSS, JavaScript, UI,,. 3.4 CSS Web, 3.2. Web. CSS. 3.4.1 A B 5 #wrapper { background: gray; (a) A CSS #wrapper { background: red; (b) B CSS 5: CSS, A B., A B, A CSS B CSS. A CSS B CSS, #wrapper, A B CSS, B A CSS., CSS, CSS. 3.4.2,.,., CSS, CSS., CSS., CSS,., HTML, CSS, JavaScript,. 3.5 JavaScript Web, 122
JavaScript DOM. DOM. (1) document.getelementbyid, DOM, DOM. (2) DOM,, DOM.,. document.getelementbyid DOM, DOM DOM., abc id DOM, #abc DOM., DOM HTML., DOM, DOM., DOM. 4. Cop Cop 2.., UI HTML, CSS, JavaScript.,.,, 1 JavaScript.,.,,.,,. Cop, states events DOM 6: HTML CSS JavaScript ComponentCode 7:,. 4.1,. Cop 6. DOM events states 3. DOM HTML CSS, events states JavaScript. DOM. DOM UI. DOM,. DOM, events. events, DOM. DOM,., states. states, JavaScript,. states, states DOM. UI.. 123
<div> <span class="count" id="count"> {{count </span> <input type="button" id="up-button"> Count UP </input> </div> (a) HTML.count { color: gray; (b) CSS states: { count : 0, events: { #up-button : { click : function() { return { count : states.count + 1 ; (c) JavaScript states: { count : 0, is_even : true, events: { #up-button : { click : function() { var nc = states.count + 1; return { count : nc, is_even : nc % 2 == 0? true : false, ; (a) JavaScript {if is_even <span>count is even</span> {else <span>count is odd</span> {endif (b) HTML 9: if { name : comp-a, version : 0.0.1 (d) 8:,. Cop, events states DOM,,. JavaScript DOM API,,. JavaScript DOM API, Cop 4.2 Cop 7., HTML, CSS, JavaScript,. Cop 1 8. Cop ( 1), 124
JavaScript. states events. states events., 8, states public. public,.,. JSON,. Cop, DOM, HTML.. if 9., is event, This is inserted if count is even, This is inserted if count is odd. cond, states., is even count true, false, count., HTML,,. HTML, CSS, JavaScript,., 1 JavaScript. JavaScript,.js., comp-a.js. JavaScript Component Code., Component Code. Component Code, HTML, CSS, JavaScript JavaScript. <html> <body> <div id="comp-a"></div> <script src="comp-a.js"></script> <script src="cop.js"></script> <script> cop.inject( comp-a, #comp-a ); </script> </body> </html> 10: Component Code 4.3 4.3.1, Component Code. Component Code 10. comp-a.js Component Code. Component Code JavaScript, script. cop.js, Component Code, Cop. Component Code, cop.inject. cop.inject, 1, 2 DOM.,. cop.inject, 1 2 DOM. 2 DOM, DOM. DOM,. cop.inject, 3., cop.inject states public 125
{ name : comp-a, verison : 0.0.1, dependencies : [./comp-b.js,./comp-c.js ] 11: 12:,., states., states, public,. 4.3.2,. Cop,, 11. Cop.,. Cop,.,,.,. 12. dependencies. dependencies, events: { #comp-a-button : { click : function (event) { event.emittochildren( some-event, { msg : some msg ); return {; (a) events: { _parent : { some-event : function (event) { return { /* some msg */ msg : event.payload.msg (b) 13: Component Code., comp-b.js comp-c.js 2 Component Code., Component Code, Component Code., cop.inject. 4.3.3,. 3.2,. Cop,. Cop 126
. 13., 2. 2.,,. emittochildren,. emittochildren, 1,., some-event., parent DOM., emittochildren., Cop,,., emittoparent., child DOM. Cop emittochildren emittoparent., Cop.,,,.,. 5. Cop Cop, HTML cop.comp( comp-a, { events: {, states: {, _css: { /* CSS */, _dom: { /* DOM */ ); 14: JavaScript.count { color: gray; (a) _css: { count { color : gray (b) 15: CSS CSS, JavaScript Component Code, Component Code.. 5.1, 14 JavaScript., cop.comp., 2, 1., events, states, css, dom 4. 2, JavaScript 127
events states. css, CSS JavaScript., 15., CSS.,, CSS DOM, CSS,. dom, HTML JavaScript. Component Code,. CSS HTML, JavaScript, CSS HTML. 5.2 Component Code, 3.4 HTML CSS, JavaScript,., Component Code.. (1) Component Code cop.comp.,. (2) dom css, DOM. (3) DOM, events, states. (4) states DOM, DOM.,. 5.2.1 comp.inject, Component Code cop.comp. cop.comp,,.,., emittochildren emittoparent,., DOM. DOM comp.inject. 5.2.2 DOM DOM, eventrunner. eventrunner, events,., states., eventrunner statesobserver. statesobserver, states, states DOM. eventrunner states, statesobserver states DOM, DOM. 6. Web,. Google Web Toolkit[4], Google Web., UI Web, Java, Java 128
., Web,.,. Han [5], Pagelet Web Web., XML, XSLT[6] XML HTML. Pagelet, Pagelet, XSLT. WebComponents[7], W3C Web UI. DOM JavaScript, DOM, DOM CSS., JavaScript DOM DOM., DOM JavaScript, WebComponents., DOM JavaScript,,. 7., Web,.,,,. Cop,.,.,,, public,.,.. Cop, Cop, Cop, Web. [1] Chaudron, M. and Crnkovic, I.: Componentbased software engineering, Software Engineering: Principles and Practice, pp. 605 628 (2008). [2] Eckstein, R., Loy, M. and Wood, D.: Java Swing, O Reilly Media (1998). [3] Goldberg, A. and Robson, D.: Smalltalk-80: The Language and its Implementation, Addison- Wesley Longman Publishing Co., Inc. (1983). [4] Google: Google Web Toolkit, http://www. gwtproject.org/. [5] Han, H. and Liu, B.: Problems, Solutions and New Opportunities: Using Pagelet-based Templates in Development of Flexible and Extensible Web Applications, Proceedings of the 12th International Conference on Information Integration and Web-based Applications & Services, iiwas 10, pp. 679 682 (2010). [6] Tidwell, D.: XSLT, O Reilly Media (2008). [7] W3C: WebComponents, http://www.w3.org/ TR/components-intro/. 129