آموزش طراحی سایت | آموزش طراحی ui

[ToooPDL]

سلام
مجموع مقالات در مورد استاندرد های ui و الگو هایی که در سیستم های تحت وب مورد استفاده هستند، در این تاپیک قرار می گیرد.

---------- Post added at 08:59 PM ---------- Previous post was at 08:58 PM ----------

Crud به نوع فرم های ساده در وب اپلیکشن گفته می شود و مخففی از کلمات Create, Read, Update, Delete هستند.
در این Mode چهار صفحه وجود دارد که هر کدام نیز می تواند در یک UserControl مجزا قرار بگیرد.
این حالت معمول ترین Mode هست که در هر Web Application وجود دارد و از لحاظ کاربردی شباهت زیادی به Composite دارد.
برای اینکه استفاده از Composite یا Crud سلیقه ای نشود، ما یک شرط برای استفاده قرار دادیم که زمانی که تعداد فیلد هایمان بیشتر از ۱۰ مورد است از Crud استفاده خواهیم کرد و در تعداد فیلد های کمتر باید از Mode Composite استفاده کنیم.

ListView
حالت پیش فرض ListView که شامل یک Gridview می باشد که برای مثال در پایین آن دکمه های ToolbarButton (جدید – حذف) چیده می شوند.
توجه شود که هیچ دکمه ی دیگری در حالت ToolbarButton قرار نمی گیرد.
در کنار هر گرید لیستی از سایر رخداد هایی که قرار است روی یک یا چند ردیف انجام شود قرار می گیرد که باید به صورت LinkButton باشند.
در روی هر ردیف GridView فقط سه رخداد (نمایش – ویرایش – حذف) قرار می گیرد.

Insert
بعد از کلیک روی دکمه جدید واقع در ToolbarButton وارد صفحه جدید می شویم.
این فرم در یک User Control جدا قرار دارد و پس از لود شدن برخلاف Mode Composite، دیگر GridView در این Mode نمایش داده نخواهد شد.
پس از پر کردن فیلد ها و کلیک روی دکمه تایید اطلاعات در بانک اطلاعاتی ذخیره می شود و سپس فرم برای ایجاد یک رکورد دیگر خالی می شود.

Edit
کاملا شبیه حالت Insert می باشد با این تفاوت که اطلاعات قبلی داخل فیلد ها پر شده اند و به جای دکمه تایید، دکمه ذخیره وجود دارد و پس از کلیک روی دکمه ذخیره به Mode ListView بازمی گردیم.

Readonly
این حالت نیز مانند دو Mode بالا می باشد با این تفاوت که به جای فیلد ها، مقادیر فیلد ها را در Lable قرار می گیرند هیمنطور از این صفحه دکمه ای برای رفتن به حالت ویرایش و همینطور دکمه ای برای حذف رکورد جاری وجود دارد که بعد از حذف به Mode Listview بازمی گردیم.
عکس زیر را تهیه کردم تا درک مطلب برای شما راحت تر شود

هر کدام از مربع ها، نشان دهنده یک صفحه از حالت کراد هستند.

مولف: میثم ضابط

---------- Post added at 09:06 PM ---------- Previous post was at 08:59 PM ----------

استاندارد حالت کامپوزیت
در این حالت تمام Mode های فرم، مانند Insert, List Vew, Update, Detail View در یک صفحه قرار دارند.
به این صورت که به جای در نظر گرفتن چهار صفحه مجزا برای هر Mode، تمام Mode ها در یک صفحه و هر کدام داخل یک panel مجزا قرار می گیرند.
در حالت پیش فرض Mode ListView در پایین و مد Detail View در بالای لیست نمایش داده می شود.
با کلیک روی LinkButton ویرایش، مشاهده و یا دکمه جدید پنل بالا تغییر می کند، اما پنل پایین که محل Mode ListView می باشد همواره ثابت است.
دکمه هایی که در حالت Inster, Edit, Readonly وجود دارند مانند حالت Crud می باشند، البته دیگر لازم نیست بعد از کلیک روی دکمه ذخیره در Edit Mode به صفحه ListView بر گردیم.
بعد از کلیک روی دکمه تایید در حالت Insert فقط فرم خالی می شود و بعد از کلیک روی دکمه ذخیره در حالت Edit در همان حالت باقی می مانیم و فقط پیغامی مبنی با موفقیت ذخیره شدن اطاعات به کاربر نمایش داده می شود و کاربر می تواند بار دیگر همان فرم را تغییر دهد، همانطور که می دانید در این حالت در Form Template Crud Forms Standard باید به حالت ListView باز می گشتیم.

توجه شود که تمام چهار Mode باید به صورت Callback تغییر کنند و نباید در این صفحه PostBack وجود داشته باشد.
همینطور Composite بودن یک فرم می تواند به عنوان یک قانون برای Form Template های دیگر نیز اجرا شود و بسته به تعداد رکورد های حالت Insert یا Edit تصمیم می گیریم از این حالت استفاده کنیم یا خیر.
این حالت طراحی فرم ها را فقط با توجه به نظر خودم که یک طراح وب هستم ارائه دادم، و طراحان سیستم می توانند برا اساس نیاز های سیستم مورد نظر و همچنین نظرات خودشان از این استاندار استفاده نمایند. البته این نوع استاندارد ها بیشتر بدرد پروژه های تحت وب یا همان وب اپلیکشن ها می خورد که معمولا با دات نت ایجاد می شوند.

مولف: میثم ضابط