UI开发模式对比：JSP、Android、Flex

jxb8901

浏览: 166767 次
性别:
来自: shenzhen

最近访客更多访客>>

tz2454786001

xdx2599

死肥宅

Joinhub

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

前一篇文章分析了Java平台下不同类型WEB框架对开发模式的影响，多数Java领域的WEB框架都是聚焦于服务端MVC的实现，这些框架对View的支持，通常是基于标准的JSP或类似JSP的模板技术如Freemarker或Velocity。JSP或类JSP的模板技术已经是上个世纪的页面技术了，它能跟上时代的发展和技术的进步吗？

我们先看一段典型的JSP页面代码（摘自Struts2样例代码）：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World!</title>
</head>
<body>
<h2><s:property value="messageStore.message" /></h2>
<p>I've said hello <s:property value="helloCount" /> times!</p>
<p><s:property value="messageStore" /></p>
</body>
</html>

再看一段Android平台下UI开发的代码（摘自Android开发手册）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I am a Button" />
</LinearLayout>

还可以看看Flex UI代码（摘自Flex开发手册）：

<?xml version="1.0"?>
<!-- containers\layouts\VBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox borderStyle="solid" 
        paddingTop="10"
        paddingBottom="10" 
        paddingLeft="10" 
        paddingRight="10">
        
        <mx:Button id="fname" label="Button 1"/>
        <mx:Button id="lname" label="Button 2"/>
        <mx:Button id="addr1" label="Button 3"/>
        <mx:ComboBox id="state">
              <mx:ArrayCollection>
                 <mx:String>ComboBox 1</mx:String>
              </mx:ArrayCollection>         
        </mx:ComboBox>
    </mx:VBox>
</mx:Application>

对比上面三段代码，可以看出JSP页面技术与Android及Flex UI技术的差异：

命令式 vs. 声明式：JSP是命令式代码编写方式，而Android及Flex是声明式；
组件化：JSP代码的组件能力很差，主要通过标签库tag lib实现展现逻辑的利用，而Android及Flex都有专门设计的组件机制；
布局支持：JSP对页面展示的布局没有支持，Android及Flex都有大量的布局组件实现声明式布局；
数据组件：JSP没有支持，Android有ContentProvider抽象，Flex则有各种数据对象，用于存取本地或远程数据

声明式和组件化应该是必然的趋势，由此可见JSP技术的落后。但遗憾的是目前Java平台还没有什么技术可以取代JSP：JSF是基于JSP的新一代页面技术，但从设计上看JSF相比Android和Flex还较大差距；GWT之类的框架也可以取代JSP，但GWT走向了纯命令式的相反方向。

如果向Android和Flex的开发模式看齐，基于Java平台开发WEB应用的最佳方式应该是HTML+JS+JSON。HTML也是声明式的，本质上和前面Android及Flex的UI技术类似；JS相当于Android中的Java及Flex中的ActionScript，JSON用于客户端与服务端进行数据交换。只是HTML+JS+JSON也有其不足之处：

HTML内建组件(tag)相比Flex及Android的组件，其表现力不够，比如HTML没有布局组件，HTML的table相比Flex的DataGrid组件过于低层；
HTML本身的设计并非是用于UI，比如其没有考虑数据绑定机制，也没有数据组件之类的概念；
HTML没有组件定制能力，而Android及Flex都设计了自定义组件的机制；

由于存在以上不足，就出现了EasyUI/DWZ等声明式的UI框架，这也是WEB开发模式浅析中建议采用EasyUI/DWZ等框架的理由。

回到Java世界，是否可以在服务端设计一种声明式、组件化的页面技术用于取代传统JSP页面技术呢？

分享到：

用面向对象思维重构过程式代码 | 第一个NXT-G程序

2013-07-12 17:20
浏览 1731
评论(0)
论坛回复 / 浏览 (10 / 9121)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论