OFBiz使用自己的静态原型的方法

ofbiz的screen中，可以使用ofbiz自己的widget，可以使用外部的.ftl来显示界面。我们自己的静态原型，常常写出html的形式，那么，如何在ofbiz中使用自己的静态原型呢？对于比较简单的静态原型，我们可以这样做：

直接将html的代码复制到ftl文件中即可。

这是因为（我都理解）freemarker是html的升级版，所以html可以表达的它也能表达。自己做的静态原型一般会有一些css和js之类的，放在哪里的？根据官方的Beginner's Tutorial的126页的内容，我这样做：

把相关内容（css和js）放到framework/images/webapp/images目录下。我对比移植进ofbiz的前后不同来说明：

移植进ofbiz前，目录结构如图

以forward_query.html为例，css和js引用的代码为

<!--Include these files to apply annotator-->    <link rel="stylesheet" type="text/css" href="../annotator/css/annotator.css">    <link rel="stylesheet" type="text/css" href="../annotator/css/ui-lightness/jquery-ui-1.8.21.custom.css">    <script src="js/jquery-1.7.2.min.js"></script>    <script type="text/javascript" src="../annotator/js/jquery-ui-1.8.21.custom.min.js"></script>    <script type="text/javascript" src="../annotator/js/annotator.js"></script>    <!--Include bootstrap-->    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"/>    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>    <script type="text/javascript" src="js/bootstrap.min.js"></script>    <!--Include our files-->    <link rel="stylesheet" type="text/css" href="css/global.css"/>    <link rel="stylesheet" type="text/css" href="css/forward_query.css"/>    <link rel="stylesheet" type="text/css" href="css/form.css"/>    <link rel="stylesheet" type="text/css" href="css/forward_form.css"/>    <script type="text/javascript" src="js/nav.js"></script>

移植到ofbiz中后，forward_query用ftl表示，放在component的webapp的includes中

css和js以及图片的位置：

引用部分的代码改为：

<!--Include these files to apply annotator-->    <link rel="stylesheet" type="text/css" href="/images/annotator/css/annotator.css">    <link rel="stylesheet" type="text/css" href="/images//annotator/css/ui-lightness/jquery-ui-1.8.21.custom.css">    <script src="/images/js/jquery-1.7.2.min.js"></script>    <script type="text/javascript" src="/images//annotator/js/jquery-ui-1.8.21.custom.min.js"></script>    <script type="text/javascript" src="/images//annotator/js/annotator.js"></script>    <!--Include bootstrap-->    <link rel="stylesheet" type="text/css" href="/images/css/bootstrap-responsive.min.css"/>    <link rel="stylesheet" type="text/css" href="/images/css/bootstrap.min.css"/>    <script type="text/javascript" src="/images/js/bootstrap.min.js"></script>    <!--Include our files-->    <link rel="stylesheet" type="text/css" href="/images/css/global.css"/>    <link rel="stylesheet" type="text/css" href="/images/css/forward_query.css"/>    <link rel="stylesheet" type="text/css" href="/images/css/form.css"/>    <link rel="stylesheet" type="text/css" href="/images/css/forward_form.css"/>    <script type="text/javascript" src="/images/js/nav.js"></script>

其中，需要注意的地方，这里的/images/css/bootstrap-responsive.min.css并不是绝对路径，/images表示images这个component，ofbiz会自动定位到其所在文件夹