Webx3 FrameWork 教程

Webx是什么?

 

Webx是一个框架，它可用来做下面的事情：

 

创建一个全功能的Web应用

Webx提供了创建一个Web应用所需要的所有必要功能。

 

创建一个新的Web框架

Webx允许你定制、甚至重写大部分的Webx框架逻辑，从而实现全新的功能，或者和其它应用框架相整合。

 

创建一个非Web应用

Webx的功能并不受限于Web应用，而是对所有类型的应用都有帮助。

 

Webx所提供的SpringExt子框架是对Spring框架的扩展，能简化Spring的配置，加强了Spring组件的扩展性。

 

浏览源码

Webx的源码被托管在GitHub。你可以从浏览器中直接查看Webx的全部源代码：https://github.com/webx/citrus。

 

取得源码

你需要安装Git。然后用下面的命令取得所有可编译的源代码：

 

git clone https://github.com/webx/citrus.git

编译源码

你需要安装Maven。然后用下面的命令编译所有的源代码：

 

cd citrus

mvn clean install

 

创建第一个Webx应用

 

 

安装JDK  & 安装和 配置maven

 

Webx需要JDK 5.0以上的版本。请从这里下载并安装它：http://www.oracle.com/technetwork/java/javase/。

 

Webx需要maven 2或更高版本。请从这里下载并安装它：http://maven.apache.org/。

[注意] 注意

 

你不需要对maven进行特殊的配置，因为运行Webx应用所需要的所有包都存放在全世界共享的中心Maven仓库（Central Maven Repository）中。Maven将从那里自动获取所有的jar包、源代码和javadoc。

 

你可以从这里查询到所有和Webx有关的发布包：http://search.maven.org/#search%7Cga%7C1%7Ccom.alibaba.citrus。

 

安装集成开发环境

如果你使用Eclipse（从这里下载：http://www.eclipse.org/），建议安装如下插件：

 

    Maven eclipse插件：http://eclipse.org/m2e/

 

    Git eclipse插件：http://eclipse.org/egit/

 

    SpringExt eclipse插件：http://openwebx.org/updatesite/

    [注意] 注意

 

    关于SpringExt eclipse插件，请参阅更详细的说明：第12.3 节 “Eclipse插件”。

 

 

创建应用

 

Windows下不支持命令换行

 

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

 

 

 

会看见一个新目录：tutorial1。它就是我们刚刚创建的新项目。项目的各项参数如下所示：

 

项目组（groupId）：com.alibaba.webx。

项目名称（artifactId）：tutorial1。

项目版本（version）：1.0-SNAPSHOT。

 

项目中Java类的包名（package）：com.alibaba.webx.tutorial1。

 

你完全可以根据你的需要来调整上述命令中的参数，改用其它的groupId、artifactId、version以及package

 

运行应用

 

mvn jetty:run

 

这条命令会启动Jetty Server，默认的端口是8081。请在浏览器地址栏输入地址，或直接点击这个链接：http://localhost:8081/

 

 

 

 

 

基于webx3的用户登陆系统

认识Webx3的目录结构及相关概念

 

 

 

 

 

Web3X 是一个典型的MVC结构

图一 存放的是 MVC中的Controller 的Java类

图二 存放的是 MVC的 视图渲染模板

Model 业务逻辑层在此未涉及

 

Webx3 的 MVC结构中，值得一提的是 视图， 即渲染模板，Webx3的模板遵循turbine风格，根据职能不同。又分为Layout/Screen/Control  

 

 

 

 

 

 

用户系统开发演示

分析登录系统功能

 

 

 

 

 

 

 

开发登录功能

 

 

login.vm

$page.setTitle("login")

<form action="$app1Link.setTarget("form/login")" method="post">

    $csrfToken.hiddenField

    <input type="hidden" name="action" value="login_action"/>

    #set ($group = $form.login.defaultInstance)

    <p>登录</p>

    <p>#if($errorMsg)$errorMsg #end</p>

  <p>

    #if (!$group.name.valid)

        <p>$group.name.message</p>

    #end

        <input type="text" name="$group.name.key" value="$!group.name.value"/>

    #if (!$group.password.valid)

        <p>$group.password.message</p>

    #end

        <input type="text" name="$group.password.key" value="$!group.password.value"/>

       

        <input type="submit" name="event_submit_do_login"/>

    </p>

</form>

 

 

 

 

 

 

 

LoginAction.java

package com.alibaba.webx.tutorial1.app1.module.action;

import com.alibaba.citrus.turbine.Context;

import com.alibaba.citrus.turbine.Navigator;

import com.alibaba.citrus.turbine.dataresolver.FormGroup;

import com.alibaba.webx.tutorial1.app1.Visitor;

 

public class LoginAction {

public void doLogin(@FormGroup("login") Visitorvisitor, Navigator nav,

Context context) {

String name = visitor.getName();

String password = visitor.getPassword();

if (name.equals("chen") &&password.equals("123456")) {

nav.redirectTo("app1Link").withTarget("form/welcome")

.withParameter("name", name);

} else {

context.put("errorMsg","Name or Password id invaild");

}

}

}

 

 

/tutorial1/src/main/webapp/WEB-INF/app1/form.xml

 

        <group name="login" extends="csrfCheck">

            <field name="name" displayName="你的名字">

                <fm-validators:required-validator>

                    <message>必须填写 ${displayName}</message>

                </fm-validators:required-validator>

            </field>

            <field name="password" displayName="你的密码">

                <fm-validators:required-validator>

                    <message>必须填写 ${displayName}</message>

                </fm-validators:required-validator>

            </field>

        </group>