使用JSP在AlloyUI数据表中填充数据的优雅方法

时间:2014-01-02 12:08:16

标签: javascript jsp liferay alloy-ui scriplets

我正在为portlet门户开发Liferay。我正在尝试使用AlloyUI Data Table并且我的代码目前正在运行,但是我担心这样做的方式不是优雅且易于维护。

以下是我View.jsp的代码:

<%@page import="java.util.ArrayList"%>
<%@page import="com.mypackage.model.hpuc.Unit"%>
<%@page import="java.util.List"%>
<%@page import="javax.portlet.PortletPreferences"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>

<portlet:defineObjects />

This is the <b>Units Folder</b> portlet in View mode.

<%
    List<Unit> hpUnits = 
        (List<Unit>)renderRequest.getAttribute("hpUnits");
%>


<script>
var data = [

<%//loop through all but last because of the
//coma that shouldn't be added for the last element
    for (int i = 0; i < hpUnits.size() - 1; i++){ 
        Unit unit = hpUnits.get(i);%>
        { 
            description: '<%=unit.getDescription()%>',
            city: '<%=unit.getContactData().getAddress().getCity()%>', 
            name: '<%=unit.getRegistrationInfo().getName()%>'
        },  

<%} //close for loop 

    //add last element
    Unit lastUnit = hpUnits.get(hpUnits.size() -1);%>

    {   
        description: '<%= lastUnit.getDescription()%>',
        city: '<%= lastUnit.getContactData().getAddress().getCity()%>',
        name: '<%= lastUnit.getRegistrationInfo().getName() %>'
    }
]; //close data2 array
</script>

<div id="myDataTable"></div>

<script>
YUI().use(
  'aui-datatable',
  function(Y) {
    var columns = ['name', 'city', 'description'];

    new Y.DataTable.Base(
      {
        columnset: columns,
        recordset: data
      }
    ).render('#myDataTable');
  }
);
</script>

我在此代码中看到的问题如下:

  1. 使用javascript代码混合scriplets。如果这可能会非常混乱 代码变大了。
  2. 每个标签被宣告3次(两次同时 为表行填充数据,为列标签填充一次)。如果一个 标签的改变,程序员可能忘了改变 它在任何一个地方。
  3. 您对我如何提高代码质量的方式有何评论?

2 个答案:

答案 0 :(得分:1)

在我看来,这总是更好的方法来通过portlet(java)创建数据,并且只将可视化放到jsp中。我知道使用java创建JSON并不是那么优雅,但您可以使用各种框架进行序列化

杰克逊:https://github.com/FasterXML/jackson-databind/

XStream:http://x-stream.github.io/json-tutorial.html

或使用org.json.*创建普通JSON http://json.org/java/

另见How to Create JSON Array in Java

您也可以将列名放到java路径中。

答案 1 :(得分:0)

我正在使用servlet,我的JSON对象已经创建。

在jsp中,创建一个从servlet / portlet获取JSON数据的数据表(在你的例子中)。

这样,我发现控制GUI很容易。

YUI数据表:http://yuilibrary.com/yui/docs/datatable/