html - जेएसएफ की आवश्यकता क्या है, जब यूआई सीएसएस, एचटीएमएल, जावास्क्रिप्ट, jQuery से प्राप्त किया जा सकता है?




jquery-ui jsf extjs (8)

जेएसएफ सादे जेएसपी / सर्वलेट / एचटीएमएल / सीएसएस / जेएस सादे जेएस के लिए jQuery की तरह है: कम कोड के साथ और अधिक करें। उदाहरण के रूप में प्राइमफेस (jQuery + jQuery UI आधारित) लेने के लिए, पूर्ण कोड उदाहरण देखने के लिए अपने showcase माध्यम से ब्राउज़ करें। BootsFaces (jQuery + बूटस्ट्रैप यूआई आधारित) में पूर्ण कोड उदाहरणों के साथ एक showcase भी है। यदि आप उन उदाहरणों का बारीकी से अध्ययन करते हैं, तो आप देखेंगे कि आपको मूल रूप से एक साधारण जावबीन वर्ग को मॉडल और एक्सएचटीएमएल फ़ाइल के रूप में देखने की आवश्यकता है।

ध्यान दें कि आपको जेएसएफ को अकेले एचटीएमएल / सीएसएस / जेएस के प्रतिस्थापन के रूप में नहीं देखना चाहिए, आपको सर्वर साइड पार्ट को खाते में ले जाना चाहिए (विशेष रूप से: जेएसपी / सर्वलेट)। जेएसएफ ने एचटीटीपी अनुरोध पैरामीटर इकट्ठा करने, उन्हें परिवर्तित करने / मान्य करने, मॉडल मूल्यों को अद्यतन करने, व्यापार सामग्री करने के लिए सही जावा विधि निष्पादित करने और HTML / CSS / JS बॉयलरप्लेट कोड उत्पन्न करने के सभी बॉयलरप्लेट की आवश्यकता को हटा दिया। जेएसएफ के साथ आप मूल रूप से एक एक्सएचटीएमएल पेज के साथ दृश्य परिभाषा और एक जावावीन वर्ग मॉडल परिभाषा के रूप में समाप्त होते हैं। यह विकास को बहुत तेज करता है।

प्रत्येक घटक आधारित वेब एमवीसी ढांचे के साथ, आपके पास जेएसएफ में प्रस्तुत एचटीएमएल / सीएसएस / जेएस पर कम जुर्माना नियंत्रण है। कस्टम जेएस कोड जोड़ना इतना आसान नहीं है क्योंकि आपको सर्वर पक्ष में जेएसएफ व्यू स्टेटस भी खाते में लेना है (उदाहरण के लिए जेएस पक्ष में एक अक्षम बटन सक्षम करना जेएसएफ पक्ष में बटन को सक्षम नहीं करेगा, जो बदले में है विशाल सुरक्षा लाभ)। यदि यह एक प्रमुख शोस्टॉपर है, तो स्प्रिंग एमवीसी जैसे एक्शन आधारित वेब एमवीसी फ्रेमवर्क की तलाश करें। आप केवल ध्यान में रखेंगे कि आपको अपने सभी HTML / CSS / JS कोड को स्वयं लिखना होगा। इसके अलावा यदि आप फेसलेट से जेएसपी तक वापस आते हैं, तो आप उन्नत टेम्पलेटिंग क्षमताओं को भी याद करेंगे।

दूसरी तरफ, यदि आपके पास एक बड़ा जेएसपी / सर्वलेट / एचटीएमएल / सीएसएस / जेएस / jQuery आधारित वेबसाइट है और आप बार-बार जेएसपी / सर्वलेट / एचटीएमएल / सीएसएस / जेएस / jQuery बॉयलरप्लेट कोड को पुन: प्रयोज्य घटकों में दोबारा प्रतिक्रिया देना चाहते हैं, तो समाधानों में से एक जेएसएफ होगा। कस्टम टेम्पलेट्स, टैगफाइल और घटक इस में सहायता कर सकते हैं। उस परिप्रेक्ष्य में, जेएसएफ जेएसपी / सर्वलेट / एचटीएमएल / सीएसएस / जेएस / jQuery से ऊपर है (और यही कारण है कि जेएसएफ में गोता लगाने से पहले उन मूल बातें समझना बहुत महत्वपूर्ण है)।

आप यहां एक असली दुनिया किकऑफ जेएसएफ आधारित परियोजना पा सकते हैं: जावा ईई किकऑफ ऐप । आप देखेंगे कि यह JSF बगल में अच्छा HTML5 , CSS3 और jQuery

यह भी देखें:

मैं जेएसएफ के बारे में पढ़ रहा था कि यह एक यूआई ढांचा है और कुछ यूआई घटक प्रदान करता है। लेकिन यह एक्सटी जेएस या jQuery या सीएसएस और एचटीएमएल और जावास्क्रिप्ट के संयोजन से उपलब्ध घटकों की संख्या से बेहतर या अलग कैसे हो सकता है।

किसी को जेएसएफ क्यों सीखना चाहिए?


मैं दृढ़ता से असहमत हूं कि जेएसएफ कुछ भी जोड़ता है। यह केवल ऊपर की ओर जोड़ता है। सर्वर पर यूई सामान करना कभी भी सुनाई जाने वाली सबसे हास्यास्पद चीज है। और बड़ी टीमों पर जावास्क्रिप्ट बहुत अच्छा काम करता है - इसे पुन: उपयोग कोड कहा जाता है।

बस कुछ jsp टैग में jquery को लपेटें, जो आपको चाहिए और आपने किया है, और .jsf और richfaces के साथ। Shackles और स्केलेबिलिटी समस्याओं को सहन न करें।


जेएसएफ का उपयोग करने के लाभ न केवल एक्सएचटीएमएल + सीएसएस + जेएस उत्पन्न करने में हैं। कभी-कभी जेएसएफ किसी भी घटक आधारित ढांचे की तरह, आपके द्वारा जेनरेट किए जा सकने वाले मार्कअप पर प्रतिबंध लगाता है। लेकिन जेएसएफ सिर्फ इसके लिए नहीं है, इसकी जीवनशैली काफी मदद करता है। इनपुट को सत्यापित करने के बाद यह मॉडल को अपडेट कर सकता है और बिना किसी प्रयास के आपके सर्वर साइड बीन्स को सिंक कर सकता है। आप बस "जो भी उपयोगकर्ता यहां टाइप करते हैं, जांचें कि यह एक संख्या है, यदि हां, तो उसे ऑब्जेक्ट एक्सएक्स में संपत्ति वाई वाई में स्टोर करें" और जेएसएफ वह सब कुछ करेगा।

तो हाँ, आप अभी भी JQuery, JS, आदि का उपयोग कर सकते हैं लेकिन जेएसएफ सर्वर साइड कोड लिखने के लिए कई फायदे प्रदान करता है और आपको बॉयलर प्लेट से बचाता है।


जेएसएफ, स्प्रिंग एमवीसी, स्ट्रूट्स, Grails, JQuery, और ExtJS के साथ काम करने के बाद मेरी राय यह है कि Grails + ExtJS एक शक्तिशाली संयोजन है।

मैं किसी भी दिन जेएसएफ पर Grails चुनना होगा। मुझे क्लाइंट साइड फ्रेमवर्क और लाइब्रेरी के रूप में एक्स्टजेस की पूर्णता पसंद है, लेकिन यह JQuery की तुलना में एक तेज सीखने की वक्र के साथ आता है।


एक बड़े वेब अनुप्रयोग के लिए ExtJS ढांचे का उपयोग करने के बाद, मुझे पता है कि इसका उपयोग करना कितना आसान है। ExtJS (Schena) एमवीसी आर्किटेक्चर में डेटाबेस इंटरैक्शन के लिए सबसे अच्छा (ओरेकल 11 जी) के लिए उपयुक्त है। दृश्य दृश्य / उपयोगकर्ता इंटरैक्शन के लिए था। नियंत्रक ने 'प्रसंस्करण' और ट्रिगर्स को निर्दिष्ट किया जो कि पीएलएसक्यूएल पैकेज (सीआरयूडी के लिए एपीआई, एसक्यूएल चयन प्रश्न आदि) के रूप में उपयोग किए जाने की आवश्यकता है। मॉडल और स्टोर फ़ाइलों का उपयोग डेटा आइटम को दर्शक / इनपुट में 'मानचित्र' करने के लिए किया गया था।

ExtJS गैर डेटाबेस गहन वेब इंटरफेस के लिए उपयुक्त नहीं है - जहां कोणीय जेएस बेहतर फिट हो सकता है।


जेएसएफ को बनाने के लिए बनाया गया था ताकि जावा दुकानों को jQuery जैसी चीजें सीखने और जटिल जेएस बनाने की आवश्यकता न हो, बल्कि इसके बजाय पूरी तरह से जावा स्टैक पर ध्यान केंद्रित किया जाए। ऐसी दुनिया में जहां समय धन है और जावा विकास पर पहले से ही बहुत से स्थान केंद्रित हैं, स्टैक में एक कम भाषा / टुकड़ा प्रशिक्षण और तेजी से बनाए रखने और इस तरह सस्ता बना देता है।

मैं जोड़ूंगा कि जावास्क्रिप्ट बड़ी टीमों पर रखरखाव दुःस्वप्न बनना आसान है, खासकर अगर परियोजना के कुछ डेवलपर्स अत्यधिक वेब समझदार नहीं हैं।


JQuery और JSF के बीच सबसे बड़ा अंतर यहां दिया गया है:

  • कोई एमवीसी वास्तुकला नहीं
  • कोई राज्य नियंत्रण नहीं (सत्र या वार्तालाप में स्टोर तिथि, स्वत: साफ, आदि)
  • नहीं (डिफ़ॉल्ट) सत्यापन पुस्तकालय
  • कोई templating पुस्तकालय
  • कोई उन्नत नेविगेशन / रूटिंग नहीं
  • ग्राहक की ओर

jQuery को पूर्ण स्टैक वेबफ्रेमवर्क के रूप में उपयोग करने का इरादा कभी नहीं था। यह निम्न स्तर के जेएस कोड को बदलने के लिए अधिक इरादा था ताकि जेएस लिखना कोड की कम लाइनों में आसान और अधिक शक्तिशाली हो।

और इस प्रकार इसे अधिकतर HTML तत्वों पर व्यवहार जोड़ने के लिए उपयोग किया जाना चाहिए।


e.preventDefault ();

यह बस एक तत्व की डिफ़ॉल्ट कार्रवाई को रोकता है।

इंस्टेंस एक्स :-

URL का पालन करने से हाइपरलिंक को रोकता है, सबमिट सबमिट करने के लिए सबमिट बटन को रोकता है। जब आपके पास कई ईवेंट हैंडलर होते हैं और आप केवल डिफ़ॉल्ट ईवेंट को होने से रोकना चाहते हैं, और कई बार ऐसा करना चाहते हैं, इसके लिए हमें फ़ंक्शन () के शीर्ष में उपयोग करने की आवश्यकता है।

कारण:-

e.preventDefault(); का उपयोग करने का कारण e.preventDefault(); यह है कि हमारे कोड में कोड में कुछ गलत हो जाता है, फिर यह सबमिट करने के लिए लिंक या फॉर्म निष्पादित करने की अनुमति देगा या निष्पादित करने की अनुमति देगा या आपको जो भी कार्रवाई करने की आवश्यकता है उसे अनुमति दें। लिंक या सबमिट बटन सबमिट हो जाएगा और अभी भी घटना के आगे प्रसार की अनुमति देगा।

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

विवरण झूठा है;

यह बस फ़ंक्शन () के निष्पादन को रोकता है।

" return false; " प्रक्रिया के पूरे निष्पादन को खत्म कर देगा।

कारण:-

वापसी झूठी उपयोग करने का कारण; यह है कि आप कड़ाई से मोड में फ़ंक्शन निष्पादित नहीं करना चाहते हैं।

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>





jquery html jquery-ui jsf extjs