WebX入门指南

  1. 云栖社区>
  2. 博客>
  3. 正文

WebX入门指南

fibojie 2015-11-25 17:51:00 浏览1204
展开阅读全文

[说明] 本文围绕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

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/

<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");
    }
}

网友评论

登录后评论
0/500
评论
fibojie
+ 关注