Komponen ui debugging


16

Saya mencoba membangun modul CRUD yang menggunakan komponen UI untuk kisi dan formulir admin.
Saya pernah melakukan ini sebelumnya dan berhasil, tetapi yang ini sedikit berbeda dan ternyata saya mengacaukan sesuatu.
Masalahnya ada di file komponen UI atau beberapa kelas yang dirujuk oleh file komponen UI pasti. Jika saya menghapus referensi komponen UI dari file tata letak, halaman dimuat (tanpa grid jelas).
Ketika memasukkan komponen UI, halaman itu kosong dan tidak ada kesalahan yang dicatat di mana pun, bahkan ketika dalam mode pengembang.

Bagaimana / di mana saya dapat mulai men-debug loading dan rendering komponen UI?


Saya memiliki masalah yang sama sebelum beberapa hari yang lalu. Itu karena struktur folder yang salah dari folder ui_component. Lalu ada masalah di di.xml
Bhupendra Jadeja

Untuk saat ini saya tidak peduli dengan kesalahan saya. Saya peduli bagaimana saya bisa men-debug ini karena mungkin terjadi di masa depan.
Marius

itu adalah tugas yang sangat membosankan untuk debugging XML. Setiap kali saya mendapatkan kesalahan dalam laporan dan system.xml. Semoga kami mendapat jawaban dari tim inti.
Bhupendra Jadeja

apakah Anda mendapatkan cara untuk debugging XML?
Bhupendra Jadeja

1
Saya menemukan titik di aplikasi di mana saya bisa mulai, tapi saya belum yakin itu bukan titik terbaik untuk melakukannya. Saya akan memposting jawaban hari ini atau besok jika saya menemukan sesuatu yang solid.
Marius

Jawaban:


12

Apa yang saya temukan sejauh ini adalah bahwa ketika memberikan tata letak tumpukan ini diikuti.

  • \Magento\Framework\View\Layout::generateElements
  • \Magento\Framework\View\Layout\GeneratorPool::process

Sekarang, tergantung pada jenis tata letak yang disebut generator tata letak yang berbeda

foreach ($this->generators as $generator) {
    $generator->process($readerContext, $generatorContext);
}

Untuk komponen Ui ... melanjutkan tumpukan:

  • \Magento\Framework\View\Layout\Generator\UiComponent::process()
  • \Magento\Framework\View\Layout\Generator\UiComponent::generateComponent()
  • \Magento\Framework\View\Element\UiComponentFactory::create()
  • \Magento\Ui\Model\Manager::prepareData()
  • \Magento\Ui\Model\Manager::evaluateComponents()
  • Magento\Framework\Data\Argument\InterpreterInterface::evaluate.

Sekali lagi, ini tergantung pada tipe argumen yang perlu ditafsirkan.
Anda dapat menemukan beberapa penerjemah di sinilib/internal/Magento/Framework/Data/Argument/Interpreter/

Sejauh ini yang saya dapat.
Saya tahu ini bukan penjelasan lengkap, tetapi ini adalah beberapa poin di mana Anda dapat mengidentifikasi jika ada yang salah dengan komponen ui Anda.


1

Mencoba:

Source/vendor/magento/module-ui/Component/Wrapper/UiComponent.php

metode: protected function _toHtml()

kira-kira dimulai pada baris 57

Debug $resultdan itu harus berisi semua komponen yang dimuat.


0

Satu-satunya cara saya dapat men-debug komponen ui adalah hanya menghapus semuanya dari komponen xml dan menambahkan item satu per satu untuk memastikan bahwa atribut didukung di xsd.


1
file ini valid terhadap file xsd. Dan saya yakin ada cara lain selain menghapus bit file. Harus ada tempat di mana file dimuat dan diproses.
Marius

0

Anda dapat mulai dengan menggunakan css untuk memulai debugging Anda dapat menggunakan file theme.less di bawah app / design / frontend / Mgs / molly / web / css misalnya mengubah warna dasar yaitu @ warna dasar: @ 7c7bad

setelah mengubah kode apa pun yang telah Anda hapus direktori var, Anda memiliki konten yang jelas di bawah direktori frontend pub / static / frontend /

Pada perintah hit terakhir di cmd php bin / setup magento: static-content: deploy


Apa hubungannya css dengan debug komponen ui?
Marius

Anda dapat mengubah tata letak atau warna. @Marius
vnnogile_user

Ini tidak ada hubungannya dengan pertanyaan. Saya tidak bertanya tentang perubahan warna.
Marius

0

Saya akan mulai dengan:

Magento\Ui\TemplateEngine\Xhtml\Result->__toString( )

Ini adalah tempat di mana Ui XML digabungkan. Jadi ini harus menjadi titik awal untuk debugging Ui XML.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.