Vol. 49 No. 7 2360 2371 (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. 1. 1.1 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
2361 Ajax 2 (4) 1.3 2 3 4 5 6 7 2. (1) Ajax Web JavaScript 1 (2) (3) 1 (4) 3. Ajax 2 Ajaxian.com 2006 8) Prototype script.aculo.us Dojo 3.1 2 (1) Ajax JavaScript 1 Prototype Subclass Superclass Dojo JSAN 9) 2 3 Dojo dojo.require 1 Prototype Fig. 1 An example of Prototype.
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 4 3.3 Ajax JavaScript Java 2 (3)
2363 Ajax JavaScript 3.4 MVC Java C++ MVC JavaScript MVC 2 (1) (2) Ajax 3.5 Ajax WYSIWYG 4. Ajax 3 1.2 JavaScript HTML JavaScript 5 4.1 5 Fig. 5 An overview of the framework. 4.2 if 4.3 3 3 HTML 1 MVC JSON JavaScript Object Notation JavaScript 4.4 MVC Web form input submit
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. 5.1 7 Superclass Subclass REQUIRES SU- PER CLASS NAME 8 findclass REQUIRES findclass JavaScript
2365 Ajax foo.subclass = function() {... } foo.subclass[ ] ={... } foo.subclass.prototype[ ] ={... } foo.subclass 7 9 1 5.2 [ ] 10 COMPATIBLE SUPPORT true Internet Explorer r BrowserEvent registerevent 8 BrowserEvent ie registerevent Internet Explorer registerevent 8 Fig. 8 A procedure of class loader. 9 10 Fig. 9 A working class. Fig. 10 An example of browser-depend code.
2366 Ajax 12 11 Fig. 12 Activation of function attachment. Fig. 11 Initialization of function attachments. 5.3 11 HTML 12 13 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 5.4.1 JSON
2367 Ajax Fig. 14 14 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
2368 Ajax 1 rcf:onvalidationsuccess EventHandler JavaScript handlers 5.5 16 Fig. 16 Validation sequence. 17 Fig. 17 An example of event handler. 5.4.2 17 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 6. 4 5 6.1 2
2369 Ajax (1) 5.1 5.5 HTML (2) 5.1 5.2 if 5.4 MVC (3) 5.3 5.5 (4) HTML Ajax JSP 6.2 1 Google Maps JavaServer Faces Cardemo 1 1 Cardemo Table 1 LOCs of Cardemo example. JavaScript 4 3 6.3 1 MVC Ajax 6.4 Ajax Java jar Dojo JavaScript MVC
2370 Ajax UJI DWR JSON MVC 7. 7.1 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 7.2 3.5 6.3 WYSIWYG Ajax Web MDA 12) 14) Ajax 1 Ajax Ajax HTML DOM
2371 Ajax 1) O Reilly, What Is Web 2.0 (2005). http://www.oreillynet.com/pub/a/oreilly/tim/ news/2005/09/30/what-is-web-20.html 2) Zimbra. http://www.zimbra.com/ 3) Google Maps. http://maps.google.com/ 4) Google Web Toolkit. http://code.google.com/webtoolkit/ 5) Prototype. http://www.prototypejs.org/ 6) script.aculo.us. http://script.aculo.us/ 7) Dojo toolkit. http://dojotoolkit.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.org/ 10) JSP Web UJI 2000-SE-129 (2000). 11) Direct Web Remoting. http://getahead.org/dwr/ 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.16 21 (2000). ( 19 10 11 ) ( 20 4 8 ) 1971 1994 1996 Fujitsu Laboratories of Europe Limited Web 2001 2002 Carnegie Mellon University