حال می‌خواهیم با استفاده از ابزار طراحی qtcreator کد qml را خودکار ایجاد کنیم. به شکل زیر دقت کنید:

با توجه به شکل بالا توضیحات زیر را بخوانید:
1.    برای دیدن محیط طراحی گرافیکی qtcreator ابتدا بر روی فایل با پسوند qml که در resources وجود دارد دو بار کلیک کنید تا در قسمت ویرایشگر باز شود و دکمه Design فعال شود سپس بر روی دکمه Design کلیک کنید فرمی شبیه شکل بالا را مشاهده خواهید کرد.
2.    در این قسمت کنترل هایی که بر روی فرم قرار داده‌اید را مشاهده می‌کنید. و برای دسترسی و انتخاب کنترل‌های اضافه شده به فرم از آن استفاده می‌کنید.
3.    در این قسمت کنترل‌های قابل استفاده را مشاهده می‌کنید که برای اضافه کردن آن‌ها به فرم باید آن‌ها را توسط ماوس بر روی فرم یا قسمت ۲ بکشید.
4.    با استفاده از این قسمت می‌توانید بین فرم‌های مختلف جابجا شوید.
5.    فرم شما در این قسمت وجود دارد. در‌واقع تغییراتی که اعمال می‌کنید را در این محل می‌بینید.
قسمت سمت راست مربوط به خصوصیات کنترل انتخاب شده است، خصوصیاتی چون رنگ، فونت، اندازه و غیره.

چون همچنان بر روی فرم ما hello world نوشته شده با انتخاب کنترل Text در قسمت navigation یا قسمت ۲ شکل بالا و سپس زدن کلید delete کنترل Text را حذف کنید زیرا در این پروژه نیازی به آن نداریم. حال می‌خواهیم رنگ پس زمینه فرم را تیره کنیم. برای تغییر رنگ فرم ابتدا در قسمت navigation کنترل Window را انتخاب کنید سپس در قسمت سمت راست یا properties در زیر قسمت color رنگ را به رنگی تیره تغییر می‌دهیم (برای مثال رنگ #343434). اکنون از قسمت library زبانه resources عکس را با ماوس گرفته و بر روی فرم می‌کشیم و رها می‌کنیم، با این کار ابتدا یک کنترل image به فرم اضافه شده سپس عکس مورد نظر ما در آن قرار می‌گیرد. کنترل image را انتخاب کرده و در قسمت خصوصیات مقدار x را ۱۰ و مقدار y را ۲۰ قرار دهید (البته اعداد را می‌توانید به دلخواه خود تغییر دهید). اگر اندازه عکس بزرگ است می‌توانید با تغییر دو خصوصیت w و h اندازه عکس را به اندازه دلخواه درآورید.
می‌خواهیم کادری به اندازه لوگو و توخالی درست کنیم، برای این کار از قسمت library کنترل rectangle را انتخاب و بر روی فرم می‌کشیم. باز در قسمت خصوصیات x را و y را ۲۰ و h وw را ۶۴ قرار می‌دهیم. اگر توجه کنید هنوز مستطیل ما توپر است برای تو خالی کردن آن بر روی دکمه مشخص شده در شکل زیر عمل می‌کنیم. همچنین رنگ مستطیل را به مقدار #808080 تغییر می‌دهیم. به شکل زیر توجه نمایید.

به شکل بالا دقت کنید متوجه می‌شوید در قسمت خصوصیات مقادیری را که تغییر داده‌ایم با رنگ متفاوتی (در اینجا آبی) مشخص شده‌اند. برای بهتر دیدن دکمه‌ای که با فلش مشخص شده می‌توانید شکل زیر را بنگرید.

دکمه فوق برای transparent یا شفاف کردن کنترل مستطیل به کار می‌رود. Border یا حاشیه را شفاف نکرده‌ایم و تنها رنگ آن را به #808080 تغییر داده‌ایم. شناسه مستطیل مذکور را از rectangle1 به topLeftRectangle تغییر می‌دهیم. این شناسه در قسمت خصوصیات با نام id وجود دارد.
تا اینجا هر تغییری که در حالت design مربوط به qtcreator ایجاد کرده‌ایم با تغییر دادن حالت از Design به Edit کد qml تولید شده را می‌توانیم ببینیم. لازم به ذکر است که هر کاری را که در حالت Design انجام می‌دهیم به صورت کد qml قابل پیاده‌سازی است و در صورت تمایل می‌توان تمام کارها را به صورت دستی انجام داد. کد را مشاهده کنید.

import QtQuick 2.3
import QtQuick.Window 2.2
Window {
    id: window1
    color: "#343434"
    visible: true
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    Image {
        id: faceit
        x: 10
        y: 20
        width: 64
        height: 64
        source: "faceit_logo.jpg"
    }
    Rectangle {
        id: topLeftRectangle
        x: 10
        y: 20
        width: 64
        height: 64
        color: "#00000000"
        radius: 6
        border.color: "#808080"
    }
}

با ما همراه باشید تا جلسه آینده انیمیشن ساده لوگوی فیسیت را کامل کنیم.