RichFaces مساهمة في المشروع ومنزلق مزدوج

StackOverflow https://stackoverflow.com/questions/355038

سؤال

وأرى في richfaces أن هناك المنزلق واحد، متسائلا إذا كان أي شخص قد خلق المنزلق المزدوج كما هو الحال في Scriptaculous لذلك.

هل هناك أية مخاوف في خلط JSF، Richfaces وScriptaculous في تطبيق؟

هل كانت مفيدة؟

المحلول

لا أستطيع الإجابة على سؤالك بدقة، ولكن هنا ما أعرف.

<اقتباس فقرة>   

هل هناك أية مخاوف في خلط JSF،   Richfaces وScriptaculous في   التطبيق؟

نعم. حوالي 50٪ من الناس لديهم مشاكل مع JSF هي أنهم يحاولون التعامل معها مثل مكتبة taglib آخر بدلا من إطار UI مثل أرجوحة أو سبحانه وتعالى. وكان المتوخى من قبل المصممين للمساهمة في المشروع العالم أقرب إلى الضوابط COM / اكتف / VB للتوصيل من المزج HTML حاليا في رواج.

وقال ذلك، فمن الممكن استخدام Scriptaculous مع JSF (انظر أدناه). لاحظ أن تحكم JSF التي تأخذ قيمة تحتاج بعض آلية أخرى للحصول على clientId إلى تفعيل جافا (في هذه الحالة، حقل مخفي HTML العادية التي لا بد أن الحبة إدارتها). هذا هو فوضوي قليلا.

وطريقة واحدة لتنظيفه سيكون للتحرك كل شيء في العارض للمساهمة في المشروع ولها السيطرة تنبعث كل HTML وجافا سكريبت المناسبة. أتصور هذا هو المنطق وراء RichFaces. للأسف، كنت استخدمه أبدا، لذلك التجريب فقط وسوف اقول سواء مكتبة جافا سكريبت وScriptaculous سوف تتعايش. وهناك مؤشر جيد على ما إذا كان الكتاب مكتبة جافا سكريبت وقد تم التفكير حول إمكانية التشغيل المتداخل هو للتحقق مما إذا تم namespaced المكتبة.

وهذا الرمز يستخدم شريط التمرير لتحديث حقل النص مع قيمة رقمية:

والشخصي: 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
  <jsp:directive.page language="java"
    contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" />
  <jsp:text>
    <![CDATA[ <?xml version="1.0" encoding="ISO-8859-1" ?> ]]>
  </jsp:text>
  <jsp:text>
    <![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
  </jsp:text>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1" />
  <title>Script Test</title>
  <script src="javascripts/prototype.js" type="text/javascript">/**/</script>
  <script src="javascripts/scriptaculous.js" type="text/javascript">/**/</script>
  <style type="text/css">
div.slider {
    width: 256px;
    margin: 10px 0;
    background-color: #ccc;
    height: 10px;
    position: relative;
}

div.slider div.handle {
    width: 10px;
    height: 15px;
    background-color: #f00;
    cursor: move;
    position: absolute;
}

div#zoom_element {
    width: 50px;
    height: 50px;
    background: #2d86bd;
    position: relative;
}
</style>
  </head>
  <body>

  <div class="demo">
  <p>Use the slider to change the value</p>
  <div id="zoom_slider" class="slider">
  <div class="handle"></div>
  </div>
  </div>

  <f:view>
    <h:form>
      <h:inputText binding="#{sliderIdBean.mycontrol}"
        value="#{sliderIdBean.value}" onchange="updateSlider()">
        <f:validateLongRange minimum="0" maximum="10" />
      </h:inputText>
      <h:commandButton value="Submit" action="#{sliderIdBean.action}" />
    </h:form>
    <h:messages />
  </f:view>

  <script type="text/javascript">
    var zoom_slider = $('zoom_slider'),
        mycontrol = $('${sliderIdBean.clientId}');

    var ctrl = new Control.Slider(zoom_slider.down('.handle'), zoom_slider, {
      range: $R(0, 10),
      sliderValue: mycontrol.getValue(),
      onSlide: function(value) {
        value = Math.ceil(value);
        mycontrol.setValue(value);
      },
      onChange: function(value) {
        value = Math.ceil(value); 
        mycontrol.setStyle(value);
      }
    });

    function updateSlider() {
        ctrl.setValue(mycontrol.value);
    }
  </script>

  </body>
  </html>
</jsp:root>

والدورة الفول: 

public class SliderIdBean {

  private long value = 0;
  private UIComponent mycontrol;

  public long getValue() {
    return value;
  }

  public void setValue(long value) {
    this.value = value;
  }

  public UIComponent getMycontrol() {
    return mycontrol;
  }

  public void setMycontrol(UIComponent mycontrol) {
    this.mycontrol = mycontrol;
  }

  public String getClientId() {
    FacesContext context = FacesContext
        .getCurrentInstance();
    return mycontrol.getClientId(context);
  }

  public String action() {
    System.out.println("Submitted value was: " + value);
    return null;
  }

}

وجوه config.xml: 

<managed-bean>
    <managed-bean-name>sliderIdBean</managed-bean-name>
    <managed-bean-class>scripty.SliderIdBean</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

وهذا قد يكون جافا سكريبت قليلا مترابط.

نصائح أخرى

والرمز يحتوي على أربع علامات تبويب مع 4 صور (يمكنك تضمين الصور وصفحات، الخ،) مع انزلاق الوقت الافتراضي هو 5 ثانية عن كل تغيير الصورة ويتم توفير النقر التبويب للمستخدم. تبدأ الشرائح كلما مستخدم النقر على أي شخص من 4 علامات التبويب. 

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

<f:view>
    <body>
        <h:form id="signup">
            <table class="logo_background">
                <tr>
                    <td valign="top">
                        <table style="margin-left: 55px; background:#FFCC00" class="tab_background">
                            <tr>
                                <td width="145px" style="padding-left: 25px;">
                                    <a4j:commandLink id="linkHowToPlayId" onclick="retTabClick(this.id);" value="howtoplay"></a4j:commandLink>
                                </td>
                                <td width="100px" align="center" style="padding-left: 5px;">
                                    <a4j:commandLink id="linkRulesId" onclick="retTabClick(this.id);" value="rules"/>
                                </td>
                                <td width="5px">
                                </td>
                                <td width="130px" align="center" style="padding-left: 5px;">
                                    <a4j:commandLink id="linkChallengesId" onclick="retTabClick(this.id);" value="challenges"></a4j:commandLink>
                                </td>
                                <td width="5px">
                                </td>
                                <td width="130px" align="center" style="padding-left: 5px; padding-right: 15px;">
                                    <a4j:commandLink id="linkPickATeamId" onclick="retTabClick(this.id);" value="pickateam"/>
                                </td>
                            </tr>
                        </table>
                        <table>
                            <tr>
                                <td width="100px"></td>
                                <td valign="top">
                                    <table class="signup_background" style="width: 565px; height: 390px; border: solid 1px #5F8CC2;">
                                        <tr>
                                            <td id="content" style="width: 100%;" valign="top">
                                                <a4j:region>
                                                    <a4j:poll id="poll1" interval="2000" enabled="true" reRender="signup:howtoplay,signup:rules,signup:challenges,signup:pickateam" oncomplete="javascript:loopIt();"></a4j:poll>
                                                </a4j:region>
                                                <a4j:outputPanel id="howtoplay" layout="block" style="display:none;">
                                                    <h:graphicImage value="http://connectnigeria.com/articles/wp-content/uploads/2012/12/Google.jpg"></h:graphicImage>
                                                </a4j:outputPanel>
                                                <a4j:outputPanel id="rules" layout="block" style="display:none;">
                                                    <h:graphicImage value="http://good-wallpapers.com/pictures/4528/1280_countryside_landscape_wallpaper.jpg"></h:graphicImage>
                                                </a4j:outputPanel>
                                                <a4j:outputPanel id="challenges" layout="block" style="display:none;">
                                                    <h:graphicImage value="http://www.hdwallpapers.in/walls/windows_8_official-wide.jpg"></h:graphicImage>
                                                </a4j:outputPanel>
                                                <a4j:outputPanel id="pickateam" layout="block" style="display:none;">
                                                    <h:graphicImage value="../../images/87643.jpg"></h:graphicImage>
                                                </a4j:outputPanel>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </h:form>


<script type="text/javascript">
        var first= 1;
        if( first == 1)
        {
            document.getElementById("signup:howtoplay").style.display = 'block';
            document.getElementById("signup:rules").style.display = 'none';
            document.getElementById("signup:challenges").style.display = 'none';
            document.getElementById("signup:pickateam").style.display = 'none';

    }
    function retTabClick(tabId) {
        if (tabId == "signup:linkHowToPlayId") {
            first = "1";
        } else if (tabId == "signup:linkRulesId") {
            first = "2";
        } else if (tabId == "signup:linkChallengesId") {
            first = "3";
        } else if (tabId == "signup:linkPickATeamId") {
            first = "4";
        }
    }
     function loopIt()
     {
         if( first == 1)
         {
            document.getElementById("signup:howtoplay").style.display = 'block';
            document.getElementById("signup:rules").style.display = 'none';
            document.getElementById("signup:challenges").style.display = 'none';
            document.getElementById("signup:pickateam").style.display = 'none';
             first = 2;
         }
         else if (first == 2)
         {
            document.getElementById("signup:howtoplay").style.display = 'none';
            document.getElementById("signup:rules").style.display = 'block';
            document.getElementById("signup:challenges").style.display = 'none';
            document.getElementById("signup:pickateam").style.display = 'none';

             first = 3;
         }
         else if (first == 3)
         {
            document.getElementById("signup:howtoplay").style.display = 'none';
            document.getElementById("signup:rules").style.display = 'none';
            document.getElementById("signup:challenges").style.display = 'block';
            document.getElementById("signup:pickateam").style.display = 'none';

             first = 4;
         }
         else if (first == 4)
         {
            document.getElementById("signup:howtoplay").style.display = 'none';
            document.getElementById("signup:rules").style.display = 'none';
            document.getElementById("signup:challenges").style.display = 'none';
            document.getElementById("signup:pickateam").style.display = 'block';

             first = 1;
         }
     }
 </script>
</body>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top