7_16.dvi

Size: px

Start display at page:

Download "7_16.dvi"

しょうこたなせ
7 years ago
Views:

1 Vol. 49 No (July 2008) Ajax 1 Ajax Ajax JavaScript MVC A Framework for Ajax-enabled Business Applications Takahide Matsutsuka 1 Ajax gains public attention these days. Using Ajax, we can provide rich user interface using Web browsers without any extension. To apply Ajax for business applications, however, we have problems such as developing a lot of JavaScript code effectively. Therefore we analyzed current problems and developed an Ajax framework, which provides a function extending mechanism and MVC approach, for Ajax-enabled large scale business applications Web 2.0 1) Web Ajax 1 Fujitsu Laboratories of Europe Ltd. Ajax Asynchronous JavaScript + XML 2005 Jesse James Garrett XMLHttpRequest JavaScript JavaScript HTML DOM Document Object Model Ajax Zimbra 2) Google Maps 3) Ajax JavaScript Ajax JavaScript Ajax Ajax Ajax 1.2 Ajax Ajax XML JSP HTML JavaScript Google Web Toolkit 4) HTML XML JavaScript DOM Prototype 5) script.aculo.us 6) Dojo 7) JavaScript 2360 c 2008 Information Processing Society of Japan

To apply Ajax for business applications, however, we have problems such as developing a lot of JavaScript code effectively.

2 2361 Ajax 2 (4) (1) Ajax Web JavaScript 1 (2) (3) 1 (4) 3. Ajax 2 Ajaxian.com ) Prototype script.aculo.us Dojo (1) Ajax JavaScript 1 Prototype Subclass Superclass Dojo JSAN 9) 2 3 Dojo dojo.require 1 Prototype Fig. 1 An example of Prototype.

com 2006 8) Prototype script.aculo.us Dojo 3.

3 2362 Ajax 4 2 Fig. 4 An example code of browser-depend processing. Fig. 2 Class loading of existing toolkits. methoda 3 Dojo Fig. 3 An example of Dojo toolkit. Superclass Superclass dojo.define require 1 1 Prototype 3.2 Ajax Ajax JavaScript Java 2 (3)

4 2363 Ajax JavaScript 3.4 MVC Java C++ MVC JavaScript MVC 2 (1) (2) Ajax 3.5 Ajax WYSIWYG 4. Ajax JavaScript HTML JavaScript Fig. 5 An overview of the framework. 4.2 if HTML 1 MVC JSON JavaScript Object Notation JavaScript 4.4 MVC Web form input submit

Ajax 3 1.2 JavaScript HTML JavaScript 5 4.1 5 Fig.

5 2364 Ajax 6 MVC Fig. 6 The structure of MVC in our framework. Ajax HTML onxxx MVC JavaScript addeventlistener attachevent onclick MVC 6 Model View Controller 5. Ajax 4 7 Fig. 7 An example of class definition Superclass Subclass REQUIRES SU- PER CLASS NAME 8 findclass REQUIRES findclass JavaScript

6 2365 Ajax foo.subclass = function() {... } foo.subclass[ ] ={... } foo.subclass.prototype[ ] ={... } foo.subclass [ ] 10 COMPATIBLE SUPPORT true Internet Explorer r BrowserEvent registerevent 8 BrowserEvent ie registerevent Internet Explorer registerevent 8 Fig. 8 A procedure of class loader Fig. 9 A working class. Fig. 10 An example of browser-depend code.

2 [ ] 10 COMPATIBLE SUPPORT true Internet Explorer r BrowserEvent registerevent 8

7 2366 Ajax Fig. 12 Activation of function attachment. Fig. 11 Initialization of function attachments HTML i1 i2 i3 i4 ID 4 FocusManager i1 i2 i4 i1... AutoCompleter i2 i3 13 Fig. 13 Widgets and function attachments. 5.4 MVC JavaScript MVC JSON

.. AutoCompleter i2 i3 13 Fig. 13 Widgets and function attachments.

8 2367 Ajax Fig Synchronization of a model and a view. 15 MVC Fig. 15 An example code of using MVC. rcf:= { } {} 14 JavaScript JSON JSON Model API API 15 3 rcf:type= Model 1 JSON modeldata modelschema model1 text1 model1.name modeldata name modeldata name text1 text2 3 Formatter modeldata price 1,000 2 price type: integer 2 (1) Model API validate (2) 1 text2 ValidationHelper text2 text2 ValidationHelper rcf:onvalidationsuccess rcf:onvalidationerror ValidationHelper text2 16 ValidationHelper

name modeldata name modeldata name text1 text2 3 Formatter modeldata price 1,000 2 price type: integer 2 (1) Model API

9 2368 Ajax 1 rcf:onvalidationsuccess EventHandler JavaScript handlers Fig. 16 Validation sequence. 17 Fig. 17 An example of event handler MyText1 mouseover mouseout click MyText2 click Visual Basic r Ajax Web Single Page Interface SPI 1 HTML div rcf:id= fragment1 rcf:type= FragmentContainer rcf:src= fragment.html /div fragment.html HTML HTML fragment1.activate(); HTML HTML API

2 17 MyText1 mouseover mouseout click MyText2 click Visual Basic r Ajax Web Single Page Interface SPI

10 2369 Ajax (1) HTML (2) if 5.4 MVC (3) (4) HTML Ajax JSP Google Maps JavaServer Faces Cardemo 1 1 Cardemo Table 1 LOCs of Cardemo example. JavaScript MVC Ajax 6.4 Ajax Java jar Dojo JavaScript MVC

2 1 Google Maps JavaServer Faces Cardemo 1 1 Cardemo Table

11 2370 Ajax UJI DWR JSON MVC Ajax Ajax 18 JSF Fig. 18 Relation between JSF and our framework. Ajax 6.5 Ajax JSF UI JSF 18 View JSF Ajax Ajax JSF 6.6 UJI 10) DWR 11) MVC Ajax WYSIWYG Ajax Web MDA 12) 14) Ajax 1 Ajax Ajax HTML DOM

12 2371 Ajax 1) O Reilly, What Is Web 2.0 (2005). news/2005/09/30/what-is-web-20.html 2) Zimbra. 3) Google Maps. 4) Google Web Toolkit. 5) Prototype. 6) script.aculo.us. 7) Dojo toolkit. 8) Ajaxian.com, Ajaxian.com 2006 Survey Results. DisplaySummary.asp?SID= &U= ) JavaScript Archive Network. 10) JSP Web UJI 2000-SE-129 (2000). 11) Direct Web Remoting. 12) Matsutsuka, T.: Model-Driven Development Approach to Web Applications, The IASTED International Conference on Software Engineering 2005 (Feb. 2005). 13) Web Vol.46, No.5 (2005). 14) Web Vol.45, No.1, pp (2000). ( ) ( ) Fujitsu Laboratories of Europe Limited Web Carnegie Mellon University

org/ 8) Ajaxian.com, Ajaxian.com 2006 Survey Results. http://www.surveymonkey.com/ DisplaySummary.asp?SID=2402465&U=240246533425 9) JavaScript Archive Network. http://www.openjsan.

paper.pdf

paper.pdf 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.