برنامه نویسی در پای ابر

کیو ام ال – دکمه

سلام به ویرگولی های عزیز ما در این قسمت می خواهیم به دکمه های کیو ام ال بپردازیم.

دکمه Button

در کیو ام ال دکمه های معمولی شئ آنها Button نام دارد؛ ما در این قسمت با مثال های فراوان می خواهیم ویژگی های آن را برسی نماییم؛ ابتدا برای تعریف دکمه این کد را می نویسیم:

Button {
}
خروجی
خروجی

لنگرها (anchors)

ویژگی های لنگری به شما این امکان را می دهد تا به راحتی دکمه را در موقعیت های مختلف صفحه نمایش دهید؛ انواع ویژگی های لنگری:

  • لنگر بالا (anchors.top)
  • لنگر پایین (anchors.bottom)
  • لنگر چپ (anchors.left)
  • لنگر راست (anchors.right)
  • لنگر میانه افقی (anchors.horizontalCenter)
  • لنگر میانه عمودی (anchors.verticalCenter)
  • مرکزی (anchors.centerIn)

ویژگی لنگر مرکزی

زمانی که شما می خواهید شئ ای را در مرکز یک شئ دیگر قرار دهید این ویژگی را اعمال می کنید:

anchors.centerIn: parent

با این کار شئ دکمه در مرکز شئ والد خود قرار می گیرد؛ مثلا دکمه در شئ صفحه است پس در مرکز صفحه قرار می گیرد واژه کلیدی «parent» در کیو ام ال به معنای والد شئ گفته می شود؛ البته شما می توانید به جای آن از نام id اشیا استفاده کنید و همچنین نسبت به شئ های غیروالد آن را مرکزی نمایید و ….

خروجی
خروجی

ویژگی لنگر بالا

با این ویژگی می توانیم بالا بودن شئ مورد نظر نسبت به شئ والد یا دیگر اشیا تعیین کنیم؛ به طور مثال ما دو تا دکمه داریم با نام های btn1 و btn2 و می خواهیم بگوییم بالای دکمه btn2 پایین دکمه btn1 محسوب می شود:

anchors.top: btn1.bottom

با این کار محل دقیق دکمه ما تنظیم می شود و ما به راحتی می توانیم اشیا را بچینیم.

ویژگی لنگر پایین

در صورتی که می خواهید پایین شئ ای را به نسبت به شئ دیگر قرار دهید باید از ویژگی anchors.bottom استفاده کنید.

مثال ۱: یک دکمه داریم می خواهیم بگوییم پایین آن بالای یک شئ تصویری است:

anchors.bottom: img1.top

ویژگی لنگر چپ

حالا ما می خواهیم نسبت سمت چپ شئ خود را با دیگر اشیا تنظیم کنیم مثلا چپ دکمه ما چه شئ ای قرار دارد به این شکل تعریف می کنیم؛ مثلا سمت چپ دکمه ما سمت چپ صفحه می باشد:

anchors.left: parent.left

ویژگی لنگر راست

حالا می خواهیم نسبت سمت راست شئ خود را با دیگر اشیا تنظیم کنیم؛ مثلا سمت راست دکمه ما سمت راست چیست؟ یا سمت چپ چیست؟

anchors.right: parent.right

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

ویژگی لنگر میانی افقی

گاهی اوقات ما یک نوار ابزار داریم که قرار است آن را با دکمه های زیادی پر کنیم و این دکمه ها در نوار ابزار به سمت چپ آن تماییل پیدا می کنند و شکل نامرتبی دارند در ضمن نوار مذکور از بالا تا پایین می باشد پس لازم است ما طوری دکمه ها را قرار دهیم که مرکز عرض آن تراز با مرکز عرض نوار ابزارها باشد:

anchors.horizontalCenter: parent.horizontalCenter

ویژگی لنگر میانی عمودی

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

anchors.verticalCenter: parent.verticalCenter

متن دکمه

خوب بعد از یادگیری ویژگی های لنگری حالا نوبت به تنظیم یک متن روی دکمه است؛ ویژگی text به ما این امکان را می دهد تا بتوانیم روی دکمه های خود متنی تنظیم کنیم به طور مثال متن «منو کلیک کن»:

text: "منو کلیک کن"

تنظیم فونت روی متن دکمه

ممکن است با فارسی نوشتن متن دکمه فونت شما زیاد جذاب نشود و دوست داشته باشید فونت های ایرانی را روی آن تنظیم کنید پس فقط کافیست این کد را وارد نمایید:

font.family: "نام فونت شما"

توجه داشته باشید که این فونت باید روی پای ابر شما نصب شده باشد.

تنظیم اندازه فونت روی متن دکمه

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

font.pixelSize: 12

مثلا به جای ۱۲ عدد مورد نظر خودتان را وارد کنید.

اندازه دکمه

شما می توانید با دو ویژگی width و height اندازه دکمه را تنظیم کنید؛ این اندازه حتی می تواند برحسب دیگر اشیا باشد و به صورت پویا تنظیم شود نه ایستا.

مثال ۱: یک دکمه با اندازه ثابت ۱۰۰ در ۱۰۰

width: 100
height: 100

مثال ۲: یک دکمه با اندازه نصف صفحه (این اندازه پویا هست و با تغییر صفحه همچنان نصف آن خواهد بود):

width: parent.width/2
height: parent.height/2

مثال ۳: یک دکمه که ارتفاع آن ثابت و ۴۰ و عرض آن کل صفحه نماییش می باشد و در پایین صفحه نمایش قرار می گیرد:

width: parent.width
height: 40
anchors.bottom: parent.bottom

مثال ۴: دو تا دکمه داریم که یکی از آنها دکمه «لغو» است و این دکمه در پایین پنجره سمت چپ آن قرار دارد؛ اندازه ارتفاع آن نصف ارتفاع پنجره و عرض آن نصف عرض پنجره می باشد:

width: parent.width/2
height: parent.height/2
anchors.bottom: parent.bottom
anchors.left: parent.left
text: "لغو"

عکس العمل دکمه

تا اینجا دکمه ما یک شئ ثابت و بدون هیچ عملکردی بود حالا می خواهیم بگوییم وقتی روی آن کلیک کردیم یک عکس العملی از خود نشان دهد مثلا متنش عوض شود، پنجره غیب شود یا … که به این شکل آن را می نویسیم:

یک بار ضربه (کلیک):

onClicked: {
    // کدهای جاوا اسکریپت برای عکس العمل
}

دو بار ضربه (دابل کلیک):

onDoubleClicked: {
    // کدهای جاوا اسکریپت برای عکس العمل
}

مثال ۱: وقتی روی دکمه کلیک کردم متن آن از «روی من کلیک کن» به «روی من کلیک کردی» تبدیل شود:

Button {
    text: "روی من کلیک کن"
    onClicked: {
        text = "روی من کلیک کردی"
    }
}

مثال ۲: وقتی روی دکمه کلیک شد پنجره غیب شود:

onClicked: {
    parent.visible = false
}

با ویژگی visible در هر شئ (همه اشیا این ویژگی را دارند) ما می توانیم امکان مرئی بودن آن را تعیین کنیم که مرئی است (true) یا نامرئی (false).

مثال ۳: وقتی روی دکمه کلیک کردیم پنجره بسته شود:

onClicked: {
    parent.close()
}

در پای کیوت تابع close به معنای بستن می باشد؛ بعضی اشیا قابلیت بستن دارند مثل پنجره ها و اینها تابع بستن را هم دارند.

مثال ۴: دو تا دکمه داریم با نام های btn1 و btn2 و روی هر کدام بزنیم دیگری محو میشه:

Button {
    id: btn1
    onClicked: {
        btn2.visible = false
    }
}
Button {
   id: btn2
   onClicked: {
       btn1.visible = false
   }
}

اتصال به پایتون

از آنجا که کدنویسی با کیو ام ال برای عملیات بسیار محدود است و شما می توانید از جاوا اسکریپت داخل آن استفاده کنید بهتر است برای دسترسی کامل به رایانه از زبان پایتون استفاده نمایید؛ حالا ما کدهای پایتونی را به شما نمایش می دهیم:

from pyabr.core import *
from pyabr.quick import *
class MainApp(MainApp):
    def __init__(self):
        super(MainApp, self).__init__()
        self.load (res.get('@layout/hello'))
application = QtGui.QGuiApplication([])
w = MainApp()
application.exec()

بخش فراخوانی چهارچوپ پای ابر

مجموعه pyabr.core: این مجموعه شیوه نامه های ابری و مخصوص پای ابر می باشد؛ شما برای دسترسی هایی نظیر فایل، حساب ها، دستورات، پوسته ها، برنامه ها و ….

مجموعه pyabr.quick: چهارچوب پای کیوت برای کیو ام ال پیاده سازی آن دشوار است اما ما آن را در pyabr.quick برای شما ساده کردیم تا به راحتی بتوانیم از اشیا کیو ام ال استفاده نمایید.

from pyabr.core import * 
from pyabr.quick import *

کلاس برنامه

تمام برنامه های کیو ام الی برای دسترسی بیشتر به اشیا بهتر است از یک کلاس پایتونی استفاده شود؛ به طور معلول نام آن MainApp می باشد.

class MainApp(MainApp):     
    def __init__(self):         
        super(MainApp, self).__init__()

کد شروع برنامه:

application = QtGui.QGuiApplication([])

با تعریف این تابع برنامه پای کیوت ما شروع می شود.

کد فراخوانی کلاس:

w = MainApp()

برای اینکه بخواهید یک برنامه پای کیوت را به نمایش بگذارید باید کلاسی که نوشتید را بعد از تابع شروع نوشته و سپس این کد را بنویسید:

application.exec()

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

اتصال به کدهای کیو ام ال

پایتون بخش غیرگرافیکی برنامه است که وظایف اجرای عملیات رایانه را به عهده می گیرد اما کیو ام ال بخش گرافیکی آن می باشد؛ شما برای اتصال به کدهای کیو ام ال این تابع را باید بنویسید:

self.load (res.get('@layout/hello'))

خوب ما گام به گام تحلیل می کنیم؛ یک فایل کیو ام ال به صورت استاندارد در پای ابر در پوشه usr/share/layouts/ قرار دارد و کافیست با این تابع فراخوانی و مسیر دهی شود:

res.get ("@layout/نام کیو ام ال")

خروجی یک رشته می باشد:

/usr/share/layouts/نام کیو ام ال

تابع اتصال:

self.load ( مسیر کیو ام ال )

دسترسی به اشیا

برای فراخوانی اشیا در کدهای پایتون:

self.نام شی = self.findChild ("نام شی")

دسترسی به ویژگی های اشیا

حالا ما با داشتن شئ در کدپایتونی کافیه به این شکل به آن دسترسی داشته باشید:

تغییر مقدار:

self.نام شئ.setProperty ("name","value")

گرفتن مقدار:

self.مقدار = self.نام شئ.property("name")

به جای name نام ویژگی و به جای value نام مقدار را وارد نمایید؛ همچنین مقدار می تواند غیر از رشته باشد پس باید به همان صورت نوشته شود نه به صورت رشته ای.

اجرای توابع در شئ:

self.نام شئ.function()

به جای function از نام تابع استفاده نمایید.

چطوری اشیا باید به پایتون وصل شوند؟

پیش از اینکه بخواهید با کد findChild شئ مورد نظر را در پایتون بگیرید باید نام آن را در کیو ام ال با این ویژگی تعیین نمایید:

objectName: "نام ویژگی"

این نام تعیین شده باید یکتا باشد تا برنامه دچار اختلال نشود.

مثال اتصال دکمه در پایتون

کد کیو ام ال (Hello.qml)

Button {
     objectName: "btnClick"
     text: "Click Me"
}

ابتدای کار باید برای دکمه خود یک نام شئ تعریف کنیم که یکتا باشه و به صورت رشته ای وارد بشه؛ مثلا اسمشو می گذاریم btnClick و متن اونو Click Me قرار می دهیم.

کد پایتون (Hello.py)

class MainApp(MainApp):     
    def btnClick_action (self):
        exit(0)
    def __init__(self):         
        super(MainApp, self).__init__()         
        self.load (res.get('@layout/Hello'))
        
        self.btnClick = self.findChild ("btnClick")
        self.btnClick.clicked.connect (self.btnClick_action)

در پایتون می توانیم با clicked.connect دکمه خود را به یک تابع وصل کنیم؛ در صورتی که شما روی دکمه کلیک کنید برنامه clicked.connect را به یک تابع ارجاع می دهد و تمام دستورات درون تابع اجرا می گردد؛ تابع عکس العمل ما btnClick_action می باشد پس کدهای داخل آن اجرا می گردد و برنامه بسته می شود.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.