{"id":1001,"date":"2014-02-05T04:05:35","date_gmt":"2014-02-05T04:05:35","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1001"},"modified":"2014-02-05T04:40:13","modified_gmt":"2014-02-05T04:40:13","slug":"supercharge-asp-net-web-form-with-juice-introduction","status":"publish","type":"post","link":"http:\/\/www.rezafaisal.net\/?p=1001","title":{"rendered":"Supercharge ASP.NET Web Form with JUICE – Introduction"},"content":{"rendered":"

Sudah pasti JUICE disini bukan jus yang ini \"Smile<\/p>\n

\"blog1\"<\/a><\/p>\n

Sebelum membahas JUICE, terlebih dahulu harus mengenal jQuery UI.\u00a0 Sebagai informasi jQuery UI adalah sekumpulan interaksi interface, efek, widget dan theme yang dibangun dengan library jQuery untuk keperluan mempercantik antarmuka (UI) dan memberikan experience kepada pengguna (UX)\u00a0 aplikasi web.\u00a0 Bicara soal jQuery tentu saja kita harus mengenal Javascript. Bagi web developer ASP.NET yang terbiasa dengan control-control pada ASP.NET dan kurang fasih menggunakan Javascript apalagi jQuery maka JUICE UI<\/a> dapat digunakan untuk membantu keterbatasan ini.<\/p>\n

JUICE UI, adalah sekumpulan komponen untuk ASP.NET web form yang dapat mempermudah membuat jQuery UI Widget. Control-control yang telah tersedia pada JUICE UI dapat dilihat pada gambar berikut ini :<\/p>\n

\"blog2\"<\/a><\/p>\n

{Installasi<\/em><\/strong>}<\/p>\n

Sebelum menggunakan control-control tersebut terlebih dulu kita perlu lakukan installasi library JUICE UI.\u00a0 Untuk installasi kita cukup gunakan cara installasi via NuGet.<\/p>\n

\"blog3\"<\/a><\/p>\n

Cukup pilih Tool > Library Package Manager > Manage NuGet Packages for Solution, seperit yang terlihat pada gambar di atas.\u00a0 Kemudian pada window Manage NuGet Packages pilih Online dan search dengan kata kunci juice, maka akan dapat dilihat seperti pada gambar di bawah ini.<\/p>\n

\"blog4\"<\/a><\/p>\n

Kemudian klik tombol Install yang ada pada baris Juice UI. Kemudian pilih project yang akan menggunakan library ini.<\/p>\n

\"blog5\"<\/a><\/p>\n

Dan selanjutnya ikuti langkah-langkah berikutnya. Jika berhasil maka dapat kita lihat tambahan JuiceUI pada References.<\/p>\n

\"blog6\"<\/a><\/p>\n

Selain itu juga terdapat tambahan baris berikut ini pada web.config.<\/p>\n

\n
\n
   1:<\/span> <<\/span>add<\/span> assembly<\/span>=\"JuiceUI\"<\/span> namespace<\/span>=\"Juice\"<\/span> tagPrefix<\/span>=\"juice\"<\/span> \/><\/span><\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
{Testing<\/em><\/strong>}<\/p>\n
Selanjutnya kita akan lakukan pengujian apakah proses installasi dan konfigurasi yang telah dilakukan telah benar. Maka dapat diuji dengan cara menggunakan kode berikut ini.<\/p>\n
\n
\n
   1:<\/span> <%@ Page Language=\"C#\" AutoEventWireup=\"true\" CodeBehind=\"TestJuiceUI.aspx.cs\" Inherits=\"WebApplication2.TestJuiceUI\" %><\/span><\/pre>\n
<\/p>\n
   2:<\/span><\/pre>\n
<\/p>\n
   3:<\/span> <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/pre>\n
<\/p>\n
   4:<\/span><\/pre>\n
<\/p>\n
   5:<\/span> <<\/span>html<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/1999\/xhtml\"<\/span>><\/span><\/pre>\n
<\/p>\n
   6:<\/span> <<\/span>head<\/span> runat<\/span>=\"server\"<\/span>><\/span><\/pre>\n
<\/p>\n
   7:<\/span>     <<\/span>title<\/span>><\/<\/span>title<\/span>><\/span><\/pre>\n
<\/p>\n
   8:<\/span> <\/<\/span>head<\/span>><\/span><\/pre>\n
<\/p>\n
   9:<\/span> <<\/span>body<\/span>><\/span><\/pre>\n
<\/p>\n
  10:<\/span>     <<\/span>form<\/span> id<\/span>=\"form1\"<\/span> runat<\/span>=\"server\"<\/span>><\/span><\/pre>\n
<\/p>\n
  11:<\/span>         <<\/span>div<\/span>><\/span><\/pre>\n
<\/p>\n
  12:<\/span>             <<\/span>asp:ScriptManager<\/span> ID<\/span>=\"ScriptManager1\"<\/span> runat<\/span>=\"server\"<\/span>><\/span><\/pre>\n
<\/p>\n
  13:<\/span>                 <<\/span>Scripts<\/span>><\/span><\/pre>\n
<\/p>\n
  14:<\/span>                     <<\/span>asp:ScriptReference<\/span> Path<\/span>=\"~\/Scripts\/jquery-1.8.3.js\"<\/span> \/><\/span><\/pre>\n
<\/p>\n
  15:<\/span>                     <<\/span>asp:ScriptReference<\/span> Path<\/span>=\"~\/Scripts\/jquery-ui-1.9.2.js\"<\/span> \/><\/span><\/pre>\n
<\/p>\n
  16:<\/span>                 <\/<\/span>Scripts<\/span>><\/span><\/pre>\n
<\/p>\n
  17:<\/span>             <\/<\/span>asp:ScriptManager<\/span>><\/span><\/pre>\n
<\/p>\n
  18:<\/span>             <<\/span>juice:Tabs<\/span> ID<\/span>=\"_Default\"<\/span> runat<\/span>=\"server\"<\/span>><\/span><\/pre>\n
<\/p>\n
  19:<\/span>                 <<\/span>juice:TabPage<\/span> Title<\/span>=\"Tab 1\"<\/span> runat<\/span>=\"server\"<\/span> ID<\/span>=\"_Tab1\"<\/span>><\/span><\/pre>\n
<\/p>\n
  20:<\/span>                     <<\/span>TabContent<\/span>><\/span><\/pre>\n
<\/p>\n
  21:<\/span>                         Test<\/pre>\n
<\/p>\n
  22:<\/span>                     <\/<\/span>TabContent<\/span>><\/span><\/pre>\n
<\/p>\n
  23:<\/span>                 <\/<\/span>juice:TabPage<\/span>><\/span><\/pre>\n
<\/p>\n
  24:<\/span>             <\/<\/span>juice:Tabs<\/span>><\/span><\/pre>\n
<\/p>\n
  25:<\/span><\/pre>\n
<\/p>\n
  26:<\/span>         <\/<\/span>div<\/span>><\/span><\/pre>\n
<\/p>\n
  27:<\/span>     <\/<\/span>form<\/span>><\/span><\/pre>\n
<\/p>\n
  28:<\/span> <\/<\/span>body<\/span>><\/span><\/pre>\n
<\/p>\n
  29:<\/span> <\/<\/span>html<\/span>><\/span><\/pre>\n
<\/p>\n<\/div>\n<\/div>\n
Yang perlu diperhatikan adalah pada baris ke-14 dan ke-15, pada baris-baris ini ditentukan dimana lokasi penyimpanan file jquery-1.8.3.js dan jquery-ui-1.9.2.js yang bisa dilihat terletak pada folder Scripts pada project aplikasi web, seperti yang terlihat pada gambar di bawah ini.<\/p>\n
\"blog9\"<\/a><\/p>\n
Langkah selanjutnya adalah \u201cView in browser\u201d halaman tersebut di atas dan hasilnya dapat dilihat seperti berikut ini.<\/p>\n
\"blog7\"<\/a><\/p>\n
Secara default, antarmuka hasil JUICE UI terlihat \u201clebih baik\u201d dibandingkan dengan dengan control Tab milik Ajax Control Toolkit di bawah ini.<\/p>\n
\"blog8\"<\/a><\/p>\n
Pada posting selanjutnya akan dibahas secara detail control-control yang terdapat pada Juice UI dan implementasinya pada aplikasi web.<\/p>\n","protected":false},"excerpt":{"rendered":"
Sudah pasti JUICE disini bukan jus yang ini Sebelum membahas JUICE, terlebih dahulu harus mengenal jQuery UI.\u00a0 Sebagai informasi jQuery UI adalah sekumpulan interaksi interface, efek, widget dan theme yang dibangun dengan library jQuery untuk keperluan mempercantik antarmuka (UI) dan…<\/p>\n","protected":false},"author":1,"featured_media":983,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[101,68,102],"class_list":["post-1001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-ajax-control-toolkit","tag-asp-net","tag-juice-ui"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2014\/02\/blog1.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-g9","_links":{"self":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1001"}],"version-history":[{"count":2,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1001\/revisions"}],"predecessor-version":[{"id":1006,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1001\/revisions\/1006"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/983"}],"wp:attachment":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1001"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}