انجمن‌ها

قبل از شرح نحوه طراحی فرمها در محیط وب بهتر است ابتدا با ساختار و عناصر این فرمها در وب آشنا شویم:

ساختار فرمهای نمایش در وب 

در این مقاله وقتی صحبت از فرمهای نمایشی می شود منظور دو نوع فرم است:1- فرمهای عمومی در گزارشها  2- فرمهای انجام وظیفه

1- فرمهای عمومی در گزارشها

ابتدا بهتر است نگاهی به یک فرم نمایشی نمونه در محیط وب داشته باشیم:

 

در این مثال، فرم «مشخصات کار» را ملاحظه می کنید که اطلاعات این فرم  در چند Tab به نامهای کار، فیلدها، پیوست، مدیریت، و تاریخچه  دسته بندی شده است. از میان این Tab ها، زبانه «فیلدها» فرم عمومی پیش فرض در گردش کار را به شکل زیر نمایش می دهد:

 

همانطور که ملاحظه می کنید این فرم از سه قسمت زیر تشکیل شده است:

1- نام Tab ها

2- ناحیه جستجوی فیلدها

3- ناحیه نمایش محتوای فیلدهای گردش کار

 

2- فرمهای انجام وظیفه

به یک فرم انجام وظیفه نمونه توجه کنید:

همانطور که می بیندی این فرم از چهار قسمت زیر تشکیل شده است:

1- نام Tab ها

2- ناحیه جستجوی فیلدها

3- ناحیه نمایش محتوای فیلدهای گردش کار

4- ناحیه نمایش یادداشت اجرای وظیفه

احتمالا متوجه شدید که برای فرمهای انجام وظیفه فقط یک ناحیه دیگر اضافه شده که یادداشت انجام وظیفه را نمایش می دهد. 

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

 

تنظیمات و طراحی فرمهای نمایشی در وب

در این مقاله تنها به مورد 3 یعنی مساله طراحی فیلدها و چینش آنها می پردازیم و موارد دیگر را در مقالات مستقل بررسی خواهیم کرد.

چینش و جایگذاری فیلدها 

تا کنون تنظیمات فرمهای نمایشی در محیط کلاینت وب از قبیل نحوه چینش و نمایش فیلدها  از طریق محاوره تعریف فرمهای نمایشی در کلاینت ویندوز انجام می شد. نحوه کار به این شکل بود که  فیلدها طبق ترتیبی که در فرمها تعیین می شد (Tab Order)   بطور پیش فرض به شکل یک ستونی و در صورت تنظیم کاربر، به شکل دو یا سه ستونی هم نمایش داده می شد. در نمایش چند ستونی نیز کاربر هیچ نقشی در تعیین سطر ، ستون و عرض سطر و ارتفاع ستون نداشت و سیستم بطور خودکار و بر اساس یک الگوریتم از پیش تعیین شده، فیلدها را به همان ترتیب Tab Order و با عرض تعیین شده نمایش می داد. این تنظیم خودکار چند ستونی در بسیاری از موارد با اشکال روبرو می شد و نتیجه آن به شکلی نبود که مطلوب کاربر باشد.

کاستی های نمایش خودکار چند ستونی

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

حالت مطلوب

 

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

حالت خودکار

 

کاملا واضح است که این طرز نمایش خیلی مناسب نیست و بهتر است که تقسیم ستونها با در نظر گرفتن محتوا و ماهیت آنها باشد.

 

2. محدود بودن تقسیم ستونها به سه ستون

در حالت خودکار، سیستم بطور پیش فرض، گزارش را یک ستونی نمایش می داد و کاربر برای افزایش ستونها دو انتخاب داشت: دو ستونی یا سه ستونی. لذا امکان نمایش چند فیلد کوچک در 4 یا مثلا 5 ستون وجود نداشت. به مثال زیر در این زمینه توجه کنید:

 

ملاحظه می کنید که دو سطر اول از این فرم چهار ستونی است در حالی که در حالت خودکار، نهایتا می توانستیم سه ستون داشته باشیم و طراحی فرم فوق امکان پذیر نبود.

 

3. همسان بودن تعداد ستونها در تمام سطرها

در حالت خودکار، تمام سطرها به ستونهای مساوی تقسیم می شود یعنی برای مثال اگر حالت 3 ستونی را انتخاب کنیم آنگاه تمام سطرهای گزارش سه ستونی خواهد شد در حالیکه در بعضی موارد کاربر ممکن است مثلا یک سطر را به دو ستون و سطر دیگر را به سه ستون تقسیم کند. به مثال زیر توجه کنید:

حالت مطلوب

 

ملاحظه می کنید که در این فرم، یک سطر 2 ستونی، یک سطر 3 ستونی و سطر آخر تک ستونی است. این امکان، قابلیت دسته بندی محتوایی فیلدها در سطرها را در اختیار طراح قرار می دهد به این معنی که فیلدهای با محتوای مشابه یا مرتبط با هم را می توانیم در یک سطر جانمایی کنیم.

حالت خودکار

 

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

نحوه جانمایی فیلدها در فرمهای وب

در نسخه حاضر (15.62) پروسه جانمایی در سه مرحله انجام می شود:

1. تعیین موقعیت فیلدها در فرم کلاینت وب
2. ذخیره تنظیمات فرم در فایل به فرمت json
3. فراخوانی فایل json در محاوره تعریف فرم در کلاینت ویندوز

 

در ادامه مطلب، این مراحل به ترتیب شرح داده می شود:

مرحله اول: تعیین موقعیت فیلدها در فرم کلاینت وب

فرض کنید در گردش کار پرسنلی یک فرم عمومی با نام «فیش حقوقی5» به شکل زیر طراحی شده است:

 

حال اگر این فرم را در کلاینت وب مشاهده کنید به شکل زیر دیده می شود:

ملاحظه می کنید که در ابتدای کار و به شکل پیش فرض، فیلدهای فرم، به ترتیب Tab Order نمایش داده می شود. ضمنا این فرم تک ستونی است یعنی این که در هر سطر، تنها یک فیلد با عرض تمام صفحه نمایش داده شده است. حال برای طراحی این فرم و تعیین موقعیت های جدید و دلخواه برای فیلدها باید تکمه ترکیبی Ctrl+Shift+F8 را فشار دهید. به این ترتیب محاوره کوچکی با عنوان «طراحی فرم» به شکل زیر روی صفحه باز می شود:

محاوره طراحی فرم دارای دو Tab بنامهای «فیلد» و «گزینه» می باشد که در حالت پیش فرض روی tab «فیلد» قرار دارد و تنظیمات جانمایی فیلدها نیز در این Tab قرار دارد*. در این محاوره کلیدهایی وجود دارد مثل خواندن از فایل و ... که برای طراحی جانمایی  فیلدهاست و از طریق این کلیدها می توانیم طراحی خود را در یک فایل ذخیره و یا فراخوانی کنیم یا اینکه طراحی خود را بازنشانی کنیم و کار را از ابتدا آغاز کنیم. این کلیدها در بخشهای بعدی و در جای خود توضیح داده خواهد شد.

*: محاوره «گزینه ها» حاوی امکاناتی برای انتخاب دلخواه بخشهای مختلف محاوره (Tabها، ناحیه جستجو و ...) است که در پیوست به آن خواهیم پرداخت. 

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

حال برای تغییر جانمایی هر فیلد باید روی عنوان آن کلیک کنید. برای مثال در شکل زیر می خواهیم جانمایی فیلد «نام و نام خانوادگی» را تعیین کنیم:

 

ملاحظه می کنید که به محض کلیک روی فیلد، در ناحیه «جانمایی»، چهار پارامتر ستون، سطر، گستره ستون و گستره سطر برای تعیین جانمایی این فیلد روی صفحه ظاهر می شود**. برای درک بهتر این مفاهیم این نکته را در نظر بگیرید که هر فرم وب در واقع یک جدول چند سطری و چند ستونی است. بنابراین بر مبنای این توضیح، مفهوم سطر و ستون کاملا مشخص است اما در مورد گستره سطر و ستون باید بگوییم گستره ستون یعنی این که این فیلد چند ستون را در بر می گیرد و به عبارت دیگر عرض فیلد چند ستون است. گستره سطر نیز یعنی اینکه این فیلد چند سطر را در بر می گیرد برای فهم بهتر این مطلب به مثالهای زیر توجه کنید:

**: علاوه بر ناحیه جانمایی نواحی دیگری از قبیل «اجرای وظیفه» و «کارپوشه» را نیز در این محاوره ملاحظه می کنید که ارتباطی به بحث ندارند و در مقالات مستقل به آنها پرداخته خواهد شد.

مثالهای گستره ستون

مثال 1: گستره ستونی 3

 

در این مثال، گستره ستونی فیلد «نام کالا» برابر با 3 است و ملاحظه می کنید که در یک جدول 4 در 3 عرضی برابر با 3 ستون را اشغال کرده است. لازم به توضیح است که تمام فیلدهای دیگر در این فرم، گستره ستونی 1 را دارند. حال به شکل زیر نگاه کنید:

مثال 2: گستره ستونی 2

 

در مثال فوق، گستره ستون فیلدهای «نام کالا» و «قیمت» را برابر با 2 قرار داده ایم. ملاحظه می کنید. که هر کدام از این فیلدها عرضی برابر با دو ستون را اشغال کرده اند.

مثالهای گستره سطر

مثال 1: گستره سطر =2

در مثال زیرا، گستره سطر فیلد «وجه پرداختی با تخفیف» برابر 2 است :

 

ملاحظه می کنید که این فیلد به اندازه 2 سطر از جدول را اشغال کرده است.

مثال 2:  گستره سطر= 3

 

در این مثال، فیلد «نام کالا» دارای گستره سطر 3 است و ملاحظه می کنید که 3 سطر از جدول فرم را اشغال کرده است.

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

 

نحوه جانمایی فیلدها

همانطور که قبلا گفته شد، در ابتدای کار ، فرم تحت وب یک فرم یک ستونی و بر مبنای Tab Order مرتب شده است. منشا این فرم از نمایش در اینجاست که  در این مرحله برای تمام سطرهای فرم،  پارامتر شماره سطر به درستی تعیین شده است و در کنار آن، سه پارامتر دیگر یعنی شماره ستون، گستره سطر و گستره سطور برابر با 1 تعیین شده اند.  لذا برای تغییر جانمایی فیلدها باید در یک پروسه ای که در ادامه شرح داده می شود، این پارامترها را متناسب با فرم دلخواه خود تعیین کنید تا فرم مورد نظر شما طراحی شود. 

شروع به طراحی از سطر اول

حال نوبت این است که فرم را از حالت ساده و پیش فرض تک ستونی به فرم دلخواه خود با سطرها و ستونهای دلخواه خود تغییر دهیم. در این مرحله از سطر یک شروع می کنیم. برای نمونه در مثال فوق می خواهیم دو فیلد نام و نام خانوادگی و شماره پرسنلی در یک سطر و با گستره ستون مشابه قرار دهیم. برای این کار ابتدا روی فیلد نام و نام خانوادگی کلیک می کنیم و مختصات آن را به شکل زیر، ملاحظه می کنیم:

 

 

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

 

ملاحظه می کنید فیلد شماره پرسنلی دقیقا در جایی که می خواستیم قرار گرفته است. نکته ای که اینجا باید دقت کنید این است که برای گستره ستون و گستره سطر همان مقادیر پیش فرض 1 ثبت می شود.

افزایش عرض فیلد نام و نام خانوادگی

حال فرض کنید به دلیل اینکه معمولا محتوای فیلد نام و نام خانوادگی بیشتر از فیلد شماره پرسنلی است لذا بهتر است که با تعیین گستره ستون، عرض فیلد نام و نام خانوادگی را بیشتر از شماره پرسنلی تعیین کنیم. فرض کندی می خواهیم عرض نام و نام خانوادگی 3 برابر عرض شماره پرسنلی باشد. برای این کار باید مطابق شکل زیر برای فیلد نام و نام خانوادگی گستره ستون را برابر 3 و برای شماره پرسنلی گستره ستون را برابر 1 قرار دهیم:

ستون نام و نام خانوادگی

 

ستون شماره پرسنلی

 

در ادامه کار، می خواهیم سطر دوم را به صورت چهار ستونی بچینیم.  چهار فیلد مورد نظر برای سطر دوم را در شکل زیر ملاحظه می کنید:

 

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

حقوق پایه: سطر 2   ستون 1

 

اضافه کاری:  سطر 2   ستون 2

 

حق مسکن:   سطر 2    ستون 3

 

حق اولاد: سطر 2    ستون 4

 

ملاحظه می کنید که سطر دوم به شکل چهار ستونی تنظیم شد. سطر سوم نیز به شکل 3 ستونی و شامل فیلدهای زیر است:

 

این فیلدها را نیز مطابق روشی که توضیح داده شد با مختصات سطر 3 و ستونهای به ترتیب زیر تنظیم کنید:

حق عائله مندی:  سطر 3    ستون 1

بیمه :  سطر 3     ستون 2

بیمه تکمیلی سطر 3     ستون 3

به این ترتیب سطر سوم به شکل زیر به نمایش در می آید:

 

همانطور که ملاحظه می کنید، در این سطر، ستون 4 خالی است. این وضعیت ممکن است برای بعضی از کاربران مطلوب نباشد و بخواهند این سه ستون تمام عرض سطر را با عرض یکسان اشغال کنند. در اینجا به یکی از محدودیت های طراحی فرم در وب برخورد می کنیم:

قاعده مهم: تعداد ستونها در تمام سطرها مشابه است. در واقع فرم وب یک جدول است که تعداد ستونهای جدول را سطری که بیشترین تعداد ستون را دارد تعیین می کند. برای مثال در فرم بالا، سطر 2 شامل 4 ستون است و لذا جدول فرم وب به شکل چهار ستونی خواهد بود در نتیجه تمام سطرها دارای چهار ستون خواهد بود.

و در انتها فیلد «خالص پرداختی» را در سطر 4 و ستون 2 با گستره ستون 2 قرار می دهیم. شکل انتهایی فرم تحت وب به شکل زیر می باشد:

 

حال در مرحله بعد باید این مختصات را در یک فایل خروجی ذخیره کنیم.

 

مرحله دوم: ذخیره تنظیمات فرم در فایل به فرمت json

همانطور که در شکل زیر می بینید، یکی از امکانات محاوره «جانمایی فیلدها» ، امکان «ذخیره در فایل» است:

 

با کلیک روی تکمه ذخیره در فایل، محاوره «مشخصات طراحی» به شکل زیر روی صفحه باز می شود:

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

 

این فایل حاوی مختصات فیلدهای موجود در فرم وب است.

 

مرحله سوم: فراخوانی فایل json در محاوره تعریف فرم گزارش (کلاینت ویندوز)

در مرحله آخر، محاوره تعریف فرمهای عمومی گزارش در کلاینت ویندوز را باز می کنیم و سپس همانند شکل زیر روی آیکون «اصلاح فرم تحت مکان نما» کلیک می کنیم و در محاوره «تدوین یک مولفه»، برگه «جانمایی» را باز می کنیم:

 

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

 

و در نهایت کافی است با کلیک روی تکمهOpen فراخوانی فایل انجام گردد. به این ترتیب، مشخصات ذخیره شده در فایل json بطور دائم در این فرم ذخیره می شود و از این پس نمایش جانمایی فیلدها در کلاینت وب مطابق با مشخصات درج شده در فایل json خواهد بود. 

 

امکانات دیگر محاوره جانمایی فیلدها

همانطور که در شکل زیر ملاحظه می کنید، در محاوره جانمایی فیلدها، دو امکان دیگر بنام «خواندن از فایل» و «بازنشانی جانمایی» وجود دارد:

خواندن از فایل

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

بازنشانی جانمایی

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