Subscribe Now Subscribe Today
Research Article

Customizable WEB UI of Based On Templates

LiQun Shan, Wei Wei and Yanchang Liu
Facebook Twitter Digg Reddit Linkedin StumbleUpon E-mail

Design of web user interface (WEB UI) plays a very important role in the humanization,Personality and intelligence of the developments of web application. Customization of the user interface is one of the extremely important researches of computer software technology. Relating to mutual operation in design of web user interface generally, software developers are required with coding base and professional knowledge. Traditional design pattern neglect property of reuse and customization sometimes and lengthen development cycle. It is necessary to grogram lots of codes generally because most existing UI development tools are designed aiming at professional developer. Therefore,it is meaningful to do the researches of the user interface customization. Based on the technical analysis, a whole framework platform is builded based on the MVC design pattern and a simple and full-visual WEB UI development is designed and developed. The platform describes user interface with meta model technology, implement coding reuse and UI customization based on template technology. In the practice of web UI design, applying WEB UI customization tool based on the achievement related with above work and the technology, some WEB application systems are realized efficiently and achieve a universal good evaluation coming from users and developers. At the end of this study summarizes the realization and research of WEB UI customize personalized custom-made method.

Related Articles in ASCI
Search in Google Scholar
View Citation
Report Citation

  How to cite this article:

LiQun Shan, Wei Wei and Yanchang Liu, 2010. Customizable WEB UI of Based On Templates. Information Technology Journal, 9: 1677-1681.

DOI: 10.3923/itj.2010.1677.1681

Received: May 31, 2010; Accepted: July 15, 2010; Published: August 21, 2010


WEB interface is in the WEB environment, user-oriented graphical interface. In the interactive system development, WEB interface design is a very important part. WEB interface design tasks, including the themes and designers to show the functions to be achieved. This template article is an HTML template file that contains the parameters of the template tag. A standard page template files by changing the label to change its content and layout. Template-based WEB interface customization system template-based WEB interface customization system is the support of a WEB interface management tool or a combination of a set of tools, which formed the basic framework for the design WEB interface facilities. This system is proposed for the solution to practical problems, is a human, process and technology integration, need to Renyuanzuzhi, Ye Wu WEB interface management system (Gottlob et al., 2007) for the establishment of so many common Xietiao efforts. I generally believed that a template-based WEB interface customization system system must contain at least the following four subsystems: WEB interface collection system, distribution system management workflow system. Four subsystems linked together, are indispensable, each subsystem is a complete system essential component. Which, WEB based interface system is the system is the interface customization template source, which is behind the management to provide content and management system is the center of the entire system, which is responsible to the template will be collected and classified the organization, storage and information flow-oriented distribution system and workflow system is a link between all the other systems. Defined by the system and system components can be found, the system's main objectives are to support heterogeneous platforms WEB interface design and management. Information on heterogeneous platforms including both structured forms of information, but also includes semi-structured and unstructured forms of information. How do I manage that information as the key problem? This will be in the form of meta-data model to represent these different types of information. XML XSLT has not only used to convert HTML or other text format, a more comprehensive definition should be: XSLT (Gottlob et al., 2007) is used to convert XML document structure language. XSLT workflow shown in Fig. 1.

Image for - Customizable WEB UI of Based On Templates
Fig. 1: Threat scenario and secure relay


Currently popular user interface development tools primarily. NET and Java are two main system. One NET's ease of use in particular was to the people's approval, but the operating system actually is limited to Windows, open differential, even though Microsoft has provided FreeBSD version. NET framework, but is currently limited to academic research. In the traditional desktop software made a lot of interface model. Such as: PAC model, MFC model, interface model statement, FMP model. The proposed interface model greatly improved user interface development efficiency and quality. WEB interface description between the special Nature, drawing on the traditional desktop interface model, there is an example: MODFM, AutoWeb, Rational XME so used WEB interface table Up method or tool, but these methods can not unified, fully described on the WEB interface. WEB interface using XML (Haw and Lee, 2007) description Layer can effectively isolate and information layer, is for the WEB and has a platform-independent applications, equipment reuse, etc. (Gao et al., 2010; Xiao et al., 2009). Today's enterprise information management software in the gradual development of the WEB on, but the fatal flaw in the WEB is very difficult to build simple WEB ideal user interface, the lack of simple and practical, user-oriented, WYSIWYG WEB (Kwon, 2003) custom user interface framework, the Man using MVC design pattern, using the meta model describes the WEB user interface, a template technology, visual modeling technology, data binding Set, data caching technology with the use, proposed a fully visual, interactive user interface WYSIWYG WEB Model, enabling the user interface and code reuse. Based on the analysis of the user interface customization technology,an template-based user interface customization mechanism is proposed, by which WEB UI is builded and reused simply, have been put forward; In addition, based on customer demand of WEB UI, analyzes its permissions settings characteristics, based on the role of the security permissions mechanism of different user access technology client needs.

Metadata model: Its own metadata to describe data mainly refer to those only with some information related to the data itself, such as data identification information, data generation time, data quality information and data dissemination of information such as the existing metadata standards. The description of the relationship between data, metadata describes the various data sets are through the relationship between what constitutes an organic whole, such as the composition of basic relations.

Role-based access control (RBAC) technology: Role-based access control model (Li et al., 2007) 90 years of the 20th century out of a new model, the basic concept of this model to permissions (Permissions) and roles (Role) linked to the role of users as appropriate member access to the role of the license.

Here, first gives the basic idea of RBAC and then RBAC97 model-based analysis of its characteristics.

The basic idea and the mainstream model: The basic idea of RBAC is: authorized access to the user, usually by the user in an organization's role to determine. RBAC in which the user's role within the organization for access authorization and control. As shown in Fig. 2.

The traditional access control directly linked to access to the subject and object, but in the middle of the RBAC roles, the role of communication through the subject and object. In RBAC, the user ID for authentication and audit records are very useful, but the real decision to access a user identity corresponding to roles. RBAC97model actually describes a control system and access to resources and its upper part is the role and authority, lower part of the management role and authorization management. Post RBAC (Wang et al., 2007) model constitutes a basic collection of entities, namely the user, role, authority, management roles and management authorization. Management role or management authority to the role of non-management or management authority from and can only be granted general permission to general roles, administrative rights can only be given to management roles.

Image for - Customizable WEB UI of Based On Templates
Fig. 2: Customize UI system architecture


Interface customization system components: Interface customization based on template mainly consists of six components: page template selection, drag and drop the Label control, reader interface properties, interface colors style interface, file management, interface cache.

Custom web client interface for the specific process
User interface configuration:
User interface is configured to run in software, before running through the software, the initial interface configuration, prepared by the interface software functions can be cutting, restructuring, expansion, in order to achieve some special needs, this is a static user interface defined.

Figure 4 shows a configuration interface, the basic idea is: using interface customization program before running the main program in a variety of interface customization and save the interface configuration file, which runs the main interface program will pre Reading interface configuration file, so as to achieve the desired effect of the interface. See also in Fig. 3.

Personality-based custom user interface is the software is running, the user can own habits, on Jiemian elements (Ru menus, toolbars, Jian Pan orders) properties (e.g., Wen Zi, icon, size, location) Jinxing changes When the software end of the run-time, interface customization will be saved for the next use, this is the dynamic modification process of the user interface.

Image for - Customizable WEB UI of Based On Templates
Fig. 3: Interface scheme file

Image for - Customizable WEB UI of Based On Templates
Fig. 4: Customize UI relation

Figure 4 shows a customized interface ideas, in the normal use of the state of the software can be visible interfaces of the tool bar to achieve a custom interface elements and interface state saved for the next use.

Template-based web interface data caching: Template-based Web interfaces and templates of configuration information, page layout, theme and other information all stored in a database, if each read from the database, it will affect performance, since processing the data cache use.

Two auxiliary classes: Uit.Settings.Cache.Key to achieve access to the cache key name, its methods are static. As a Web site can contain multiple page templates, page templates some independent set, so the cache key name to distinguish different template set. Key class for the key name with the page template for each alias as a prefix.

The following are key program fragment:
Image for - Customizable WEB UI of Based On Templates

Uit.Site.Configuration namespace UitSettings class, PageSettings class, ModuleSettings class; Uit.Design namespace LayoutManager class, ThemeManager class, have applied the cache. General process is: first determine there are no current Cache cache value, if read directly from the cache, if not read from the database and then saved to the current cache.

An example to UitSettings class:

Image for - Customizable WEB UI of Based On Templates

For the cache to remove the problem, UIT one hand, rely on using the cache automatically removed, such as the above code in the settingDependencies, on the other hand out explicitly in the program, such as UitSettings class, when to change the site configuration, to remove cache.

Image for - Customizable WEB UI of Based On Templates
Fig. 5: The selected roles is defined in a ring constraint

Image for - Customizable WEB UI of Based On Templates
Fig. 6: Role-based access model

The following are key program fragment:public static void UpdateUitSetting(int portalID, string key, string value)

Image for - Customizable WEB UI of Based On Templates

Avoid the role of the ring appears inheritance, as shown in Fig. 5, that the role of A inherited the role of B, then B inherits the role of the role of C, C, in turn, inherited the role of the role of A, this situation is not allowed. Well in the design to avoid this.

System architecture: The figure below shows the architecture of the prototype system (Nath and Batanov, 2005) diagram:

The above-mentioned Fig. 6 shows the relationship of accessing model based on the roles. By the graph above, the system's basic idea is WEB interface customization, the use of interface metadata to describe the interface and stored in the metabase. Page template used in the interactive aspects of technology, on the visual interface, WYSIWYG editing and customizable interface, an increase of the business operation of the database, use the form of SQL statements to describe the business database operations, combined with the interface description of storage in the meta database. Interface customization based on data published in the first instance of the database is stored in the interface element analysis of interface data, obtained through analysis of the interface description and a description of the business database operations, database operations described by the data processing center to operate the business database. Data processing center operations through data obtained after the operation business data, which is used to describe the form of XML. The interface description of the XML business data binding, the final data release. Data released in the database operations through the data cache for processing. Final data processing center, the business database is updated.


Tradition of WEB applications user interface developed by professional staff often use some programming language to realize, is not conducive to achieving the user interface customization, reuse and maintenance. And because the system is growing and WEB software, user interface reuse a higher demand and therefore the study of non-professionals for simple, intuitive, WYSIWYG, cross-platform, language-independent WEB interface generation model is very significant.

This study is from the actual project, which aims to design a WYSIWYG WEB user interface generation model. Through research and practice, this study presents a common WEB based user interface template generation model, allowing users to reuse the interface as possible and user interface design more scalable, easy maintenance; using MVC design patterns, template-based development approach, the establishment of a rich library of page templates labels, labeling more efficient and smaller and suitable for WEB Shang Yun Xing and specifically the language-independent, Yi operation, easy maintenance, for the user's, Zhichifuyong function to develop its own characteristics WEB user interface is no longer complex. According to this idea build a prototype system management simple and easy to maintain and extend, with the openness, stability, versatility, scalability, reusability, customizability, WYSIWYG nature and the advantages of advanced In the course of actual operation has achieved the same acclaim.

To the ideas proposed in this study, WEB user interface can be customized to achieve a simple, solve the user interface code reuse of Wen Ti, but due to time and level of Suoxian, inevitably will Cunzai inadequate, please you experts criticized the correction.


1:  Gao, A., W. Wei and X. Xiao, 2010. Multiple hash Sub-chains: Authentication for the hierarchical sensor networks. Inform. Technol. J., 9: 740-748.
CrossRef  |  

2:  Xiao, X., X. Sun, X. Wang and L. Rao, 2009. DOSM: A data-oriented security model based on information hiding in WSNs. Inform. Technol. J., 8: 678-687.
CrossRef  |  Direct Link  |  

3:  Haw, S.C. and C.S. Lee, 2007. Structural query optimization in native XML databases: A hybrid approach. J. Applied Sci., 7: 2934-2946.
CrossRef  |  Direct Link  |  

4:  Kwon, O.B., 2003. Meta web service: building web-based open decision support system based on web services. Expert Syst. Appl., 24: 375-389.
CrossRef  |  

5:  Gottlob, G., C. Koch and R. Pichler, 2007. Efficient algorithms for processing XPath queries. ACM Trans. Database Syst., 30: 444-491.
CrossRef  |  Direct Link  |  

6:  Li, Y., M.T. Ozsu and K. Lee, 2007. XCube: Processing XPath queries in a hypercube overlay network. Peer-to-Peer Network. Appl., 2: 128-145.
CrossRef  |  Direct Link  |  

7:  Wang, H., J. Li and H. Gao, 2007. Flexible and effective aggregation operator for XML data. Inform. Technol. J., 6: 697-703.
CrossRef  |  Direct Link  |  

8:  Nath, U.K.D. and D.N. Batanov, 2005. Comparative analysis of three promising XML query languages and some recommendations. Inform. Technol. J., 4: 439-444.
CrossRef  |  Direct Link  |  

©  2022 Science Alert. All Rights Reserved