WEBX Getting Started Guide

[description] This article revolves around the WEBX web framework, trying to cascade the software stacks or ecosystems that are used throughout the development. This article does not explain the original rational things, but only to explain the various scenarios in the use of WEBX-related technology. The Guide to practice and principles that are covered in the Getting Started guide will not be expanded in detail in subsequent posts. WEBX Introduction

See WEBX official website for detailed description. First look at the official introduction of WEBX:

WEBX is a framework that can be used to do the following things:
creating a fully functional Web application
WEBX provides all the necessary features needed to create a Web application.
to create a new Web frame
WEBX allows you to customize, or even rewrite, most of the WEBX framework logic to achieve new functionality, or to integrate with other application frameworks.
Create a non-Web application
WEBX's functionality is not limited to Web applications, but is useful for all types of applications.
The Springext child framework provided by WEBX is an extension of the spring framework that simplifies the configuration of spring and enhances the extensibility of the spring component.

So, WEBX, based on the spring component, provides a basic platform for developing Web applications and non-Web applications. Essentially, WEBX can be used as a spring container, and WEBX can do anything that spring allows. The feature of WEBX is still on the web, not just as a spring container, but as a complete, extensible MVC Framework.

WEBX = Spring + component + Velocity

From an official point of view, WEBX's positioning is not just a web framework, but rather a framework that emphasizes flexibility and scalability. For this, everybody behind to have a good experience ha. There are a lot of popular MVC frameworks, SSH, Spring MVC is more mainstream. WEBX's advantages and disadvantages of the official also has the explanation. Here I dare to casually say, who good who is bad, I choose to learn WEBX for two reasons: Webx built a complete ecosystem, providing a variety of support mature reliable, scalable

Some details about WEBX, no longer detailed here, use the WEBX development site, usually combined with the velocity template engine and Ibatis orm. The following is a brief introduction to the relevant technologies: Spring

The spring framework is created because of the complexity of software development. Spring uses basic JavaBean to accomplish things that were previously only possible by EJB. However, the use of spring is not limited to server-side development. In terms of simplicity, testability, and loose coupling, most Java applications can benefit from spring. -[Baidu Encyclopedia]-Purpose: To address the complexity of enterprise application development: The use of basic JavaBean instead of EJB, and provide more enterprise application function Velocity

Velocity is a Java-based template engine (template engine). It allows anyone to refer to objects defined by Java code simply by using a simple template language (template language).
When velocity is applied to web development, the interface designer can develop a Web site that follows the MVC architecture synchronously with the Java program developer, that is, the page designer can focus on the display of the page only, while the Java program developer focuses on the business logic code. Velocity separates Java code from Web pages, which facilitates long-term maintenance of web sites, as well as providing an alternative to JSP and PHP. -[Baidu Encyclopedia]- IBatis

MyBatis is an excellent persistence layer framework that supports common SQL queries, stored procedures, and advanced mappings . MyBatis eliminates the manual setting of almost all JDBC code and parameters and the retrieval of result sets . MyBatis uses simple XML or annotations for configuration and raw mapping, mapping interfaces and Java POJOs (Plain old Java Objects, normal Java objects) to records in the database. webx Getting Started Guide Creating WEBX Applications

Detailed content reference: http://openwebx.org/docs/firstapp.html
The WEBX project uses MAVEN to build, creating WEBX applications and creating common MAVEN projects, and the IDE used in this article is Intelij idea.
1. Create WEBX Project

Command line:

MVN archetype:generate 
-dgroupid=com.alibaba.webx 
-dartifactid=tutorial1 
-dversion=1.0-snapshot 
-dpackage=com.alibaba.webx.tutorial1 
-darchetypeartifactid=archetype-webx-quickstart 
- Darchetypegroupid=com.alibaba.citrus.sample 
-darchetypeversion=1.8 
-dinteractivemode=false

IDE Development:

    1. Create Maven project, after entering the page, select Add Archetype
    2. Add the corresponding content: see below Figure
    > Archetypeartifactid=archetype-webx-quickstart   Archetypegroupid=com.alibaba.citrus.sample 
    archetypeversion=1.8               
    3. Create a new application 4 from the add Archetype
    . Subsequent content is the same as creating a common application

2. Run

MVN Jetty:run
localhost:8081 access to the sample Web site, deployment can be deployed in a nginx+tomcat manner, in the application server-related blog to be introduced.

Using idea to integrate the development environment, you can run it directly using the IDE. Specific content suggestions look at the Maven Authority guide and the use manual for idea. Next look at the Web-given sample program, prying down the webx design ideas, so that we can develop their own applications. Example Description

When you create an application, the default provides an example Web site. First look at the directory structure of the entire code, and the main directory contains the Java and WebApp two subdirectories. Java directory code in the background logic for the implementation of the Code, WebApp is the root directory of the site, respectively, corresponding to the code module and templates. Let's look at how the front-end and background interact. Before the introduction, look at the module and templates. Module

role : WEBX3 as an MVC framework, the module component assumes the responsibility of the Controller (Controller). Module is responsible for receiving client data input, executing business logic, responding to customer output, data validation, page flow control, etc.
Module is divided into 3 types: Action,screen,control screen for page display or output preparation data Model Action is responsible for receiving Form submission and data write control controls can be nested screen processor, for the Assemble screen responsibilities: respond to read-only functions, such as displaying queries or viewing results, and constructing the necessary data model for this purpose. Operating mechanism: WEBX URL in general need to map to a screen class for logical processing, a screen typical scenario: According to ProductId view Product information, according to OrderID Modify order state, for example: Http://lcoalho st/product/view_product.htm?productid=100035

public class Viewproduct {public 
    void execute (@Param (name = ' productId ') String Productid,context context) { 
        Pro Ductdo productdo = Productao.find (productId); 
        Context.put ("Product", productdo);
    } 
 

ActionResponsibilities: Handle new, modified, deleted and other data changes requests and operations; Constraints: There are usually form submissions, and the ability to authenticate using Formservice must use the Action. Typical scenarios: For example: Submit an offer, modify member information, and order approval.
Example: Products-New products Http://localhost/view_product.htm?action=ProductAction&event_submit_do_create=true
Example: Product-Modify Product Http://localhost/view_product.htm?action=ProductAction&event_submit_do_update=true

public class Productaction { 
    /** * New product 
    /public void Docreate (@FormGroup (name = "Productform") Productvo product VO) {
         productao.create (productvo); 
    }
    /** * Modify product/public 
    void DoUpdate (@FormGroup (name = "Productform") Productvo productvo) {
        productao.update (prod UCTVO); 
    } 

ControlResponsibilities: function with screen, but control is reusable screen. Reuse control in the VM template, $control. SetTemplate ("/PRODUCT/VIEWPRODUCT.VM"), note that the loaded directory is started from the control directory by default. Typical scenario: Embed the basic information box. Development method: Similar to screen, except that it is placed under the control directory.

public class Viewproduct {public 
    void execute (@Param (name = ' productId ') String Productid,context context) { 
        Pro Ductdo productdo = Productao.find (productId);  
        Context.put ("Product", productdo);
    } 

As for the knowledge of module modules, it is estimated that a lot of things are not clear. Let's first remember that there are such a few pieces of things, respectively, the application of the scene can be. Some details are explained in the practice article. Templates

role : Templates correspond to the View module in MVC. Used for interface rendering, where the velocity template engine is used to process dynamic data and static pages. The knowledge of the specific velocity template engine is not explained here, only the structure of the templates.
Templates are also divided into three types: Layout,screen and control files. The static file displayed on the screen page, Dynamic Data is passed through the Scrren object under module, and the Velocity template engine rendering control is used for the reusable scrren display, when used $control.settemplate ("Home: PRODUCT/VIEWPRODUCT.VM ") layout for page Layout module interaction with Templates

Now that the roles and scenarios of module and templates are known, see how a specific page is loaded:

For example loading: Http://192.168.1.102:8081/?home sample program's home page

After receiving the request, the WEBX framework executes the corresponding code according to the corresponding pipeline, the specific execution process:
1. Gets the rendered page target, where the page index.vm.
2. In the WebApp/templates/screen, look for/INDEX.VM templates.
3. Find the Screen class (module code) in turn:

Index (if not found, next)
Default (if not found, next, if multi-level will find the class above)
Templatescreen (System default screen)
> The example does not provide a corresponding class. The system uses the default Templatescreen class rendering

4. Perform the screen class and render the screen template.

1 if there is a layout layout, render layout, perform screen class, Render screen template
 2) Find layout template according to target
    layout template lookup is also found according to the corresponding file path, first of all layout/ INDEX.VM, if you don't find LAYOUT/DEFAULT.VM. If there are multilevel directories, you will find the DEFAULT.VM in the previous level directory. If not found, the DEFAULT.VM file provided in common will be used.
 3 Render Layout Template
 4) to render control (if any) referenced in the layout template

You can modify some of these files to experience the process of loading the home directory. Know the WEBX page of the rendering process, you can add your own page. A small test of a sledgehammer

When designing your own website, follow the idea of WEBX itself design, page driver and specification is larger than the idea of configuration. When adding a page, first design the layout of the corresponding page, then add the specific page content, Dynamic Data passed through module. Let's give a simple example here:
Code has been uploaded http://download.csdn.net/detail/fiboliu/9302219, run method mvn Jetty:run, Access path: Http://localhost:8081/blog/index
Web Layout

Layout design, common on the middle and lower, left middle right and so on. Here's how we use the layout

Here the header and sidebar is actually webx in the control,screen corresponding is the screen file. Layout to create the corresponding layout file, see the/LAYOUT/BLOG/DEFAULT.VM in the sample code:

<! DOCTYPE html>  
Screen and control design 
There is a layout page that then designs each page.
HEADER.VM, SIDEBAR.VM contorl page, and screen page. Specific page design, you can use a number of front-end frameworks, such as Bootstrap.
Reference: HTTP://V3.BOOTCSS.COM/HEADER.VM, reference:http://v3.bootcss.com/components/

<nav class= "NavBar navbar-inverse" > <div class= "Container-fluid" > <!--Brand and toggle get grouped F Or better mobile display--> <div class= "Navbar-header" > <button type= "button" class= "Navbar-toggle Collapsed "data-toggle=" collapse "data-target=" #bs-example-navbar-collapse-1 "aria-expanded=" false "> <span C lass= "Sr-only" >toggle navigation</span> <span class= "Icon-bar" ></span> <span class = "Icon-bar" ></span> <span class= "Icon-bar" ></span> </button> <a class= "n Avbar-brand "href=" # ">Brand</a> </div> <!--Collect the Nav links, forms, and other content for  toggling--> <div class= "collapse navbar-collapse" id= "bs-example-navbar-collapse-1" > <ul class= "NAV" Navbar-nav "> <li class=" active "><a href=" # ">link <span class=" sr-only "> (current) </span&gt
 ;</a></li>       <li><a href= "#" >Link</a></li> </ul> </div><!--/.navbar-collapse- -> </div><!--/.container-fluid--> </nav>
Leftsidebar.vm
<div class= "section" >
    <div class= "Row" >
        <a href= "#" > Classification 1</a>
        <br>
        <a href= "#" > Classification 2</a>
    </div>
</div>
Design Screen Page

To a simple front page interface, only show a welcome content. Welcome content contains both static and dynamic data. Create a INDEX.VM in the corresponding blog directory
<div class= "section" >
    Hello, $name!! <br> This is my
    blog!!
</div>
 
Dynamic Data rendering is done through the Velocity template engine, where the $name variable needs to be loaded with the corresponding screen module. Create a/blog/index.java under the module screen directory

public class Index {public
    void execute (Context context) {
           context.put ("name", "Fiboliu");
    }