طراحی رابط گرافیکی

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

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

بعد از انتخاب این گزینه پنجره Design باز می شود.

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

گزینه دوم از سمت چپ (Engine Mode) اطلاعات فرم را پاک کرده و مدل را به حالت پیش فرض برمی گرداند. گزینه سوم (Custom Mode) برای باز کردن پنجره Form Design Parameter است که در این پنجره می توان حالت های فرم را برای استخراج کد قابل ویرایش تنظیم نمود. برای مثال می توان تعداد ستونهای فرم، داشتن قابلیت جابه جایی و داشتن قابلیت پشتیبانی از مدلBootstrap را در آن تعیین کرد.

پس از پیکره بندی فرم به صورت فوق و کلیک بر روی دکمه OK (در این مثال المانهای فرم دارای قابلیت جابه جایی بوده و همچنین فرم دارای دو ستون است)، خروجی به صورت زیر خواهد بود. در این قسمت، توسعه دهنده برای ویرایش فرم می تواند با استفاده از ماوس اقدام به جابه جا کردن المانها نماید. همچنین می تواند با ویرایش کدهایHTML درج شده در قسمت پایین پنجره تغییرات دلخواه خود را در ساختار فرم اعمال کند.