💆 ❗️ 👊🏼 HTML का उपयोग करके डेटा वेयरहाउस के रूप में पृष्ठ पर डेटा का दृश्य संपादन ▫️ 💅🏾 💅🏾

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

इन विकल्पों में से चुनना मुश्किल नहीं है: एसवीजी आरेख या योजनाओं और अन्य वेक्टर ग्राफिक्स के लिए उपयुक्त है, कैनवास तस्वीरों या अन्य छवियों के लिए अधिक उपयुक्त है। हालांकि, इन दोनों तत्वों को पृष्ठ से खुद को "अलग करने" की आवश्यकता होती है। "पृथक्करण" से मेरा मतलब है कि इनमें से किसी भी तत्व को मॉडल के साथ दृश्य को सिंक्रनाइज़ करने के लिए अतिरिक्त स्क्रिप्ट लिखने की आवश्यकता है।

छोटी वस्तुओं के लिए जिनकी संरचना अच्छी तरह से एक पेड़ या सूची (उदाहरण के लिए, खरीदारी की टोकरी या व्यवसाय प्रक्रिया) द्वारा वर्णित है, डेटा को प्रदर्शित करने और संग्रहीत करने के लिए एचटीएमएल तत्वों का उपयोग करके विकास और समर्थन को सरल बनाया जा सकता है।

सारा डेटा पहले से ही पेज पर है।

एक HTML पृष्ठ, सबसे पहले, एक दस्तावेज है, और ग्राफिक तत्वों का सिर्फ एक मार्कअप नहीं है, जिसका अर्थ है कि पृष्ठ में ही सभी डेटा हो सकते हैं। 'डेटा' विशेषताओं के अस्तित्व को देखते हुए, आप लगभग हर चीज को बचा सकते हैं जिसे एक स्ट्रिंग द्वारा दर्शाया जा सकता है। इस स्थिति में, सर्वर प्रदर्शन के लिए तुरंत पृष्ठ का एक टुकड़ा दे सकेगा और इसे अतिरिक्त प्रसंस्करण के बिना "जैसा है" डाला जा सकता है। सर्वर को डेटा भेजते समय फायदे भी होते हैं: आप "जैसा है" टुकड़ा भेज सकते हैं और एक्सएमएलटी से गुजरकर एक्सएमएल दस्तावेज़ प्राप्त कर सकते हैं, या इसे "मूल" वेब फ़ॉर्म के रूप में भेज सकते हैं, या JSON का उपयोग कर सकते हैं।

कल्पना कीजिए कि हमारे पास एक समाप्त पृष्ठ है; यह सामानों के साथ एक शेल्फ और एक साधारण सूची द्वारा कार्यान्वित खरीदारी की टोकरी प्रस्तुत करता है।

<ul id="store-shelf"> <li data-article="apple">Apple</li> <li data-article="milk">Milk</li> <li data-article="cacke">Cacke</li> <li data-topping="cherry" data-topping-article="cacke">Cherry Topping</li> <li data-topping="cream" data-topping-article="cacke">Cream Topping</li> </ul> <ul id="shop-cart"></ul> <input name="reset" type="button" value="Reset"/> <input name="submit" type="button" value="Submit"/>

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

हम तत्वों को नियंत्रित करने के लिए एक स्क्रिप्ट का उपयोग करते हैं

थोड़ा jQuery यूआई जोड़ें और शेल्फ से टोकरी तक आइटम खींचना शुरू करें।

 $("#shop-cart").droppable({ accept: 'li[data-article]', activeClass: 'active', hoverClass: 'hover', drop: shopCartDropHandler }); $('#store-shelf li').draggable({ cursor: 'pointer', revert: true, stack: 'li' }); function shopCartDropHandler(event, ui) { var clone, counter, $this = $(this), article = ui.draggable.attr('data-article'), existingGoods = $this.children('[data-article="' + article + '"]:not(:has([data-topping]))'); if (existingGoods.length) { counter = existingGoods.find('input[name="quantity"]'); counter.val(parseInt(counter.val()) + 1); } else { counter = $('<input name="quantity" type="number" value="1" min="1"/>'); clone = ui.draggable.clone().css({left: 0, top: 0}).append(counter); clone.droppable({ accept: 'li[data-topping-article="' + article + '"]', activeClass: 'active', hoverClass: 'hover', drop: shopCartItemDropHandler }); $this.append(clone); } } function shopCartItemDropHandler(event, ui) { var span, $this = $(this), topping = ui.draggable.attr('data-topping'), toppingName = ui.draggable.text(), existingToppings = $this.find('span[data-topping="' + topping + '"]'); if (!existingToppings.length) { span = $('<span/>').attr('data-topping', topping).text(toppingName); $this.append(span); } }

यहां हमने एक प्रकार का "ग्रुपिंग" जोड़ा (यदि कोई तत्व पहले से ही जोड़ा गया है, तो काउंटर बस बढ़ता है) और दो प्रकार के तत्वों के लिए समर्थन पेश किया: उत्पाद और विकल्प। अब एक शॉपिंग कार्ट इकट्ठा करते हैं। यदि हम टोकरी के साथ पृष्ठ का वर्तमान टुकड़ा लेते हैं, तो हम देख सकते हैं कि यह पूरी तरह से इसकी सामग्री का वर्णन करता है; सभी डेटा क्लाइंट साइड पर अतिरिक्त भंडारण की आवश्यकता के बिना पृष्ठों पर स्थित है (सर्वर के साथ सिंक्रनाइज़ेशन एक अलग मामला है और हम इसे यहां नहीं मानते हैं)। नीचे एक तैयार टोकरी का एक उदाहरण है (jQueryUI से संबंधित शैलियों और विशेषताओं को छोड़ दिया गया है)।

 <ul id="shop-cart" class="ui-droppable"> <li data-article="cacke">Cacke <input name="quantity" type="number" value="2" min="1"> <span data-topping="cherry">Cherry Topping</span> <span data-topping="cream">Cream Topping</span> </li> <li data-article="cacke">Cacke <input name="quantity" type="number" value="1" min="1"> <span data-topping="cherry">Cherry Topping</span> </li> <li data-article="milk">Milk <input name="quantity" type="number" value="2" min="1"> </li> <li data-article="apple">Apple <input name="quantity" type="number" value="1" min="1"> </li> </ul>

यह देखा जा सकता है कि हमारे पास तीन केक (क्रीम और चेरी के साथ दो और केवल चेरी के साथ एक), दो सर्विंग दूध और एक सेब के लिए ऑर्डर है।
सवाल यह है: इस डेटा को सर्वर पर कैसे भेजा जाए और इसे वापस कैसे प्रदर्शित किया जाए। सबमिट करने के लिए, आप फ़ॉर्म का उपयोग कर सकते हैं ('डेटा' विशेषताओं के भाग को छिपे हुए इनपुट फ़ील्ड से बदलना होगा), या तत्वों के JSON प्रतिनिधित्व के साथ एक अजाक्स अनुरोध भेजें। एक या किसी अन्य विकल्प का विकल्प तैयार संरचना की जटिलता पर निर्भर करता है: एक वेब फॉर्म बहु-स्तरीय संरचनाओं के लिए उपयुक्त नहीं है। चूंकि हमारे पास प्रत्येक स्थिति में दो स्तर हो सकते हैं (एक मात्रा के साथ मुख्य और विकल्पों का एक सेट), हम JSON का उपयोग करते हैं।

बस एक JSON है जो मौजूदा DOM संरचना को दर्शाता है, तत्वों की विशेषताओं और गुणों से डेटा निकालता है। उसी समय, हम "लेबल" और उत्पादों और विकल्पों के नामों को अनदेखा करते हैं, क्योंकि यह जानकारी महत्वपूर्ण नहीं है और आसानी से और विश्वसनीय रूप से सर्वर पर बहाल हो सकती है।

 $('input[name="submit"]').click(function () { var result = {items: []}; shopCart.find('li[data-article]').each(function () { var $this = $(this), toppings = [], article = { id: $this.attr('data-article') }, quantity = $this.find('input[name="quantity"]').val(); $this.find('span[data-topping]').each(function () { toppings.push({ id: $(this).attr('data-topping') }); }); result.items.push({ article: article, toppings: toppings, quantity: parseInt(quantity) }); }); $.ajax('/shopping-cart/webresources/cart', { cache: false, contentType: 'application/json', data: JSON.stringify(result), dataType: 'json', type: 'POST' }); });

सर्वर डाटा प्रोसेसिंग

सर्वर पर प्रसंस्करण काफी सरल माना जाता है: मांग पर बचत और जारी करना। ऐसा करने के लिए, हम ग्लासफ़िश और जर्सी द्वारा प्रदान की गई कार्यक्षमता का उपयोग वेब सेवाओं को बनाने, निर्भरता को जोड़ने और JSON को क्रमबद्ध करने के लिए करते हैं। हम एक REST सेवा बनाएंगे जो POST अनुरोध पर टोकरी को बचाएगा और GET अनुरोध पर सहेजे गए खरीदारी की सूची जारी करेगा। एक अन्य ऑब्जेक्ट जोड़ें जो शेल्फ पर उपलब्ध उत्पादों और विकल्पों को संग्रहीत करेगा और वर्तमान टोकरी को संग्रहीत करेगा। एक वास्तविक अनुप्रयोग में, एक डेटाबेस या अन्य भंडारण तंत्र इन कार्यों को लेगा।

 @Path("cart") @Singleton @ApplicationScoped public class ShoppingResource { @Inject private Storage storage; @GET @Produces(MediaType.APPLICATION_JSON) public ShoppingCart get() { eturn storage.getShoppingCart(); } @POST @Consumes(MediaType.APPLICATION_JSON) public void post(ShoppingCart shoppingCart) { storage.setShoppingCart(shoppingCart);} } @Named @Singleton @ApplicationScoped public class Storage { private final Map<String, Article> articles = new HashMap<>(); private final Map<String, Topping> toppings = new HashMap<>(); private ShoppingCart shoppingCart; @PostConstruct public void init() { Article cacke = new Article("cacke", "Cacke"); putArticles(cacke, new Article("milk", "Milk"), new Article("apple", "Apple")); putToppings( new Topping("cream", "Cream Topping", cacke), new Topping("cherry", "Cherry Topping", cacke)); } private void putArticles(Article... articles) { for (Article article : articles) { his.articles.put(article.getId(), article); } } private void putToppings(Topping... toppings) { for (Topping topping : toppings) { this.toppings.put(topping.getId(), topping); } } @PreDestroy public void clear() { articles.clear(); toppings.clear(); } public Collection<Article> getArticles() { return articles.values(); } public Collection<Topping> getToppings() { return toppings.values(); } public ShoppingCart getShoppingCart() { return shoppingCart; } public void setShoppingCart(ShoppingCart shoppingCart) { ensureConsistence(shoppingCart); this.shoppingCart = shoppingCart; } private void ensureConsistence(ShoppingCart cart) { /*  “”     “”   */ } }

हमें टोकरी के क्रमबद्ध दृश्य को पढ़ने और लिखने के लिए कक्षाएं भी चाहिए। निम्नलिखित एक सामान्य सार वर्ग है जो JSON और इसके विपरीत से सामान, विकल्प, और कार्ट आइटम को पढ़ने / लिखने के लिए मुख्य कार्यक्षमता को लागू करता है। प्रत्येक विशेष प्रकार इस प्रदाता के आधार पर अपने स्वयं के वर्ग का उपयोग करेगा।

 @Consumes(MediaType.APPLICATION_JSON) @Produces(MediaType.APPLICATION_JSON) public abstract class JsonProvider<T> implements MessageBodyReader<T>, MessageBodyWriter<T> { private static final Logger LOGGER = Logger.getLogger(JsonProvider.class.getName()); private final ConcurrentMap<T, byte[]> serializedMap = new ConcurrentHashMap<>(); private final ObjectMapper mapper = new ObjectMapper(); protected final ObjectMapper getMapper() { return mapper; } protected abstract Class<T> getType(); // Reader Implementation @Override public final boolean isReadable(Class<?> type, Type type1, Annotation[] antns, MediaType mt) { return mt.equals(MediaType.APPLICATION_JSON_TYPE) && getMapper().canDeserialize(getJavaType()) && getType().isAssignableFrom(type); } private JavaType getJavaType() { return TypeFactory.fromClass(getType()); } @Override public T readFrom(Class<T> type, Type type1, Annotation[] antns, MediaType mt, MultivaluedMap<String, String> mm, InputStream in) throws IOException, WebApplicationException { return (T) getMapper().readValue(in, getClass()); } // Writer Implementation @Override public final boolean isWriteable(Class<?> type, Type type1, Annotation[] antns, MediaType mt) { return mt.equals(MediaType.APPLICATION_JSON_TYPE) && getMapper().canSerialize(getType()) && getType().isAssignableFrom(type); } @Override public final long getSize(T t, Class<?> type, Type type1, Annotation[] antns, MediaType mt) { byte[] result = new byte[0]; try { ByteArrayOutputStream stream = new ByteArrayOutputStream(); getMapper().writeValue(stream, t); result = stream.toByteArray(); serializedMap.put(t, result); } catch (IOException ex) { LOGGER.log(Level.SEVERE, null, ex); } return result.length; } @Override public final void writeTo(T t, Class<?> type, Type type1, Annotation[] antns, MediaType mt, MultivaluedMap<String, Object> mm, OutputStream out) throws IOException, WebApplicationException { if (serializedMap.containsKey(t)) { byte[] data = serializedMap.remove(t); out.write(data); } out.flush(); } }

अब, टोकरी को बचाने के लिए, हम JSON का उपयोग करेंगे, DOM से सीधे डेटा निकालेंगे, और पेज लोड करते समय, हम सर्वर पर सहेजे गए डेटा से बस आवश्यक HTML टुकड़े उत्पन्न करते हैं।

 <ul id="store-shelf"> <c:forEach var="article" items="#{storage.articles}"> <li data-article="${article.id}">${article.name}</li> </c:forEach> <c:forEach var="topping" items="#{storage.toppings}"> <li data-topping="${topping.id}" data-topping-article="${topping.article.id}">${topping.name}</li> </c:forEach> </ul> <ul id="shop-cart"> <c:forEach var="item" items="#{storage.shoppingCart.items}"> <li data-article="${item.article.id}">${item.article.name} <c:forEach var="topping" items="${item.toppings}"> <span data-topping="${topping.id}">${topping.name}</span> </c:forEach> <input name="quantity" type="number" value="${item.quantity}" min="1"/> </li> </c:forEach> </ul>

नतीजतन, हमें एक साधारण खरीदारी की टोकरी मिली, जो कुछ हद तक एमवीवीएम दृष्टिकोण को लागू करती है और ग्राहक पक्ष पर अतिरिक्त सिंक्रनाइज़ेशन की आवश्यकता नहीं होती है। ग्राहक के अनुरोध के आधार पर विभिन्न स्वरूपों को प्रदान करने वाली REST सेवा के संयोजन में, हम डेटा प्रदर्शित करने के लिए कई तरीकों का उपयोग कर सकते हैं (उदाहरण के लिए, XML डेटा को तृतीय-पक्ष सेवाओं में सबमिट करें)।

बेशक, ऐसा समाधान सरल मामलों के लिए उपयुक्त है जब मॉडल अच्छी तरह से एक पेड़ द्वारा दर्शाया जाता है; स्वाभाविक रूप से, जटिल मामलों के लिए (बड़ी संख्या में तत्वों के साथ, या जब मॉडल "पेड़ जैसी एचटीएमएल संरचना" में अच्छी तरह से फिट नहीं होता है, तो अन्य समाधानों की आवश्यकता होगी (उदाहरण के लिए, एसवीजी या एक कैनवास तीसरे पक्ष के पुस्तकालयों का उपयोग करके विस्तारित) या फ्लैश या जावाएफएक्स की तुलना में पूरी तरह से अलग।

HTML का उपयोग करके डेटा वेयरहाउस के रूप में पृष्ठ पर डेटा का दृश्य संपादन

सारा डेटा पहले से ही पेज पर है।

हम तत्वों को नियंत्रित करने के लिए एक स्क्रिप्ट का उपयोग करते हैं

More articles: