Această clasă a fost creată cu scopul principal de a obține unelte pentru crearea rapidă a diferitelor câmpuri, formulare și componente în dezvoltarea modulelor care vor funcționa în deplină compatibilitate cu sistemul EGO CRM.
Clasa «ui::» conține două blocuri de metode cu orientări diferite:
- Metode care ajută la redarea rapidă a diferitelor câmpuri de formular sau componente (dropdown, tabs, galerie) ținând cont de sincronizarea cu sistemul EGO CRM
- Metode care permit procesarea eficientă a formularelor (salvarea câmpurilor formularului etc.)
Documentația completă este disponibilă la link-ul de mai jos:
În exemplele prezentate, valorile câmpurilor, cu excepția celor de fișiere, sunt salvate cu ajutorul clasei «storage::» (se folosește parametrul «value_storage»). Valorile salvate sunt vizibile doar pentru dumneavoastră.
Fișierele pe care le încărcați pe această pagină de exemple sunt vizibile numai pentru dumneavoastră.
În toate exemplele cu fișiere folosim parametrul «auto_delete» cu valoarea «1». Aceasta înseamnă că toate fișierele încărcate de dumneavoastră vor fi șterse după 1 zi.
Metodele sunt folosite pentru a reda câmpuri de diverse tipuri și includ mulți parametri.
Rețineți, că unele câmpuri au versiuni extinse (descrise în secțiunea «Formulare simple»).
Folosiți constructorul pentru crearea setului necesar de parametri, care este prezentat în fiecare metodă în documentația clasei «ui::».
Oferim link-uri către constructor în fiecare exemplu, pentru ca să puteți vedea valorile parametrilor utilizați în exemple.
$args = array();
$args['in_div'] = true;
$args['size'] = '';
$args['handler_click'] = 'my_handler_forms_1';
$args['theme'] = 'primary';
$args['text'] = 'Button text';
$args['icon'] = array('user', 'far', '');
$str .= ui::btn($args);
//===
$args = array();
$args['in_div'] = true;
$args['size'] = 'sm';
$args['btn_open_img'] = media_link('c1c3ad469424684ae939');
$args['theme'] = 'warning';
$args['text'] = 'Open image';
$args['icon'] = array('image', 'far', '');
$str .= ui::btn($args);
//===
$args = array();
$args['in_div'] = true;
$args['as_a_href'] = 'https://www.youtube.com/';
$args['as_a_target'] = '_blank';
$args['btn_style'] = 'link';
$args['text'] = 'Youtube';
$args['icon'] = array('video', 'far', 'text-primary');
$str .= ui::btn($args);2. ui::btn_onoff()
Butoane de tip Pornit / Oprit
Metoda are o variantă extinsă «ui::btn_onoff_with_save()», care este prezentată în secțiunea «Formulare simple», unde se arată cum să procesați acest câmp simplu pentru a-i salva valorile.
$args = array();
$args['in_div'] = true;
$args['size'] = '';
$str .= ui::btn_onoff($args);
//===
$args = array();
$args['in_div'] = true;
$args['size'] = 'sm';
$args['onoff_text_start'] = 'Text before button';
$str .= ui::btn_onoff($args);3. ui::input()
Câmpuri de tip «input»
Metoda are o variantă extinsă «ui::input_with_save()», care este prezentată în secțiunea «Formulare simple», unde se arată cum să procesați acest câmp simplu pentru a-i salva valorile.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input';
$args['value'] = '';
$args['placeholder'] = 'Placeholder text';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$str .= ui::input($args);4. ui::input_file()
Câmpuri de tip «input type=file» pentru încărcarea fișierelor.
Metoda are o variantă extinsă «ui::input_file_with_save()», care este prezentată în secțiunea «Formulare simple», unde se arată cum să procesați acest câmp simplu pentru a-i salva valorile.
$args = array();
$args['name'] = 'my_input_file';
$args['in_div'] = true;
$args['size'] = '';
$args['help'] = '';
$args['with_result'] = true;
$args['with_result_detail'] = true;
$args['with_preview'] = true;
$args['with_delete'] = true;
$args['with_caption'] = true;
$str .= ui::input_file($args);5. ui::textarea()
Zone de text.
Metoda are o variantă extinsă «ui::textarea_with_save()», care este prezentată în secțiunea «Formulare simple», unde se arată cum să procesați acest câmp simplu pentru a-i salva valorile.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_textarea';
$args['value'] = '';
$args['placeholder'] = 'Placeholder text';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['rows'] = 3;
$str .= ui::textarea($args);6. ui::select()
Câmpuri de tip «select».
Metoda are o variantă extinsă «ui::select_with_save()», care este prezentată în secțiunea «Formulare simple», unde se arată cum să procesați acest câmp simplu pentru a-i salva valorile.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
);
$args['include_opt_not_set'] = true;
$str .= ui::select($args);7. ui::checkbox()
Câmp sau multiple câmpuri de tip «checkbox».
Metoda are o variantă extinsă «ui::checkbox_with_save()», care este prezentată în secțiunea «Formulare simple», unde se arată cum să procesați acest câmp simplu pentru a-i salva valorile.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
, 'opt_5_value'=>'Option 5'
, 'opt_6_value'=>'Option 6'
, 'opt_7_value'=>'Option 7'
, 'opt_8_value'=>'Option 8'
);
$args['include_opt_not_set'] = true;
$str .= ui::checkbox($args);8. ui::radio()
Câmp sau multiple câmpuri de tip «radio».
Metoda are o variantă extinsă «ui::radio_with_save()», care este prezentată în secțiunea «Formulare simple», unde se arată cum să procesați acest câmp simplu pentru a-i salva valorile.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_radios';
$args['value'] = '';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
, 'opt_5_value'=>'Option 5'
, 'opt_6_value'=>'Option 6'
, 'opt_7_value'=>'Option 7'
, 'opt_8_value'=>'Option 8'
);
$args['include_opt_not_set'] = true;
$str .= ui::radio($args);Formularele simple sunt câmpuri individuale care trebuie salvate.
Pentru astfel de scenarii se folosesc metodele enumerate mai jos, care creează automat formularul necesar și, de asemenea, butonul de salvare în interiorul formularului, dacă acest lucru este conform logicii.
Nici măcar nu trebuie să specificați un handler în metodă, doar creați pe serverul dvs. un handler conform schemei:
save_+nume_câmp, adică prefixul «save_» urmat de atributul «name» al câmpului.
În final, nici măcar nu trebuie să creați un handler pe server dacă transmiteți parametrul «_auto_handler», sistemul face totul singur, este convenabil dacă nu aveți nevoie de niciun proces suplimentar, ci doar să salvați valoarea câmpului.
În handler-ul de pe server utilizați metoda «ui::get_post_VAL()». Această metodă va returna valoarea introdusă de utilizator.
În metoda «ui::get_post_VAL()» valoarea introdusă de utilizator va fi de asemenea filtrată automat în funcție de tipul câmpului. De asemenea, puteți seta tipul filtrării cu parametrul «post_filter». Citiți despre particularitățile filtrării datelor:
După filtrare, sistemul returnează automat valoarea filtrată în câmp pentru ca utilizatorul să poată controla ce salvează.
Dacă este necesar să modificați valoarea returnată, folosiți helperul «oj_ret()» cu primul argument «ret_val», iar ca al doilea argument transmiteți valoarea care trebuie returnată în câmp.
1. ui::btn_onoff_with_save()
Să luăm un exemplu de salvare a unui buton simplu de pornire - oprire.
Câmpul nostru are atributul „name“ cu valoarea „my_onoff_short_form“, prin urmare pe server creăm handlerul „save_my_onoff_short_form“.
În handler folosim metoda „ui::get_post_VAL()“, care va returna valoarea butonului „Y“ sau „N“.
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_onoff_short_form';
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::btn_onoff_with_save($args);public function save_my_onoff_short_form() {
$now_val = ui::get_post_VAL();
if($now_val === 'Y') {
// YOUR code
}
else {
// YOUR code
}
storage::auto();
//---
$msg = e_p(mlang('s_status__success', 1).'!');
$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
ojsucc($msg, 3000);
}2. ui::input_with_save()
Salvăm câmpul «input».
Creăm pe server un handler cu identificatorul sub forma «save_+nume_câmp». Câmpul nostru are atributul «name» cu valoarea «my_input_short_form», astfel identificatorul handler-ului va fi «save_my_input_short_form».
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_short_form';
$args['value'] = '';
$args['label'] = 'Type in the word:';
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::input_with_save($args);public function save_my_input_short_form() {
$now_val = (string) ui::get_post_VAL();
if($now_val !== '') {
// YOUR code
storage::auto();
//---
$msg = e_p(mlang('s_status__success', 1).'!');
$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
ojsucc($msg, 3000);
}
else {
ojerr(mlang('s_form__fill', 1).'!');
}
}3. ui::input_file_with_save()
Salvăm fișierul (fișierele) încărcat(e) de utilizator.
Această metodă poate funcționa complet automat, nu trebuie să creați niciun handler, sistemul face totul singur.
Citiți detalii despre lucrul cu «input type=file» la link-ul de mai jos.
Exemplu:CLASA «ui::» | Clasa «upload::» | Exemple de lucru cu «input type=file»
$args = array();
$args['name'] = 'my_ui_file_input';
$args['in_div'] = true;
$args['inp_file_only_imgs'] = true;
$args['with_caption'] = true;
$args['multiple'] = true;
$args['auto_delete'] = 1;
$str .= ui::input_file_with_save($args);4. ui::textarea_with_save()
Salvăm câmpul «textarea».
Creăm pe server un handler cu identificatorul sub forma «save_+nume_câmp». Câmpul nostru are atributul «name» cu valoarea «my_textarea_short_form», astfel identificatorul handler-ului va fi «save_my_textarea_short_form».
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_textarea_short_form';
$args['value'] = '';
$args['label'] = 'Type in the words:';
$args['rows'] = 3;
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::textarea_with_save($args);public function save_my_textarea_short_form() {
$now_val = (string) ui::get_post_VAL();
if($now_val !== '') {
// YOUR code
storage::auto();
//---
$msg = e_p(mlang('s_status__success', 1).'!');
$msg .= e_p('<strong>VALUE:</strong> <br>'.nl2br($now_val));
ojsucc($msg, 3000);
}
else {
ojerr(mlang('s_form__fill', 1).'!');
}
}5. ui::select_with_save()
Salvăm câmpul «select».
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
Pentru acest exemplu nu vom crea un handler pe server, deoarece folosim parametrul «_auto_handler», care va porni handler-ul automat al sistemului.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select_short_form';
$args['value'] = '';
$args['label'] = 'Select option:';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
, 'opt_5_value'=>'Option 5'
);
$args['include_opt_not_set'] = true;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::select_with_save($args);6. ui::select_with_save()
Salvăm câmpul «select» cu parametrul «multiple» cu valoarea «TRUE».
Creăm pe server un handler cu un identificator de forma «save_+nume_câmp». Câmpul nostru are atributul «name» cu valoarea «my_select_multiple_short_form», deci identificatorul handlerului va fi «save_my_select_multiple_short_form».
Rețineți că în handler metoda «ui::get_post_VAL()» va returna un array cu valorile selectate de utilizator, nu o singură valoare, ca în exemplul anterior.
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select_multiple_short_form';
$args['value'] = '';
$args['label'] = 'Select option:';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
, 'opt_5_value'=>'Option 5'
);
$args['include_opt_not_set'] = true;
$args['multiple'] = true;
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::select_with_save($args);public function save_my_select_multiple_short_form() {
$now_val = ui::get_post_VAL();
if(!empty($now_val)) {
// YOUR code
storage::auto();
//---
$msg = e_p(mlang('s_status__success', 1).'!');
$now_val_format = "<pre>\n";
$now_val_format .= print_r($now_val, true);
$now_val_format .= "</pre>";
$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val_format);
ojsucc($msg, 3000);
}
else {
ojerr(mlang('s_form__fill', 1).'!');
}
}7. ui::checkbox_with_save()
Salvăm câmpul sau multiple câmpuri «checkbox».
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
Pentru acest exemplu nu vom crea un handler pe server, deoarece folosim parametrul «_auto_handler», care va porni handler-ul automat al sistemului.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes_short_form';
$args['value'] = '';
$args['label'] = 'Check options:';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
, 'opt_5_value'=>'Option 5'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::checkbox_with_save($args);8. ui::radio_with_save()
Salvăm câmpul sau multiple câmpuri «radio».
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
Pentru acest exemplu nu vom crea un handler pe server, deoarece folosim parametrul «_auto_handler», care va porni handler-ul automat al sistemului.
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_radios_short_form';
$args['value'] = '';
$args['label'] = 'Select radio:';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
, 'opt_5_value'=>'Option 5'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::radio_with_save($args);Formularele complexe sunt cele care conțin mai multe câmpuri care trebuie salvate.
Construirea formularelor complexe trebuie să înceapă cu metoda «ui::form_start()» cu parametrii corespunzători.
- Următoarele sunt metodele care creează câmpurile de tip necesar.
Și, în cele din urmă, formularul complex trebuie să se termine cu metoda «ui::form_end()» cu parametrii corespunzători.
Un element obligatoriu al oricărui formular care trebuie salvat este butonul de salvare a formularului.
În funcție de parametrii transmiși metodei «ui::form_end()» butonul poate fi randat automat de sistem.
Studiați descrierea constructorului metodei «ui::form_end()».
Filtrarea datelor de intrare ale formularului în handler se face cu metoda «ui::get_post_VALS()», care face filtrarea automat în funcție de tipul câmpului. Metoda va returna un array cu valorile filtrate ale fiecărui câmp. De asemenea, puteți parcurge manual array-ul $_POST['val'] (nu este recomandat).
De asemenea, puteți seta tipul filtrării pentru orice câmp, dacă este necesar, cu parametrul «post_filter». Citiți despre particularitățile filtrării datelor:
1.
Exemplu de lucru cu un formular complex obișnuit.
Indicăm handlerul formularului „saves_form_example_1“ în metoda „ui::form_end()“.
Creăm pe server un handler cu ID-ul „saves_form_example_1“.
Rețineți, prefixul „saves_“ din ID-ul handlerului este obligatoriu!
În formularul nostru există un câmp de tip «file». Sistemul va încărca complet automat fișierul, în handler nu folosim procesări. Despre cum să lucrați cu câmpuri de tip «file» vedeți în exemplul separat din documentație.
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
$str .= ui::form_start();
//--- INPUT number
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_number';
$args['label'] = 'Type in the number:';
$args['type'] = 'number';
$args['inp_type_number_min'] = 0;
$args['inp_type_number_max'] = 1000;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::input($args);
//--- SELECT
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'Select the option:';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
);
$args['include_opt_not_set'] = true;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::select($args);
//--- CHECKBOXES
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'Check the checkboxes:';
$args['opts'] = array(
'check_1_value'=>'Option 1'
, 'check_2_value'=>'Option 2'
, 'check_3_value'=>'Option 3'
, 'check_4_value'=>'Option 4'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::checkbox($args);
//--- INPUT TYPE FILE
$args = array();
$args['name'] = 'my_form_file_example_1_';
$args['in_div'] = true;
$args['multiple'] = true;
$args['with_caption'] = true;
$args['auto_delete'] = 1;
$str .= ui::input_file($args);
//=== form end
$str .= ui::form_end('saves_form_example_1');public function saves_form_example_1() {
$now_vals = ui::get_post_VALS();
//if(...) {
// YOUR code
// }
storage::auto();
//---
$msg = e_p(mlang('s_status__success', 1).'!');
$now_vals_format = "<pre>\n";
$now_vals_format .= print_r($now_vals, true);
$now_vals_format .= "</pre>";
$msg .= e_p('<strong>VALUES:</strong> <br>'.$now_vals_format);
//---
$now_uploaded = upload::get_uploaded();
$now_uploaded_format = "<pre>\n";
$now_uploaded_format .= print_r($now_uploaded, true);
$now_uploaded_format .= "</pre>";
$msg .= e_p('<strong>UPLOADED:</strong> <br>'.$now_uploaded_format);
ojsucc($msg, false);
}2.
Repetăm exemplul anterior, adăugând «required» câmpurilor.
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
De asemenea, rețineți că în acest exemplu se folosește procesarea complet automată.
Pentru aceasta am transmis metodei «ui::form_end()» prefixul suplimentar «auto:».
În acest caz nu este nevoie să creați un handler pe server, sistemul va face totul automat.
$str .= ui::form_start();
//--- INPUT number
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_number';
$args['label'] = 'Type in the number:';
$args['type'] = 'number';
$args['inp_type_number_min'] = 0;
$args['inp_type_number_max'] = 1000;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::input($args);
//--- SELECT
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'Select the option:';
$args['opts'] = array(
'opt_1_value'=>'Option 1'
, 'opt_2_value'=>'Option 2'
, 'opt_3_value'=>'Option 3'
, 'opt_4_value'=>'Option 4'
);
$args['include_opt_not_set'] = true;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::select($args);
//--- CHECKBOXES
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'Check the checkboxes:';
$args['opts'] = array(
'check_1_value'=>'Option 1'
, 'check_2_value'=>'Option 2'
, 'check_3_value'=>'Option 3'
, 'check_4_value'=>'Option 4'
);
$args['max_opts_in_block'] = 2;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::checkbox($args);
//--- INPUT TYPE FILE
$args = array();
$args['name'] = 'my_form_file_example_2_';
$args['in_div'] = true;
$args['multiple'] = true;
$args['with_caption'] = true;
$args['auto_delete'] = 1;
$args['required'] = true;
$str .= ui::input_file($args);
//=== form end
$str .= ui::form_end('auto:saves_form_example_2');public function saves_form_example_1() {
$now_vals = ui::get_post_VALS();
//if(...) {
// YOUR code
// }
storage::auto();
//---
$msg = e_p(mlang('s_status__success', 1).'!');
$now_vals_format = "<pre>\n";
$now_vals_format .= print_r($now_vals, true);
$now_vals_format .= "</pre>";
$msg .= e_p('<strong>VALUES:</strong> <br>'.$now_vals_format);
//---
$now_uploaded = upload::get_uploaded();
$now_uploaded_format = "<pre>\n";
$now_uploaded_format .= print_r($now_uploaded, true);
$now_uploaded_format .= "</pre>";
$msg .= e_p('<strong>UPLOADED:</strong> <br>'.$now_uploaded_format);
ojsucc($msg, false);
}În acest bloc de exemple vom analiza separat utilizarea schemelor avansate de procesare. Prin scheme avansate se înțelege participarea codurilor JS personalizate care pot fi folosite ÎNAINTE de trimiterea datelor formularului prin ajax, precum și DUPĂ primirea răspunsului ajax.
Studiați neapărat schemele de procesare la link-ul de mai jos (Constructor schemă de procesare). Folosiți această documentație pentru a înțelege exemplele de mai jos:
1.
Adăugăm în acest exemplu un handler JS înainte de trimiterea formularului prin ajax.
Câmpul nostru are atributul «name» cu valoarea «input_extend_js_1», deci identificatorul handlerului pe server va fi «save_input_extend_js_1». Același identificator este folosit în codul JS. Creăm obiectul «$$.save_input_extend_js_1 = {};». Apoi adăugăm obiectului proprietatea «start» ca funcție care conține codul nostru de procesare.
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
$args = array();
$args['in_div'] = true;
$args['name'] = 'input_extend_js_1';
$args['label'] = 'Type in the word:';
$args['value_storage'] = array('api_docs_examples_js', 'access');
$str .= ui::input_with_save($args);$$.save_input_extend_js_1 = {};
$$.save_input_extend_js_1.start = function(data, element, event) {
console.log('data', data);
var confirm_text = $$.mlang('forms_example__extend_js_confirm_example');
confirm_text += ' '+data.val.length;
confirm_text +='?';
if(!confirm(confirm_text)) return false;
data.my_par_1 = 'my_value_1';
}
2.
În exemplul următor efectuăm procesarea DUPĂ primirea unui răspuns ajax de succes. Pentru aceasta în handler-ul JS, similar cu exemplul anterior, creăm o proprietate «cb» ca funcție.
În exemplul nostru după primirea răspunsului ajax codul JS va colora câmpul și va adăuga «disabled».
$args = array();
$args['in_div'] = true;
$args['name'] = 'select_extend_js_2';
$args['label'] = 'Select option:';
$args['opts'] = array(
'opt_1_value'=>'opt_1_label'
, 'opt_2_value'=>'opt_2_label'
, 'opt_3_value'=>'opt_3_label'
, 'opt_4_value'=>'opt_4_label'
);
$str .= ui::select_with_save($args);$$.save_select_extend_js_2 = {};
$$.save_select_extend_js_2.cb = function(json, element, event) {
console.log('json', json);
var field = element.closest('form').find('select');
field.prop('disabled', true).css({'background-color': '#d4f0ff'});
}
3.
În final, să luăm un exemplu mai complex. Folosim un formular complex. În codul JS definim handleri atât ÎNAINTE de trimiterea prin ajax, cât și DUPĂ primirea răspunsului ajax.
În exemplul nostru folosim identificatorul handlerului «saves_complex_extend_js», care este specificat în metoda «ui::form_end()». Deci în codul nostru JS creăm un obiect cu numele «saves_complex_extend_js» și adăugăm proprietățile-funcții necesare.
Rețineți că am adăugat și handler pentru primul câmp select.
În exemplu se folosește parametrul «value_storage», care va efectua salvarea automată a valorii câmpului în baza de date.
De asemenea, rețineți că în acest exemplu se folosește procesarea complet automată.
Pentru aceasta am transmis metodei «ui::form_end()» prefixul suplimentar «auto:».
În acest caz nu este nevoie să creați un handler pe server, sistemul va face totul automat.
$str .= ui::form_start();
$args = array();
$args['in_div'] = true;
$args['name'] = 'select_complex_js';
$args['label'] = 'Select option:';
$args['handler_change'] = 'select_interaction';
$args['opts'] = array(
'opt_1_value'=>'opt_1_label'
, 'opt_2_value'=>'opt_2_label'
, 'opt_3_value'=>'opt_3_label'
, 'opt_4_value'=>'opt_4_label'
);
$args['include_opt_not_set'] = true;
$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
$str .= ui::select($args);
$str .= '<div class="js-by_select_interaction" style="display: none;">';
$args = array();
$args['in_div'] = true;
$args['name'] = 'checkbox_complex_js';
$args['label'] = 'Check options:';
$args['opts'] = array(
'opt_1_value'=>'opt_1_label'
, 'opt_2_value'=>'opt_2_label'
, 'opt_3_value'=>'opt_3_label'
, 'opt_4_value'=>'opt_4_label'
);
$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
$str .= ui::checkbox($args);
$str .= '</div>';
$args = array();
$args['in_div'] = true;
$args['name'] = 'textarea_complex_js';
$args['label'] = 'Type in the words:';
$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
$str .= ui::textarea($args);
$str .= ui::form_end('auto:saves_complex_extend_js');$$.select_interaction = function(data, element, event) {
var div_by_select_interaction = element.closest('form').find('.js-by_select_interaction');
if(data.val!=='') div_by_select_interaction.slideDown();
else div_by_select_interaction.slideUp();
return true;
}
$$.saves_complex_extend_js = {};
$$.saves_complex_extend_js.start = function(data, element, event) {
console.log('data', data);
var form = element.closest('form');
form.css({'transform': 'rotate(-5deg)'});
}
$$.saves_complex_extend_js.cb = function(json, element, event) {
console.log('json', json);
var form = element.closest('form');
form.css({'transform': 'rotate(0deg)'});
}
Uneori este necesar să adăugați un handler unui element DOM. Puteți face acest lucru prin metode JS obișnuite (JQUERY). Totuși, pentru ca handler-ele să funcționeze în sistemul EGO CRM cu toate facilitățile sale, elementului trebuie să i se atribuie atribute și clase speciale.
Folosind metoda ui::dom_element() la crearea tag-ului HTML al elementului, integrați elementul în funcționarea standard a sistemului, la fel ca și câmpurile formularului.
Ulterior puteți folosi orice schemă de procesare pentru element, studiați secțiunea «Constructor schemă de procesare» la link-ul de mai jos:
1.
Facem doar procesare JS la click pe elementul DIV.
$args = array();
$args['handler_click'] = 'color_my_box';
$args['id'] = set_id('my_coloring_div');
$args['addclass'] = 'p-3 border';
$args['attrs'] = array(
'data-color_1'=>'red'
, 'data-color_2'=>'blue'
, 'data-color_3'=>'green'
, 'data-color_4'=>'orange'
, 'style'=>'background: orange; color: white;'
);
$args['cursor'] = 'pointer';
$str .= '<div '.ui::dom_element($args).' >';
$str .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat lacinia nunc, eget tincidunt est maximus eu.';
$str .= '</div>';$$._now_color = 1;
$$.color_my_box = function(data, element, event){
element.css({'background': element.data('color_'+$$._now_color)});
$$._now_color++;
if($$._now_color>4) $$._now_color = 1;
return true;
}
2.
Complicăm exemplul anterior cu procesare ajax.
$args = array();
$args['handler_click'] = 'color_my_box_with_ajax';
$args['id'] = set_id('my_coloring_div_with_ajax');
$args['addclass'] = 'p-3 border';
$args['attrs'] = array(
'data-color_1'=>'orange'
, 'data-color_2'=>'red'
, 'data-color_3'=>'blue'
, 'data-color_4'=>'green'
, 'style'=>'background: green; color: white;'
);
$args['cursor'] = 'pointer';
$str .= '<div '.ui::dom_element($args).' >';
$str .= 'Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.';
$str .= '</div>';$$._number_color = 1;
$$.color_my_box_with_ajax = {};
$$.color_my_box_with_ajax.start = function(data, element, event){
element.css({'background': element.data('color_'+$$._number_color)});
data._number_color = $$._number_color;
$$._number_color++;
if($$._number_color>4) $$._number_color = 1;
}
3.
O aplicație specifică este conectarea unui meniu contextual (click dreapta).
Puteți vedea exemple detaliate la link-ul:
Metodele sunt folosite pentru redarea componentelor speciale.
1. ui::dropdown()
Element dropdown.
Consultați exemple detaliate la linkul de mai jos.
Exemplu:CLASA «ui::» | Element drop-down
$args = array();
$args['btn_text'] = 'Text for button';
$args['body'] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat lacinia nunc, eget tincidunt est maximus eu.';
$str .= ui::dropdown($args);2. ui::tabs()
Taburi - Tabs / Pills.
Consultați exemple detaliate la linkul de mai jos.
$args = array();
$args['children'] = array();
//--- Tab 1
$tab = array(
'btn_text'=>'Tab 1'
, 'body'=>'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a eleifend ante, sed ultrices ipsum. Praesent id lectus mattis, dapibus massa et, blandit ipsum. Pellentesque ullamcorper ante augue, id aliquam sem vulputate id. Sed elit augue, molestie a elit aliquet, facilisis elementum eros. Nam non enim sapien. Vivamus non eleifend quam. Nam dapibus condimentum porttitor. Aenean tempor tincidunt tristique.'
);
$args['children'][] = $tab;
//--- Tab 2
$tab = array(
'btn_text'=>'Tab 2'
, 'body'=>'Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.'
);
$args['children'][] = $tab;
//--- Tab 3
$tab = array(
'btn_text'=>'Tab 3'
, 'body'=>'Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.'
);
$args['children'][] = $tab;
//---
$args['style_pills'] = false;
$str .= ui::tabs($args);3. ui::gallery()
Galerie.
Consultați exemple detaliate la linkul de mai jos.
Exemplu:CLASA «ui::» | Galerie - Gallery
$args = array();
$args['children'] = array();
//--- Image 1
$image_set = array(
'src'=>media_link('011ab21242e86e7d7635')
, 'caption'=>'Caption for image 1'
);
$args['children'][] = $image_set;
//--- Image 2
$image_set = array(
'src'=>media_link('3e1861d3864ba55b27a8')
, 'caption'=>'Caption for image 2'
);
$args['children'][] = $image_set;
//---
$str .= ui::gallery($args);În exemplele anterioare de pe această pagină am folosit deja clasa «storage::» în diverse variante automate la lucrul cu câmpurile formularului.
Vom examina cazul utilizării manuale a clasei «storage::». Utilizarea manuală este necesară când trebuie să salvăm anumite valori care nu sunt legate de câmpurile formularului.
Există o mulțime de exemple posibile pentru o astfel de utilizare a clasei. Vom oferi doar un exemplu.
În exemplul nostru vom crea 3 tab-uri. În fiecare tab câte 4 sub-tab-uri.
Implicit, la încărcarea paginii se deschide tab-ul 1 și sub-tab-ul 1.
Dar să presupunem că trebuie să salvăm care tab și sub-tab au fost deschise ultima dată, pentru ca la următoarea reîncărcare a paginii să se deschidă tab-ul salvat ultima dată și sub-tab-ul salvat ultima dată. De asemenea, să reținem care sub-tab a fost deschis ultima dată în fiecare tab.
Analizați exemplul creat.
Exemplu
Schimbați fila și subfila și reîncărcați pagina.
$args = array();
//=== get saved open_tab
$saved_open_tab = storage::get_value('api_docs_examples_storage', 'open_tab');
if(!$saved_open_tab) $saved_open_tab = 0;
//===
$args['children'] = array();
$args['children'][] = array(
'btn_text'=>'Tab 1'
, 'handler_tab'=>'open_tab'
, 'handler_tab_force'=>true
, 'use_btn_reload'=>false
, 'init_open'=>($saved_open_tab === 0 ? true : false)
);
$args['children'][] = array(
'btn_text'=>'Tab 2'
, 'handler_tab'=>'open_tab'
, 'handler_tab_force'=>true
, 'use_btn_reload'=>false
, 'init_open'=>($saved_open_tab === 1 ? true : false)
);
$args['children'][] = array(
'btn_text'=>'Tab 3'
, 'handler_tab'=>'open_tab'
, 'handler_tab_force'=>true
, 'use_btn_reload'=>false
, 'init_open'=>($saved_open_tab === 2 ? true : false)
);
$str .= ui::tabs($args);public function open_tab() {
$str = '';
$open_tab = $this->post['_tab'];
//=== save to storage
storage::init('api_docs_examples_storage', 'access');
storage::set_f('open_tab', $open_tab, 'int');
storage::save();
//=== get saved open_sub_tab
$saved_open_sub_tab_rels = storage::get_value('api_docs_examples_storage', 'open_sub_tab');
if(!$saved_open_sub_tab_rels) $saved_open_sub_tab_rels = array();
$saved_open_sub_tab = (isset($saved_open_sub_tab_rels[$open_tab]) ? (int) $saved_open_sub_tab_rels[$open_tab] : 0);
//===
$str .= '<div class="pl-3 border-left border-warning">';
$str .= '<div class="py-4">My content for Tab '.($open_tab+1).'</div>';
//===
$args = array();
$args['children'] = array();
$args['children'][] = array(
'btn_text'=>'SubTab 1'
, 'handler_tab'=>'open_sub_tab'
, 'handler_tab_force'=>true
, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
, 'use_btn_reload'=>false
, 'init_open'=>($saved_open_sub_tab === 0 ? true : false)
);
$args['children'][] = array(
'btn_text'=>'SubTab 2'
, 'handler_tab'=>'open_sub_tab'
, 'handler_tab_force'=>true
, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
, 'use_btn_reload'=>false
, 'init_open'=>($saved_open_sub_tab === 1 ? true : false)
);
$args['children'][] = array(
'btn_text'=>'SubTab 3'
, 'handler_tab'=>'open_sub_tab'
, 'handler_tab_force'=>true
, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
, 'use_btn_reload'=>false
, 'init_open'=>($saved_open_sub_tab === 2 ? true : false)
);
$args['children'][] = array(
'btn_text'=>'SubTab 4'
, 'handler_tab'=>'open_sub_tab'
, 'handler_tab_force'=>true
, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
, 'use_btn_reload'=>false
, 'init_open'=>($saved_open_sub_tab === 3 ? true : false)
);
$str .= ui::tabs($args);
$str .= '</div>';
oj_tab($str);
}public function open_sub_tab() {
$str = '';
$open_sub_tab = $this->post['_tab'];
$open_tab = $this->post['open_tab'];
//=== save to storage
$open_sub_tabs_rels = array($open_tab=>$open_sub_tab);
storage::init('api_docs_examples_storage', 'access');
storage::set_f('open_sub_tab', $open_sub_tabs_rels, 'array:add');
storage::save();
//===
$str .= '<div class="py-4">My SubTab '.($open_sub_tab+1).' content for Tab '.($open_tab+1).'</div>';
oj_tab($str);
}