Over a million developers have joined DZone.

Tangyuan Web, Control Layer Components in the Tangyuan Framework

DZone's Guide to

Tangyuan Web, Control Layer Components in the Tangyuan Framework

In this article, we offer an introduction to this open source framework and show you some basic code to get your app off the ground.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

1. Introduction

Tangyuan-web is the control layer component in the Tangyuan framework. It takes the component and plug-in as the thought, and takes the XML configuration as the core. With little to no Java code, you can complete the development of the control layer.

2. Features

  1. For developers, it's simple and efficient.
  2. Supports stand-alone mode, distributed mode, and mixed mode.
  3. During the development of the control layer, each link is abstractly defined, and the formation of a standardized, complete life cycle is enabled. 
  4. Stratified development model. Based on the definition of the life cycle, you can develop it on a layer-by-layer basis.
  5. Componentization and pluggable. Follow the Tangyuan framework for unified architecture.

Source Address: https://github.com/xsonorg/tangyuan2

Official website: http://xson.org/

3. Lifecycle

Image title

The above picture describes the controller's entire lifecycle. For each blue box in the picture, there is a separate processing section, where:

  1. The Data assembly, Before Handler, After Handler processes are used by tangyuan-web components in the AOP module to provide functional support.
  2. Get cache and Set cache are provided by the tangyuan-cache component. For Get cache, it appears twice in the figure above and is represented by a dashed box. It is processed before Before Handler or processed after Before Handler, through the controller configuration file. This can be set in the c node's cacheInAop attribute can; Set cache and Get cache use the same processing mechanism.
  3. For the Execute link, if it is a custom controller, it works on behalf of the controller method call; and if it is a simple controller, the request parameters from the controller are forwarded to the backend services, and obtain the results of service response.

4. Complete Example

a. Add dependent JAR:


b. Add the web component to the tangyuan configuration file tangyuan.xml:

<?xml version="1.0" encoding="UTF-8"?>
<tangyuan-component xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    <!--Add web component -->
    <component resource="component-web.xml" type="web" />


c. Configure the tangyuan-web component in the component-web.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<web-component xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    <!--Controller plugin-->
    <plugin resource="controller/controller.xml"/>
    <plugin resource="controller/controller-news.xml"/>


d. Configure the controller in the plugin file controller.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-controller xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    <!-- Query the news list -->
    <c url="/news/newslist" validate="news/newslist" transfer="{service}/news/newslist" />


e. Configure web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:javaee="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"




Through the above five steps, we have built a web application, based on tangyuan-web components. Then the front-end can use /news/newslist.xco to visit our web system.

5. Features and Examples

5.1 A Row of XML Configuration Implements a Controller Definition

<!-- Query the news list -->
<c url="/news/newslist" transfer="{service}/news/newslist" />

If you use URL auto-mapping mode, you do not even have to manually configure the controller in XML.

5.2 Support for Multiple Modes

  1. Single system mode: all controllers and services are in one system.
  2. Distributed mode: controllers and services belong to different systems.
  3. Mixed mode: this is the combination of the above two modes.


<!-- Distributed mode -->
<c url="/news/newslist" transfer="{service}/news/newslist" />

<!-- Single system mode -->
<c url="/news/newslist" transfer="/news/newslist" />


The {service} in the example represents the domain name of the system where the service is located. The single system mode does not need to specify the domain name of the service because the controller and the service are in the same system.

5.3 Permission Verification

Set the permission flag

<c url="/news/newslist" permission="y"/>

Define the permission interceptor

public class MyPermissionFilter extends AbstractPermissionFilter {

    public boolean permissionCheck(String permission, RequestContext requestContext) {
       if (null == permission) {        // No need to log in
         return true;
       } else {                         // Need to log in
         // TODO Verify user permission
         return true;
       return false;

    public void authFailed(RequestContext requestContext) {
        // TODO The processing logic after authentication failure

Configure the permission interceptor



In the above example, when the controller is defined, its permission flag permission="y" is set, and then it's passed through the interceptor to its authority to judge and deal with.

5.4 Data Conversion

For XCO requests, the data conversion will convert it to XCO objects; for GET requests or form submissions, the tangyuan-validate component can also be converted to XCO objects.

Related information:

XCO: https://dzone.com/articles/introduction-to-the-xco

XCO-JS: https://dzone.com/articles/xco-js-a-data-based-js-framework

5.5 Data Verification

Define validation rules

<?xml version="1.0" encoding="UTF-8"?>
<validate xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="http://xson.org/schema/tangyuan/validate/rule.xsd" ns="user">

    <ruleGroup id="addUser" desc="add user">
       <item name="userName" type="string" require="true" desc="user name" message="Illegal user name">
         <rule name="interval_length" value="3,6"/>
         <rule name="match">^[a-zA-Z0-9\u4E00-\u9FA5]+$</rule>
       <item name="age" type="int" require="true" desc="age" message="Illegal user age">
         <rule name="interval" value="10, 150"/>


Define the controller

<c url="/user/addUser" validate="user/addUser" transfer="{service}/user/addUser" />


Define the validation rule in the tangyuan-validate component, specify the validation rule in the controller's definition, such as validate="user/addUser", so that the validation of the requested data can be achieved. On the tangyuan-validate component, we will describe this in detail later.

5.6 Use Cache

Define the cache

<cache id="cache01" type="local">
   <property name="strategy" value="time" />
   <property name="survivalTime" value="10" />
   <property name="log" value="true" />

Define the controller

<c url="/news/newslist" transfer="news/newslist" cacheUse="id:cache01; key:${url}${arg}; expiry:10"/>


Define the cache in the tangyuan-cache component, specify the use of the cache in the controller's definition, such ascacheUse="id:cache01; key:${url}${arg}; expiry:10", so that you can increase the use of the cache in the controller's lifecycle. 5.7 AOP

Defines the AOP implementation class

public class MyDataAssembler {

    // Assemble user information
    public void assembleUserInfo(RequestContext context) {
       XCO xco = (XCO) context.getArg();
       XCO tokenUser = context.getAttach().get("tokenUser");
       xco.setXCOValue("tokenUser", tokenUser);

Configure the controller AOP

<!-- Instantiate the implementation class -->
<bean id="myDataAssembler" class="org.xson.tangyuan.demo.MyDataAssembler" />

<!-- Define the controller -->
<c url="/demo/placeOrder" transfer="demo/placeOrder" />

<!-- Configure the controller involved in the AOP -->
<assembly call="{myDataAssembler}.assembleUserInfo">


Through the above configuration, in the access to /demo/placeOrder controller, in the data assembly link, will be able to send the user's token information package to the request object.


Through this article, we have a preliminary understanding of tangyuan-web components. If you are interested in this, I've provided a link below that you can use to get more detailed information.

tangyuan-web technical documentation: http://www.xson.org/project/web/1.2.0_en/

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

tangyuan ,web dev ,web application development ,web components

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}