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

इस लेख में केवल हिमशैल की नोक को प्रकट किया गया है जिसे पिको लिस्प कहा जाता है। डेटाबेस इंटर्नल्स, डिस्ट्रिब्यूटेड डेटाबेस का संगठन, डिबगिंग, फंक्शनल I / O, एक ऑब्जेक्ट मॉडल के साथ कई विरासत, PicoLisp Prolog के बारे में दिलचस्प अंक बचे हुए थे ...

मुझे अभी भी उम्मीद है कि घरेलू प्रोग्रामर इस शक्तिशाली टूल पर करीब से नज़र डालें।

सावधानी, कट के तहत बहुत सारे पाठ और कोष्ठक!

PicoLisp पर वेब अनुप्रयोग विकास

© सॉफ्टवेयर लैब। अलेक्जेंडर बर्गर

यह दस्तावेज़ PicoLisp में वेब एप्लिकेशन लिखने के लिए एक परिचय प्रदान करता है।

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

सरल HTTP / HTML ग्राफिकल इंटरफ़ेस के कई फायदे हैं: यह किसी भी ब्राउज़र में काम करता है और इसे पूरी तरह से एक स्क्रिप्ट ("@ lib / scrape.l") द्वारा नियंत्रित किया जा सकता है।

अधिक सटीक रूप से, CSS का उपयोग लेआउट को बेहतर बनाने के लिए किया जा सकता है। और जावास्क्रिप्ट के साथ ब्राउज़र तेजी से और अधिक सुचारू रूप से जवाब देंगे। लेकिन यह ढांचा उन ब्राउज़रों में भी ठीक काम करता है जो सीएसएस या जावास्क्रिप्ट के बारे में कुछ नहीं जानते हैं। सभी उदाहरणों को w3m टेक्स्ट ब्राउज़र में भी परखा गया है।

PicoLisp सिस्टम के बारे में बुनियादी जानकारी: PicoLisp संदर्भ और PicoLisp ट्यूटोरियल । HTML और कुछ CSS और HTTP का ज्ञान ग्रहण किया जाता है।

उदाहरण मानते हैं कि PicoLisp एक वैश्विक स्थापना (स्थापना देखें) से लॉन्च किया गया था।

स्थैतिक पेज

PicoLisp का इस्तेमाल स्टेटिक HTML पेज बनाने के लिए किया जा सकता है। यह अकेले बहुत मायने नहीं रखता है, क्योंकि यह सीधे HTML कोड लिखना संभव है, लेकिन यह इंटरैक्टिव अनुप्रयोगों के लिए आधार बनाता है और हमें एप्लिकेशन सर्वर और अन्य बुनियादी अवधारणाओं से परिचित होने की अनुमति देता है।

नमस्ते दुनिया

एक न्यूनतम आवेदन के साथ शुरू करने के लिए, PicoLisp स्थापना निर्देशिका में एक "project.l" फ़ाइल बनाएं और निम्नलिखित दो लाइनें दर्ज करें।

 ######################################################################## (html 0 "Hello" "@lib.css" NIL "Hello World!" ) ########################################################################

(हम इस फ़ाइल को निम्न सभी उदाहरणों में उपयोग और संशोधित करेंगे। जब भी आप लाइनों ('#####') के बीच इस तरह के कार्यक्रम का सामना करते हैं, तो बस इसे "प्रोजेक्ट.एल" फ़ाइल में कॉपी और पेस्ट करें और बटन पर क्लिक करें। परिणाम देखने के लिए अपने ब्राउज़र को "ताज़ा करें"

अनुप्रयोग सर्वर लॉन्च

एक टर्मिनल विंडो खोलें और PicoLisp एप्लिकेशन सर्वर शुरू करें

 $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 project.l +

कमांड प्रॉम्प्ट दिखाई नहीं देगा। सर्वर ऊपर है और एक कनेक्शन की प्रतीक्षा कर रहा है। आप इस टर्मिनल में Ctrl-C दबाकर या किसी अन्य टर्मिनल विंडो में ' killall pil ' को निष्पादित करके बाद में इसे रोक सकते हैं।

(आगे के उदाहरणों में, हम मानते हैं कि यह HTTP सर्वर काम करना जारी रखता है)

अब ब्राउज़र में URL ' http: // localhost: 8080 ' खोलें। आपको टेक्स्ट की एक पंक्ति के साथ एक खाली पृष्ठ देखना चाहिए।

यह कैसे काम करता है?

ऊपर की लाइन डिबगर (विकल्प "+"), HTTP सर्वर कोड ("@ lib / http.l"), XHTML फ़ंक्शंस ("@ lib / xhtml.l") और GUI फ्रेमवर्क ("@ lib / form.l") को लोड करती है , यह बाद में इंटरैक्टिव रूपों के लिए आवश्यक होगा)।

फिर server फ़ंक्शन को पोर्ट नंबर और डिफ़ॉल्ट URL के साथ कहा जाता है। वह अनंत लूप में आने वाले HTTP अनुरोधों के लिए इस पोर्ट को सुनेगा। जब भी पोर्ट 8080 पर GET का अनुरोध आता है, तो "project.l" फ़ाइल को डाउनलोड किया जाएगा और उसे लोड किया जाएगा (लोड)

इस फ़ाइल के निष्पादन के दौरान, वर्तमान आउटपुट चैनल (STDOUT) में दर्ज सभी डेटा को सीधे ब्राउज़र में भेजा जाता है। "Project.l" में कोड HTML (या ब्राउज़र जो समझता है एक और प्रारूप) उत्पन्न करने के लिए जिम्मेदार है।

URL सिंटैक्स

क्लाइंट के साथ यूआरएल एक्सचेंज करते समय एप्लिकेशन सर्वर थोड़ा विशेष सिंटैक्स का उपयोग करता है। URL का "पथ" हिस्सा वह है जो ट्रिमिंग के बाद बना रहता है

प्रोटोकॉल, होस्ट, और पोर्ट विनिर्देशों,
अंतिम प्रश्न चिह्न और तर्क,

कुछ नियमों के अनुसार व्याख्या की गई। उनमें से सबसे महत्वपूर्ण:

यदि पथ एक विस्मयादिबोधक बिंदु ('!') से शुरू होता है, तो बाकी (बिना '!') को लिस्प फ़ंक्शन के नाम से लिया जाता है। प्रश्न चिह्न के बाद सभी तर्क इस फ़ंक्शन को दिए जाते हैं।
यदि पथ ".l" (डॉट और "L" निचले मामले में) के साथ समाप्त होता है, तो इसे लिस्प फ़ाइल के नाम के रूप में लिया जाता है, जिसे तब लोड (लोड) का उपयोग करके लोड किया जाता है । यह सबसे आम मामला है, और हम इसे अपने प्रोजेक्ट में उपयोग करते हैं। उदाहरण के लिए।
यदि फ़ाइल नाम एक्सटेंशन वैश्विक माइम *Mimes प्रकार तालिका में प्रविष्टि से मेल खाता है, तो फ़ाइल क्लाइंट को माइम-प्रकार और इस तालिका से ली गई अधिकतम-आयु मान के साथ भेजी जाती है।
अन्यथा, फ़ाइल क्लाइंट को माइम प्रकार "एप्लिकेशन / ऑक्टेट-स्ट्रीम" और अधिकतम 1 सेकंड की उम्र के साथ भेजा जाता है।

कोई एप्लिकेशन mime फ़ंक्शन के प्रतिबंध के बिना *Mimes तालिका का विस्तार या संशोधन कर सकता है। उदाहरण के लिए

 (mime "doc" "application/msword" 60)

एक मिनट में अधिकतम आयु के साथ एक नया माइम प्रकार को परिभाषित करता है।

पथ और प्रश्न चिह्न के बाद URL में दिए गए तर्कों के मान इस तरह से इनकोड किए गए हैं जैसे कि लिस्प डेटा प्रकारों को संरक्षित करने के लिए:

एक नियमित प्रतीक (आंतरिक प्रतीक) एक डॉलर प्रतीक ("$") से शुरू होता है
संख्या एक प्लस चिह्न (+) से शुरू होती है
एक बाहरी चरित्र (डेटाबेस ऑब्जेक्ट) डैश के साथ शुरू होता है ('-')
सूची (केवल एकल-स्तर) अंडरस्कोर ('_') से एन्कोडेड है
अन्यथा, यह एक पारगमन चरित्र है (नियमित स्ट्रिंग)

इस तरह, उच्च-स्तरीय डेटा प्रकार सीधे URL में एन्कोड किए गए फ़ंक्शन को पास किए जा सकते हैं, या फ़ाइल को डाउनलोड करने से पहले वैश्विक चर को सौंपा जा सकता है।

सुरक्षा

बेशक, यह एक विशाल सुरक्षा छेद है यदि किसी भी लिस्प फ़ाइल को सीधे यूआरएल से लोड किया जा सकता है, और किसी भी फ़ंक्शन को बुलाया जा सकता है। इस कारण से, एप्लिकेशन को यह निर्दिष्ट करने के लिए ध्यान रखना चाहिए कि URL में कौन सी फाइलें और फ़ंक्शन की अनुमति है। सर्वर वैश्विक * चेक चर की अनुमति देता है, और जब इसका मूल्य NIL नहीं होता है, तो यह उस चीज तक पहुंच से इनकार करता है जो इसकी सामग्री से मेल नहीं खाती।

एक नियम के रूप में *Allow सीधे बदलें नहीं, लेकिन अनुमत और अनुमत कार्यों का उपयोग करें

 (allowed ("app/") "!start" "@lib.css" "customer.l" "article.l" )

यह आमतौर पर आवेदन की शुरुआत में कहा जाता है और एप्लिकेशन / निर्देशिका, प्रारंभ कार्यों और @ lib.css, कस्टोम कस्टमेल और लेख.एल फाइलों तक पहुंच की अनुमति देता है।

बाद में, कार्यक्रम में, *Allow साथ गतिशील रूप से विस्तारित किया जा सकता है

 (allow "!foo") (allow "newdir/" T)

यह foo फ़ंक्शन और अनुमत तत्वों के सेट में newdir / निर्देशिका जोड़ता है।

फ़ाइल .pw

सुरक्षा निगरानी में उपयोग के लिए (मुख्य रूप से psh फ़ंक्शन का उपयोग करने के लिए, कुछ बाद के उदाहरणों में), PicoLisp स्थापना निर्देशिका में ".pw" नामक एक फ़ाइल बनाना आवश्यक है। इस फ़ाइल में पासवर्ड के रूप में उपयोग के लिए मनमानी डेटा की एक पंक्ति होनी चाहिए।

इस फ़ाइल को बनाने का अनुशंसित तरीका "@ lib / http.l" में परिभाषित pw फ़ंक्शन को कॉल करना है।

 $ pil @lib/http.l -'pw 12' -bye

कृपया इस कमांड को चलाएं।

`html` फ़ंक्शन

अब हमारे हैलो वर्ल्ड उदाहरण पर वापस आते हैं। मूल रूप से, आप आउटपुट स्टेटमेंट के अनुक्रम के रूप में "प्रोजेक्ट.ल" लिख सकते हैं

 ######################################################################## (prinl "HTTP/1.0 200 OK^M") (prinl "Content-Type: text/html; charset=utf-8") (prinl "^M") (prinl "<html>") (prinl "Hello World!") (prinl "</html>") ########################################################################

लेकिन html फ़ंक्शन का उपयोग करना अधिक सुविधाजनक है।

इसके अलावा, html एक प्रिंट फंक्शन से ज्यादा कुछ नहीं है। आप इसे आसानी से देख सकते हैं यदि आप PicoLisp Shell ( psh ) को सर्वर प्रक्रिया से जोड़ते हैं (आपको इसके लिए ".pw" फ़ाइल जनरेट करनी थी) और html फ़ंक्शन दर्ज करें।

 $ /usr/lib/picolisp/bin/psh 8080 : (html 0 "Hello" "@lib.css" NIL "Hello World!") HTTP/1.0 200 OK Server: PicoLisp Date: Fri, 29 Dec 2006 07:28:58 GMT Cache-Control: max-age=0 Cache-Control: no-cache Content-Type: text/html; charset=utf-8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Hello</title> <base href="http://localhost:8080/"/> <link rel="stylesheet" type="text/css" href="http://localhost:8080/@lib.css"/> </head> <body>Hello World!</body> </html> -> </html> : # (type Ctrl-D here to terminate PicoLisp)

html लिए तर्क:

0 : ब्राउज़र कैश की निगरानी के लिए अधिकतम आयु मान (सेकंड में, शून्य का अर्थ "नो-कैश") है। आप उन पृष्ठों के लिए अधिक मूल्य निर्धारित कर सकते हैं जो शायद ही कभी बदलते हैं, या कैश नियंत्रण को अक्षम करने के लिए NIL ।
"Hello" : पृष्ठ का नाम।
"@lib.css" : CSS फ़ाइल नाम। यदि आप CSS का उपयोग नहीं करना चाहते हैं तो NIL पास करें, या यदि आप एक से अधिक CSS फ़ाइल का उपयोग करना चाहते हैं, तो फ़ाइल नामों की एक सूची।
NIL : body टैग के लिए CSS विशेषताओं की विशिष्टता (नीचे CSS विशेषताओं का विवरण देखें)।

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

यदि तर्क एक परमाणु (संख्या या वर्ण / स्ट्रिंग) है, तो इसका मूल्य तुरंत मुद्रित किया जाएगा।
अन्यथा (एक सूची), इसका मूल्यांकन लिस्प कार्यों के रूप में किया जाता है (आमतौर पर ये प्रिंट स्टेटमेंट के कुछ रूप हैं)।

इस प्रकार, हमारी स्रोत फ़ाइल को इस प्रकार भी लिखा जा सकता है:

 ######################################################################## (html 0 "Hello" "@lib.css" NIL (prinl "Hello World!") ) ########################################################################

सबसे आम मुद्रण विशेषताएं कुछ HTML टैग हैं:

 ######################################################################## (html 0 "Hello" "@lib.css" NIL (<h1> NIL "Hello World!") (<br> "This is some text.") (ht:Prin "And this is a number: " (+ 1 2 3)) ) ########################################################################

<h1> और <br> टैग फ़ंक्शंस हैं। <h1> अपने पहले तर्क के रूप में एक CSS विशेषता लेता है।

Ht के उपयोग पर ध्यान दें ht:Prin बजाय prin । ht:Prin फ़ंक्शन को HTML पृष्ठों में प्रत्यक्ष मुद्रण के लिए उपयोग किया जाना चाहिए क्योंकि यह विशेष वर्णों से बच जाता है।

सीएसएस गुण

ऊपर html फ़ंक्शन और कई टैग फ़ंक्शन सीएसएस विशेषता विनिर्देशों को स्वीकार करते हैं। यह एक एटम, कॉन्स पेयर या कॉन्स पेयर की लिस्ट हो सकती है। हम उदाहरण के रूप में <h1> टैग का उपयोग करके इसे दिखाते हैं।

एक परमाणु (आमतौर पर एक चरित्र या स्ट्रिंग) को सीएसएस वर्ग नाम के रूप में व्याख्या की जाती है

 : (<h1> 'foo "Title") <h1 class="foo">Title</h1>

कंस-जोड़ी के लिए, CAR को एक विशेषता नाम और CDR को एक विशेषता मान के रूप में माना जाता है

 : (<h1> '(id . bar) "Title") <h1 id="bar">Title</h1>

इसलिए, सामान्य जोड़े की सूची विशेषता-मूल्य जोड़े का एक सेट देती है

 : (<h1> '((id . "abc") (lang . "de")) "Title") <h1 id="abc" lang="de">Title</h1>

टैग कार्य

सभी पूर्वनिर्धारित XHTML टैग फ़ंक्शन "@ lib / xhtml.l" में पाए जा सकते हैं। हम उनकी परिभाषाओं पर एक नज़र डालने और PicoLisp कंसोल में निष्पादित करके या प्रोजेक्ट.l फ़ाइल को संपादित करने के बाद रीफ़्रेश ब्राउज़र बटन पर क्लिक करके प्रयोग करने की सलाह देते हैं।

एक उपयुक्त PicoLisp कंसोल प्राप्त करने के लिए, एक अलग टर्मिनल विंडो में PicoLisp Shell ( psh ) कमांड चलाएँ (यह केवल तभी काम करता है जब एप्लिकेशन सर्वर चल रहा हो और आपने ".pw" फ़ाइल बनाई हो)

 $ /usr/lib/picolisp/bin/psh 8080 :

या मॉड्यूल "@ lib / xhtml.l" को लोड करके दुभाषिया चलाएं

 $ pil @lib/http.l @lib/xhtml.l + :

ध्यान दें कि इन सभी टैग कार्यों के लिए, टैग फ़ंक्शन के मूल्यांकन के नियम लागू होते हैं।

सरल टैग

अधिकांश टैग कार्य सरल और सीधे हैं। उनमें से कुछ सिर्फ अपनी दलीलें छापते हैं।

 : (<br> "Hello world") Hello world<br/> : (<em> "Hello world") <em>Hello world</em>

हालाँकि, उनमें से अधिकांश सीएसएस विशेषताओं के एक सेट को अपने पहले तर्क के रूप में स्वीकार करते हैं (जैसे <h1> ऊपर)

 : (<div> 'main "Hello world") <div class="main">Hello world</div> : (<p> NIL "Hello world") <p>Hello world</p> : (<p> 'info "Hello world") <p class="info">Hello world</p>

इन सभी कार्यों में एक मनमानी संख्या होती है और एक मनमाने ढंग से घोंसले की गहराई हो सकती है (जब तक कि HTML मार्कअप रहता है)

 : (<div> 'main (<h1> NIL "Head") (<p> NIL (<br> "Line 1") "Line" (<nbsp>) (+ 1 1) ) ) <div class="main"><h1>Head</h1> <p>Line 1<br/> Line 2</p> </div>

सूचियों

<ol> और <ul> टैग द्वारा कार्यान्वित HTML सूचियाँ आपको पदानुक्रमित संरचनाओं को परिभाषित करने की अनुमति देती हैं। निम्नलिखित कोड को "project.l" की कॉपी में पेस्ट करें:

 ######################################################################## (html 0 "Unordered List" "@lib.css" NIL (<ul> NIL (<li> NIL "Item 1") (<li> NIL "Sublist 1" (<ul> NIL (<li> NIL "Item 1-1") (<li> NIL "Item 1-2") ) ) (<li> NIL "Item 2") (<li> NIL "Sublist 2" (<ul> NIL (<li> NIL "Item 2-1") (<li> NIL "Item 2-2") ) ) (<li> NIL "Item 3") ) ) ########################################################################

यहां आप इस पेड़ के प्रत्येक नोड में अन्य टैग कार्यों सहित, मनमाना कोड भी डाल सकते हैं।

टेबल

पदानुक्रमित संरचनाओं की तरह, आप <table> और <row> फ़ंक्शन का उपयोग करके दो-आयामी तालिकाओं को उत्पन्न कर सकते हैं।

निम्नलिखित उदाहरण संख्याओं और उनके वर्गों की एक तालिका प्रदर्शित करता है:

 ######################################################################## (html 0 "Table" "@lib.css" NIL (<table> NIL NIL NIL (for N 10 # A table with 10 rows (<row> NIL N (prin (* NN))) ) ) ) # and 2 columns ########################################################################

<table> लिए पहला तर्क नियमित CSS विशेषता है, दूसरा एक वैकल्पिक हेडर है, और तीसरा कॉलम हेडर की एक वैकल्पिक सूची है। इस सूची में, आप प्रत्येक स्तंभ के लिए एक सूची पास कर सकते हैं, जिसमें कार में CSS विशेषता और स्तंभ शीर्षलेख की सामग्री के लिए CDR में एक टैग निकाय है।

शरीर <table> में <row> फ़ंक्शन में कॉल हैं। फ़ंक्शन की विशेषता यह है कि इसके शरीर में प्रत्येक अभिव्यक्ति तालिका के एक अलग कॉलम में जाएगी। यदि स्तंभ शीर्षक और <row> फ़ंक्शन के लिए सीएसएस विशेषता निर्दिष्ट की जाती है, तो उन्हें एक स्थान के साथ जोड़ दिया जाएगा और <td> लिए पारित किया जाएगा। यह आपको प्रत्येक पंक्ति और स्तंभ के लिए अलग-अलग सीएसएस विशेषताओं को निर्दिष्ट करने की अनुमति देता है।

उपरोक्त उदाहरण तालिका के विस्तार के रूप में, आइए तालिका के लिए स्वयं कुछ विशेषताएँ निर्धारित करें (हालाँकि ऐसा करने की अनुशंसा नहीं की जाती है - CSS फ़ाइल में ऐसी शैलियों को परिभाषित करना बेहतर है और फिर कक्षा का नाम <table> ), दोनों स्तंभों को दाईं ओर संरेखित करें और प्रत्येक को प्रदर्शित करें चर (लाल और नीले) रंगों में स्ट्रिंग

 ######################################################################## (html 0 "Table" "@lib.css" NIL (<table> '((width . "200px") (style . "border: dotted 1px;")) # table style "Square Numbers" # caption '((align "Number") (align "Square")) # 2 headers (for N 10 # 10 rows (<row> (xchg '(red) '(blue)) # red or blue N # 2 columns (prin (* NN) ) ) ) ) ) ########################################################################

यदि आप एक तालिका में दो या अधिक कोशिकाओं को संयोजित करना चाहते हैं ताकि एक सेल कई स्तंभों पर कब्जा कर ले, तो आप अतिरिक्त पैरामीटर <row> रूप में " - " प्रतीक को पास कर सकते हैं। यह डेटा को दाईं ओर विस्तृत करने के लिए " - " वर्णों के बाईं ओर ले जाएगा।

आप सामान्य टैग फ़ंक्शन के साथ तालिका संरचना को सीधे निर्दिष्ट भी कर सकते हैं, <th> , <tr> और <td> ।

यदि आपको घटकों की दो-आयामी व्यवस्था की आवश्यकता है, तो आप और भी सरल <grid> फ़ंक्शन का उपयोग कर सकते हैं:

 ######################################################################## (html 0 "Grid" "@lib.css" NIL (<grid> 3 "A" "B" "C" 123 456 789 ) ) ########################################################################

पहला पैरामीटर कॉलम की संख्या (यहां: 3) है, और फिर प्रत्येक सेल के लिए एक अभिव्यक्ति है। एक नंबर के बजाय, आप सीएसएस विशेषताओं की एक सूची भी पास कर सकते हैं। इस सूची की लंबाई कॉलम की संख्या निर्धारित करेगी। आप उपरोक्त उदाहरण में दूसरी पंक्ति बदल सकते हैं:

  (<grid> '(NIL NIL right)

इस स्थिति में, तीसरा कॉलम दाईं ओर संरेखित किया जाएगा।

मेनू और टैब (टैब)

दो सबसे शक्तिशाली टैग फ़ंक्शन <menu> और <tab> । जब अलग से या संयोजन में उपयोग किया जाता है, तो वे एक नेविगेशन फ्रेमवर्क बनाते हैं

मेनू आइटम जिसमें आप सबमेनू को खोल और बंद कर सकते हैं
विभिन्न पृष्ठों पर जाने के लिए उप मेनू आइटम
टैब (टैब), विभिन्न उपपृष्ठों पर जाने के लिए

निम्न उदाहरण बहुत उपयोगी नहीं है, क्योंकि सभी तत्वों के URL एक ही प्रोजेक्ट के लिए जाते हैं। l पेज, लेकिन यह प्रदर्शित करने के लिए पर्याप्त है:

 ######################################################################## (html 0 "Menu+Tab" "@lib.css" NIL (<div> '(id . menu) (<menu> ("Item" "project.l") # Top level item (NIL (<hr>)) # Plain HTML (T "Submenu 1" # Submenu ("Subitem 1.1" "project.l") (T "Submenu 1.2" ("Subitem 1.2.1" "project.l") ("Subitem 1.2.2" "project.l") ("Subitem 1.2.3" "project.l") ) ("Subitem 1.3" "project.l") ) (T "Submenu 2" ("Subitem 2.1" "project.l") ("Subitem 2.2" "project.l") ) ) ) (<div> '(id . main) (<h1> NIL "Menu+Tab") (<tab> ("Tab1" (<h3> NIL "This is Tab 1") ) ("Tab2" (<h3> NIL "This is Tab 2") ) ("Tab3" (<h3> NIL "This is Tab 3") ) ) ) ) ########################################################################

<menu> मेनू आइटम का एक क्रम स्वीकार करता है। प्रत्येक मेनू आइटम कार के साथ एक लिस्प सूची है:

NIL : निष्क्रिय मेनू आइटम, बाकी सूची में मनमाने कोड (आमतौर पर HTML टैग) शामिल हो सकते हैं।
T : दूसरा तत्व सबमेनू का नाम है, और इस नाम पर क्लिक करने से संबंधित सबमेनू खुल जाएगा या बंद हो जाएगा। सूची की पूंछ एक सबमेनू (मनमाने ढंग से घोंसले की गहराई गहराई) को पुन: परिभाषित करती है।
अन्यथा: एक मेनू आइटम एक प्रत्यक्ष कार्रवाई (एक सबमेनू खोलने के बजाय) को परिभाषित करता है, जहां सूची का पहला तत्व मेनू तत्व का नाम है और दूसरा तत्व संबंधित URL है।

<tab> उपपृष्ठों की एक सूची स्वीकार करता है। प्रत्येक पृष्ठ केवल टैब का नाम है, और फिर मनमाना कोड (आमतौर पर HTML टैग)।

कृपया ध्यान दें कि एक बार में केवल एक मेनू और एक टैब सक्रिय हो सकता है।

परस्पर रूप

HTML में, उपयोगकर्ता इनपुट के लिए एकमात्र तरीका <form> और <input> तत्वों के माध्यम से है, सर्वर के साथ बातचीत करने के लिए HTTP POST विधि का उपयोग करते हुए।

"@ Lib / xhtml.l" <post> नामक एक फ़ंक्शन और डेटा प्रविष्टि टैग का एक संग्रह परिभाषित करता है जो HTML रूपों की प्रत्यक्ष प्रोग्रामिंग की अनुमति देता है। हम केवल एक सरल उदाहरण दिखाएंगे:

 ######################################################################## (html 0 "Simple Form" "@lib.css" NIL (<post> NIL "project.l" (<field> 10 '*Text) (<submit> "Save") ) ) ########################################################################

यह उदाहरण एक इनपुट टेक्स्ट फील्ड को *Text ग्लोबल वैरिएबल से बांधता है। वर्तमान मान *Text फ़ील्ड में प्रदर्शित होता है, और सबमिट बटन को " *Text साथ" project.l "दबाता है, जिसे उपयोगकर्ता द्वारा दर्ज स्ट्रिंग मान असाइन किया जाता है।

कोई एप्लिकेशन किसी भी उपयोगी कार्रवाई के लिए इस चर का उपयोग कर सकता है, जैसे कि डेटाबेस में इसके मूल्य को संग्रहीत करना।

रूपों के इस सरल उपयोग के साथ समस्याएं हैं:

बड़ी संख्या में वैश्विक चर बनाए रखने के लिए उन्हें प्रोग्रामर की आवश्यकता होती है। पृष्ठ पर प्रत्येक इनपुट फ़ील्ड को सर्वर और क्लाइंट के बीच संचार के लिए एक चर की आवश्यकता होती है।
वे आवेदन की आंतरिक स्थिति को संरक्षित नहीं करते हैं। प्रत्येक POST अनुरोध सर्वर पर एक अलग प्रक्रिया को जन्म देता है, जो वैश्विक चर को उनके नए मूल्यों पर सेट करता है, HTML पृष्ठ बनाता है और उसके बाद समाप्त होता है। आवेदन की स्थिति को स्पष्ट रूप से पारित किया जाना चाहिए, उदाहरण के लिए <hidden> का उपयोग करना।
वे बहुत इंटरैक्टिव नहीं हैं। आमतौर पर उनके पास केवल एक "सबमिट" बटन होता है। उपयोगकर्ता बड़ी संख्या में इनपुट फ़ील्ड भरता है (लेकिन) केवल "सबमिट" बटन पर क्लिक करने पर परिवर्तन प्रभावी होंगे।

हालाँकि हमने इस शैली में कई एप्लिकेशन लिखे हैं, हम “@ lib / form.l” द्वारा प्रदान किए गए GUI फ्रेमवर्क की सलाह देते हैं। यह क्लाइंट-सर्वर इंटरैक्शन के लिए किसी भी चर की आवश्यकता नहीं है, लेकिन एप्लिकेशन लॉजिक, बटन एक्शन और डेटा संचार को अमूर्त करने के लिए GUI घटकों की कक्षाओं के एक पदानुक्रम को लागू करता है।

अधिवेशन

सबसे पहले, हमें प्रत्येक व्यक्तिगत सत्र (प्रत्येक जुड़े क्लाइंट के लिए) को संभालने के लिए सर्वर पर एक स्थायी वातावरण बनाने की आवश्यकता है।

तकनीकी रूप से, यह सर्वर की एक बाल प्रक्रिया है जिसे हमने ऊपर लॉन्च किया था, जो ब्राउज़र में HTML पेज भेजने के तुरंत बाद समाप्त नहीं होता है। यह एप्लिकेशन आरंभीकरण कोड में कहीं न कहीं app फ़ंक्शन को कॉल करके प्राप्त किया जाता है।

 ######################################################################## (app) # Start a session (html 0 "Simple Session" "@lib.css" NIL (<post> NIL "project.l" (<field> 10 '*Text) (<submit> "Save") ) ) ########################################################################

पिछले उदाहरण से अधिक अंतर नहीं। हालाँकि, जब आप अपना ब्राउज़र कनेक्ट करते हैं और फिर टर्मिनल विंडो को देखते हैं, जहाँ एप्लिकेशन सर्वर चल रहा होता है, तो आपको एक कॉलन दिखाई देगा - PicoLisp कमांड लाइन

 $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 project.l + :

यूनिक्स ps यूटिलिटी जैसे उपकरण आपको बताएंगे कि दो picolisp प्रक्रियाएं अब चल रही हैं, जिनमें से पहला दूसरा का माता-पिता है।

यदि आप कुछ पाठ दर्ज करते हैं, तो ब्राउज़र विंडो में पाठ बॉक्स में "abcdef" कहें, और सहेजें बटन पर क्लिक करें और *Text चर की जांच करें

 : *Text -> "abcdef"

आप देखेंगे कि अब हमारे पास एक समर्पित PicoLisp प्रक्रिया है जो क्लाइंट से "कनेक्टेड" है।

खाली कमांड लाइन पर Ctrl-D दबाकर आप इस प्रक्रिया को (किसी भी PicoLisp इंटरेक्टिव सत्र की तरह) समाप्त कर सकते हैं। अन्यथा, यह स्वयं को समाप्त कर देगा यदि अन्य ब्राउज़र अनुरोध टाइमआउट अवधि के भीतर (डिफ़ॉल्ट रूप से 5 मिनट) प्राप्त नहीं होते हैं।

उत्पादन संस्करण (डिबगिंग के बिना) शुरू करने के लिए, सर्वर आमतौर पर "+" ध्वज के साथ और -wait बिना शुरू होता है

 $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 project.l -wait

इस रन विकल्प के साथ, कमांड लाइन प्रॉम्प्ट (:) क्लाइंट के कनेक्ट होने पर प्रकट नहीं होती है।

फॉर्म (कार्रवाई रूपों)

अब हमारे पास प्रत्येक ग्राहक के लिए एक सत्र है, हम सक्रिय GUI ढांचे को कॉन्फ़िगर कर सकते हैं।

ऐसा करने के लिए, हम html फ़ंक्शन कॉल को action में लपेटते हैं।शरीर के अंदर, htmlअन्य सभी प्रकार के टैग कार्यों के अलावा, एक या एक से अधिक कॉल हो सकते हैंform

 ######################################################################## (app) # Start session (action # Action handler (html 0 "Form" "@lib.css" NIL # HTTP/HTML protocol (form NIL # Form (gui 'a '(+TextField) 10) # Text Field (gui '(+Button) "Print" # Button '(msg (val> (: home a))) ) ) ) ) ########################################################################

ध्यान दें कि अब कोई वैश्विक वैरिएबल नहीं है, जैसे *Text, किसी इनपुट फ़ील्ड की सामग्री को संग्रहीत करने के लिए। इसके बजाय, हमने ` a` घटक को एक स्थानीय, प्रतीकात्मक नाम दिया+TextField

  (gui 'a '(+TextField) 10) # Text Field

अन्य घटक इसे एक्सेस कर सकते हैं।

  '(msg (val> (: home a)))

(: home)हमेशा उस GUI घटक वाले फ़ॉर्म का लिंक लौटाता है। तो (: home a)- aवर्तमान रूप में घटक ' ' का लिंक । चूंकि संदेश STDERR में अपना तर्क प्रदर्शित करता है, और विधि val>घटक की वर्तमान सामग्री को निकालती है, जब हम बटन पर क्लिक करते हैं, तो हम पाठ को कंसोल में पाठ क्षेत्र में प्रवेश करते देखेंगे।

अलग से actionऔर formज्यादा मतलब नहीं है। हालांकि, अंदर htmlऔर form, आप स्वतंत्र रूप से HTML फ़ंक्शन (और किसी भी अन्य लिस्प फ़ंक्शन) को मिला सकते हैं।

एक विशिष्ट पृष्ठ में यह संरचना हो सकती है:

 (action # Action handler (html .. # HTTP/HTML protocol (<h1> ..) # HTML tags (form NIL # Form (<h3> ..) (gui ..) # GUI component(s) (gui ..) .. ) (<h2> ..) (form NIL # Another form (<h3> ..) (gui ..) # GUI component(s) .. ) (<br> ..) .. ) )

समारोह `gui`

शरीर में सबसे महत्वपूर्ण कार्य formफ़ंक्शन है gui। यह एक ग्राफिकल इंटरफ़ेस बनाने का कार्यक्षेत्र है।

फ़ंक्शन के बाहर form guiपरिभाषित नहीं किया गया है। पहला पैरामीटर एक वैकल्पिक उपनाम है, कक्षाओं की एक सूची, और इन वर्गों के डिजाइनरों द्वारा आवश्यक अतिरिक्त तर्क। हमने पिछले उदाहरण में देखा

  (gui 'a '(+TextField) 10) # Text Field

यहाँ ' a' प्रकार के घटक के लिए एक उपनाम है (+TextField)। एक संख्यात्मक तर्क 10पाठ क्षेत्र को दिया जाता है, इसकी चौड़ाई का निर्धारण करता है। जीयूआई क्लासेस चैप्टर में अन्य उदाहरण देखें ।
GET अनुरोध guiअनिवार्य रूप से के लिए एक सीमा है new। यह घटक बनाता है, इसे वर्तमान रूप की आंतरिक संरचनाओं में संग्रहीत करता है, और घटक को एक संदेश भेजकर इसे आरंभ करता है init>। अंत में, वह show>HTML कोड जेनरेट करने के लिए एक संदेश भेजता है और इसे ब्राउज़र को भेजता है।

POST अनुरोध के दौरान, यह guiकिसी भी नए घटक का निर्माण नहीं करता है। इसके बजाय, मौजूदा घटकों का पुन: उपयोग किया जाता है। इसलिए, guiसंदेश घटक भेजने से अधिक कुछ करने की आवश्यकता नहीं है show>।

नियंत्रण प्रवाह

HTTP में ब्राउज़र विंडो बदलने के लिए केवल दो तरीके हैं: GET और POST। हम इन दोनों विधियों का स्पष्ट रूप से परिभाषित तरीके से उपयोग करते हैं:

GET का मतलब है कि एक नया पेज बनाया जा रहा है । इसका उपयोग तब किया जाता है जब पृष्ठ पहली बार देखा जाता है, आमतौर पर URL को ब्राउज़र के पता फ़ील्ड में दर्ज करके, या एक लिंक पर क्लिक करके (जो अक्सर एक सबमेनू या टैब का एक तत्व होता है )।
POST हमेशा एक ही पृष्ठ पर ले जाता है । यह फॉर्म पर एक बटन दबाकर शुरू किया जाता है, संबंधित फॉर्म के डेटा संरचनाओं को अपडेट करता है और इस बटन से जुड़े कोड को निष्पादित करता है।

बटन के साथ जुड़ा कोड लगभग सब कुछ कर सकता है: इनपुट फ़ील्ड की सामग्री को पढ़ें और संशोधित करें, डेटाबेस के साथ संवाद करें, संदेश और संवाद बॉक्स प्रदर्शित करें, या यहां तक कि जीईटी अनुरोध के साथ एक POST अनुरोध नकली करें, जो पूरी तरह से अलग दस्तावेज़ के प्रदर्शन की ओर ले जाएगा (देखें URL बदलें) पते )।

GET सर्वर पर सभी GUI घटक बनाता है। ये घटक ऑब्जेक्ट हैं जो ब्राउज़र में HTML पेज की स्थिति और व्यवहार को एन्क्रिप्ट करते हैं। जब भी कोई बटन दबाया जाता है, तो पृष्ठ को POST अनुरोध के साथ पुनः लोड किया जाता है। फिर - ब्राउज़र को कोई भी डेटा भेजने से पहले - कंट्रोल को फंक्शन में ट्रांसफर कर दिया जाता है action। यह सभी घटकों की त्रुटि जांच करता है, एक HTML पृष्ठ पर उपयोगकर्ता इनपुट को संसाधित करता है और वांछित प्रारूप (पाठ, संख्या, दिनांक, वस्तु, आदि) में प्रत्येक घटक के मूल्यों को बचाता है।

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

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

 ######################################################################## (app) (action (html 0 "Case Conversion" "@lib.css" NIL (form NIL (<grid> 2 "Source" (gui 'src '(+TextField) 30) "Destination" (gui 'dst '(+Lock +TextField) 30) ) (gui '(+JS +Button) "Upper Case" '(set> (: home dst) (uppc (val> (: home src))) ) ) (gui '(+JS +Button) "Lower Case" '(set> (: home dst) (lowc (val> (: home src))) ) ) ) ) ) ########################################################################

+Lock"गंतव्य" फ़ील्ड में उपसर्ग वर्ग इस फ़ील्ड को केवल पढ़ने के लिए बनाता है। इस क्षेत्र में कुछ पाठ डालने का एकमात्र तरीका बटन में से एक का उपयोग करना है।

URL स्विचिंग

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

निम्न उदाहरण एक पाठ बॉक्स और दो बटन दिखाता है। पाठ क्षेत्र में दर्ज किसी भी पाठ को पहले बटन के माध्यम से एक पाठ फ़ाइल या दूसरे बटन के माध्यम से एक पीडीएफ दस्तावेज़ में निर्यात किया जाता है

 ######################################################################## (load "@lib/ps.l") (app) (action (html 0 "Export" "@lib.css" NIL (form NIL (gui '(+TextField) 30 8) (gui '(+Button) "Text" '(let Txt (tmp "export.txt") (out Txt (prinl (val> (: home gui 1)))) (url Txt) ) ) (gui '(+Button) "PDF" '(psOut NIL "foo" (a4) (indent 40 40) (down 60) (hline 3) (font (14 . "Times-Roman") (ps (val> (: home gui 1))) ) (hline 3) (page) ) ) ) ) ) ########################################################################

(जब आप कक्षा +TextField(चौड़ाई और ऊँचाई) के लिए दो तर्क पास करते हैं , तो एक तत्व बनाया जाता है textarea)

पहले बटन का एक्शन कोड एक अस्थायी फ़ाइल बनाता है (यानी, मौजूदा प्रक्रिया के अस्थायी निर्देशिका में "Export.txt" नामक एक फ़ाइल), पाठ क्षेत्र के मान को प्रिंट करता है (इस समय) हम इस फ़ाइल में कोई नाम नहीं देते हैं, लेकिन बस इसे फ़ाइल में पहले तत्व के रूप में देखें) और फिर urlफ़ाइल नाम के साथ एक फ़ंक्शन को कहा जाता है।

दूसरा बटन @ foo.pdf नामक एक अस्थायी फ़ाइल बनाने के लिए @ lib / ps.l पोस्टस्क्रिप्ट लाइब्रेरी का उपयोग करता है। यह वह जगह है जहाँ एक अस्थायी फ़ाइल बनाई जाती है और एक फ़ंक्शन urlको कॉल करके अंदर छिपाया जाता है psOut। नतीजतन, ब्राउज़र पीडीएफ दस्तावेज़ प्राप्त करता है और इसे प्रदर्शित करता है।

अलर्ट और संवाद

वास्तव में, अलर्ट और संवाद वास्तव में वैसा नहीं है जैसा हम देखते थे;;

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

आइए एक उदाहरण देखें जो दो अलर्ट और एक संवाद बॉक्स का उपयोग करता है। शुरुआत में, यह एक लॉक टेक्स्ट बॉक्स और दो बटन के साथ एक सरल रूप प्रदर्शित करता है

 ######################################################################## (app) (action (html 0 "Alerts and Dialogs" "@lib.css" NIL (form NIL (gui '(+Init +Lock +TextField) "Initial Text" 20 "My Text") (gui '(+Button) "Alert" '(alert NIL "This is an alert " (okButton)) ) (gui '(+Button) "Dialog" '(dialog NIL (<br> "This is a dialog.") (<br> "You can change the text here " (gui '(+Init +TextField) (val> (: top 1 gui 1)) 20) ) (<br> "and then re-submit it to the form.") (gui '(+Button) "Re-Submit" '(alert NIL "Are you sure? " (yesButton '(set> (: home top 2 gui 1) (val> (: home top 1 gui 1)) ) ) (noButton) ) ) (cancelButton) ) ) ) ) ) ########################################################################

उपसर्ग वर्ग +Initस्ट्रिंग "प्रारंभिक पाठ" के साथ "मेरा पाठ" फ़ील्ड को इनिशियलाइज़ करता है। चूंकि फ़ील्ड लॉक है, इसलिए यह मान सीधे बदला नहीं जा सकता है।

पहला बटन एक चेतावनी प्रदर्शित करेगा: "यह एक चेतावनी है"। आप इसे "ओके" पर क्लिक करके बंद कर सकते हैं।

दूसरा बटन एक टेक्स्ट फ़ील्ड के साथ एक संवाद प्रदर्शित करता है जिसमें मुख्य फॉर्म के टेक्स्ट फ़ील्ड से मान की एक प्रति होती है। यदि आप "पुनः सबमिट करें" पर क्लिक करते हैं और चेतावनी के लिए "हाँ" का उत्तर देते हैं तो क्या आप इस मान को बदल सकते हैं और इसे वापस भेज सकते हैं?

कैलकुलेटर उदाहरण

अब हमारी परीक्षण फ़ाइल "प्रोजेक्ट.एल" को संक्षेप में रखें और अधिक पर्याप्त और व्यावहारिक स्टैंड-अलोन उदाहरण पर आगे बढ़ें। हमने जो सीखा है, उसका उपयोग करते हुए, हम एक सरल बिग्नम कैलकुलेटर का निर्माण करेंगे। ("बिग्नम" क्योंकि PicoLisp में केवल एक प्रकार की संख्या है - bignums (असीमित पूर्णांक))

यह एक फॉर्म, एक संख्यात्मक इनपुट फ़ील्ड और कई बटन का उपयोग करता है। कैलकुलेटर का स्रोत कोड PicoLisp वितरण में पाया जा सकता है (उदाहरण के लिए, "/usr/share/picolisp/misc/calc.l") सीधे निष्पादित स्क्रिप्ट आवरण "misc / calcc" के साथ।

calc.l

 # 14may11abu # (c) Software Lab. Alexander Burger # *Init *Accu *Stack (allowed NIL "!calculator" "@lib.css") (load "@lib/http.l" "@lib/xhtml.l" "@lib/form.l") # Calculator logic (de digit (N) (when *Init (zero *Accu) (off *Init)) (setq *Accu (+ N (* 10 *Accu))) ) (de calc () (let (Fun (caar *Stack) Val (cddr (pop '*Stack))) (setq *Accu (if (and (== '/ Fun) (=0 *Accu)) (alert "Div / 0") (Fun Val *Accu) ) ) ) ) (de operand (Fun Prio) (when (>= (cadar *Stack) Prio) (calc)) (push '*Stack (cons Fun Prio *Accu)) (on *Init) ) (de finish () (while *Stack (calc)) (on *Init) ) # Calculator GUI (de calculator () (app) (action (html 0 "Bignum Calculator" "@lib.css" NIL (<h2> NIL "Bignum Calculator") (form NIL (<br> (gui '(+Var +NumField) '*Accu 60)) (<grid> 4 (gui '(+JS +Button) "±" '(setq *Accu (- *Accu))) (gui '(+Able +JS +Button) '(ge0 *Accu) (char 8730) '(setq *Accu (sqrt *Accu)) ) (gui '(+JS +Button) "\^" '(operand '** 3)) (gui '(+JS +Button) "/" '(operand '/ 2)) (gui '(+JS +Button) "7" '(digit 7)) (gui '(+JS +Button) "8" '(digit 8)) (gui '(+JS +Button) "9" '(digit 9)) (gui '(+JS +Button) "*" '(operand '* 2)) (gui '(+JS +Button) "4" '(digit 4)) (gui '(+JS +Button) "5" '(digit 5)) (gui '(+JS +Button) "6" '(digit 6)) (gui '(+JS +Button) "-" '(operand '- 1)) (gui '(+JS +Button) "1" '(digit 1)) (gui '(+JS +Button) "2" '(digit 2)) (gui '(+JS +Button) "3" '(digit 3)) (gui '(+JS +Button) "+" '(operand '+ 1)) (gui '(+JS +Button) "0" '(digit 0)) (gui '(+JS +Button) "C" '(zero *Accu)) (gui '(+JS +Button) "A" '(main)) (gui '(+JS +Button) "=" '(finish)) ) ) ) ) ) # Initialize (de main () (on *Init) (zero *Accu) (off *Stack) ) # Start server (de go () (server 8080 "!calculator") )

उपयोग करने के लिए, PicoLisp स्थापना निर्देशिका पर जाएं और इसे इस रूप में चलाएं

 $ misc/calc

या इसे एक निरपेक्ष पथ के साथ कहते हैं

 $ /usr/share/picolisp/misc/calc

यदि आप एक इंटरैक्टिव PicoLisp सत्र का उपयोग करना चाहते हैं, तो इसे इसके बजाय शुरू करें

 $ pil misc/calc.l -main -go +

सामान्य रूप से खोलें, पृष्ठ ' http: // localhost: 8080 '।

कैलकुलेटर लॉजिक और GUI के लिए कोड बहुत सरल है। प्रवेश बिंदु एक फ़ंक्शन है calculator। इसे सीधे ( URL सिंटैक्स में वर्णित ) कहा जाता है , सबसे पहले, डिफ़ॉल्ट सर्वर URL के रूप में, और दूसरा, POST अनुरोधों के माध्यम से। कैलकुलेटर शुरू करने के बाद, फ़ाइलों तक पहुंच की आवश्यकता नहीं है।

कृपया ध्यान दें कि उत्पादन संस्करण के लिए हम "misc / calc.l" की शुरुआत में अनुमत विवरण सम्मिलित करते हैं (जैसा कि सुरक्षा अध्याय में अनुशंसित है )

 (allowed NIL "!calculator" "@lib.css")

यह एक एकल फ़ंक्शन के लिए बाहरी पहुंच को प्रतिबंधित करेगा calculator।

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

फ़ंक्शन digitको नंबर बटन द्वारा बुलाया जाता है और बैटरी में एक और अंक जोड़ता है।

फ़ंक्शन calcएक वास्तविक गणना कदम लेता है। यह स्टैक से डेटा को पुनः प्राप्त करता है, शून्य द्वारा विभाजन की जांच करता है, और यदि आवश्यक हो तो एक त्रुटि संदेश प्रदर्शित करता है।

operandऑपरेशंस के बटन, फ़ंक्शन को स्वीकार करना और तर्कों के रूप में प्राथमिकता। यह स्टैक के शीर्ष पर मूल्य के साथ प्राथमिकता की तुलना करता है और यदि यह कम है, तो गणना की अवहेलना करता है।

finishअंतिम परिणाम की गणना करने के लिए उपयोग किया जाता है।

फ़ंक्शन में calculatorएक संख्यात्मक इनपुट फ़ील्ड है, 60 वर्ण चौड़ा

  (gui '(+Var +NumField) '*Accu 60)

उपसर्ग वर्ग +Varइस क्षेत्र को एक वैश्विक चर के साथ जोड़ता है *Accu। इस चर में क्षेत्र के सभी परिवर्तन प्रदर्शित किए जाएंगे, और इस चर के मूल्य में परिवर्तन को क्षेत्र में प्रदर्शित किया जाएगा।

वर्गमूल बटन में एक उपसर्ग वर्ग होता है +Able

  (gui '(+Able +JS +Button) '(ge0 *Accu) (char 8730) '(setq *Accu (sqrt *Accu)) )

एक अभिव्यक्ति के रूप में एक तर्क के साथ जो यह जांचता है कि बैटरी में वर्तमान मूल्य शून्य से अधिक है, अन्यथा बटन बंद हो जाता है।

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

और कोड की 53 लाइनों में यह सब!

टेबल (चार्ट)

चार्ट - सारणीबद्ध डेटा की आंतरिक प्रस्तुति के लिए आभासी घटक।

आमतौर पर, यह डेटा नेस्टेड सूचियों, डेटाबेस चयनों या गतिशील रूप से उत्पन्न तालिका जानकारी है। चार्ट आपको पंक्तियों और स्तंभों (आमतौर पर HTML तालिकाओं ) में डेटा देखने की अनुमति देते हैं , उन्हें ऊपर और नीचे स्क्रॉल करते हैं, और संबंधित दृश्य GUID घटकों के लिए लिंक करते हैं।

वास्तव में, चार्ट को संभालने का तर्क सभी आंतरिक तंत्र पर एक महान प्रभाव के साथ पूरे ढांचे का एक महत्वपूर्ण हिस्सा है। प्रत्येक GUI घटक को पता होना चाहिए कि क्या यह अपडेट और उपयोगकर्ता इंटरैक्शन के दौरान अपनी सामग्री को सही ढंग से संसाधित करने में सक्षम होने के लिए चार्ट का हिस्सा है।

मान लीजिए हम टेक्स्ट और न्यूमेरिक डेटा इकट्ठा करना चाहते हैं। हम एक तालिका बना सकते हैं

 ######################################################################## (app) (action (html 0 "Table" "@lib.css" NIL (form NIL (<table> NIL NIL '((NIL "Text") (NIL "Number")) (do 4 (<row> NIL (gui '(+TextField) 20) (gui '(+NumField) 10) ) ) ) (<submit> "Save") ) ) ) ########################################################################

दो कॉलम "टेक्स्ट" और "संख्या" और चार पंक्तियों के साथ, जिनमें से प्रत्येक में शामिल हैं +TextFieldऔर +NumField।

आप पहले कॉलम में टेक्स्ट और दूसरे में नंबर दर्ज कर सकते हैं। सेव बटन पर क्लिक करने से सर्वर पर इन मानों को घटकों पर सहेजा जाता है (या यदि दूसरा कॉलम में पंक्ति संख्या नहीं है तो त्रुटि संदेश प्रदर्शित होता है)।

इस समाधान के साथ दो समस्याएं हैं:

यद्यपि आप व्यक्तिगत क्षेत्रों के लिए इनपुट प्राप्त कर सकते हैं, उदाहरण के लिए
```
 : (val> (get *Top 'gui 2)) # Value in the first row, second column -> 123 
```
संपूर्ण डेटा संरचना को एकल सूची के रूप में प्राप्त करने का कोई सीधा तरीका नहीं है। इसके बजाय, आपको सभी जीयूआई घटकों के आसपास जाना होगा और डेटा एकत्र करना होगा।
उपयोगकर्ता डेटा की चार से अधिक पंक्तियों में प्रवेश नहीं कर सकता है, क्योंकि अधिक डेटा दर्ज करने के लिए नीचे स्क्रॉल करने और अंतरिक्ष का विस्तार करने का कोई आसान तरीका नहीं है।

चार्ट इन चीजों को संभाल सकता है:

 ######################################################################## (app) (action (html 0 "Chart" "@lib.css" NIL (form NIL (gui '(+Chart) 2) # Inserted a +Chart (<table> NIL NIL '((NIL "Text") (NIL "Number")) (do 4 (<row> NIL (gui 1 '(+TextField) 20) # Inserted '1' (gui 2 '(+NumField) 10) ) ) ) # Inserted '2' (<submit> "Save") ) ) ) ########################################################################

ध्यान दें कि हमने +ChartGUI घटकों के सामने घटक डाला है जिसे चार्ट का उपयोग करके नियंत्रित किया जाना चाहिए। तर्क "2" का अर्थ है कि चार्ट को डेटा के दो स्तंभों की अपेक्षा करनी चाहिए।

प्रत्येक घटक ने पहले तर्क के रूप में एक इंडेक्स नंबर (यहां "1" और "2") प्राप्त किया gui, यह दर्शाता है कि यह घटक चार्ट के अंदर जाना चाहिए।

अब - यदि आपने पहले में "a", "b" और "c" दर्ज किया है, और दूसरे कॉलम में 1, 2 और 3 - हम एक संदेश भेजकर तालिका की पूरी सामग्री प्राप्त कर सकते हैंval>

 : (val> (get *Top 'chart 1)) # Retrieve the value of the first chart -> (("a" 1) ("b" 2) ("c" 3))

वैसे, एक अधिक सुविधाजनक कार्य है chart

 : (val> (chart)) # Retrieve the value of the current chart -> (("a" 1) ("b" 2) ("c" 3))

chart उपरोक्त निर्माण के बजाय उपयोग किया जा सकता है, जब हम "वर्तमान" तालिका का उपयोग करना चाहते हैं, अर्थात, हाल ही में वर्तमान रूप में उपयोग किया गया।

स्क्रॉल

स्क्रॉल करने में सक्षम करने के लिए, दो बटन जोड़ते हैं। हम पूर्वनिर्धारित कक्षाओं का उपयोग करते हैं +UpButtonऔर+DnButton

 ######################################################################## (app) (action (html 0 "Scrollable Chart" "@lib.css" NIL (form NIL (gui '(+Chart) 2) (<table> NIL NIL '((NIL "Text") (NIL "Number")) (do 4 (<row> NIL (gui 1 '(+TextField) 20) (gui 2 '(+NumField) 10) ) ) ) (gui '(+UpButton) 1) # Inserted two buttons (gui '(+DnButton) 1) (----) (<submit> "Save") ) ) ) ########################################################################

एक क्लिक में एक पंक्ति को ऊपर और नीचे स्क्रॉल करने के लिए (तर्क "1")।

अब आप डेटा की कई पंक्तियों को दर्ज कर सकते हैं, स्क्रॉल कर सकते हैं और अधिक डेटा दर्ज कर सकते हैं। "सहेजें" बटन पर क्लिक करने की कोई आवश्यकता नहीं है (स्क्रॉल बटन के अक्षम होने पर बहुत शुरुआत को छोड़कर), क्योंकि फ़ॉर्म में कोई भी बटन किसी भी कार्य को करने से पहले सर्वर में परिवर्तन भेजता है।

कार्य प्राप्त करें और कार्य करें

जैसा कि हमने कहा, चार्ट सारणीबद्ध डेटा के संपादन के लिए एक आभासी घटक है। इस प्रकार, चार्ट का अपना डेटा प्रारूप सूचियों की एक सूची है: प्रत्येक सबलिस्ट एक डेटा की एक पंक्ति का प्रतिनिधित्व करता है, और प्रत्येक पंक्ति तत्व एक GUID घटक से मेल खाता है।

उपरोक्त उदाहरण में, हमने देखा कि एक श्रृंखला जैसे कि

  ("a" 1)

तुलना

  (gui 1 '(+TextField) 20) (gui 2 '(+NumField) 10)

हालांकि, अक्सर ऐसा एक-से-एक संबंध वांछनीय नहीं है। उपयोगकर्ता को विभिन्न रूपों में आंतरिक डेटा संरचनाओं के साथ प्रस्तुत करना आवश्यक हो सकता है, और उपयोगकर्ता इनपुट को आंतरिक प्रारूप में रूपांतरण की आवश्यकता हो सकती है।

ऐसा करने के लिए, चार्ट "कॉलम की संख्या" तर्क के अलावा - दो अतिरिक्त कार्यात्मक तर्क स्वीकार करता है। पहला फ़ंक्शन जीयूआई घटकों में आंतरिक प्रतिनिधित्व को डालने के लिए कहा जाता है, और दूसरा जीयूआई से डेटा को आंतरिक प्रतिनिधित्व में लाने के लिए।

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

अब, आइए एक सरल उदाहरण देखें: चार्ट, जिसमें केवल संख्याओं की एक सूची है, लेकिन जीयूआई में प्रत्येक संख्या (जर्मन में) का पाठ रूप भी प्रदर्शित होता है।

 ######################################################################## (app) (load "@lib/zahlwort.l") (action (html 0 "Numerals" "@lib.css" NIL (form NIL (gui '(+Init +Chart) (1 5 7) 2 '((N) (list N (zahlwort N))) car ) (<table> NIL NIL '((NIL "Numeral") (NIL "German")) (do 4 (<row> NIL (gui 1 '(+NumField) 9) (gui 2 '(+Lock +TextField) 90) ) ) ) (gui '(+UpButton) 1) (gui '(+DnButton) 1) (----) (<submit> "Save") ) ) ) ########################################################################

"@ Lib / zahlwort.l" एक सहायक फ़ंक्शन को परिभाषित करता है zahlwort, जो बाद में 'पुट' फ़ंक्शन में काम आएगा। zahlwortएक नंबर लेता है और जर्मन में अपना नाम देता है।

अब कोड को देखें

  (gui '(+Init +Chart) (1 5 7) 2 '((N) (list N (zahlwort N))) car )

हम उपसर्ग वर्ग +Initको जोड़ते हैं +Chartऔर इसे (1 5 7)चार्ट के प्रारंभिक मूल्य के लिए एक सूची देते हैं । फिर, '2' के बाद (चार्ट में दो कॉलम हैं), हम पुट फ़ंक्शन को पास करते हैं:

  '((N) (list N (zahlwort N)))

जो एक संख्या लेता है और उस संख्या और उसके नाम की सूची देता है, और कार्य प्राप्त करता है

  car )

जो बदले में ऐसी सूची लेता है और एक नंबर देता है, जो सूची का पहला तत्व होगा।

आप इस उदाहरण में देख सकते हैं कि "get" "put" फ़ंक्शन का विलोम है। "चार्ट" केवल पढ़ने के लिए छोड़ा जा सकता है (इसमें इनपुट फ़ील्ड शामिल नहीं हैं (या केवल बंद है)।

दूसरे कॉलम में फील्ड

  (gui 2 '(+Lock +TextField) 90) ) ) )

अवरुद्ध है क्योंकि यह पुट फ़ंक्शन द्वारा बनाए गए पाठ को प्रदर्शित करता है और उपयोगकर्ता इनपुट को स्वीकार करने का इरादा नहीं करता है।

जब आप इस फ़ॉर्म को किसी ब्राउज़र में खोलते हैं, तो आपको (1 5 7)कक्षा के तर्क के अनुसार, "1 / eins", "5 / fünf" और "7 / sieben" के साथ तीन पूर्व-भरी हुई लाइनें दिखाई देंगी +Init। पहले कॉलम में एक नंबर दर्ज करने और ENTER कुंजी या किसी एक बटन को दबाकर, आपको दूसरे कॉलम में संबंधित टेक्स्ट दिखाई देगा।

जीयूआई कक्षाएं

पिछले अध्यायों में, हमने GUI वर्गों के उदाहरण देखे, जैसे कि +TextField, +NumFieldया +Button, अक्सर उपसर्ग वर्गों के साथ संयोजन में +Lock, +Initया +Able। अब हम संपूर्ण पदानुक्रम पर एक व्यापक नज़र डालते हैं और अधिक उदाहरणों की कोशिश करते हैं।

एक सार वर्ग +guiसभी GUI वर्गों की नींव है। वर्ग पदानुक्रम को देखने के लिए, आप उपयोग कर सकते हैं कार्यों लाइव रवानगी ( «निर्भरता"):

गुई श्रेणी पदानुक्रम

 : (dep '+gui) +gui +JsField +Button +UpButton +PickButton +DstButton +ClrButton +ChoButton +Choice +GoButton +BubbleButton +DelRowButton +ShowButton +DnButton +Img +field +Checkbox +TextField +FileField +ClassField +numField +NumField +FixField +BlobField +DateField +SymField +UpField +MailField +SexField +AtomField +PwField +ListTextField +LinesField +TelField +TimeField +HttpField +Radio -> +gui

उदाहरण के लिए, हम देखते हैं कि +DnButtonएक उपवर्ग क्या है +Button, जो बदले में एक उपवर्ग है +gui। सीधे निरीक्षण+DnButton

 : (dep '+DnButton) +Tiny +Rid +JS +Able +gui +Button +DnButton -> +DnButton

हम जानते हैं कि देखने +DnButtonसे विरासत में मिली +Tiny, +Rid, +Ableऔर +Button। वास्तविक परिभाषा +DnButton"@ lib / form.l" में मिल सकती है

 (class +DnButton +Tiny +Rid +JS +Able +Button) ...

सामान्य तौर पर, “@ lib / form.l” जीयूआई ढांचे का एक व्यापक संदर्भ है और इसे परिचित करने के लिए अनुशंसित किया जाता है।

इनपुट फ़ील्ड

इनपुट फ़ील्ड इस डेटा के सक्षम होने, इनपुट और बदलने पर एप्लिकेशन डेटा का दृश्य प्रदर्शन और अनुमति प्रदान करते हैं।

HTML स्तर पर, वे निम्नलिखित रूप ले सकते हैं:

सामान्य इनपुट फ़ील्ड
पाठ क्षेत्र
चेक बॉक्स
ड्रॉप-डाउन सूचियाँ (कॉम्बोक्स)
पासवर्ड प्रविष्टि फ़ील्ड
HTML लिंक
सादे HTML पाठ

चेक बॉक्स उस वर्ग कार्यान्वित किया जाता है के अपवाद के साथ चेकबॉक्स , इन सभी एचटीएमएल-उत्पन्न प्रतिनिधित्व +TextFieldऔर अपने संबंधित उपवर्गों, जैसे +NumField, +DateFieldआदि उनकी वास्तविक उपस्थिति (उपरोक्त रूपों में से एक के रूप में) उनके तर्कों पर निर्भर करती है:

हमने पहले ही "सामान्य" पाठ फ़ील्ड देखे हैं। वे एक एकल संख्यात्मक तर्क द्वारा बनाए गए हैं। यह उदाहरण 10 वर्णों की चौड़ाई के साथ एक कस्टम फ़ील्ड बनाता है:

  (gui '(+TextField) 10)

यदि संख्याओं की संख्या के लिए दूसरा संख्यात्मक तर्क निर्दिष्ट किया जाता है (इस मामले में, '4'), तो आपको टेक्स्टरी मिलेगा:

  (gui '(+TextField) 10 4)

एक संख्या के बजाय मूल्यों की सूची प्रदान करना कॉम्बोक्स देता है:

  (gui '(+TextField) '("Value 1" "Value 2" "Value 3"))

इन तर्कों के अलावा, आप एक स्ट्रिंग पास कर सकते हैं। इस स्थिति में, फ़ील्ड को लेबल किया जाएगा:

  (gui '(+TextField) 10 "Plain") (gui '(+TextField) 10 4 "Text Area") (gui '(+TextField) '("Value 1" "Value 2" "Value 3") "Selection")

अंत में, बिना किसी तर्क के, मैदान सादे पाठ के रूप में दिखाई देगा, HTML:

  (gui '(+TextField))

यह मुख्य रूप से इन क्षेत्रों की सामग्री के प्रबंधन के लिए +Varऔर +Obj, HTML लिंक या स्क्रॉल करने योग्य तालिका मान जैसे विशेष व्यवहार के लिए, उपसर्ग वर्गों के साथ संयोजन में समझ में आता है ।

संख्यात्मक इनपुट फ़ील्ड

+NumFieldकिसी संख्या को उसकी विधि में देता है val>और विधि में एक संख्या लेता है set>। जब उपयोगकर्ता इनपुट को नंबर में परिवर्तित नहीं किया जा सकता तो यह एक त्रुटि संदेश देता है।

वर्तमान संख्या में परिभाषित के रूप में बड़ी संख्या में हजारों विभाजक प्रदर्शित किए जाते हैं।

 ######################################################################## (app) (action (html 0 "+NumField" "@lib.css" NIL (form NIL (gui '(+NumField) 10) (gui '(+JS +Button) "Print value" '(msg (val> (: home gui 1))) ) (gui '(+JS +Button) "Set to 123" '(set> (: home gui 1) 123) ) ) ) ) ########################################################################

+FixFieldएक वैकल्पिक तर्क स्केल-फैक्टर की आवश्यकता होती है, और फिक्स्ड-पॉइंट संख्याओं को स्वीकार / रिटर्न करता है।

दशमलव विभाजक वर्तमान स्थान से निर्धारित होता है।

 ######################################################################## (app) (action (html 0 "+FixField" "@lib.css" NIL (form NIL (gui '(+FixField) 3 10) (gui '(+JS +Button) "Print value" '(msg (format (val> (: home gui 1)) 3)) ) (gui '(+JS +Button) "Set to 123.456" '(set> (: home gui 1) 123456) ) ) ) ) ########################################################################

समय और तारीख

+DateFieldस्वीकार करता है और प्रकार की तारीख का मान लौटाता है ।

 ######################################################################## (app) (action (html 0 "+DateField" "@lib.css" NIL (form NIL (gui '(+DateField) 10) (gui '(+JS +Button) "Print value" '(msg (datStr (val> (: home gui 1)))) ) (gui '(+JS +Button) "Set to \"today\"" '(set> (: home gui 1) (date)) ) ) ) ) ########################################################################

दिनांक प्रदर्शित करने और दर्ज करने का प्रारूप वर्तमान लोकेल ( डेटास्र और एक्सपेडैट देखें ) पर निर्भर करता है । आप उदाहरण के लिए, स्थान बदल सकते हैं

 : (locale "DE" "de") -> NIL

यदि कोई स्थान चयनित नहीं है, तो डिफ़ॉल्ट प्रारूप YYYY-MM-DD है। कुछ पूर्वनिर्धारित स्थान DD.MM.YYYY (DE), YYYY / MM / DD (JP), DD / MM / YYYY (UK), या MM / DD / YYYY (US) पैटर्न का उपयोग करते हैं।

जब उपयोगकर्ता इनपुट वर्तमान स्थान के दिनांक प्रारूप से मेल नहीं खाता है, तो एक त्रुटि डाली जाती है।

भले ही स्थानीय, +DateFieldसंक्षिप्त उपयोगकर्ता इनपुट बढ़ाने की कोशिश कर रहा हो:

"7" चालू माह का 7 वां दिन देता है
"31" या "0301" वर्तमान वर्ष के 3 जनवरी को देता है
"311" या "3101" वर्तमान वर्ष का 31 जनवरी देता है
"0311" इस वर्ष का 3 नवंबर देता है
1 फरवरी, 2003 को "1023" या "010203" दिया गया है।
और इसी तरह

एक समान वर्ग है +TimeField। यह समय मान लेता है और देता है ।

 ######################################################################## (app) (action (html 0 "+TimeField" "@lib.css" NIL (form NIL (gui '(+TimeField) 8) (gui '(+JS +Button) "Print value" '(msg (tim$ (val> (: home gui 1)))) ) (gui '(+JS +Button) "Set to \"now\"" '(set> (: home gui 1) (time)) ) ) ) ) ########################################################################

जब क्षेत्र की चौड़ाई "8" है, तो इस उदाहरण के अनुसार, प्रारूप में समय प्रदर्शित होता है HH:MM:SS। एक अन्य संभावित मूल्य - "5", +TimeFieldफॉर्म में मूल्य प्रदर्शित करता है HH:MM।

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

उपयोगकर्ता बृहदान्त्र को छोड़ सकता है। अधूरा इनपुट तिथि के समान परिवर्तित होता है। "125" को "12:05", '124517' को "12:45:17" में बदल दिया जाता है।

टेलीफोन नंबर

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

फोन नंबर प्रदर्शित करने के लिए, +TelFieldदेश कोड को शून्य से बदल देता है यदि यह वर्तमान स्थान से देश कोड है, या यदि यह एक विदेशी देश कोड है ( टेलस्ट्रीम देखें ) प्लस चिह्न के साथ इसे प्रीजर्व करें ।

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

 ######################################################################## (app) (locale "DE" "de") (action (html 0 "+TelField" "@lib.css" NIL (form NIL (gui '(+TelField) 20) (gui '(+JS +Button) "Print value" '(msg (val> (: home gui 1))) ) (gui '(+JS +Button) "Set to \"49 1234 5678-0\"" '(set> (: home gui 1) "49 1234 5678-0") ) ) ) ) ########################################################################

चेक बॉक्स

कक्षा +Checkboxसरल है। उपयोगकर्ता सहभागिता इसे चालू और बंद करने तक सीमित है। यह एक बूलियन मूल्य ( NILया गैर- NIL) लेता है और रिटर्न Tया NIL।

 ######################################################################## (app) (action (html 0 "+Checkbox" "@lib.css" NIL (form NIL (gui '(+Checkbox)) (gui '(+JS +Button) "Print value" '(msg (val> (: home gui 1))) ) (gui '(+JS +Button) "On" '(set> (: home gui 1) T) ) (gui '(+JS +Button) "Off" '(set> (: home gui 1) NIL) ) ) ) ) ########################################################################

फील्ड उपसर्ग कक्षाएं

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

तकनीकी रूप से उपसर्ग वर्गों के बारे में कुछ खास नहीं है। ये साधारण वर्ग हैं। उन्हें "उपसर्ग" कहा जाता है क्योंकि उनका उद्देश्य किसी वस्तु या वर्ग की सुपरक्लास सूची में अन्य वर्गों के सामने डाला जाना है ।

आमतौर पर वे Tतर्क सूची से फ़ंक्शन के लिए विधि के लिए अपने स्वयं के तर्कों को स्वीकार करते हैं gui(एक विधि Tएक रचनाकार है (एक अनुवादक द्वारा टिप्पणी)।

प्रारंभ

+Initinit>इस घटक के लिए विधि को ओवरराइड करता है । जब पृष्ठ पहली बार (GET अनुरोध के दौरान) लोड होता है, तो एक संदेश घटक init>को भेजा जाता है +gui। +Initइस क्षेत्र के प्रारंभिक मूल्य के लिए एक अभिव्यक्ति लेता है।

  (gui '(+Init +TextField) "This is the initial text" 30)

अन्य कक्षाएं जो स्वचालित रूप से फ़ील्ड का मान निर्धारित करती हैं +Var(फ़ील्ड को एक चर से +E/Rजोड़ना ) और (डेटाबेस से फ़ील्ड को जोड़ना)।

+Cueउदाहरण के लिए, "आवश्यक" फ़ील्ड में उपयोगकर्ता को उस चीज़ के बारे में संकेत देने के लिए इस्तेमाल किया जा सकता है, जिसमें उसे प्रवेश करना चाहिए। यह एंगल ब्रैकेट्स में तर्क के मूल्य को तभी प्रदर्शित करेगा जब फील्ड वैल्यू बराबर हो NILऔर विधि val>वापस आए NIL, इस तथ्य के बावजूद कि यह मूल्य प्रदर्शित किया जाएगा।

"<यहां पाठ दर्ज करें>" प्रदर्शित करने के लिए एक खाली फ़ील्ड पर कॉल करें:

  (gui '(+Cue +TextField) "Please enter some text here" 30)

सक्षम और अक्षम करें

GUI की एक महत्वपूर्ण विशेषता संदर्भ-संवेदनशील अक्षमता और व्यक्तिगत घटकों को सक्षम करना या संपूर्ण रूप है।

+Ableवर्ग उपसर्ग एक तर्क तर्क लेता है और घटक को निष्क्रिय कर देता है यदि वह अभिव्यक्ति का मूल्यांकन करता है NIL। हमने एक कैलकुलेटर के वर्गमूल बटन में इसके उपयोग का एक उदाहरण देखा । या एक बटन की कल्पना करें जिसे केवल क्रिसमस के बाद चालू किया जाना चाहिए

  (gui '(+Able +Button) '(>= (cdr (date (date))) (12 24)) "Close this year" '(endOfYearProcessing) )

या पासवर्ड प्रविष्टि फ़ील्ड, जो लॉग इन करने के बाद अक्षम है

  (gui '(+Able +PwField) '(not *Login) 10 "Password")

एक विशेष मामला उपसर्ग है +Lock, जो घटक को बिना शर्त निष्क्रिय करता है। वह तर्कों को स्वीकार नहीं करता है

  (gui '(+Lock +NumField) 10 "Count")

("10" और "गणना" के लिए तर्क हैं +NumField) और केवल-पढ़ने के लिए फ़ील्ड बनाता है। गैर- तर्क

से कॉल करके पूरे फॉर्म को निष्क्रिय किया जा सकता है। यह इस रूप में सभी घटकों को प्रभावित करता है। उपरोक्त उदाहरण का उपयोग करते हुए, हम क्रिसमस से पहले रीड-ओनली फॉर्म बना सकते हैंdisableNIL

  (form NIL (disable (> (12 24) (cdr (date (date))))) # Disable whole form (gui ..) .. )

हालांकि, यहां तक कि पूरी तरह से लॉक किए गए फॉर्म में, अक्सर कुछ घटकों को शामिल करना आवश्यक होता है, क्योंकि वे नेविगेशन, स्क्रॉलिंग या अन्य कार्यों के लिए आवश्यक होते हैं जो फॉर्म की सामग्री को प्रभावित नहीं करते हैं। यह एक उपसर्ग निर्दिष्ट करके किया जाता है +Rid।

  (form NIL (disable (> (12 24) (cdr (date (date))))) (gui ..) .. (gui '(+Rid +Button) ..) # Button is enabled despite the disabled form .. )

स्वरूपण

GUI उपसर्ग वर्ग आपको सूक्ष्मता से नियंत्रित करने की अनुमति देते हैं कि घटकों से मूल्यों को कैसे संग्रहीत और पुनर्प्राप्त किया जाता है। प्रकार के पूर्वनिर्धारित वर्गों की तरह +NumFieldया +DateField, वे विधियों को ओवरराइड करते हैं set>या val>।

+Setएक तर्क फ़ंक्शन को स्वीकार करता है जिसे कहा जाता है जब भी किसी क्षेत्र को एक मान दिया जाता है। सभी उपयोगकर्ता इनपुट को अपरकेस में बदलने के लिए

  (gui '(+Set +TextField) uppc 30)

+Valके लिए एक अतिरिक्त है +Set। यह एक फ़ंक्शन लेता है जिसे कहा जाता है जब भी फ़ील्ड मान पुनर्प्राप्त किया जाता है। किसी फ़ील्ड मान का वर्ग वापस करने के लिए

  (gui '(+Val +NumField) '((N) (* NN)) 10)

+Fmt- यह सिर्फ एक संयोजन है +Setऔर +Val, यह दो कार्यात्मक तर्क लेता है। इस उदाहरण में, पाठ को बड़े अक्षरों में प्रदर्शित किया जाएगा, जबकि निचले मामले में वापस

  (gui '(+Fmt +TextField) uppc lowc 30)

+Map(like +Fmt) दो-तरफ़ा प्रसारण का उत्पादन करता है। यह रैखिक खोजों के लिए एक सामान्य जोड़ी सूची का उपयोग करता है, जहां सीएआर मैप किए गए मूल्यों का प्रतिनिधित्व करते हैं जो सीडीआर के मूल्यों में आंतरिक रूप से मैप किए जाते हैं। यदि इस प्रक्रिया में मान इस सूची में नहीं मिलता है set>या val>, यह 'जैसा है' प्रसारित होता है।

आमतौर पर +Mapकॉम्बोक्स के साथ संयोजन में उपयोग किया जाता है ( इनपुट फ़ील्ड देखें )। यह उदाहरण उपयोगकर्ता को एक, दो और तीन प्रदर्शित करता है, लेकिन नंबर 1, 2, या 3 को लौटाता है

 ######################################################################## (app) (action (html 0 "+Map" "@lib.css" NIL (form NIL (gui '(+Map +TextField) '(("One" . 1) ("Two" . 2) ("Three" . 3)) '("One" "Two" "Three") ) (gui '(+Button) "Print" '(msg (val> (field -1))) ) ) ) ) ########################################################################

साइड इफेक्ट

जब भी जीयूआई में एक बटन दबाया जाता है, actionतो वर्तमान वातावरण में होने वाले किसी भी परिवर्तन (उदाहरण के लिए, डेटाबेस या एप्लिकेशन की स्थिति) को जीयूआई के संबंधित क्षेत्रों में प्रतिबिंबित किया जाना चाहिए। ऐसा करने के लिए, सभी घटकों (सर्वर साइड पर) को एक संदेश भेजा जाता है upd>। प्रत्येक घटक फिर उचित मूल्य लेता है (उदाहरण के लिए, डेटाबेस ऑब्जेक्ट से अपडेट करना, चर से मान लोड करना या नए मान की गणना करना) इसके मूल्य को अपडेट करने के लिए।

जबकि विधि upd>मुख्य रूप से फ्रेमवर्क द्वारा ही उपयोग की जाती है, इसे उपसर्ग वर्ग के माध्यम से मौजूदा कक्षाओं में ओवरराइड किया जा सकता है +Upd। एसटीडीआरआर में अद्यतन मान प्राप्त करें

 ######################################################################## (app) (default *Number 0) (action (html 0 "+Upd" "@lib.css" NIL (form NIL (gui '(+Upd +Var +NumField) '(prog (extra) (msg *Number)) '*Number 8 ) (gui '(+JS +Button) "Increment" '(inc '*Number) ) ) ) ) ########################################################################

मान्यता

दर्ज किए गए डेटा के स्वचालित सत्यापन को सक्षम करने के लिए, उचित समय पर सभी घटकों को एक संदेश भेजा जाता है chk>। यदि मान मान्य है, तो संबंधित विधि वापस आनी चाहिए NIL, अन्यथा, त्रुटि का वर्णन करने वाला एक स्ट्रिंग।

कई अंतर्निहित कक्षाओं में एक विधि है chk>। कक्षा +NumFieldसंख्यात्मक इनपुट की शुद्धता की जांच करती है, +DateField- कैलेंडर तिथि की शुद्धता।

उपसर्ग वर्ग का उपयोग करके ऑन-द-फ्लाई सत्यापन किया जा सकता है +Chk। निम्न कोड केवल अंकों को 9 से अधिक नहीं स्वीकार करता है: अभिव्यक्ति orपहले सत्यापन को मुख्य वर्ग को सौंपती है +NumFieldऔर - अगर यह एक त्रुटि नहीं लौटाती है - यह वर्तमान मूल्य 9 से अधिक होने पर त्रुटि स्ट्रिंग देता है।

 ######################################################################## (app) (action (html 0 "+Chk" "@lib.css" NIL (form NIL (gui '(+Chk +NumField) '(or (extra) (and (> (val> This) 9) "Number too big") ) 12 ) (gui '(+JS +Button) "Print" '(msg (val> (field -1))) ) ) ) ) ########################################################################

अधिक सीधे सत्यापन बिल्ट-इन वर्ग द्वारा किया जाता है +Limit। यह maxlengthउत्पन्न HTML इनपुट फ़ील्ड की विशेषता को नियंत्रित करता है । इस प्रकार, क्षेत्र में अनुमति से अधिक वर्ण दर्ज करना संभव नहीं है।

 ######################################################################## (app) (action (html 0 "+Limit" "@lib.css" NIL (form NIL (gui '(+Limit +TextField) 4 8) (gui '(+JS +Button) "Print" '(msg (val> (field -1))) ) ) ) ) ########################################################################

डेटा लिंक

यद्यपि set>वे val>एक जीयूआई घटक से मान प्राप्त करने के लिए आधिकारिक तरीके हैं, लेकिन वे अक्सर स्पष्ट रूप से उपयोग नहीं किए जाते हैं। इसके बजाय, घटक सीधे लिस्प आंतरिक डेटा संरचनाओं से संबंधित हैं, जो आमतौर पर डेटाबेस चर या ऑब्जेक्ट होते हैं।

उपसर्ग वर्ग +Varएक चर को स्वीकार करता है ( फ़ंक्शन निर्देशिका में डेटा प्रकार var- प्रतीक या विपक्ष जोड़ी के रूप में वर्णित )। निम्नलिखित उदाहरण में, हम "चर" मान के साथ वैश्विक चर को आरंभीकृत करते हैं और क्षेत्र +TextFieldको इसके साथ काम करने की अनुमति देते हैं । प्रिंट बटन का उपयोग इसके वर्तमान मूल्य को प्रदर्शित करने के लिए किया जा सकता है।

 ######################################################################## (app) (setq *TextVariable "abc") (action (html 0 "+Var" "@lib.css" NIL (form NIL (gui '(+Var +TextField) '*TextVariable 8) (gui '(+JS +Button) "Print" '(msg *TextVariable) ) ) ) ) ########################################################################

+E/Rएक इकाई / संबंध विनिर्देश स्वीकार करता है। यह सीएआर में एक संबंध के साथ एक जोड़ी है (उदाहरण के लिए nm, किसी वस्तु के नाम के लिए) और सीडीआर में एक अभिव्यक्ति (आमतौर पर वर्तमान फॉर्म (: home obj)की संपत्ति में संग्रहीत एक वस्तु obj)।

निम्नलिखित पृथक और सरल उदाहरण में, हम एक अस्थायी डेटाबेस बनाते हैं nrऔर nmवैश्विक चर में संग्रहीत गुणों और ऑब्जेक्ट तक पहुंच प्राप्त करते हैं *Obj।

 ######################################################################## (when (app) # On start of session (class +Tst +Entity) # Define data model (rel nr (+Number)) # with a number (rel nm (+String)) # and a string (pool (tmp "db")) # Create temporary DB (setq *Obj # and a single object (new! '(+Tst) 'nr 1 'nm "New Object") ) ) (action (html 0 "+E/R" "@lib.css" NIL (form NIL (gui '(+E/R +NumField) '(nr . *Obj) 8) # Linkage to 'nr' (gui '(+E/R +TextField) '(nm . *Obj) 20) # Linkage to 'nm' (gui '(+JS +Button) "Show" # Show the object '(out 2 (show *Obj)) ) ) ) ) # on standard error ########################################################################

बटन

बटन, नियंत्रण प्रवाह में वर्णित हैं, एप्लिकेशन सर्वर (POST अनुरोधों के माध्यम से) के साथ बातचीत करने का एकमात्र तरीका है।

मूल रूप से +Buttonस्वीकार करता है

नाम, जो एक स्ट्रिंग या छवि फ़ाइल नाम हो सकता है
वैकल्पिक वैकल्पिक नाम जो बटन अक्षम होने पर प्रदर्शित किया जा सकता है
और एक निष्पादन योग्य अभिव्यक्ति।

नीचे एक नाम और अभिव्यक्ति के साथ एक न्यूनतम बटन का एक उदाहरण है:

  (gui '(+Button) "Label" '(doSomething))

और यह विभिन्न नामों का एक प्रदर्शन है, जो बटन की स्थिति पर निर्भर करता है:

  (gui '(+Button) "Enabled" "Disabled" '(doSomething))

सादे पाठ के बजाय एक छवि प्रदर्शित करने के लिए, लेबल को एक प्रतीक से पहले होना चाहिए T:

  (gui '(+Button) T "img/enabled.png" "img/disabled.png" '(doSomething))

जब यह बटन क्लिक किया जाता है, तो अभिव्यक्ति प्रसंस्करण के दौरान निष्पादित की जाएगी action( प्रपत्र देखें )।

अन्य घटकों की तरह, एक बटन का विस्तार और उपसर्ग वर्गों के साथ जोड़ा जा सकता है, इसके लिए कई पूर्वनिर्धारित कक्षाएं और उनके संयोजन उपलब्ध हैं।

संवाद बटन

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

इस तरह के बटन को आम तौर पर उपवर्गों हैं +Close, और उनमें से सबसे आसानी से पूर्वनिर्मित प्रकार कार्यों का उपयोग कर कारण हो सकता है closeButton, cancelButton, yesButtonया noButton। हमने अलर्ट और डायलॉग में कई उदाहरण देखे ।

सक्रिय जावास्क्रिप्ट

जब एक बटन वर्ग से विरासत में मिलता है +JS(और ब्राउज़र में जावास्क्रिप्ट सक्षम किया जाता है), तो यह संभव है कि बटन क्लिक करने के लिए बहुत तेज़ प्रतिक्रिया दिखाएगा।

इसका कारण यह है कि +JSसामान्य POST के बजाय, यह सबसे पहले सभी GUI घटकों की केवल सामग्री को XMLHttpRequest के माध्यम से सर्वर पर भेजने का प्रयास करता है, और प्रतिक्रिया में अद्यतन मान प्राप्त करता है। यह पूरे पृष्ठ को फिर से लोड करने और प्रदान करने के कारण होने वाली झिलमिलाहट से बचा जाता है, यह बहुत तेज़ है, और ब्राउज़र विंडो से बड़ा होने पर पृष्ठ के शीर्ष पर स्क्रॉल करने का कारण भी नहीं बनता है। तालिकाओं के माध्यम से स्क्रॉल करते समय यह विशेष रूप से ध्यान देने योग्य है।

यदि यह विफल रहता है, तो केवल एक नियमित POST अनुरोध के साथ फॉर्म जमा किया जाएगा।

इस प्रकार, उपसर्ग का उपयोग करने का कोई मतलब नहीं है+JSHTML कोड को बदलने वाले बटनों के लिए, एक संवाद बॉक्स खोलें या किसी अन्य पृष्ठ पर जाएं। ऐसे मामलों में, समग्र प्रदर्शन और भी खराब होगा क्योंकि XMLHttpRequest को पहले कहा जाएगा।

जब ब्राउज़र में जावास्क्रिप्ट अक्षम होता है, तो XMLHttpRequest का उपयोग बिल्कुल नहीं किया जाएगा। फ़ॉर्म पूरी तरह से उपयोग करने योग्य होगा, बिल्कुल समान कार्यक्षमता के साथ, बस थोड़ा धीमा और इतना चिकना नहीं होगा।

न्यूनतम पूर्ण आवेदन

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

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

शुरुआत हो रही है

वैश्विक सेटिंग्स (देखें। के लिए स्थापना ), स्थान जहां प्रोग्राम फ़ाइलों स्थापित करने के लिए एक प्रतीकात्मक कड़ी बना सकते हैं। यह आवश्यक है क्योंकि एप्लिकेशन को वर्तमान कामकाजी निर्देशिका (रन समय में डेटाबेस और अन्य डेटा के लिए) पढ़ने और लिखने की आवश्यकता होती है।

 $ ln -s /usr/share/picolisp/app

हमेशा की तरह, आप एप्लिकेशन को डिबग मोड में चला सकते हैं

 $ pil app/main.l -main -go +

या उत्पादन मोड में (गैर-डिबग)

 $ pil app/main.l -main -go -wait

और अपने ब्राउज़र में ' http: // localhost: 8080 ' पर जाएं। आप उपयोगकर्ता "व्यवस्थापक", पासवर्ड "व्यवस्थापक" के रूप में लॉग इन कर सकते हैं। नमूना डेटा में कई अन्य उपयोगकर्ता शामिल हैं, लेकिन उनकी भूमिकाएं अधिकारों द्वारा अधिक सीमित हैं।

एक और संभावना app.7fach.de वेबसाइट पर इस आवेदन के ऑनलाइन संस्करण की कोशिश करने के लिए है ।

स्थानीयकरण

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

नेविगेशन

बाईं ओर नेविगेशन मेनू दो आइटम "होम" और "लॉगआउट" और तीन सबमेनस "डेटा", "रिपोर्ट" और "सिस्टम" दिखाता है।

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

"डेटा" सबमेनू एप्लिकेशन डेटा और रखरखाव तक पहुंच प्रदान करता है: ऑर्डर, माल, ग्राहक और आपूर्तिकर्ता। रिपोर्ट सबमेनू में इन्वेंट्री और बिक्री पर दो सरल रिपोर्ट शामिल हैं। "सिस्टम" सबमेनू आपको उपयोगकर्ता अधिकारों और उनकी भूमिकाओं को प्रबंधित करने की अनुमति देता है।

प्रत्येक सबमेनू को स्वतंत्र रूप से बंद और खोला जा सकता है। एक साथ कई खुले सबमेनस की उपस्थिति आपको आवेदन के विभिन्न हिस्सों के बीच जल्दी से स्विच करने की अनुमति देती है।

एक सक्रिय मेनू आइटम एक अलग सूची मार्कर शैली द्वारा इंगित किया गया है।

वस्तु चयन

"डेटा" या "सिस्टम" सबमेनू में प्रत्येक आइटम इस इकाई वर्ग के लिए एक खोज संवाद बॉक्स खोलता है। आप एक खोज टेम्प्लेट निर्दिष्ट कर सकते हैं, खोज बटन पर क्लिक करें (या केवल दर्ज करें) और परिणामों की सूची के माध्यम से स्क्रॉल करें।

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

किसी भी स्थिति में, पहले कॉलम में "@" लिंक (इस ऑब्जेक्ट पर जाने के लिए) या "@" बटन होगा (वर्तमान फॉर्म में इस ऑब्जेक्ट के लिए लिंक डालने के लिए)।

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

हालाँकि, कुछ खोज फ़ील्ड अनुप्रयोग के आधार पर भिन्न व्यवहार दिखाती हैं:

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

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

संपादन

एक डेटाबेस ऑब्जेक्ट आमतौर पर अपने स्वयं के व्यक्तिगत रूप में प्रदर्शित होता है, जो इसकी इकाई वर्ग द्वारा निर्धारित किया जाता है।

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

प्रपत्र को केवल पढ़ने के लिए मोड में प्रदर्शित किया जाता है। कई उपयोगकर्ताओं को एक ही समय में ऑब्जेक्ट को बदलने से रोकने के लिए आवश्यक है (पिछले PicoLisp जावा फ्रेमवर्क के विपरीत, जहां यह कोई समस्या नहीं थी, क्योंकि सभी परिवर्तन तुरंत अन्य उपयोगकर्ताओं के जीयूआई में परिलक्षित होते थे)।

इसलिए यदि आप ऑब्जेक्ट को बदलना चाहते हैं, तो आपको "एडिट" बटन पर क्लिक करके अनन्य एक्सेस की आवश्यकता है। प्रपत्र अनलॉक हो जाता है, और संपादन बटन पूरा हो जाता है। यदि किसी अन्य उपयोगकर्ता ने पहले ही इस ऑब्जेक्ट को ब्लॉक कर दिया है, तो आपको उसके नाम और प्रक्रिया आईडी के साथ एक संदेश दिखाई देगा।

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

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

चयन बटन (बार-बार) इस इकाई वर्ग के लिए खोज संवाद बॉक्स प्रदर्शित करता है। खोज खोज कॉल के बीच खोज मापदंड सहेजे जाते हैं।

बाएँ और दाएँ इंगित करने वाले नेविगेशन लिंक एक समान उद्देश्य की सेवा करते हैं। वे आपको दिए गए वर्ग के सभी ऑब्जेक्ट्स को इंडेक्स ऑर्डर में कदम रखने की अनुमति देते हैं।

अन्य बटन, प्रकृति के आधार पर, आमतौर पर फॉर्म के निचले भाग में स्थित होते हैं। सबसे नीचे दाईं ओर एक और "एडिट" / "डन" बटन होना चाहिए।

जैसा कि हमने स्क्रॉलिंग के अध्याय में कहा है, फॉर्म का कोई भी बटन अंतर्निहित डेटा मॉडल में परिवर्तन को बचाता है। हालाँकि, एक विशेष मामले के रूप में, Done बटन ऑब्जेक्ट को मुक्त करता है और Edit पर वापस लौटता है। इसके अलावा, संपादन मोड बाधित हो जाएगा जैसे ही कोई अन्य वस्तु दिखाई देती है, ऑब्जेक्ट लिंक (पेंसिल आइकन), शीर्ष दायां नेविगेशन लिंक या खोज संवाद बॉक्स में लिंक पर क्लिक करने के कारण होता है।

बटन बनाम लिंक

HTTP- आधारित एप्लिकेशन सर्वर के साथ बातचीत करने का एकमात्र तरीका या तो HTML लिंक पर या सबमिट बटन पर क्लिक करके देखें ( नियंत्रण प्रवाह भी देखें )। वर्तमान रूप में दर्ज या परिवर्तित किए गए डेटा पर क्लिक करने के विभिन्न प्रभावों को समझना महत्वपूर्ण है।

लिंक पर क्लिक करके, हम पृष्ठ को छोड़ देते हैं या पुनः लोड करते हैं। परिवर्तन त्याग दिए जाते हैं।
बटन पर क्लिक करके, हम परिवर्तनों को लागू करते हैं और उचित कार्य करते हैं।

इस कारण से, संरचना का लेआउट स्पष्ट रूप से लिंक और बटन को भेद करना चाहिए। छवियों के रूप में बटन एक अच्छा विचार नहीं है जब अन्य स्थानों में छवियों का उपयोग लिंक के लिए किया जाता है। मानक बटन पसंद किए जाते हैं; वे आमतौर पर ब्राउज़र द्वारा एक अस्पष्ट तीन-आयामी रूप में प्रदर्शित होते हैं।

कृपया ध्यान दें कि यदि जावास्क्रिप्ट ब्राउज़र में सक्षम है, तो परिवर्तन स्वचालित रूप से सर्वर पर भेजे जाएंगे।

बटन का चालू या बंद होना एप्लिकेशन लॉजिक का एक अभिन्न अंग है। यह उपयुक्त शैलियों में उपयोगकर्ता को इंगित किया जाना चाहिए।

डेटा मॉडल

इस गैजेट के डेटा मॉडल में केवल छह इकाई वर्ग होते हैं ("एप्लिकेशन / er.l" की शुरुआत में चित्र ई / आर देखें):

### इकाई / संबंध ###
 #
# एनआर एनएम एनएम एनएम एनएम
# #  |  |  |  |
# + - * ---- * - + + - * ---- * - + + - * ----- +
# #  | सुपर |  |  |  |
# str --* CuSu O-----------------* Item *-- inv | Role @-- perm
# |  |  |  |  |  |
# +-*-*--O-+ +----O---+ +----@---+
# |  |  |  |  | usr
# nm tel -+ |  |  |  |
# |  |  |  | itm | role
# +-*-----+ |  | +-------+ +---*---+ +----*---+
# |  |  |  |  |  | ord |  |  |  |
# | Sal +---+ +---* Ord @--------* Pos | nm --* User *-- pw
# |  | cus |  | pos |  |  |  |
# +-*---*-+ +-*---*-+ +-*---*-+ +--------+
# |  |  |  |  |  |
# hi sex nr dat pr cnt

— +CuSu (/), +Item () +Ord ().
+Pos .
+Role +User .

कक्षाएं +Roleऔर +User"@ lib / adm.l" में परिभाषित हैं । +Roleएक नाम, अनुमतियों की सूची और इस भूमिका के लिए असाइन किए गए उपयोगकर्ताओं की एक सूची है। +Userएक नाम, पासवर्ड और भूमिका है।

"एप्लिकेशन / er.l" में, वर्ग +Roleइसके लिए एक विधि को परिभाषित करने के लिए फैलता है url>। कोई भी वस्तु जिसकी कक्षा में ऐसी विधि है, वह स्वयं GUI में मैप करने में सक्षम है। इस मामले में, फ़ाइल "ऐप / रोल.एल" लोड की जाएगी - एक वैश्विक चर इसकी *IDओर इशारा करते हुए - हर बार जब इस ऑब्जेक्ट के लिए एक HTML लिंक सक्रिय होता है।

क्लास +Userभी बढ़ा दी है। लॉगिन के अलावा, पूरा नाम, ई-मेल और फोन नंबर जोड़ा जाता है। और, ज़ाहिर है, सर्वव्यापी विधि url>।

एप्लिकेशन लॉजिक ऑर्डर के आसपास घूमता है। आदेश में एक संख्या, दिनांक, ग्राहक (प्रतिलिपि) है+CuSu) और पदों की एक सूची (ऑब्जेक्ट्स +Pos)। विधि sum>इस आदेश के कुल मूल्य की गणना करती है।

प्रत्येक वस्तु में एक वस्तु +Item(उत्पाद), मूल्य और मात्रा का लिंक होता है। लाइन आइटम का मूल्य संबंधित उत्पाद के लिए डिफ़ॉल्ट मूल्य को ओवरराइड करता है।

प्रत्येक उत्पाद में एक संख्या, विवरण, आपूर्तिकर्ता (एक प्रतिलिपि भी +CuSu), इन्वेंट्री (अंतिम इन्वेंट्री से आइटम की संख्या) और कीमत होती है। विधि cnt>इस उत्पाद के वर्तमान स्टॉक की गणना करती है, क्योंकि इन्वेंट्री और बेची गई वस्तुओं की मात्रा के बीच का अंतर।

फंक्शन कॉलdbsअंत में, "एप्लिकेशन / er.l" डेटाबेस की भौतिक संरचना सेट करता है। प्रदान की गई प्रत्येक सूची में CAR में एक संख्या होती है, जो 64 (64 << N) की शक्ति के रूप में संबंधित डेटाबेस फ़ाइल के ब्लॉक आकार को निर्धारित करती है। CDR यह निर्धारित करता है कि किसी दिए गए वर्ग के उदाहरण (यदि तत्व एक वर्ग चिन्ह है) या ट्री नोड्स (यदि तत्व वर्ग चिन्ह और संपत्ति के नाम की सूची है) को इस फाइल में रखा जाए। यह डेटाबेस संरचना में कुछ अनुकूलन की अनुमति देता है।

 # Database sizes (dbs (3 +Role +User +Sal) # 512 Prevalent objects (0 +Pos) # A:64 Tiny objects (1 +Item +Ord) # B:128 Small objects (2 +CuSu) # C:256 Normal objects (2 (+Role nm) (+User nm) (+Sal nm)) # D:256 Small indexes (4 (+CuSu nr plz tel mob)) # E:1024 Normal indexes (4 (+CuSu nm)) # F:1024 (4 (+CuSu ort)) # G:1024 (4 (+Item nr sup pr)) # H:1024 (4 (+Item nm)) # I:1024 (4 (+Ord nr dat cus)) # J:1024 (4 (+Pos itm)) ) # K:1024

के उपयोग

एप्लिकेशन से कनेक्ट करने के बाद ( प्रारंभ करना देखें ), आप इसके साथ कुछ "वास्तविक" कार्य करने का प्रयास कर सकते हैं। "डेटा" मेनू ( नेविगेशन देखें ) के माध्यम से, आप ग्राहकों, आपूर्तिकर्ताओं, उत्पादों और आदेशों को बना या संपादित कर सकते हैं, और "रिपोर्ट" मेनू के माध्यम से सरल रिपोर्ट बना सकते हैं।

ग्राहक / आपूर्तिकर्ता

"एप्लिकेशन / cusu.l"

क्लाइंट / विक्रेता खोज संवाद बॉक्स ( choCuSu"एप्लिकेशन / gui.l" में) कई खोज मानदंडों का समर्थन करता है। वे आवश्यक हो जाते हैं जब डेटाबेस में बड़ी संख्या में ग्राहक होते हैं, और आप ज़िप द्वारा फ़िल्टर कर सकते हैं, फोन नंबरों के उपसर्ग और इतने पर।

मुख्य लेआउट ( एडिटिंग देखें ) के अलावा, फॉर्म को चार अलग-अलग टैब में विभाजित किया गया है। फ़ॉर्म को कई टैब में विभाजित करने से आप ट्रैफ़िक को कम कर सकते हैं, संभवतः GUI की प्रतिक्रिया को तेज़ कर सकते हैं। इस मामले में, चार टैब संभव हैं, लेकिन वे प्रदर्शन उद्देश्यों के लिए काफी उपयुक्त हैं, और वे एक्सटेंशन के लिए जगह छोड़ देते हैं।

ध्यान रखें कि जब टैब में से एक में डेटा बदल दिया गया है, तो "टैब" बटन को दूसरे टैब का चयन करने से पहले दबाया जाना चाहिए, क्योंकि टैब को HTML लिंक ( बटन बनाम लिंक देखें ) के रूप में कार्यान्वित किया जाता है ।

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

संपर्क टैब में फ़ोन और फ़ैक्स नंबर सही प्रारूप में दर्ज किए जाने चाहिए, जो लोकेल ( टेलीफोन नंबर देखें ) पर निर्भर करता है ।

मेमो टैब में एक पाठ क्षेत्र होता है। आप पाठ के बड़े हिस्से के लिए इसका उपयोग कर सकते हैं, क्योंकि यह एक ब्लॉब ऑब्जेक्ट में संग्रहीत है।

माल

"App / item.l"

उत्पादों में एक विशिष्ट संख्या और एक आवश्यक "विवरण" फ़ील्ड भी होता है।

आपूर्तिकर्ता को असाइन करने के लिए, "+" बटन पर क्लिक करें। ग्राहक / आपूर्तिकर्ता खोज संवाद बॉक्स प्रकट होता है, और आप पहले कॉलम में "@" बटन पर क्लिक करके वांछित आपूर्तिकर्ता का चयन कर सकते हैं। इसके अलावा, यदि आप सुनिश्चित हैं कि आप आपूर्तिकर्ता के नाम की सटीक वर्तनी जानते हैं, तो आप इसे सीधे टेक्स्ट बॉक्स में भी दर्ज कर सकते हैं।

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

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

वर्तमान स्थान के आधार पर एक दशमलव विभाजक के साथ कीमतें दर्ज की जानी चाहिए। इसे दशमलव विभाजक के बाद दो वर्णों के साथ स्वरूपित किया जाएगा।

मेमो फ़ील्ड, साथ ही साथ क्लाइंट / आपूर्तिकर्ता में, डेटाबेस के ब्लॉब-ऑब्जेक्ट में संग्रहीत है।

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

क्रम

"App / ord.l"

आदेश संख्या और तारीख से पहचाने जाते हैं।

संख्या अद्वितीय होनी चाहिए। यह तब दिया जाता है जब कोई ऑर्डर बनाया जाता है और उसे बदला नहीं जा सकता।

नए बनाए गए आदेश की तारीख आज के लिए निर्धारित है, लेकिन इसे मैन्युअल रूप से बदला जा सकता है। तारीख का प्रारूप लोकेल पर निर्भर करता है। ये डिफ़ॉल्ट रूप से YYYY-MM-DD (ISO), जर्मन में DD.MM.YYYY और जापानी में YYYY / MM / DD हैं। जैसा कि समय और तारीख में वर्णित है , यह फ़ील्ड संक्षिप्त इनपुट की अनुमति देता है, उदाहरण के लिए, वर्तमान महीने में पूरी तारीख प्राप्त करने के लिए दिन दर्ज करें।

इस आदेश के लिए ग्राहक को असाइन करने के लिए, "+" बटन पर क्लिक करें। ग्राहक / आपूर्तिकर्ता खोज संवाद बॉक्स प्रकट होता है, और आप पहले कॉलम में "@" बटन के साथ वांछित ग्राहक का चयन कर सकते हैं (या सीधे टेक्स्ट बॉक्स में नाम दर्ज कर सकते हैं), जैसा कि उत्पाद के लिए ऊपर वर्णित है ।

अब ऑर्डर आइटम दर्ज करें: "+" बटन का उपयोग करके उत्पाद का चयन करें। "मूल्य" फ़ील्ड में एक डिफ़ॉल्ट मूल्य होगा, आप इसे मैन्युअल रूप से बदल सकते हैं। फिर मात्रा दर्ज करें और बटन दबाएं (आमतौर पर "+" बटन अगले आइटम या स्क्रॉल बटन का चयन करने के लिए)। पदों की कुल लागत और पूरे आदेश को दिखाने के लिए फॉर्म को स्वचालित रूप से रिकॉल किया जाएगा।

"+" या स्क्रॉलिंग बटन के बजाय, जैसा कि ऊपर अनुशंसित है, निश्चित रूप से, आप परिवर्तनों को सहेजने के लिए "पूर्ण" बटन भी दबा सकते हैं। लेकिन इससे बटन दूसरी बार दबाया जाएगा (अब "संपादित करें") यदि आप पदों को भरना जारी रखना चाहते हैं।

प्रत्येक आइटम के दाईं ओर "x" बटन इस आइटम को बिना अधिक पुष्टि के हटा देता है। इसका उपयोग सावधानी के साथ किया जाना चाहिए!

"^" बटन उच्च रेखा के साथ वर्तमान रेखा को स्वैप करता है। इस प्रकार, इसका उपयोग तालिका के सभी तत्वों के स्थान को बदलने के लिए किया जा सकता है, उन्हें वांछित स्थिति में बढ़ाकर।

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

रिपोर्ट

"ऐप / इन्वेंट्री.एल और" ऐप / सेल्स.एल "

दो रिपोर्ट (" इन्वेंटरी "और" सेल्स ") में कई खोज फ़ील्ड और" शो "बटन होते हैं।

यदि खोज मानदंड निर्दिष्ट नहीं हैं, तो "दिखाएँ" बटन पूरे डेटाबेस के संबंधित भाग की एक सूची प्रदर्शित करेगा। यह बहुत समय ले सकता है और डेटाबेस बड़ा होने पर ब्राउज़र पर एक बड़ा भार पैदा कर सकता है।

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

प्रत्येक रिपोर्ट के अंत में, "CSV" लिंक दिखाई देता है। यह रिपोर्ट में उत्पन्न फ़ाइल को डाउनलोड करता है।

PicoLisp पर वेब अनुप्रयोग विकास

PicoLisp पर वेब अनुप्रयोग विकास

स्थैतिक पेज

नमस्ते दुनिया

अनुप्रयोग सर्वर लॉन्च

यह कैसे काम करता है?

URL सिंटैक्स

सुरक्षा

फ़ाइल .pw

html फ़ंक्शन

सीएसएस गुण

टैग कार्य

सरल टैग

सूचियों

टेबल

मेनू और टैब (टैब)

परस्पर रूप

अधिवेशन

फॉर्म (कार्रवाई रूपों)

समारोह gui

नियंत्रण प्रवाह

URL स्विचिंग

अलर्ट और संवाद

कैलकुलेटर उदाहरण

टेबल (चार्ट)

स्क्रॉल

कार्य प्राप्त करें और कार्य करें

जीयूआई कक्षाएं

इनपुट फ़ील्ड

संख्यात्मक इनपुट फ़ील्ड

समय और तारीख

टेलीफोन नंबर

चेक बॉक्स

फील्ड उपसर्ग कक्षाएं

प्रारंभ

सक्षम और अक्षम करें

स्वरूपण

साइड इफेक्ट

मान्यता

डेटा लिंक

बटन

संवाद बटन

सक्रिय जावास्क्रिप्ट

न्यूनतम पूर्ण आवेदन

शुरुआत हो रही है

स्थानीयकरण

नेविगेशन

वस्तु चयन

संपादन

बटन बनाम लिंक

डेटा मॉडल

के उपयोग

ग्राहक / आपूर्तिकर्ता

माल

क्रम

रिपोर्ट

More articles:

`html` फ़ंक्शन

समारोह `gui`