اما فعلاً می‌خواهیم شکل طاهری آن درست شود سپس با جاوااسکریپت منطق آن را بنویسیم. برای استفاده از Button.qml در NumberPad.qml چون هر دو در یک دایرکتوری هستند نیازی به import کردن نداریم، در غیر این صورت در بالای فایل NumberPad.qml می‌بایست دایرکتوری آن را import می‌کردیم.

import QtQuick 2.0
Grid {
columns: 3
columnSpacing: 32
rowSpacing: 16
Button {text: "7"}
Button {text: "8"}
Button {text: "9"}
Button {text: "4"}
Button {text: "5"}
Button {text: "6"}
Button {text: "1"}
Button {text: "2"}
Button {text: "3"}
Button {text: "0"}
Button { text: "." }
Button { text: " " }
Button { text: "±"; color: "#6da43d" }
Button { text: "−"; color: "#6da43d" }
Button { text: "+"; color: "#6da43d" }
Button { text: "√"; color: "#6da43d" }
Button { text: "÷"; color: "#6da43d" }
Button { text: "×"; color: "#6da43d" }
Button { text: "C"; color: "#6da43d" }
Button { text: " "; color: "#6da43d" }
Button { text: "="; color: "#6da43d" }
}

کلیدها را طبق کد بالا به NumberPad اضافه می‌کنیم. نکته قابل توجه این است که اگر در یک خط بخواهیم چند خصوصیت را مقدار دهی کنیم باید بین آن‌ها از سمی کالن(;) استفاده کنیم.
حال فرض کنید می‌خواهیم یک دایرکتوری جدید در پروژه ایجاد کنیم و عکس‌هایی که می‌خواهیم از آن‌ها استفاده کنیم را در آن دایرکتوری قرار دهیم. برای اضافه کردن دایرکتوری باید به دایرکتوری اصلی پروژه در فایل منیجر مراجعه کنید و یک دایرکتوری مثلاً images را بسازید که در آن عکس‌های مورد نظر را کپی کنید. سپس باید اسم فایل‌های کپی شده را در فایل تنظیمات کامپایل پروژه(calculator.pro) اضافه کنید.

OTHER_FILES += images/paper-edge-left.png \
images/paper-edge-right.png \
images/paper-grip.png

نکته قابل توجه این است که فایل calculator.pro یا هر فایل .pro پروژه توسط ابزار qmake خوانده می‌شود تا makefile مربوط به کامپایل پروژه را به صورت خودکار بسازد. در صورتی که آدرس فایل‌های سورس برنامه و فایل‌ها و پوشه‌های داخل پروژه را در فایل تنظیمات کامپایل(.pro) پروژه قرار ندهید qmake نمی‌تواند آن را پیدا کند و نتیجه مطلوب به دست نمی‌آید.
برای استفاده کردن از فایل عکس‌های اضافه شده به پروژه باید از کنترل Image که زیرمجموعه QtQuick قرار دارد، استفاده کنیم. به کد زیر توجه نمایید:

Image {
id: grip
source: "images/paper-grip.png"
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
}

در کد بالا از همان مسیر مشخص شده در فایل تنظیمات پروژه به عنوان source استفاده کرده‌ایم. خصوصیات anchors برای تعیین مکان قرار گیری عکس در پنجره اصلی استفاده می‌شود. برای مثال anchors.horizontalCenter: parent.horizontalCenter
به معنی قرار گیری عکس ذکر شده در وسط محور x کنترل والد است.
کنترل دیگری که در این پروژه نیاز داریم کنترل ListView هست که زیرمجموعه QtQuick بوده و برای عبارت‌ها و حاصل می‌خواهیم از آن استفاده کنیم.

ListView {
id: listView
x: 16; y: 30
delegate: Item {
Text {
id: operator
}
Text {
id: operand
}
}
model: ListModel { }
}

کد بالا برای ایجاد این کنترل استفاده می‌شود. X و y که مکان آن را مشخص می‌کند و delegate که قالبی برای نحوه نمایش محتوا را ایجاد می‌کند که در قالب فوق از یک آیتم با دو کنترل Text استفاده شده است که هر کدام شناسه دارند که برای دستیابی به آن‌ها مورد استفاده قرار می‌گیرند. علاوه بر آن، این کنترل به یک مدل نیز متصل می‌شود که خود مدل می‌تواند به روش‌های مختلفی محتوی دیتا شود. در اینجا برای مدل از ListModel استفاده کرده‌ایم.
موارد ذکر شده برای این است که می‌خواهیم در جلسه آینده صفحه نمایش ماشین حساب را طراحی کنیم.