آویزه : easy-element-definer

سری آموزش های طراحی وب با فریم ورک tedjs (ساخت todo list)

یکی از مثال هایی که اغلب اوقات زده می شود ، طراحی todo list می باشد.

برای شروع کار ، ما نیز می خواهیم لیست انجام کار ها را طراحی کنیم. این عنصر ، نمایش دهنده یک لیست از فعالیت ها خواهد بود که امکان آن را دارد که داده به آن اضافه شود ، حذف شود و همچنین داده های پیشفرض را بخواند.

فایلی ایجاد نمایید. در اینجا فایل lib.js را ایجاد می نماییم.

حال عنصر خود را ابتدا تعریف می کنیم. برای تعریف عنصر می بایست به صورت زیر عمل کرد:

نام تگ عنصر را todo می گذاریم

همانطور که مشاهده می کنید از تابع define ، زیر مجموعه شی ted استفاده کرده ایم. با این کار یک عنصر با نام todo ساخته ایم که هیچ گونه مشخصه (Attribute) مخصوصی ندارد.

با این کار عنصر به صورت پیش فرض با display:none در نظر گرفته می شود.

در قدم بعد باید تابع سازنده عنصر را طراحی کنیم.

برای ایجاد تابع سازنده ، از تابع ted.create استفاده می کنیم. ورودی اول این تابع تابع تعریف شده می باشد و ورودی دوم آن تابع سازنده می باشد.

حال شروع به نوشتن محتویات تابع می نمایید.

ابتدا متغیر های مورد نیاز را تعریف می کنیم.

عنصر todo دارای عناصر فرزند می باشد. عنصر list ، insert و remove ..

عنصر list برای وارد کردن مقدار های ابتدایی به کار گرفته می شود.

عنصر insert درصورت استفاده می توانید نامی برای دکمه وارد سازی اطلاعات به لیست تعیین نمایید.

و عنصر remove نیز برای تعیین نام دکمه حذف از لیست به کار می رود.

درصورتی که از مقادیر بالا استفاده نشود ، مقادیر پیش فرض استفاده خواهند شد.

در قدم بعدی می بایست درون html را خالی کرد تا محتوای جدید وارد شود.

در این مرحله لیست های ابتدایی درصورت وجود را وارد HTML می کنیم. لیست های ابدایی درون متغیر list ذخیره شده اند.

در اینجا اپلیکیشن ایجاد شده و اطلاعات نمایش داده شده اند. اما در صورتی که بخواهیم اطلاعاتی را اضافه یا حذف کنیم ، نمی توانیم. پس می بایست برای دکمه های insert و remove ، رویدادی ایجاد کنیم تا به عمل کاربر واکنش دهند.

کار کتابخانه به آخر رسیده. تنها یک مرحله مانده. اما برای پیشرفته تر کردن عنصر می توانیم تدبیری بیندیشیم که درصورتی که از طریق جاوا اسکریپت عنصر list به اپلیکیشن اضافه شد ، بتواند مقدار را ارزیابی کرده و وارد نماید. پس از رویداد inchange که مختص tedjs می باشد استفاده می کنیم تا ورودی های جدید را بررسی کرده و وارد نماییم.

در آخر نیز برای اینکه عنصر نمایش داده شود از تابع show  استفاده می نماییم.

در اینجا کار تمام است. کتابخانه ما ایجاد شد و ما می توانیم از آن استفاده نماییم. در زیر می توانید نمونه اجرا شده را ببینید ، کد ها را تغییر دهید و نتیجه را ببینید.



دسته بندی: آموزش, فریم ورک تد جی اس, مقاله

سری آموزش های طراحی وب با فریم ورک tedjs (شروع کار)

سری آموزش های طراحی وب با فریم ورک tedjs (شروع کار)

از این قسمت به شروع به توضیح فریم ورک در قالب مثال هایی می نماییم.

برای شروع ابتدا می بایست فریم ورک را به وبسایت خود متصل نمایید.

برای این کار ، می توانید فریم ورک را دانلود نمایید یا به صورت برخط استفاده کنید.

برای دریافت یا استفاده از آخرین نسخه ، ابتدا به وبسایت tedjs مراجعه نمایید. به صفحه اصلی بروید . از منوی کشویی minified را انتخاب نمایید و بر روی دانلود کلیک نمایید و برای نمایش لینک برخط فریم ورک ، گزینه Online link  را انتخاب کنید و بر روی دانلود کلیک نمایید.

فرض می کنیم از نسخه آنلاین استفاده می کنیم. اولین نکته ای که قابل ذکر می باشد ، این است که فریم ورک دارای تنظیماتی است که می توان قبل از اجرا ، آن ها را تغییر داد.

تنظیمات مورد نیاز در متغییر Ted_setting می بایست ذخیره شود.

در حال حاضر تنها دو مقدار را می توان تغییر داد. آدرس سرور کتابخانه ها و نحوه نمایش خطا ها در حین اجرا.

آدرس سرور در توابع include و ainclude برای دریافت کتابخانه ها استفاده می شود. در صورتی که کتابخانه شخصی دارید می توانید آدرس آن را در URL وارد نمایید. توجه نمایید که در انتهای Query علامت مساوی قرار دهید، زیرا نام کتابخانه به انتهای آدرس اضافه می شود.

مقدار libError  نیز برای شخصی سازی نمایش خطا به صورت alert می باشد. درصورتی که مقدار دهی نشود ، خطایی نمایش داده نخواهد شد.

دو مقدار {{name}}  و {{error}} نیز یک template  برای نمایش نام کتابخانه و مشخصات خطا می باشد.

اعمال تنظیمات اختیاری می باشد.

نکته مهمی که در این کتابخانه وجود دارد این است که ، این کتابخانه دارای دو گروه توابع می باشد.

توابع شی tedApi و توابع شی ted.

از آن رو که tedjs یک فریم ورک کتابخانه گراست ، تمامی فعالیت های طراحی DOM ها می بایست در قالب کتابخانه نوشته شود و به پروژه اضافه گردد.

شی ted که دارای توابع طراحی DOM ها می باشد ، تنها در کتابخانه هایی که از طریق توابع include و ainclude اجرا می شوند قابل دسترس می باشند. اما شی tedApi که دارای توابع عمومی و اساسی فریم ورک می باشد چه در داخل و چه در خارج از کتابخانه ها قابل دسترس می باشد.

وارد کردن کتابخانه های به دو صورت می باشد.

اولین حالت استفاده مستقیم از کتابخانه ها از طریق Tedjs CDN ، که به صورت آنلاین کتابخانه از مخزن گرفته می شود.

برای فراخوانی کتابخانه های آنلاین می بایست از ID مخصوص آن ها استفاده کنید. هرکتابخانه دارای یک آیدی می باشد که به صورت زیر تعریف می شود:

Username.LibraryName.NameSpace

مانند system.aml.std

برای فراخوانی می توان از دو تابع include و  ainclude به صورت زیر استفاده کرد.

در حالت دوم که حالت پیش نهاد شده می باشد ، فایل کتابخانه از مخزن دانلود شده و بر روی هاست بارگزاری می شود. حال می توانید آدرس فایل را مشخص نمایید. در این حالت برای مشخص کردن اینکه قصد بارگزاری یک فایل داخلی را دارید می بایست از کلمه کلیدی file: استفاده نمایید.

حال می توانید کتابخانه خود را ایجاد و بارگزاری نمایید.

 

دسته بندی: فریم ورک تد جی اس, مقاله

سری آموزش های طراحی وب با فریم ورک tedjs (معرفی)

تد جی اس (Tedjs) یا Easy Element Definer ، یک فریم ورک کتابخانه گراست که به صورت متن باز و رایگان عرضه شده است.

Tedjs به شما کمک می کند تا بتوانید عناصر خود را طراحی کنید و یا از کتابخانه های دیگر توسعه دهندگان tedjs استفاده کنید. درون فریم ورک بیشتر توابع مورد نیاز برای طراحی گنجانده شده است که نیاز طراح را به کتابخانه های دیگر کمتر می کند.

با استفاده از این فریم ورک کدهای شما تمیز تر ، خوانا تر و قدرتمند تر خواهد شد.

تد جی اس علاوه بر توابع پایه ، دارای دو بخش اساسی می باشد.

اولین بخش ، توابع طراحی DOM ها می باشد و قسمت دوم تابع طراحی انیمیشن با استفاده از توابع درجه دو می باشد.

با استفاده از توابع طراحی DOM ، طراح قادر خواهد بود تا عناصر ، کامنت نود ها و تکست نود های خود را طراحی کند.

طراحی DOM ها باعث می شود تا از تکرار و شلوغی و نامفهومی کدهای HTML کاسته شود.

تد جی اس یک فریم ورک نوپا و متن باز رایگان و کتابخانه گرا ، تحت اجازه نامه MIT می باشد که سعی کرده بتواند طراحی چند وجهی یک صفحه وب که شامل کد های جاوا سکریپت ، سی اس اس و اچ تی ام ال می باشد را در یک فریم ورک تجمیع کند.

چرا باید از تدجی اس استفاده کنیم؟

ابتدا  باید بگویم در استفاده از هر کتابخانه یا فریم ورکی ، اجباری وجود ندارد. این بستگی به برنامه نویس و نیازهایش دارد که ببیند کجا ، چه چیزی مورد نیاز است.

اما دلایلی برای پیشنهاد این فریم ورک وجود دارد:

  • تد جی اس یک فریم ورک کتابخانه گراست. یعنی هسته اصلی ، دارای امکانات معقول و حداقلیست و برای استفاده از امکانات دیگر می بایست از کتابخانه های موجود در Tedjs بر اساس نیاز خود استفاده نمایید. این عمل باعث می شود هزینه اضافی بر روی بارگزاری و اجرای سایت ایجاد نشود و به مراتب باعث افزایش سرعت بارگیری سایت می شود. از طرفی به دلیل وجود سامانه برخط ارائه محتوا محلی تد جی اس[۱] نیازی به بارگزاری کتابخانه ها در وبسایت خود ندارید. اگرچه که پیشنهاد می شود ، کتابخانه ها در وبسایت بارگزاری شود.
  • وجود توابع ابتدایی مورد نیاز علاوه بر توابع ایجاد DOM ها. این توابع نیاز برنامه نویس را از نیاز های ابتدایی به سایر کتابخانه ها مانند Jquery برطرف می نماید.
  • وجود توابع برای دسترسی کامل کوکی ها ، اطلاعات URL مانند Hash ها و رشته های پرس و جو(GET) ، سر بارگزاری توابع سیستمی جاوا اسکریپت برای بازدهی بهتر ، تابع رندوم اختصاصی و…
  • وجود توابع کنترلی برای کنترل هر نوع داده در جاوا اسکریپت و اعتبار سنجی URL و ایمیل.
  • وجود تابع پیشرفته انیمیشن برای ایجاد انیمیشن ها با استفاده از مجموع منحنی های درجه دو (بدون استفاده از CSS)
  • وجود کتابخانه AML برای افزایش سطح دسترسی برنامه نویس.( این کتابخانه همانند Angularjs و apml عمل می کند)
  • وجود زبان اختصاصی برای افزایش هرچه بیشتر و بهتر قدرت و سرعت برنامه نویس و همچنین کاهش حجم کد های برنامه.( این زبان به زودی عرضه خواهد شد )

این امکانات تنها امکانات هسته این فریم ورک می باشد(با استثنا موارد ۶ و ۷). شما می توانید کتابخانه خود را ایجاد نمایید و با دیگران به اشتراک بگزارید.

شبکه محلی ارائه محتوا تد جی اس[۱] این امکان را به برنامه نویسان می دهد که کتابخانه خود را از این طریق در دسترس تمامی برنامه نویسان و گسترش دهندگان قرار دهد.

مستندات و پشتیبانی

فریم ورک تد جی اس از مستندات کاملی از تمامی توابع موجود در دسترس، بهره می برد که کاربران می توانند از آن استفاده نمایند. این مستندات به زبان انگلیسی نوشته شده اند اما دارای فهم ساده و مثال هایی برای درک بهتر می باشند. به زودی نسخه فارسی نیز ایجاد خواهد شد. برای دسترسی می توانید به سایت تد جی اس مراجعه نمایید.[۲]

در بحث پشتیبانی نیز ، برنامه نویسان و گسترش دهندگان می توانند از طریق ایمیل و کانال تلگرام مشکلات خود را مطرح نمایند.[۳]

تفاوت تد جی اس با دیگر فریم ورک ها چیست؟

درحال حاضر نمی توان با باقی فریم ورک ها مقایسه ای انجام داد. تمامی فریم ورک ها از ابتدای کار دارای شباهت هایی با باقی فریم ورک ها بوده اند اما با مرور زمان و با کمک گسترش دهندگان کتابخانه ها و فریم ورک های کوچک به مرجع هایی در حوزه خود تبدیل شده اند.

به طور کلی هدف تمامی فریم ورک ها ایجاد یک چهارچوب تقریبا ثابت برای برنامه نویسان می باشد که بتوانند بر اساس آن چهارچوب، وب سایت خود را طراحی نمایند. اما این ایده در تد جی اس کاملا نقض می شود. هدف تد جی اس این نیست که شما از یک چهارچوب ثابت استفاده کنید، هدفش این است که هر برنامه نویس چهارچوب خود را طراحی و استفاده کند. هدف ارائه آزادی عمل کامل تری در طراحی و ایجاد اپلیکیشن ها می باشد.


[۱] Tedjs CDN

[۲] https://tedjs.org

[۳] ایمیل : porya.grand@outlook.com

تلگرام : http://t.me/poryagrand



دسته بندی: فریم ورک تد جی اس, مقاله