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

最新推荐文章于 2018-10-08 17:10:25 发布

ztk3939339

最新推荐文章于 2018-10-08 17:10:25 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： OfBiz相关

本文链接：https://blog.youkuaiyun.com/ztk3939339/article/details/8781701

OfBiz相关专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在OFBiz框架中集成自定义的静态原型，包括如何放置HTML、CSS及JS文件，并调整路径以确保资源正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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会自动定位到其所在文件夹