www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫معرفی Kendo UI


نویسنده: وحید نصیری
تاریخ: ۱۳۹۳/۰۸/۱۴ ۱:۳۰
آدرس: www.dntips.ir
Kendo UI چیست؟
Kendo UI یک فریم ورک جاوا اسکریپتی ساخت برنامه‌های مدرن و تعاملی وب است و برای رسیدن به این مقصود، از JavaScript، CSS 3، HTML 5 و jQuery کمک می‌گیرد.


امکانات فراهم شده توسط Kendo UI
1) انواع و اقسام ویجت‌ها: کنترل‌های وب تهیه شده برفراز jQuery
ویجت‌های آن در سه گروه کلی قرار می‌گیرند:
- گروه وب، مانند گرید، tree-view و غیره.
- گروه DataViz که جهت نمایش بصری اطلاعات و ترسیم انواع و اقسام نمودارها کاربرد دارد.
- گروه موبایل که با استفاده از فناوری adaptive rendering، در سیستم عامل‌های مختلف موبایل، مانند اندروید و آی او اس، ظاهری بومی و هماهنگ با آن‌ها را ارائه می‌دهد.

2) منبع داده سمت کاربر (Client side data source)
منبع داده سمت کاربر Kendo UI، از انواع و اقسام منابع داده محلی مانند آرایه‌های جاوا اسکریپتی تا منابع داده راه دور، مانند JSON، XML و JSONP، جهت نمایش اطلاعات و data binding پشتیبانی می‌کند. این منبع داده، مواردی مانند صفحه بندی، مرتب سازی اطلاعات و گروه بندی آن‌ها را نیز فراهم می‌کند. به علاوه با عملیات ثبت، ویرایش و حذف اطلاعات نیز هماهنگی کاملی را دارد.

3) به همراه یک فریم ورک MVVM توکار است
این فریم ورک MVVM مواردی مانند two way data binding و همچنین declarative binding را نیز پشتیبانی می‌کند.

4) امکان تعویض قالب
5) پویا نمایی، کشیدن و رها کردن
6) فریم ورک اعتبارسنجی


چرا Kendo UI؟
-  مهم‌ترین مزیت کار با Kendo UI، فراهم آوردن تمام نیازهای توسعه‌ی یک برنامه‌ی مدرن وب، تنها در یک بسته است. به این ترتیب دیگر نیازی نیست تا گرید را از یک‌جا، tree-view را از جایی دیگر و کتابخانه‌های رسم نمودار را از منبعی ناهمگون با سایر عناصر برنامه دریافت و استفاده کنید؛ در اینجا تمام این‌ها در قالب یک بسته‌ی آماده برای شما فراهم شده‌است و همچنین با یکدیگر سازگاری کاملی دارند.
- تمام ویجت‌های آن برای نمایش سریع با کارآیی بالا طراحی شده‌اند.
- پشتیبانی خوب آن. این فریم ورک محصول شرکتی است که به صورت تخصصی کار تهیه کامپوننت‌های وب و دسکتاپ را انجام می‌دهد.


مرورگرهای پشتیبانی شده
یکی دیگر از مزایای مهم کار با Kendo UI پشتیبانی گسترده‌ی آن از اکثر مرورگرهای موجود است. این فریم ورک با مرورگرهای زیر سازگار است:
- IE 7 به بعد
- فایرفاکس 10 به بعد
- تمام نگارش‌های کروم
- اپرا 10 به بعد
- سفاری 4 به بعد


مجوز استفاده از Kendo UI
Kendo UI با سه مجوز ذیل ارائه می‌شود:
- 30 روزه آزمایشی رایگان
- تجاری
- سورس باز با مجوز Apache

پیشتر نسخه‌ی تجاری آن تحت مجوز GPL نیز در دسترس بود. اما اخیرا مجوز GPL آن حذف شده و به Apache تغییر یافته است. اما باید در نظر داشت که نسخه‌ی سورس باز آن شامل کنترل‌های مهمی مانند «گرید» نیست و این موارد تنها در نسخه‌ی تجاری آن لحاظ شده‌اند.


مثال‌های Kendo UI
پس از دریافت بسته‌ی کامل آن، پوشه‌هایی مانند js، styles و امثال آن قابل مشاهده هستند؛ به همراه پوشه‌ی examples آن که حداقل 86 پوشه‌ی دیگر در آن جهت ارائه مثال‌هایی از نحوه‌ی کاربرد المان‌های مختلف آن تدارک دیده شده‌اند.


نحوه‌ی افزودن Kendo UI به صفحه
از آنجائیکه Kendo UI یک فریم ورک جاوا اسکریپتی است، همانند سایر برنامه‌های وب، افزودن تعاریف فایل‌های js، css و تصاویر مرتبط با آن، برای شروع به کار کفایت می‌کند. برای این منظور ابتدا پوشه‌های js و styles بسته‌ی دریافتی آن‌را به برنامه‌ی خود اضافه کنید (این پوشه‌ها در فایل پیوست انتهای بحث موجود هستند).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <!--KendoUI: Web-->
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>

    <!--KendoUI: DataViz-->
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <script src="js/kendo.dataviz.min.js" type="text/javascript"></script>

    <!--KendoUI: Mobile-->
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="js/kendo.mobile.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $("#pickDate").kendoDatePicker();
        });
    </script>
</head>
<body>
    <span>
        Pick a date: <input id="pickDate" type="text"/>
    </span>
</body>
</html>
در اینجا یک مثال ساده‌ی استفاده از date picker کندو یو آی را ملاحظه می‌کنید. در قسمت head صفحه، نحوه‌ی ثبت سه گروه اسکریپت و شیوه نامه، مشخص شده‌اند. اگر نیاز به کامپوننت‌های وب آن‌را دارید باید اجزایی مانند kendo.common.min.css، kendo.default.min.css، jquery.min.js و kendo.web.min.js به صفحه اضافه شوند. اگر نیاز به رسم نمودار هست، فایل‌ها kendo.dataviz.min.css و kendo.dataviz.min.js باید تعریف شوند و برای فعال سازی اجزای موبایل آن فایل‌های kendo.mobile.all.min.css و kendo.mobile.min.js نیاز است به صفحه پیوست شوند. در هر سه حالت ذکر jquery.min.js الزامی است.

دریافت سورس کامل این قسمت که حاوی فایل‌های اصلی kendoui.professional.2014.2.1008 نیز می‌باشد:
KendoUI01.7z
مطالب مشابه

نظرات

  • مهمان در ۱۳۹۳/۰۸/۱۴ ۱۴:۳۸
    برای دریافت پکیج کامل Kendo از این آدرس استفاده کنید.
  • محمد رعیت پیشه در ۱۳۹۳/۰۸/۱۴ ۲۰:۵
    آیا امکان استفاده از Razor Wrapper هم به صورت رایگان وجود دارد یا اینکه نیازمند تهیه بسته کامل می‌باشد؟
    • وحید نصیری در ۱۳۹۳/۰۸/۱۴ ۲۰:۱۸
      تجاری هست و توصیه هم نمی‌شود. چون نهایتا برای بسیاری از کارها باید به پشت صحنه‌ی این ویجت‌ها و امکانات مراجعه کنید؛ یعنی نیاز است مستقیما اسکریپت نویسی کنید و با ساختار واقعی آن‌ها آشنا باشید.
    • سعیدجلالی در ۱۳۹۳/۰۸/۱۷ ۸:۵۶
      بله امکان استفاده از wrapper در نسخه asp.net.mvc.commercial وجود دارد
      استفاده از اون هم خیلی ساده‌تر و خواناتر از جاوا اسکریپت هست. نظر آفای نصیری هم محترم است ولی در مواقع خواص میتونید همزمان هم از جاوااسکریپت استفاده کنید هم از wrapper یک نمونه رو در زیر با هم مقایسه میکنیم
      با استفاده از جاوا اسکریپت
      <input id="pickDate" type="text"/>

<script type="text/javascript">
  $(function() {
        $("#pickDate").kendoDatePicker();
  });
</script>
      با استفاده از wrapper
      @(Html.Kendo().DatePicker().Name("pickDate"))
      در ضمن اینکه توی  wrapper امکان استفاده از Intellisense و امکان تعریف ارتباط اغلب کامپوننت‌های وب به مدل با استفاده از for‌های نمونه معادل کامپوننت فراهم شده است مانند wrapper زیر
      @(Html.Kendo().DatePickerFor(m => m.HireDate).Name("pickDate1"))

  • Ara در ۱۳۹۳/۰۸/۱۷ ۱۹:۳۱
    به دوستان پیشنهاد می‌شه این رو هم ببینید 
    استفاده از Kendo UI  بهمراه AngularJs  خیلی خوبه !
    ما تو پروژه تجاری تجاری استفاده کردیم و خیلی راضی هستیم 
    • محمد کمائی در ۱۳۹۶/۱۱/۱۵ ۱۴:۱۳
      آیا سمپلی وجود داره از ترکیب Angular2 و Kendoui که خروجی آن یک برنامه سمت کاربر زیبا و سریع با سرعت توسعه بالا باشد؟
  • وحید نصیری در ۱۳۹۳/۱۱/۲۱ ۱۲:۲۹
    نکته‌ای در مورد دریافت آخرین نگارش‌های Kendo UI
    شماره نگارش‌های مختلف Kendo UI یک چنین شکلی را دارند: 2014.3.1119
    برای دریافت فایل‌های js و css نگارشی خاص، از الگوی ذیل استفاده کنید:
    http://cdn.kendostatic.com/version/js/file name.js
http://cdn.kendostatic.com/version/styles/file name.css
    برای مثال:
    http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js

http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css
http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css
http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css
http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css
  • وحید نصیری در ۱۳۹۳/۱۱/۲۱ ۱۴:۳۴
    جهت اطلاع
    مثال‌های این سری را از مخزن کد ذیل نیز می‌توانید دریافت کنید:
    KendoUI-Samples      
  • سالار ربال در ۱۳۹۴/۰۲/۱۳ ۲۳:۳
     آیا ارائه یک پروژه سورس باز با استفاده از این سری از کامپوننت‌های تلکریک کار درستی است؟
    • وحید نصیری در ۱۳۹۴/۰۲/۱۳ ۲۳:۱۴
      فقط از مجموعه‌ی تجاری آن در کارهای سورس باز نمی‌شود استفاده کرد. برای کارهای سورس باز محدود هستید به مجموعه‌ی سورس باز آن.
  • علی یگانه مقدم در ۱۳۹۴/۰۳/۰۳ ۱۹:۴۶
    کد زیر رو در ویو اضافه کردم و فایل جی کوئری هم در layout وجود داره
    @section JavaScript
{
    
 <!--KendoUI: Web-->
<link href="@Url.Content("~/content/css/kendo/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/content/css/kendo/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/kendo.web.min.js")" type="text/javascript"></script>

      <!--KendoUI: DataViz-->
<link href="@Url.Content("~/content/css/kendo/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/kendo.dataviz.min.js")" type="text/javascript"></script>

<!--KendoUI: Mobile-->
<link href="@Url.Content("~/content/css/kendo/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/kendo.mobile.min.js")" type="text/javascript"></script>

 <script type="text/javascript">
    $(function () {
        $("#pickDate").kendoDatePicker();
    });
</script>



}

    جی کوئری یکبار صدا زده شده ولی متاسفانه خطای زیر رو میده:
    TypeError: $(...).kendoDatePicker is not a function

    چه مواردی رو باید برای رفع خطا بررسی کنم؟
    • وحید نصیری در ۱۳۹۴/۰۳/۰۳ ۲۰:۳۶
      - این مشکل از محل تعریف jQuery هست. بررسی کنید در فایل layout، تعریف مدخل jQuery قبل از تعریف section JavaScript فوق باشد. اگر پس از آن باشد یا حتی jQuery چندبار در صفحه شروع شده باشد، این مشکل را خواهید داشت.
      + از ASP.NET MVC 4 به بعد، نیازی به ذکر Url.Content در Viewها نیست و Razor قابلیت پردازش ~ را هم پیدا کرده‌است؛ یعنی می‌تواند از تعاریفی مانند "src="~/path/file.js استفاده کند.
      • علی یگانه مقدم در ۱۳۹۴/۰۳/۰۳ ۲۰:۵۹
        ممنون
        در layout کد زیر هست
         <!-- Bundeling-->
    @BundleConfig.AddStyles("~/bundles/css/",
            "~/content/css/bootstrap.min.css",
            "~/content/css/bootstrap-reset.css",
            "~/content/css/style.css",
            "~/content/css/style-responsive.css"

                            )
    @BundleConfig.AddScripts("~/bundles/js",
                            "~/Scripts/jquery-1.9.1.min.js",
                            "~/Scripts/jquery.validate.min.js",
                            "~/Scripts/jquery.unobtrusive-ajax.min.js",
                            "~/Scripts/jquery.validate.unobtrusive.min.js",
                            "~/Scripts/bootstrap.min.js")
    @RenderSection("JavaScript", required: false)
        برای اطمینان از دوبار تعریف شدن جی کوئری خط تعریف فایل‌های جاوااسکریپت رو هم حذف کردم که خطای شناسایی $ رو داد و بعد هم به طور جداگانه جی کوئری رو در همون section تعریف کردم و باز خطای قبلی
        • وحید نصیری در ۱۳۹۴/۰۳/۰۳ ۲۱:۴۰
          - کد نهایی قسمت اول در اینجا ارسال شده و فقط در آن از این یک سطر، در آخر کمک گرفته شده‌است:
           <script src="js/kendo.all.min.js" type="text/javascript"></script>
          - مواردی که در انتهای بحث ذکر شدند، قابلیت ترکیب ندارند؛ یعنی نمی‌توانید تمام اسکریپت‌های Kendo UI را به نحوی که ذکر شد در کنار هم قرار دهید. هدف بیشتر طرح گروه بندی آن‌ها بود. به همین جهت فقط از kendo.all استفاده کنید.
          • علی یگانه مقدم در ۱۳۹۴/۰۳/۰۴ ۱۷:۳۸
            ممنون
            مشکل از همون دوبار تعریف جی کوئری بود.
            با inspect element که بالا اومدم فایل‌های جاوااسکرپیتی رو بررسی کردم یک فایل با نام js بود که محتواش کدهای جی کوئری بود و توسط قالب بوت استراپ در آخر صفحه مستر صدا زده میشد و برای همین بود موقعی که فایل‌های جی کوئری رو از صفحه حذف کردم  خطای ناشناخته $ اومد ، چون هنوز بار نشده بوده.
            نمیدونم چرا خود قالب دو مرتبه این فایل رو صدا زده بود.
            بابت گرفتن وقت دوستان عذر میخوام
  • حسینی تبار در ۱۳۹۴/۱۱/۰۱ ۲۱:۵۷
    در حال مطالعه فریم ورکهای جاوااسکریپتی طی مقالات سایت جاری هستم
    با توجه ب گستردگی این فرم ورکها مثل  کندو ،  آنگولار ، ناک اوت ،   React ، Ember    و ..
    با توجه به زمان حال و توسعه ی  برنامه‌های حاضر و گستردگی منابع برای هر کدام ، انتخاب بهتر کدام است و یا برای چه موردی از چه فریم ورکی استفاده می‌شود ؟
    واقعا دچار اختلال در انتخاب شدم ، لطفا راهنمایی کنید. تشکر
    • محسن خان در ۱۳۹۴/۱۱/۰۱ ۲۳:۲۱
      - کندو یو آی بیشتر یک مجموعه کامپوننت هست که قابلیت یکپارچه شدن با مثلا یک فریم ورک ساخت برنامه‌های تک صفحه‌ای وب مثل انگولار‌جی‌اس رو داره.
      - برای انتخاب بین فریم ورک‌های SPA هم بهتر هست قسمت اشتراک‌های سایت را بررسی کنید (خصوصا گروه بندی‌های آن‌ها را).
  • وحید نصیری در ۱۳۹۶/۰۶/۱۷ ۱۵:۳۴
    جهت اطلاع

    تمام مثال‌های این سری به ASP.NET Core منتقل شدند. کدهای نهایی آن‌ها را از مخزن کد KendoUI.Core.Samples می‌توانید دریافت کنید.
    این مثال‌ها بر اساس Kendo UI Professional R2 2017 SP1 تهیه شده‌اند (فایل‌های مورد نیاز هم پیوست شده‌اند).
  • احمد نهازی در ۱۳۹۶/۱۱/۱۷ ۲۰:۵۹
    با توجه به اینکه kendo-ui برای asp.net core خیلی از موارد رو ساپورت نمیکنه، به نظر شما چه جایگزینی برای کندو میشه پیدا کرد؟
    • وحید نصیری در ۱۳۹۶/۱۱/۱۷ ۲۱:۶
      Angular؟
      ضمن اینکه اگر با پشت صحنه‌ی جاوا اسکریپتی این کتابخانه‌ها کار کنید، نیازی به wrapper ندارید. پشتیبانی نمی‌کند، معنا نخواهد داشت. این مورد دقیقا مطلبی هست که چندین سال قبل در نظرات این مطلب ذکر شده. این سری تهیه شده در سایت هم صرفا بر اساس این پشت صحنه‌ی جاوا اسکریپتی هست و نه هیچ wrapper خاصی. به همین جهت تمام مثال‌های آن به سادگی و تمام و کمال به ASP.NET Core منتقل شدند.
  • کاوان در ۱۳۹۷/۰۲/۱۵ ۱۲:۲۴
    آیا استفاده از فایلهای js, Css کندو رایگانه و استفاده از آن در پروژه مشکلی پیش نمیاد؟
    • وحید نصیری در ۱۳۹۷/۰۲/۱۵ ۱۲:۴۰
      قسمت «مجوز استفاده از Kendo UI» را در متن مطالعه کنید. بنابراین:
      - آیا بسته‌ی تجاری و غیر سورس باز آن رایگان است؟ خیر؛ نیست!
      - آیا این بسته‌ی تجاری دارای time bomb است؟ خیر. تنها مشکلی که در آینده خواهید داشت دسترسی به فایل‌های جدید آن است که صرفا در اختیار مشترکین آن قرار می‌گیرد. این بسته‌ی تجاری حتی به همراه سورس کامل غیر فشرده شده‌ی آن هم هست.