WebX入门指南-CSDN博客

[说明] 本文围绕WebX的Web框架展开，试图将整个开发中使用的软件栈或者说生态系统串联起来。本文中不讲解原理性的东西，只是讲解各种场景下如何使用WebX相关的技术。入门指南中涉及到的实践指南和原理指南，不会展开，在后续博文中，详细阐述。

WebX简介

详细的简介说明见WebX官网。首先看一下WebX的官方介绍:

Webx是一个框架，它可用来做下面的事情：
创建一个全功能的Web应用
    Webx提供了创建一个Web应用所需要的所有必要功能.
创建一个新的Web框架
    Webx允许你定制、甚至重写大部分的Webx框架逻辑，从而实现全新的功能，或者和其它应用框架相整合。
创建一个非Web应用
    Webx的功能并不受限于Web应用，而是对所有类型的应用都有帮助。
    Webx所提供的SpringExt子框架是对Spring框架的扩展，能简化Spring的配置，加强了Spring组件的扩展性。

所以应该来说，WebX基于Spring组件，提供了开发Web应用以及非Web应用的基础性平台。从本质上讲，Webx可以做为一个spring容器来使用，只要是spring允许的一切，webx都能做。Webx的特色功能还是在web上面，不仅仅是作为spring容器来使用，而是一套完整的扩展性强的MVC框架。

WebX = Spring + 组件 + Velocity

从官方的说明来看，WebX的定位并不仅仅是Web框架，而是强调了框架的灵活性和扩展性。对于这一点，大家后面好好体会哈。现在流行的MVC框架很多，SSH、Spring MVC是比较主流的。WebX的优劣势官方也有说明。这里我也敢随便说，谁好谁不好，我选择学习WebX的原因有两个：

Webx构建了一个完整的生态，提供了各种支持
成熟可靠、可扩展

关于WebX的一些详细内容，这里不再赘述，使用WebX开发网站，通常结合Velocity模板引擎和IBatis ORM等一起使用。下面简单介绍下相关的技术：

Spring

Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅仅限于服务器端的开发。从简单性、可测试性和松耦合性的角度而言，绝大部分Java应用都可以从Spring中受益。-[百度百科]-

目的：解决企业应用开发的复杂性
功能：使用基本的JavaBean代替EJB，并提供了更多的企业应用功能

Velocity

Velocity是一个基于java的模板引擎（template engine）。它允许任何人仅仅使用简单的模板语言（template language）来引用由java代码定义的对象。
当Velocity应用于web开发时，界面设计人员可以和java程序开发人员同步开发一个遵循MVC架构的web站点，也就是说，页面设计人员可以只关注页面的显示效果，而由java程序开发人员关注业务逻辑编码。Velocity将java代码从web页面中分离出来，这样为web站点的长期维护提供了便利，同时也为我们在JSP和PHP之外又提供了一种可选的方案。-[百度百科]-

IBatis

MyBatis 是支持普通SQL查询，存储过程和高级映射的优秀持久层框架。MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索。MyBatis 使用简单的 XML或注解用于配置和原始映射，将接口和 Java 的POJOs（Plain Old Java Objects，普通的 Java对象）映射成数据库中的记录。

WebX入门指南

创建WebX应用

详细内容参考：http://openwebx.org/docs/firstapp.html
WebX工程使用Maven来构建，创建WebX应用和创建普通的Maven工程是一样的，本文中使用的IDE是Intelij Idea。
1. 创建Webx工程

命令行：

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开发：

    1. 创建Maven工程，进入页面后选择add archetype
    2. 添对应的内容：见下图
    > archetypeArtifactId=archetype-webx-quickstart   archetypeGroupId=com.alibaba.citrus.sample 
    archetypeVersion=1.8               
    3.从添加archetype创建新的应用
    4.后续的内容和创建普通的应用一样

这里写图片描述
2. 运行

mvn jetty:run
localhost:8081访问示例网站，部署的时候可以采用Nginx+Tomcat的方式部署，在应用服务器相关的博文中再介绍。

使用Idea集成开发环境的，可以直接使用IDE来运行。具体的内容建议看下Maven权威指南和Idea的使用手册。接下来看下Web给出的示例程序，窥探下WebX的设计思想，便于我们开发自己的应用。

示例说明

创建应用后，默认的会提供一个示例网站。首先看下整个代码的目录结构，main目录下包括了java和webapp两个子目录。Java目录下代码用于后台逻辑的代码实现，webapp是网站的根目录，分别对应代码中的module和templates。下面看一下，前端和后台是如何实现交互的。介绍前，先看下module和templates。

Module

作用:Webx3 作为一个 MVC 框架，由 Module 组件承担控制器的职责(Controller)。Module 负责接受客户端数据输入，执行业务逻辑，响应客户输出，以及数据校验，页面流程控制等。
Module 主要分为3种：Action,Screen,Control

Screen 为页面展示或输出准备数据Model
Action 负责接收 Form 提交和数据写入控制
Control 可嵌套的 Screen 处理器，用于Screen的组装

screen

职责:响应只读功能操作，例如：显示查询或查看结果，为此构造必要的数据Model。
运行机制： Webx 中url 一般需要映射到一个 Screen 类进行逻辑处理，一个 Screen典型场景：根据 productId 查看 Product 信息，根据orderId 修改 Order 状态,举例：http://lcoalhost/product/view_product.htm?productId=100035

public class ViewProduct { 
    public void execute(@Param(name = "productId") String productId,Context context) { 
        ProductDO productDO = productAO.find(productId); 
        context.put("product", productDO);
    } 
 }

Action

职责：处理新增，修改，删除等数据变更的请求和操作;
约束：通常有表单提交，并且使用 FormService 进行验证的功能必须使用 Action。
典型场景：例如：提交Offer，修改Member信息，订单审批。
举例：产品-新增产品 http://localhost/view_product.htm?action=ProductAction&event_submit_do_create=true
举例：产品-修改产品 http://localhost/view_product.htm?action=ProductAction&event_submit_do_update=true

public class ProductAction { 
    /** * 新增产品 */ 
    public void doCreate(@FormGroup(name = "productForm") ProductVO productVO) {
         productAO.create(productVO); 
    }
    /** * 修改产品 */ 
    public void doUpdate(@FormGroup(name = "productForm") ProductVO productVO) {
        productAO.update( productVO ); 
    } 
}

Control

职责：功能同 Screen，但 Control是可重用的 Screen。vm 模板中重用control 写法, $control.setTemplate(“/product/viewProduct.vm”),注意加载的目录默认是从control目录下开始的。
典型场景：嵌入基本信息框。
开发方式：与 Screen类似, 只不过它放在 control 目录下。

public class ViewProduct { 
    public void execute(@Param(name = "productId") String productId,Context context) { 
        ProductDO productDO = productAO.find(productId);  
        context.put("product", productDO);
    } 
}

关于Module模块的知识，讲完了，估计还有很多东西不清楚。那姑且先记住有这样的几块东西，分别的应用场景就可以了。一些细节的东西在实践篇里面讲解。

Templates

作用:templates对应于MVC中的View模块。用于界面的渲染，这里使用了Velocity模板引擎来处理，动态数据和静态页面。这里不讲解具体的Velocity模板引擎的知识，只说明templates的结构。
templates也分为三种：layout，screen以及control文件。

Screen 页面展示的静态文件，动态数据由module下的scrren对象传入，使用Velocity模板引擎渲染
Control 用于可重用的Scrren显示, 具体使用时$control.setTemplate (“home:product/viewProduct.vm”)
Layout用于页面布局

Module与Templates交互

现在，已经知道了Module和Templates的作用和应用场景，看一下具体的一个页面是如何加载的：

例如加载： http://192.168.1.102:8081/?home 示例程序的首页

接到请求后，WebX框架按照对应的Pipeline执行相应的代码，具体的执行流程：
1. 获取渲染的页面目标target, 这里的页面index.vm。
2. 在webapp的/templates/screen目下，查找/index.vm模板。
3. 依次查找screen类（module代码）：

Index （如果找不到，下一个）
Default （如果找不到，下一个, 如果多级的会再查找上一级的类）
TemplateScreen （系统默screen）
> 示例中未提供对应的类，系统会使用默认的TemplateScreen类渲染

4. 执行screen类，并渲染screen模板。

 1) 如果存在layout布局，渲染layout，执行screen类，渲染screen模板
 2) 根据target查找layout模板
    layout模板查找也是按照对应的文件路径来查找，首先是layout/index.vm, 如果没有找到layout/default.vm。如果存在多级目录会查找上一级目录中的default.vm。如果没找到会使用common中提供的default.vm文件。
 3) 渲染Layout模板
 4) 渲染在layout模板中引用的control(如果有)

大家可以修改下其中的一些文件，体验下home目录加载的流程。知道了WebX页面的渲染流程，就可以添加自己的页面了。

小试牛刀

设计自己的网站时，遵循WebX本身设计的思想，页面驱动和规约大于配置的理念。添加页面时，首先设计对应页面的布局，然后添加具体的页面内容，动态数据通过module传入。这里先给一个简单的示例：
代码已上传http://download.csdn.net/detail/fiboliu/9302219, 运行方法 mvn jetty:run, 访问路径：http://localhost:8081/blog/index
blog example

网页Layout

布局的设计，常见的上中下，左中右等方式。这里给出我们使用的布局方式
这里写图片描述
这里的Header和Sidebar其实就是WebX中的Control，Screen对应的就是Screen文件。Layout下创建对应的布局文件，见示例代码中的/layout/blog/default.vm：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="WebX Sample">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
    <meta name="author" content="刘杰 <fiboliu@163.com>">

    <title>
        组件 &middot; Bootstrap v3 中文文档
    </title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <script>
        var _hmt = _hmt || [];
    </script>
</head>

<body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <!-- header-->
            $control.setTemplate("/header.vm")
        </div>
    </header>
    <div class="row">
        <div class="container">
            <div class="col-md-2">
                <!-- left side bar -->
                $control.setTemplate("/leftSideBar.vm")
            </div>
            <div class="col-md-10">
                $screen_placeholder
            </div>
        </div>
    </div>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Screen和Control设计

有个布局页面接下来设计每一个页面。
header.vm、sidebar.vm contorl页，以及screen页面。具体的页面设计时，可以使用一些前端框架，比如bootstrap。
参考：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 for 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 class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-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></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="#">分类1</a>
        <br>
        <a href="#">分类2</a>
    </div>
</div>

设计screen页面
给一个简单的首页界面，只显示一句欢迎内容。欢迎内容包含静态数据和动态数据。在对应的blog目录下创建index.vm

<div class="section">
    Hello， $name!! <br>
    This is my Blog!!
</div>

动态数据渲染时通过Velocity模板引擎完成的,这里的$name变量需要通过对应的Screen Module加载。在Module Screen目录下创建/blog/Index.java

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

WebX入门指南

WebX简介

Spring

Velocity

IBatis

WebX入门指南

创建WebX应用

示例说明

Module

screen

Action

Control

Templates

Module与Templates交互

小试牛刀

网页Layout

Screen和Control设计

“相关推荐”对你有帮助么？