🐁 🗞️ 👊🏾 कैच डीबीएमएस 2013.2 में नया विज़ुअल एचटीएमएल 5 ज़ेन घटक 📧 🛸 ⚒️

यह ध्यान देने योग्य है कि नए विज़ुअल एचटीएमएल 5 घटक, जिनमें से इंटरफ़ेस मोबाइल डिवाइसों के लिए अनुकूलित है, और जो डेटा प्राप्त करने के लिए JSON प्रारूप का उपयोग करते हैं, पहले ही Caché DBMS संस्करण 2013.1 में दिखाई दे चुके हैं, लेकिन उनमें से सभी पूर्ण गति से काम नहीं कर रहे हैं।

ये ऐसे घटक हैं:

% ZEN.Component.accordionMenu
% ZEN.Component.toolbar
% ZEN.Component.navigator
% ZEN.Component.lookup
% ZEN.Component.dataGrid

वर्ग निर्देशिका में आप इन घटकों के लिए सभी दस्तावेज पा सकते हैं। यहां आपको उनके उपयोग (स्क्रीनशॉट के साथ) के कुछ परिचयात्मक उदाहरण भी मिलेंगे।

उदाहरण # 1: <accordionMenu>

यह घटक एक विशेष मेनू है जिसमें अधिकतम स्तर तीन के बराबर है।
उदाहरण दो घटकों का उपयोग करता है: एक क्लाइंट से डेटा प्राप्त करता है, दूसरा सर्वर से।

<AccordionMenu> के लिए नमूना कोड

कक्षा html5.test1% ZEN.Component.page का विस्तार करता है
{

/// इस स्टाइल ब्लॉक में पेज के लिए CSS स्टाइल परिभाषा है।
XData स्टाइल
{
< style type = "text / css" >
</ शैली >
}

/// यह XML ब्लॉक इस पेज की सामग्री का वर्णन करता है।
XData सामग्री [ XMLNamespace = " www.intersystems.com/zen" ]
{
< पेज xmlns = " www.intersystems.com/zen" शीर्षक = "" >
< jsonProvider id = "json" OnGetArray = "SrvGetData" />
< hgroup cellVAlign = "शीर्ष" >

<! - सर्वर से डेटा प्राप्त करें ->
< accordionMenu कंट्रोलर = "json" onselect = "zenPage.selectList (की, एक्शन, टारगेट);" चयनितइंडेक्स = "2" />

<! - क्लाइंट से डेटा प्राप्त करना ->
< accordionMenu ongetdata = "वापसी zenPage.getdata ();" onselect = "zenPage.selectList (की, एक्शन, टारगेट);" />

</ hgroup >
</ पृष्ठ >
}

क्लाइंटमेथोड गेटडाटा () [ भाषा = जावास्क्रिप्ट]
{
{बच्चों को लौटाएँ : [{की: 'की'
कैप्शन: 'caption0' ,
क्रिया: ' एक्शन 0' ,
targetId: 'id0' ,
छवि: 'डीपसी / add_64.png' ,
imageStyle: 'बॉर्डर: 1px ठोस लाल?' ।
शैली: 'पृष्ठभूमि: लाल?' ।
बच्चे: [{key: 'key01' ,
कैप्शन: 'caption01' ,
क्रिया: ' एक्शन 01' ,
targetId: 'id01' ,
छवि: 'चित्र / save.png' }]
}]
};
}

विधि SrvGetData (
बायरफ pParameters ,
आउटपुट pMetaData ,
आउटपुट pData ) % स्थिति के रूप में
{
PMetaData = $ LB ( "कुंजी" , "कैप्शन" , "एक्शन" , "targetId" , "image" , "imageStyle" , "style" ) सेट करें

PData (1) = $ LB ( "key1" , "caption1" , "action1" , " id1 " , "" ) सेट करें
PData (1,1) = $ LB ( "key11" , "caption11" , "Action11" , "id11" , "images / saveas.png" ) सेट करें
सेट करें pData (1,1,1) = $ LB ( "key111" , "caption111" , "action111" , "id111" , "deepsee / रद्द_48.png" )
सेट करें pData (1,1,2) = $ LB ( "key112" , "caption112" , "action112" , "id112" , "deepsee / Cancel_48.png" )
सेट करें pData (2) = $ LB ( "key2" , "caption2" , "action2" , "id2" , "images / save.png" , "border-radius: 10px;" )
सेट करें pData (2,1) = $ LB ( "key21" , "caption21" , "action21" , "id21" , "images / saveall.png" )
सेट करें pData (2,1,1) = $ LB ( "key211" , "caption211" , "action211" , "id211" , "deepsee / ds2_list_44.png" )
सेट करें pData (2,1,2) = $ LB ( "key212" , "caption212" , "action212" , "id212" , "deepsee / ds2_list_44.png" )
PData (3) = $ LB ( "key3" , "caption3" , "action3" , "id3" , "" ) सेट करें
PData (3,1) = $ LB ( "key31" , "caption31" , "action31" , "id31" , "images / saveall.png" ) सेट करें
सेट करें pData ( 3,1,1 ) = $ LB ( "key311" , "caption311" , "action311" , "id311" , "deepsee / add_64.png" , "border: 1px सफेद"; )
सेट करें pData (3,1,2) = $ LB ( "key312" , "caption312" , "action312" , "id312" , "deepsee / add_64.png" , "पृष्ठभूमि: नीला;";

$ $ $ $ ठीक है
}

ClientMethod चयनकर्ता (
कुंजी,
कार्रवाई,
targetId ) [ भाषा = जावास्क्रिप्ट]
{
zenAlert ( 'key =' , key, '\ naction =' , action, '\ ntargetId =' , targetId);
}

}

स्क्रीनशॉट <accordionMenu>

नंबर 1

नंबर 2

नंबर 3

उदाहरण 2: <टूलबार>

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

<टूलबार> के लिए नमूना कोड

कक्षा HTML5.test2% ZEN.Component.page का विस्तार करता है
{

/// इस स्टाइल ब्लॉक में पेज के लिए CSS स्टाइल परिभाषा है।
XData स्टाइल
{
< style type = "text / css" >
.ztb- कैप्शन -1 {
फ़ॉन्ट-आकार: 12 पीएक्स;
गद्दी: 4px 10px 4px 10px;
}

.ztb-menuItemSelected-1 {
पृष्ठभूमि: सफेद;
सीमा: 1px ठोस;
बॉर्डर-टॉप-लेफ्ट-रेडियस: 10 पीएक्स;
बॉर्डर-टॉप-राइट-रेडियस: 10 पीएक्स;
}

td.ztb-choSelected {
पृष्ठभूमि: सफेद;
रंग: काला;
अपारदर्शिता: 1.0;
फ़ॉन्ट-आकार: 12 पीएक्स;
}
</ शैली >
}

/// यह XML ब्लॉक इस पेज की सामग्री का वर्णन करता है।
XData सामग्री [ XMLNamespace = " www.intersystems.com/zen" ]
{
< पेज xmlns = " www.intersystems.com/zen" शीर्षक = "" >
< टूलबार
ongetdata = "रिटर्न zenPage.getdata1 ();"
onselect = "zenPage.selectList (की, एक्शन, टारगेट);"
/>
< स्पेसर ऊंचाई = "10" />
< टूलबार
ongetdata = "रिटर्न zenPage.getdata2 ();"
onselect = "zenPage.selectList (की, एक्शन, टारगेट);"
onchange = "zenPage.change (कुंजी, मूल्य, अंतिम);"
onpagechange = "zenPage.pagechange (कुंजी, पृष्ठ);"
/>
</ पृष्ठ >
}

क्लायंटमेथोड पेजक्रॉफ्ट (
कुंजी,
पृष्ठ ) [ भाषा = जावास्क्रिप्ट]
{
zenAlert ( 'key =' , key, '\ npage =' , पेज);
}

ClientMethod परिवर्तन (
कुंजी,
मूल्य,
अंतिम ) [ भाषा = जावास्क्रिप्ट]
{
zenAlert ( 'कुंजी =' , कुंजी, '\ nvalue =' , मान, '\ nfinal =' , अंतिम);
}

ClientMethod चयनकर्ता (
कुंजी,
कार्रवाई,
targetId ) [ भाषा = जावास्क्रिप्ट]
{
zenAlert ( 'की =' , की, '\ n एक्शन =' , एक्शन, '\ ntargetId =' , targetId);
}

ClientMethod getdata1 () [ भाषा = जावास्क्रिप्ट]
{
वापसी {बच्चे: [{कुंजी: 'की 1'
कैप्शन: 'caption1' ,
क्रिया: 'एक्शन 1' ,
targetId: ' id1 ' ,
चित्र: '' ,
बच्चे: [{कुंजी: 'की 11' ,
कैप्शन: 'caption11' ,
क्रिया: ' एक्शन 11' ,
targetId: 'id11' ,
छवि: 'चित्र / save.png' }]
}
{कुंजी: 'की 2' ,
कैप्शन: 'caption2' ,
क्रिया: ' एक्शन 2 ' ,
targetId: 'id2' ,
छवि: 'डीपसी / add_64.png' ,
बच्चे: [{key: 'key21' ,
कैप्शन: 'caption21' ,
क्रिया: ' एक्शन 21' ,
targetId: 'id21' ,
छवि: 'चित्र / save.png' }]
}
{कुंजी: 'की 3' ,
कैप्शन: 'caption3' ,
क्रिया: 'एक्शन 3' ,
targetId: 'id3' ,
छवि: 'डीपसी / ds2_list_44.png' ,
बच्चे: {{कुंजी: 'की 31' ,
कैप्शन: 'caption31' ,
क्रिया: ' एक्शन 31' ,
targetId: 'id31' ,
छवि: 'चित्र / save.png' }]
}]
};
}

ClientMethod getdata2 () [ भाषा = जावास्क्रिप्ट]
{
वापसी {
बच्चे: [
{key: 'key1' , कैप्शन: 'caption1' , एक्शन: 'action1' , targetId: ' id1 ' , image: '' , टाइप करें: 'पेज' , minValue: 1 , maxValue: 5 }
{कुंजी: 'की 2' , कैप्शन: ' कैप्शन 2 ' , एक्शन: 'एक्शन 2' , लक्ष्यआईड: 'आईडी 2' , इमेज: 'डीपसी / कैंसल_48.पिंग' , टाइप करें: 'टैब' }, '
{कुंजी: 'की 3' , कैप्शन: ' कैप्शन 3' , एक्शन: 'एक्शन 3' , लक्ष्यआईड: ' आईडी 3 ' , इमेज: '' , टाइप: 'टैब' },
{कुंजी: 'की 4' , कैप्शन: ' कैप्शन 4' , एक्शन: 'एक्शन 4' , लक्ष्यआईड: 'आईडी 4' , इमेज: '' , टाइप: 'आइटम' ,
बच्चे: [{key: 'key41' , कैप्शन: 'caption41' , एक्शन: 'action41' , targetId: 'id41' , छवि: '' },
{विभाजक: '' },
{key: 'key42' , कैप्शन: 'caption42' , एक्शन: 'action42' , targetId: 'id42' , इमेज: '' }]]}
{प्रकार: 'स्पेसर' , शैली: 'चौड़ाई: 50 पीएक्स;' }
{key: 'key5' , कैप्शन: 'caption5' , एक्शन: 'action5' , targetId: 'id5' , छवि: 'images / save.png' , टाइप करें: 'tab' , चयनित: true},
{key: 'key6' , कैप्शन: 'caption6' , एक्शन: 'action6' , targetId: 'id6' , image: '' , टाइप: ' choice ' , displayList: ' a1, b1, c1 , valueList: ' a , बी, सी ' , मूल्य: ' सी ' , शैली: ' चौड़ाई: 90 पीएक्स; ' }
{कुंजी: 'की 7' , कैप्शन: ' कैप्शन 7' , एक्शन: ' एक्शन 7' , लक्ष्यआय: 'आईडी 7' , इमेज: '' , टाइप: 'फील्ड' , वैल्यू: 'फील्ड' },
{key: 'key8' , कैप्शन: 'caption8' , एक्शन: 'action8' , targetId: 'id8' , image: '' , टाइप करें: 'string' , defaultValue: 'defaultValue' },
{कुंजी: 'की 9' , कैप्शन: ' कैप्शन 9' , एक्शन: ' एक्शन 9' , लक्ष्यआईड: 'आईडी 9' , इमेज: '' , टाइप: 'मैसेज' }
]
};
}

}

स्क्रीनशॉट <टूलबार>

नंबर 1

नंबर 2

उदाहरण 3: <नाविक>

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

<नेविगेटर> के लिए नमूना कोड

कक्षा html5.test3% ZEN.Component.page का विस्तार करता है
{

/// इस स्टाइल ब्लॉक में पेज के लिए CSS स्टाइल परिभाषा है।
XData स्टाइल
{
< style type = "text / css" >
</ शैली >
}

/// यह XML ब्लॉक इस पेज की सामग्री का वर्णन करता है।
XData सामग्री [ XMLNamespace = " www.intersystems.com/zen" ]
{
< पेज xmlns = " www.intersystems.com/zen" शीर्षक = "" >
< नाविक
आईडी = "नाविक"
पाद लेख = "40"
दिखावा = "सच"
विस्तृत = "सत्य"
ongetcontent = "रिटर्न zenPage.getContent (स्तर, कुंजी, मूल्य);"
onselect = "zenPage.selectItem (कुंजी, मान, जो);"
onchange = "zenPage.dataChange (कुंजी, मूल्य, अंतिम);"
onbuttonclick = "zenPage.buttonClick (कुंजी);"
onclosebuttonclick = "zenPage.closeButtonClick (कुंजी);"
/>
</ पृष्ठ >
}

ClientMethod बटन क्लिक करें ( कुंजी ) [ भाषा = जावास्क्रिप्ट]
{
zenAlert ( 'की =' , की);
}

ClientMethod closeButtonClick ( कुंजी ) [ भाषा = जावास्क्रिप्ट]
{
zenAlert ( '(closebutton) कुंजी =' , कुंजी);
}

ClientMethod dataChange (
कुंजी,
मूल्य,
अंतिम ) [ भाषा = जावास्क्रिप्ट]
{
if (अंतिम) zenAlert ( 'key =' , key, '\ nvalue =' , value, '\ nfinal =' , final);
}

ClientMethod selectItem (
कुंजी,
मूल्य,
जो ) [ भाषा = जावास्क्रिप्ट]
{
if (जो ! = 'ड्रिल' ) zenAlert ( 'key =' , key, '\ nvalue =' , value, '\ nwhich =' , जो);
}

ClientMethod getContent (
स्तर,
कुंजी,
मूल्य ) [ भाषा = जावास्क्रिप्ट]
{
var कन्टैंट = {शीर्षक: '' , आइटम: [], हैडरबटन: [], पाद लेख: []};
अगर (कुंजी == '' ) {
content.title = 'शीर्षक' ;

content.headerButtons = [{कैप्शन: ' कैप्शन 1' , कुंजी: 'की 1' , छवि: 'डीपसी / add_64.png' },
{कैप्शन: ' कैप्शन 2 ' , की: 'की 2' , इमेज: 'डीपसी / कैंसल_48.पिंग' },
{कैप्शन: ' कैप्शन 3' , की: 'की 3' , इमेज: 'डीपसी / कैलेंडर_48.गिफ' }];

content.footerButtons = [{कैप्शन: ' कैप्शन 1' , कुंजी: 'की 1' , छवि: 'डीपसी / डिलीट_24.पिंग' },
{कैप्शन: ' कैप्शन 2 ' , की: 'की 2' , इमेज: 'डीपसी / लैम्प_48.गिफ' },
{कैप्शन: ' कैप्शन 3' , की: 'की 3' , इमेज: 'डीपसी / डिलीट_24.पिंग' }];

content.items [content.items.length] = {डिस्प्ले: 'कैप्शन' , कैप्शन: 'Select' , एक्शन: 'select' , स्टाइल: 'color: darkblue;' , कुंजी: 'keySelect' , मान: 'value' };
content.items [content.items.length] = {प्रदर्शन: 'मूल्य' , पाठ: 'मूल्य' , अक्षम: सच};
content.items [content.items.length] = {प्रदर्शन: 'जानकारी' , कैप्शन: 'जानकारी' , सहायता: 'सहायता' , छवि: 'deepsee / add_64.png' , पाठ: 'पाठ' };
content.items [content.items.length] = {प्रदर्शन: 'html' , सामग्री: '<hr /> <p> bla-bla-bla </ p>' };
content.items [content.items.length] = {प्रदर्शन: 'अनुभाग' , कैप्शन: 'अनुभाग' , शीर्षक: 'रंग: लाल;' , शैली: 'पृष्ठभूमि: नीला;' };
content.items [content.items.length] = {प्रदर्शन: 'मूल्य-सेल' , शैली: 'ऊंचाई: 55px;' , कोशिकाओंपशु : 3 , कोशिकाओं: [{कैप्शन: 'C1' , मूल्य: 'V1' },
{कैप्शन: 'C2' , मान: 'V2' },
{कैप्शन: 'C3' , मूल्य: 'V3' }]};
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-वीटी' , कैप्शन: 'स्विच' , मूल्य: गलत, संपादित करें: 'स्विच' , कुंजी: '' };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' , कैप्शन: 'स्विच' , मूल्य: गलत, संपादित करें: 'स्विच' , कुंजी: '' };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' , कैप्शन: 'स्ट्रिंग' , मूल्य: '$$$ bla' , संपादित करें: 'स्ट्रिंग' , एक्शन: 'ड्रिल' , कुंजी : 'keyText1' };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' , कैप्शन: 'स्लाइडर' , मूल्य: 70 , संपादित करें: 'स्लाइडर' , minValue: 0 , maxValue: 100 };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' , कैप्शन: 'स्लाइडर-टॉगल' , मूल्य: 70 , संपादित करें: 'स्लाइडर-टॉगल' , minValue: 0 , maxValue: 100 stepSize: 10 };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' ,
कैप्शन: 'विकल्प' ,
संपादित करें: 'पसंद' ,
मान: 's1, s2, s3, s4' ,
डिस्प्लेलिस्ट: 'डी 1, डी 2, डी 3, डी 4' ,
मूल्य: 's2' ,
valueStyle: 'फ़ॉन्ट-आकार: 12pt; फ़ॉन्ट-भार: बोल्ड;' ।
विकल्प: 'रंग: लाल; ^ रंग: नीला; रंग: पीला; ^ रंग: काला;' };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' ,
कैप्शन: 'चॉइस-मल्टी' ,
संपादित करें: 'पसंद-बहु' ,
मान: 's1, s2, s3, s4' ,
डिस्प्लेलिस्ट: 'डी 1, डी 2, डी 3, डी 4' ,
मान: 's1, s4' ,
valueStyle: 'फ़ॉन्ट-आकार: 12pt; फ़ॉन्ट-भार: बोल्ड;' ।
विकल्प: 'रंग: लाल; ^ रंग: नीला; रंग: पीला; ^ रंग: काला;' };
content.items [content.items.length] = {डिस्प्ले: 'कैप्शन-वैल्यू-हर्ट्ज' , कैप्शन: 'इमेज' , एडिट: 'स्ट्रिंग' , एक्शन: 'ड्रिल' , की: 'की' इमेज , वैल्यू 'डीपसी' /add_64.png ' };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-वैल्यू-हर्ट्ज' , कैप्शन: 'कलर' , एक्शन: 'ड्रिल' , की: 'की-बोर्ड' };
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' , कैप्शन: 'फ़ॉन्ट' , एक्शन: 'ड्रिल' , कुंजी: 'कीफोंट' , मूल्य: 'टैओमा' };
content.items [content.items.length] = {प्रदर्शन: 'छवि-कैप्शन' , कैप्शन: 'छवि-कैप्शन' };
content.items [content.items.length] = {डिस्प्ले: 'इमेज-कैप्शन-वैल्यू' , कैप्शन: 'इमेज-कैप्शन-वैल्यू' , टेक्स्ट: 'इमेज-कैप्शन-वैल्यू' };
content.items [content.items.length] = {प्रदर्शन: 'छवि-कैप्शन-मूल्य-हर्ट्ज' ,
कैप्शन: 'कैप्शन' ,
पाठ: 'पाठ' ,
क्रिया: 'पॉपअप' ,
url: 'mailto: test@gmail.com' ,
कुंजी: 'कुंजी' ,
कैनड्रग: सच,
क्लोज़बटन: सच};
} और अगर (की == 'कीमैज' ) {
content.title = 'चित्र' ;
var सूची = [];
सूची [सूची। गति] = {छवि: '' , कैप्शन: 'खाली' , मूल्य: '' , शैली: '' };
सूची [सूची। गति] = {छवि: मूल्य, कैप्शन: मूल्य, मूल्य: मूल्य};
सूची [list.length] = {छवि: 'डीपसी / कैंसल_48.पिंग' , कैप्शन: 'डीपसी / कैंसल_48.पिंग' , मूल्य: 'डीपसी / कैंसल_48.पिंग' , स्टाइल: '' };
content.html = zen ( 'नेविगेटर' ) .getIconListHTML (सूची, कुंजी, मूल्य);
} और अगर (की == 'की-बोर्ड' ) {
content.title = 'रंग' ;
content.html = zen ( 'नेविगेटर' ) .getColorChooserHTML (कुंजी, मान, 'html' );
} और अगर (की == 'कीफोंट' ) {
content.title = 'फ़ॉन्ट' ;
content.html = zen ( 'नेविगेटर' ) .getFontChooserHTML (कुंजी, मान);
} और अगर (कुंजी == 'keyText1' ) {
content.title = 'Text1' ;
content.footerButtons = [{कैप्शन: ' कैप्शन 1' , कुंजी: 'की 1' , छवि: 'डीपसी / add_64.png' },
{कैप्शन: ' कैप्शन 2 ' , की: 'की 2' , इमेज: 'डीपसी / लैम्प_48.गिफ' },
{कैप्शन: ' कैप्शन 3' , की: 'की 3' , इमेज: 'डीपसी / लैम्प_48.गिफ' }];
content.items [content.items.length] = {प्रदर्शन: 'कैप्शन-मूल्य-हर्ट्ज' , कैप्शन: 'स्ट्रिंग' , मूल्य: 'v2' , संपादित करें: 'स्ट्रिंग' , एक्शन: 'ड्रिल' , की: keyText2 ' };
} और अगर (कुंजी == 'keyText2' ) {
content.title = 'Text2' ;
content.headerButtons = [{कैप्शन: ' कैप्शन 1' , कुंजी: 'की 1' , छवि: 'डीपसी / add_64.png' },
{कैप्शन: ' कैप्शन 2 ' , की: 'की 2' , इमेज: 'डीपसी / लैम्प_48.गिफ' },
{कैप्शन: ' कैप्शन 3' , की: 'की 3' , इमेज: 'डीपसी / लैम्प_48.गिफ' }];
var सूची = [
{कैप्शन: 'शीर्षक' , मूल्य: 'v1' , संकेत: 'शीर्षक का उपयोग करें' },
{कैप्शन: 'श्रेणी' , मान: 'v2' , संकेत: 'श्रेणी का उपयोग करें' },
{कैप्शन: 'टाइप' , मान: 'v3' , संकेत: 'टाइप टाइप' },
];
content.html = zen ( 'नेविगेटर' ) .getChooserListHTML (सूची, कुंजी, मूल्य, 'पाठ टैग' , 'ये विशेष टैग हैं।' );
}
वापसी सामग्री;
}

/// सुनिश्चित करें कि हम इंटरनेट एक्सप्लोरर को नवीनतम रेंडरिंग इंजन का उपयोग करने के लिए मजबूर करते हैं।
विधि % OnDrawHTMLMeta () % स्थिति के रूप में
{
अगर $$$ ZENISIE & html << मेटा http-equiv = "X-UA- कम्पेटिबल" कंटेंट = "IE = एज" / >>
$ $ $ $ ठीक है
}

}

स्क्रीनशॉट <नेविगेटर>

नंबर 1

नंबर 2

नंबर 3

नंबर 4

संख्या 5

अंक 6

अंक 7

उदाहरण 4: <लुक>

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

<लुक> के लिए नमूना कोड

कक्षा HTML5.test4% ZEN.Component.page का विस्तार करता है
{

/// इस स्टाइल ब्लॉक में पेज के लिए CSS स्टाइल परिभाषा है।
XData स्टाइल
{
< style type = "text / css" >
</ शैली >
}

/// यह XML ब्लॉक इस पेज की सामग्री का वर्णन करता है।
XData सामग्री [ XMLNamespace = " www.intersystems.com/zen" ]
{
< पेज xmlns = " www.intersystems.com/zen" शीर्षक = "" >
< खोज
आईडी = "लुकअप"
मूर्खता = "कुंजी"
textProperty = "कैप्शन"
imageProperty = "छवि"
स्टाइलिस्ट = "रंग: लाल ;, रंग: नीला;"
गुणवादी = "कुंजी, कैप्शन, ए, बी"
ongetdata = "वापसी zenPage.getdata (संदर्भ);"
/>
</ पृष्ठ >
}

क्लाइंटमैथोड गेटडाटा ( संदर्भ ) [ भाषा = जावास्क्रिप्ट]
{
वापसी [{key: 'key1' , कैप्शन: 'caption1' , छवि: 'deepsee / add_16.png' , a: 'a1' , b: 'b1' },
{कुंजी: 'की 2' , कैप्शन: ' कैप्शन 2' , ए : 'ए 2' , बी: 'बी 2' },
{कुंजी: 'की 3' , कैप्शन: ' कैप्शन 3' , ए : 'ए 3' , बी: 'बी 3' },
{कुंजी: 'की 4' , कैप्शन: ' कैप्शन 4' , ए : 'ए 4' , बी: 'बी 4' }
];
}

ClientMethod onloadHandler () [ भाषा = जावास्क्रिप्ट]
{
zen ( 'लुकअप' ) .setValue ( 'key3' , 'caption3' );
}

विधि % OnDrawHTMLMeta () % स्थिति के रूप में
{
अगर $$$ ZENISIE & html << मेटा http-equiv = "X-UA- कम्पेटिबल" कंटेंट = "IE = एज" / >>
$ $ $ $ ठीक है
}

}

स्क्रीनशॉट <लुक>

नंबर 1

नंबर 2

नंबर 3

उदाहरण # 5: <dataGrid>

यह घटक डेटा के साथ काम करने के लिए एक स्प्रेडशीट का एक सरलीकृत एनालॉग है, जहां कॉलम में विभिन्न प्रकार हो सकते हैं: चित्र, ड्रॉप-डाउन सूची, आदि।
सूत्र और पृष्ठ भी समर्थित हैं।

<DataGrid> के लिए नमूना कोड

कक्षा html5.test5% ZEN.Component.page का विस्तार करता है
{

पैरामीटर JSINCLUDES STRING के रूप में = "zenCSLM.js" ;

/// यह XML ब्लॉक इस पेज की सामग्री का वर्णन करता है।
XData सामग्री [ XMLNamespace = " www.intersystems.com/zen" ]
{
< पेज xmlns = " www.intersystems.com/zen" शीर्षक = "" >
< jsonProvider id = "json" OnGetArray = "SrvGetData" />
< hgroup >
< बटन कैप्शन = "लाइन जोड़ें" onclick = "zenPage.addRow ();" />
< बटन कैप्शन = "कॉलम जोड़ें" onclick = "zenPage.addColumn ();" />
</ hgroup >
< hgroup >
< dataGrid
कंट्रोलर = "जसन"
SelectMode = "सेल"
hasFormulas = "झूठा"
curRow = "2"
करिकुलम = "2"
ग्रिडटेल = " हेडर 1 "
मल्टीसेलेक्ट = "झूठा" >
< समरी कैप्शन = "राशि" />
</ dataGrid >
< dataGrid
id = "dg2"
SelectMode = "सेल"
कररौ = "1"
करक्युलाईम = "3"
ग्रिडटेल = " शीर्षक 3 "
showRowSelector = "झूठा"
मल्टीसेलेक्ट = "सही"
पेजसाइज़ = "3"
hasFormulas = "सत्य"
onaction = "zenAlert ('पंक्ति =', पंक्ति, '\ nname =', नाम, '\ nvalue =', मान);"
ongetlookupdata = "वापसी zenPage.getdata (संदर्भ);" >
< columnDescriptor कैप्शन = "f1" मान = "= शक्ति (2,4)" />
< columnDescriptor कैप्शन = "f2" मान = "= concat (2, & quot; और a quot ;, rowno ())" />
< columnDescriptor कैप्शन = "f3" मान = "= sum (2,3,3, colno ())" />
< columnDescriptor कैप्शन = "f4" मान = "= [$ col # 2]। [$ पंक्ति # 3" >>
< columnDescriptor कैप्शन = "a" मान = "6" />
< columnDescriptor कैप्शन = "b" मान = "5" />
< columnDescriptor कैप्शन = "c" मान = "4" />
< columnDescriptor कैप्शन = "d" प्रकार = "बटन" नाम = "n1" मान = "= [$ col # 3]। [$ पंक्ति # 1]" />
< columnDescriptor कैप्शन = "e" टाइप = "चेकबॉक्स" नाम = "n2" />
< columnDescriptor कैप्शन = "f" प्रकार = "छवि" छवि = "चित्र / save.png" />
< columnDescriptor कैप्शन = "g" प्रकार = "लिंक" नाम = "n3" मान = "लिंक" />
< columnDescriptor कैप्शन = "h" प्रकार = "लुकअप" नाम = "n4" aux = "aux4" मान = " मात्रा " />
< rowDescriptor कैप्शन = "r1" />
< rowDescriptor कैप्शन = "r2" />
< rowDescriptor कैप्शन = "r3" />
</ dataGrid >
</ hgroup >
</ पृष्ठ >
}

विधि SrvGetData (
बायरफ pParameters ,
आउटपुट pMetaData ,
आउटपुट pData ) % स्थिति के रूप में
{
PMetaData = $ LB (1,2,3) सेट करें

सेट पीडा (1) = $ एलबी (1,2,3)
पीडा सेट करें (2) = $ LB (4,5,6)
PData (3) = $ LB (7,8,9) सेट करें

$ $ $ $ ठीक है
}

क्लाइंटमैथोड गेटडाटा ( संदर्भ ) [ भाषा = जावास्क्रिप्ट]
{
zenAlert (ZLM.jsonStringify (संदर्भ));
वापसी [{आईडी: ' आईडी 1 ' , पाठ: ' टेक्स्ट 1' }, {आईडी: ' आईडी 2 ' , पाठ: ' टेक्स्ट 2 ' }, {आईडी: ' आईडी 3 ' , पाठ: ' टेक्स्ट 3' }, {आईडी: ' आईडी 4' , पाठ: 'text4' }];
}

ClientMethod addRow () [ भाषा = जावास्क्रिप्ट]
{
var मॉडल = zen ( 'json' ) .getContentObject ();
var रिकॉर्ड = {};
के लिए ( var मॉडल में मॉडल । बच्चों [ 0 ]) {
रिकॉर्ड [पी] = 10 ;
}
model.children [model.children.length] = रिकॉर्ड;
zen ( 'json' ) .setContentObject (मॉडल);

var ग्रिड = zen ( 'dg2' );
var rowDesc = zenPage.createComponent ( 'rowDescriptor' );
grid.rowDescriptors [grid.rowDescriptors.length] = rowDesc;
rowDesc.caption = 'r' + grid.rowDescriptors.length;
grid.updateGrid (झूठी);
}

ClientMethod addColumn () [ भाषा = जावास्क्रिप्ट]
{
var ग्रिड = zen ( 'dg2' );
var colDesc = zenPage.createComponent ( 'columnDescriptor' );
grid.columnDescriptors [grid.columnDescriptors.length] = colDesc;
colDesc.caption = 'c' + grid.columnDescriptors.length;
colDesc.value = grid.columnDescriptors.length +3 ;
grid.updateGrid (झूठी);

var मॉडल = zen ( 'json' ) .getContentObject ();
के लिए ( var n = 0 ; n < model.children.length; n ++ ) {
अगर (मॉडल। चिल्ड्रेन [n]) {
model.children [n] [grid.getColumnCount ()] = n;
}
}
zen ( 'json' ) .setContentObject (मॉडल);
}

}

<DataGrid> का स्क्रीनशॉट

नंबर 1

नंबर 2

नंबर 3

सभी उदाहरणों का स्रोत कोड डाउनलोड करें।
पुनश्च: बेशक, आप अपनी शैली को बदलकर घटकों के मानक स्वरूप को अपने स्वाद में बदल सकते हैं, या आप अपने स्वयं के घटक बना सकते हैं, मौजूदा वाले से विरासत में, यदि आपको उनकी कार्यक्षमता का विस्तार करने की आवश्यकता है, तो ऑब्जेक्ट डीबीएमएस का लाभ आपको आसानी से यह करने की अनुमति देता है।

कैच डीबीएमएस 2013.2 में नया विज़ुअल एचटीएमएल 5 ज़ेन घटक

उदाहरण # 1: <accordionMenu>

उदाहरण 2: <टूलबार>

उदाहरण 3: <नाविक>

उदाहरण 4: <लुक>

उदाहरण # 5: <dataGrid>

More articles: