J. Software Engineering & Applications, 2010, 3: 73-80 doi:10.4236/jsea.2010.31009 Published Online January 2010 (http://www.SciRP.org/journal/jsea) Integrated Web Architecture Based on Web3D, Flex and SSH Wenjun ZHANG1,2 1Department of Computer Science & Technology, China Women University, Beijing, China; 2Research Institute of Applied Com- puter Technology, China Women University, Beijing, China. Email: [email protected] Received September 9th, 2009; revised October 9th, 2009; accepted October 19th, 2009. ABSTRACT Focusing on the problems occurred in traditional 2D image-word-based web applications, the author put forward con- cept of integrating Web3D, Flex and SSH technologies to create advanced “3D Virtual Reality & RIA” web application architecture, researched mechanisms of their architectures, and implemented their integration and communication & interaction: Flex and Struts2 via XML, Flex and Spring & Hibernate via BlazeDS, Flex and Web3D via JavaScript. The practice has shown that the integrated web architecture based on Web3D, Flex and SSH is effective and valuable. Keywords: Web Architecture, Web3D, Flex, SSH, RIA, BlazeDS 1. Introduction together which result in low reuse, high couple and dif- ficult maintainability. E-commerce, e-government and enterprise-information- Because the traditional web technology seriously bot- ization (CGE) are web applications in relevant domains, tlenecked progression in CGE applications, new tech- and have been quickly developed with the improvement nologies such as Web3D, RIA (Rich Internet Application) of web technology. The transaction mode between cus- and SSH (Struts, Spring, Hibernate) are introduced into tomers and suppliers has been changed from direct pur- web application development. In other words, Web3D is chase in stores to shopping in internet; and information applied to simulate product shape and functions in 3D management system within enterprises has become inte- and interact with customers on the client-side; Flex grated on internet covering SCM, CRM and ERP. technology, a kind of RIA, realizes business process, hu- However, CGE encounters some serious problems as it man-computer interaction and data visualization (charts, develops. For example, products in e-commerce websites curves) on the client-side; SSH, three popular web design can only be exhibited by images and words. This kind of frameworks, implements transaction logic and data per- manifestation can’t express completely structures and sistence on the server-side which develops low-coupling functions of the products, which reduces the client's de- codes. The web architecture studied in this article features sire to purchase. Tedious interactive form, poor effi- 3D virtual reality, high interaction, abundant user visual ciency and unsatisfactory user experience widely exist in experience, and low coupling & high maintainability. current CGE applications. In the article, the features and application development The problems are essentially due to the weakness of methods on Web3D, Flex and SSH technologies in CGE the traditional web technology based on HTML web applications are studied. The advanced and integrated pages—thin client B/S (Browser/Server) mode. HTML web architecture (shown as Figure 1) based on Web3D, web pages only display content, but not contain the script. Flex and SSH is constructed in order to convert the tradi- The client-side can only requires data through request tional thin client B/S mode featured by Image-Word into and response session because all datum host on the advanced rich client mode featured by 3D Virtual Real- server-side. The content from server contains not only ity-RIA. data but also a lot of redundant display formats. Unlike desktop applications, browsers (IE, Firefox) are not 2. Web3D Technology and Application in equipped with multifunction controls such as DataGrid, E-Commerce & Data Visualization Tree, and PieChart. The codes in presentation, transac- tion logic and data persistence layers, are tightly coupled Web3D technology enables e-commerce with three Copyright © 2010 SciRes JSEA 74 Integrated Web Architecture Based on Web3D, Flex and SSH Figure 1. Integrated web architecture based on Web3D, Flex and SSH cording to computer graphics, and is rendered real time. Human-computer interaction is implemented by adding event response. Model-based Web3D mainly includes X3D, Cult3D, Viewpoint and O3D released newly by Google. 2) Image-based Web3D. Its core technology is based on panorama, which is a kind of closed-view shot around from some point in space. Image-based Web3D is also classified into cylindrical panorama and spherical pano- rama. The panorama may be required through photo- graph and computer-3D rendering. Image-based Web3D Figure 2. RIA & Web3D virtual shopping city mainly includes Java3D and Flash3D. 2.2 Web3D Application Framework dimensional presence of the products and the scenes. Real product features such as shape, functions and scenes Web3D player engine or plug-in is previously installed in are simulated: customer can navigate in virtual 3D-store browser in the client PC before 3D models are rendered [1–2] shown in Figure 2, interact with 3D virtual prod- on the client-side. Web3D application framework is ucts, and purchase goods. Their virtual shopping experi- shown in Figure 1. Web3D models & scenes and built-in ences are almost as vivid as in real stores. The success scripts are downloaded from Web3D application server, rate in sales is expected to be much higher than before interpreted, rendered, and interacted with users by because customer can feel the goods in this 3D store, and Web3D player engine [4–5]. it becomes unnecessary for them to check products in 2.3 Web3D Design Method Based on Separation real stores before making purchase decisions. In the fol- lowing sections, the core technologies for Web3D and between Model and Function Script application development will be presented. During authoring Web3D models one design method is 2.1 Web3D Implementation Technology and often adopted based on separation [1] between model and function script. This approach is to author Web3D virtual Solution product models and scenes by ViewPoint, Cult3D or According to implementation methods of virtual 3D O3D, and use XML, Java or other script languages to models and scenes the technologies can be classified into program scripts for the authored 3D models so as to two categories [3]: Model-based Web3D and Image- change 3D model view with user’s actions and to re- based Web3D. sponse different events such as click, mouse movement 1) Model-based Web3D. It is also called landscape- and drag-drop generated from users. Thus, the 3D mod- based geometric. It is to construct virtual models and els are independent from their scripts. scenes with geometric entity. The geometric entity model The programming method of separation between is constructed by different 3D authoring software ac- model and function script can improve flexibility, reus- Copyright © 2010 SciRes JSEA Integrated Web Architecture Based on Web3D, Flex and SSH 75 ability and scalability of Web3D product models. guage that primarily describes screen layout. In this re- spect it is similar to HTML. Using MXML tags, you can 3. Flex Technology and Application in add components such as form controls and media play- Web & Data Visualization back to layout containers such as panel. In addition to screen layout, MXML could be used to describe effects, Most of the current CGE information systems are B/S transitions, data models, and data binding. MXML is so thin client application mode based on HTML pages. With robust that it is possible to build many applications en- increasing complexity this application mode is not longer tirely with MXML. Flex Builder enables developers to able to meet the requirements of providing interactive construct MXML with a What-You-See-Is-What-You- and rich user experience. Get approach--build basic Flex applications without Now RIA, the next generation web technology [6], has writing any code. been developed, which combines interactive user ex- 2) ActionScript. ActionScript is the programming lan- perience with the deployment flexibility. The rich client guage understood by Flash Player and is the fundamental technology in RIA can connect with existing back-end engine of all Flex applications. Even though MXML applications by asynchronous communication between simplifies screen layout and basic tasks, ActionScript can client and server. It is a service-oriented model with good not only do everything that MXML can do, it can also do adaptability. It improves the user interaction of web ap- many things that MXML cannot do. For example, Ac- plication, and offers abundant user experiences. tionScript can respond to events such as mouse clicks, Flex [7] is one kind of RIA technology, a framework while MXML can not. Although it is possible to build an for creating RIA based on Flash Player. Its core is application entirely with MXML or entirely with Ac- MXML, a markup language based on Extensible Markup tionScript, it is more effective to build applications with Language (XML) that makes it really easy and efficient both MXML and ActionScript and the two work well to create applications. together. MXML is best suited for screen layout and ba- Flex offers highly visual, fluid, and rich experience sic data features, while ActionScript is best suited for and user interface components. When JEE and Flex are user interaction, complex data functionality, and any integrated together in a Web application, the best of both custom functionality not included in the Flex class li- worlds are combined. JEE provides the power and stabil- brary. ActionScript is supported natively by Flash Player, ity on the server-side, while Flex and Adobe Flash Player and does not require any additional libraries to run--all make the rich, dynamic user interfaces possible on the native ActionScript classes are packaged in the Fash client-side. package or in the top-level package. In contrast, the Flex 3.1 Flex Framework Technology and Development framework is written in ActionScript, but those classes Process are included in a .swf file at compile time.