Templat MVC Kustom

oleh Jacques Eloff

Rilis MVC 3 Tools Update for Visual Studio 2010 memperkenalkan wizard proyek terpisah untuk proyek MVC. Perubahan didorong oleh dua faktor. Pertama, pengenalan templat baru di MVC 3 dan dukungan untuk mesin tampilan tambahan seperti Razor menyebabkan pertumbuhan dialog Proyek Baru di Visual Studio. Kedua, pelanggan telah meminta poin ekstensibilitas dan wizard proyek MVC baru akan memberi kami kesempatan untuk menanggapi permintaan ini.

Menambahkan templat kustom adalah proses yang sulit yang diandalkan menggunakan registri untuk membuat templat baru terlihat oleh wizard proyek MVC. Penulis templat baru harus membungkusnya di dalam MSI untuk memastikan bahwa entri registri yang diperlukan akan dibuat pada waktu penginstalan. Alternatifnya adalah membuat file ZIP yang berisi templat tersedia dan meminta pengguna akhir membuat entri registri yang diperlukan secara manual.

Tidak satu pun dari pendekatan yang disebutkan di atas sangat ideal sehingga kami memutuskan untuk memanfaatkan beberapa infrastruktur yang ada yang disediakan oleh ekstensi VSIX untuk membuatnya lebih mudah untuk menulis, mendistribusikan, dan menginstal templat MVC kustom yang dimulai dengan MVC 4 untuk Visual Studio 2012. Beberapa manfaat yang diberikan oleh pendekatan ini adalah:

• Ekstensi VSIX dapat berisi beberapa templat yang mendukung berbagai bahasa (C# dan Visual Basic) dan beberapa mesin tampilan (ASPX dan Razor).
• Ekstensi VSIX dapat menargetkan beberapa SKU Visual Studio termasuk SKU Ekspres.
• Visual Studio Gallery memfasilitasi distribusi ekstensi ke audiens yang luas.
• Ekstensi VSIX dapat ditingkatkan sehingga lebih mudah untuk menulis koreksi dan pembaruan pada templat kustom Anda.

Prasyarat

• Pengguna harus terbiasa dengan penulisan templat proyek, termasuk markup yang diperlukan untuk file vstemplate, dll.
• Pengguna harus menginstal Visual Studio Professional dan yang lebih tinggi. SKU Ekspres tidak mendukung pembuatan proyek VSIX.
• Visual Studio 2012 SDK terinstal.

Contoh

Langkah pertama adalah membuat proyek VSIX baru menggunakan C# atau Visual Basic. Pilih File > Proyek Baru, lalu klik Ekstensibilitas di panel kiri dan pilih Proyek VSIX.

Setelah proyek dibuat, perancang VSIX akan dibuka.

Perancang dapat digunakan untuk mengedit beberapa properti umum ekstensi yang akan ditampilkan kepada pengguna saat mereka menginstal ekstensi atau menelusuri ekstensi yang diinstal di Visual Studio (Ekstensi Alat > dan Updates). Setelah Anda menyelesaikan informasi umum, klik tab Instal Target.

Tab ini digunakan untuk menentukan SKU dan versi Visual Studio yang didukung oleh ekstensi Anda. Pilih kotak centang untuk VSIX ini diinstal untuk semua pengguna untuk mengaktifkan penginstalan per mesin VSIX. Klik tombol Baru di sebelah kanan untuk menambahkan SKU tambahan seperti Web Developer Express (VWD).

Jika Anda berniat untuk mendukung semua SKU Profesional dan lebih tinggi (Profesional, Premium dan Ultimate) Anda hanya perlu memilih SKU minimum dalam keluarga, Microsoft.VisualStudio.Pro. Ingatlah untuk menyimpan semua perubahan Anda setelah Anda menyelesaikan Target Penginstalan.

Tab Aset digunakan untuk menambahkan semua file konten Anda ke VSIX. Karena MVC memerlukan metadata kustom, Anda akan mengedit XML mentah dari file manifes VSIX alih-alih menggunakan tab Aset untuk menambahkan konten. Mulailah dengan menambahkan konten templat ke proyek VSIX. Penting bahwa struktur folder dan konten mencerminkan tata letak proyek. Contoh di bawah ini berisi empat templat proyek yang berasal dari templat proyek MVC Dasar. Pastikan bahwa semua file yang terdiri dari templat proyek Anda (semuanya di bawah folder ProjectTemplates) ditambahkan ke grup item Konten dalam file proyek VSIX dan bahwa setiap item berisi metadata CopyToOutputDirectory dan IncludeInVsix yang ditunjukkan pada contoh di bawah ini.

<Content Include="ProjectTemplates\MyMvcWebApplicationProjectTemplate.csaspx\BasicWeb.config">

<CopyToOutputDirectory>Always</CopyToOutputDirectory>

<IncludeInVSIX>true</IncludeInVSIX>

</Konten>

Jika tidak, IDE akan mencoba mengkompilasi konten templat saat Anda membangun VSIX dan Anda mungkin akan melihat kesalahan. File kode dalam templat sering berisi parameter templat khusus yang digunakan oleh Visual Studio ketika templat proyek dibuat dan oleh karena itu tidak dapat dikompilasi dalam IDE.

Tutup perancang VSIX, lalu klik kanan pada file source.extension.manifest di Penjelajah Solusi dan pilih Buka Dengan dan pilih opsi Editor XML (Teks).

Buat elemen Aset<> dan tambahkan elemen Aset<> untuk setiap file yang harus disertakan dalam VSIX. Atribut Type dari setiap <elemen Aset> harus diatur ke Microsoft.VisualStudio.Mvc.Template. Ini adalah namespace kustom yang hanya dipahami oleh wizard proyek MVC. Lihat dokumentasi Skema VSIX 2.0 untuk informasi tambahan tentang struktur dan tata letak file manifes.

Hanya menambahkan file ke VSIX tidak cukup untuk mendaftarkan templat dengan wizard MVC. Anda perlu memberikan informasi seperti nama templat, deskripsi, mesin tampilan yang didukung, dan bahasa pemrograman ke wizard MVC. Informasi ini dibawa dalam atribut kustom yang terkait dengan <elemen Aset> untuk setiap file vstemplate .

<Aset d:VsixSubPath="ProjectTemplates\MyMvcWebApplicationProjectTemplate.csaspx"

Type="Microsoft.VisualStudio.Mvc.Template"

d:Source="File"

Path="ProjectTemplates\MyMvcWebApplicationProjectTemplate.csaspx\BasicMvcWebApplicationProjectTemplate.11.csaspx.vstemplate"

ProjectType="MVC"

Language="C#"

ViewEngine="Aspx"

TemplateId="MyMvcApplication"

Title="Aplikasi Web Dasar Kustom"

Description="Templat kustom yang berasal dari aplikasi web MVC Dasar (Razor)"

Version="4.0"/>

Di bawah ini adalah penjelasan tentang atribut kustom yang harus ada:

• ProjectType harus diatur ke MVC.
• Bahasa menunjuk bahasa pengembangan yang didukung oleh templat. Nilai yang valid adalah C# atau VB.
• ViewEngine menunjuk mesin tampilan yang didukung oleh templat seperti Aspx atau Razor. Anda dapat menentukan nilai kustom untuk bidang ini.
• TemplateId digunakan untuk mengelompokkan templat. Jika nilai cocok dengan ID templat yang ada, itu akan menimpa templat yang sebelumnya terdaftar dengan wizard MVC.
• Judul menunjuk deskripsi singkat yang ditampilkan dalam wizard MVC di bawah setiap templat proyek.
• Deskripsi menunjuk deskripsi templat yang lebih verbose.

Setelah Anda menambahkan semua file ke manifes dan menyimpannya, Anda akan melihat bahwa tab Aset di perancang akan menampilkan semua file, tetapi bukan atribut kustom yang Anda tambahkan ke <elemen Aset> untuk file vstemplate .

Yang tersisa sekarang adalah mengkompilasi proyek VSIX dan menginstalnya.

Pastikan bahwa semua instans Visual Studio ditutup pada komputer tempat Anda ingin menguji ekstensi VSIX. Visual Studio memindai ekstensi baru selama startup, jadi jika IDE terbuka saat menginstal VSIX, Anda harus memulai ulang Visual Studio. Di Explorer, klik dua kali pada file VSIX untuk meluncurkan Penginstal VSIX, klik Instal lalu luncurkan Visual Studio.

Dari menu, pilih Ekstensi Alat > dan Updates untuk mengonfirmasi bahwa ekstensi Anda telah diinstal. Jika Penginstal VSIX melaporkan kesalahan selama penginstalan ekstensi, Anda dapat melihat log Alat Penginstal VSIX untuk informasi selengkapnya. Log biasanya dibuat di folder %temp% pengguna yang menginstal ekstensi, misalnya C:\Users\Bob\AppData\Local\Temp.

Setelah menutup jendela, Anda dapat membuat proyek MVC 4 untuk melihat apakah templat baru Anda diperlihatkan dalam wizard MVC.

Batasan

1. Wizard MVC tidak mendukung templat kustom yang dilokalkan.
2. Panduan tidak akan melaporkan kesalahan jika gagal menemukan templat kustom. Jika salah satu atribut kustom yang diperlukan tidak ada, templat hanya akan dikecualikan dari Wizard.