总结并扩展JSF中的长文本输出_Jsf

总结并扩展JSF中的长文本输出

jsf

总结并扩展JSF中的长文本输出,jsf,Jsf,我的问题类似于或，但对于JSF。这是网络上很常见的比喻我有一个页面，显示一个用户输入文本的部分，可能短，也可能长。如果它很长，那么表格高度将无法管理，因此在这种情况下，我希望显示文本的一部分，然后显示一个“（more）”链接，该链接将显示剩余的文本。扩展后，也会有一个“（更少）”链接。（注意：我的特殊案例中只有带换行符的文本。）是否有任何预先存在的JSF组件可以做到这一点？我已经检查了PrimeFaces、OmniFaces和ButterFaces，并惊讶地发现我没有看到任何突然出现的具有此

我的问题类似于或，但对于JSF。这是网络上很常见的比喻

我有一个页面，显示一个用户输入文本的部分，可能短，也可能长。如果它很长，那么表格高度将无法管理，因此在这种情况下，我希望显示文本的一部分，然后显示一个“（more）”链接，该链接将显示剩余的文本。扩展后，也会有一个“（更少）”链接。（注意：我的特殊案例中只有带换行符的文本。）

是否有任何预先存在的JSF组件可以做到这一点？我已经检查了PrimeFaces、OmniFaces和ButterFaces，并惊讶地发现我没有看到任何突然出现的具有此功能的东西。我确信我可以使用引用的StackOverflow问题中的一种技术制作自己的自定义组件，但我不想重新发明轮子。

也许这是ButterFaces的一个很好的扩展。我会考虑的

但是为什么需要JSF组件呢？只需使用Readmore.js

也许这是对ButterFaces的一个很好的扩展。我会考虑的

但是为什么需要JSF组件呢？只需使用Readmore.js

这里有一个快速的复合组件，它可以作为任何其他想要这样东西的人的起点。它有一些不相关的功能，可能需要改进和定制（硬编码的

样式

，硬编码的

readmore（）

函数选项等）。欢迎提出改进建议

参数

值（字符串，必填）：要显示的文本。应为带空行的纯文本

cols（整数，默认值=40）：将包含的

div的宽度限制为的列数。如果小于或等于0，则不限制宽度


readmore（布尔值，默认值=false）：是否使用readmore功能
textonly（布尔值，默认值=false）：默认情况下，组件为包含的div
分配一个“只读”类。将textonly
设置为true不会将“readonly”类分配给包含div的类


位置：在/resources/{samplelibrary}/readOnlyTextArea.xhtml下
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:composite="http://java.sun.com/jsf/composite"
>
    <composite:interface>
        <composite:attribute name="cols" default="40" type="java.lang.Integer"/>
        <composite:attribute name="value" required="true"/>
        <composite:attribute name="readmore" default="false" type="java.lang.Boolean"/>
        <composite:attribute name="textonly" default="false" type="java.lang.Boolean"/>
    </composite:interface>

    <composite:implementation>
        <h:outputScript library="samplelibrary" name="readmore.min.js" target="head"/>

        <div id="#{cc.clientId}_div" class="#{cc.attrs.textonly?'':'readonly'}"
                style="overflow: hidden; white-space: pre-wrap; #{cc.attrs.readmore ? '' : 'min-height: 1.3em;'} #{(cc.attrs.cols gt 0) ? 'width: '.concat(cc.attrs.cols / 2.09).concat('em; padding: 2px 2px 2px 2px;') : ''}">
            <h:outputText value="#{cc.attrs.value}"
        /></div>
        <ui:fragment rendered="#{cc.attrs.readmore}">
            <script type="text/javascript">
                $(window).ready(function() {
                    var comps = $(document.getElementById('#{cc.clientId}_div'));
                    comps.readmore({speed:300,collapsedHeight:54});
                });
            </script>
        </ui:fragment>

    </composite:implementation>
</html>

这里有一个快速的复合组件，它可以作为任何其他想要这样东西的人的起点。它有一些不相关的功能，可能需要改进和定制（硬编码的样式
，硬编码的readmore（）
函数选项等）。欢迎提出改进建议
参数

值（字符串，必填）：要显示的文本。应为带空行的纯文本
cols（整数，默认值=40）：将包含的div的宽度限制为的列数。如果小于或等于0，则不限制宽度

readmore（布尔值，默认值=false）：是否使用readmore功能
textonly（布尔值，默认值=false）：默认情况下，组件为包含的div
分配一个“只读”类。将textonly
设置为true不会将“readonly”类分配给包含div的类


位置：在/resources/{samplelibrary}/readOnlyTextArea.xhtml下
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:composite="http://java.sun.com/jsf/composite"
>
    <composite:interface>
        <composite:attribute name="cols" default="40" type="java.lang.Integer"/>
        <composite:attribute name="value" required="true"/>
        <composite:attribute name="readmore" default="false" type="java.lang.Boolean"/>
        <composite:attribute name="textonly" default="false" type="java.lang.Boolean"/>
    </composite:interface>

    <composite:implementation>
        <h:outputScript library="samplelibrary" name="readmore.min.js" target="head"/>

        <div id="#{cc.clientId}_div" class="#{cc.attrs.textonly?'':'readonly'}"
                style="overflow: hidden; white-space: pre-wrap; #{cc.attrs.readmore ? '' : 'min-height: 1.3em;'} #{(cc.attrs.cols gt 0) ? 'width: '.concat(cc.attrs.cols / 2.09).concat('em; padding: 2px 2px 2px 2px;') : ''}">
            <h:outputText value="#{cc.attrs.value}"
        /></div>
        <ui:fragment rendered="#{cc.attrs.readmore}">
            <script type="text/javascript">
                $(window).ready(function() {
                    var comps = $(document.getElementById('#{cc.clientId}_div'));
                    comps.readmore({speed:300,collapsedHeight:54});
                });
            </script>
        </ui:fragment>

    </composite:implementation>
</html>

“但是为什么需要JSF组件呢？”（笑话）因为：懒惰！（/笑话）没错，Readmore.js可能是一个很好的方法。如果我创建自己的组件，我总是可以轻松地更改实现。我继续在一个复合组件中使用Readmore.js——参见其他答案。“但是为什么需要JSF组件呢？”（笑话）因为：懒惰！（/笑话）没错，Readmore.js可能是一个很好的方法。如果我创建自己的组件，我总是可以轻松地更改实现。我继续在一个复合组件中使用Readmore.js——参见其他答案。