نمایش نتایج 1 تا 34 از 34

نام تاپیک: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

  1. #1

    Red face نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    سلام

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

    شاید یکی از دلایلی که باعث میشه خیلی ها سراغ C++‎‎‎‎‎‎‎ نروند سخت بودن پیاده سازی رابط های گرافیکی هستش که بر اساس تجربه شخصی میتونم بگم این به سختی زبان بر نمیگرده به تنبلی و عدم شناخت کافیه برنامه نویس بر میگرده چرا که یا کمی پشت کار کتابخانه ای مثل Qt رو پیدا میکنه حال توسط معرفیه یکی از نمونه های QML نشون میدم که چطور سختی C++‎‎‎‎‎‎‎ براتون جذابیت پیدا خواهد کرد ! در نتیجه هر چیز سختی نتیجه خارق العاده ای رو خواهد داشت.

    برای اینکه روشن بشید و قبول کنید که طراحی رابط کاربری با QML خیلی فراتر از HTML5 و CSS3 هستش هرچند اینهارم پشتیبانی میکنه در خودش ولی در کل استایل نویسی توسط QML خیلی جذابیت و قدرت خاص خودش رو داره که عمرا تو WPF یا فناوری های دات نتی بشه همچین چیزی رو به سادگی خلق کرد.

    خیلی ساده در یک جمله معرفیش میکنم QML یک زبان برنامه نویسی برای طراحی رابط گرافیکی هستش که بر پایه JavaScript ارائه شده و برای طراحی رابط کاربری توسط C++‎‎‎‎‎‎‎ پشتیبانی میشه در کل هدفش اینه که سرعت بده به طراحی و حل کنه مشکلات برنامه نویس بدبخت رو در لایه UI برای مثال توسط QML ظاهر برنامه رو طراحی کرده و سپس توسط C++‎‎‎‎‎‎‎ کلاس ها و توابعتون رو پیاده سازی کنید کلی وقت آزاد میشه و کاملا معماری چند لایه رعایت خواهد شد.

    کیفیت و سرعت QML خیلی بهتر از Widget هستش یکم اولش سخته ولی اگه میخواهید برنامه های زیبا و جذابی رو طراحی کنید که هیچ چیزی به گرد پاشم نرسه از همین QML استفاده کنید که خارق العادست.
    نکته : اگر تجربه کار با JavaScrip و HTML , CSS رو داشته باشید QML رو بهتر درک خواهید کرد که چطور به کمک C++‎‎‎‎‎‎‎ میاد دقیقا مثل JavaScript و HTML که به کمک PHP میروند.

    بنابراین میرم برای معرفی اولین استایل که بعد ها موارد بهتر و بیشتری رو هم معرفی خواهیم کرد و امیدوارم مدیران عزیز هم از معرفی طرح های جذاب در این زمینه دریغ نکنند که بزرگترین سوال برای مبتدیان نحوه طراحی ظاهر در C++‎‎‎‎‎‎‎ هستش.

    احتمالا میدونید که ظاهر کاربری Android 5.X بسیار بهتر از قبل و دلنشینتر شده و این طوریه که گوگل اومده یک سری متد و طرح های جالبی رو عرضه کرده با عنوان Material design که ما این طراحی و سبک کاملا دلنشین و آرام بخش هستش حداقل که برای شخصه من اینطور بوده لینک در رابطه با Material design : https://www.google.com/design/spec/m...roduction.html

    تصاویری از کنترل های خلاقانه توسط Material Design برای C++‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎ که تقریبا از کنترل های پر کاربرد عکس گرفتم بقیش رو هم در پوشه demo خواهید دید.

    ProgressBarDemo.png
    SwitchDemo.png
    SliderDemo.png
    ButtonDemo.png
    TimePickerDemo.png
    BottomSheetDemo.png
    TextFieldDemo.png
    CheckBoxDemo.png
    DatePickerDemo.png
    ColorPaletteDemo.jpg

    برای استفاده از این Material لینک GitHub رو بررسی کنید : https://github.com/papyros/qml-material
    همه چیز خیلی ساده هستش کافیه طبق آموزش ابتدا qml-material.pro رو کامپایل کنید و برای اینکه بتونید از این Material ها در طراحی های خودتون استفاده کنید توضیحاتی داده ولی شاید گنگ باشه برای همین به صورت زیر یه توضیحی میدم تا انشالله به نتیجه برسید.



    1. وارد پوشه Module در پروژه ای بشید که از GitHub دانلود میکنید که داخلش دو تا پوشه Material و QtQuick وجود داره اینارو باید کپی کنید در آدرس های فوق بر اساس نوع کامپایلرتون :


    • C:\Qt\Qt5.5.0-MSVC-x64\5.5\msvc2013_64\qml
    • C:\Qt\Qt5.5.0-Mingw\5.5\mingw492_32\qml
    • C:\Qt\Qt5.5.0\5.5\msvc2013\qml
    • و برای اندروید : C:\Qt\Qt5.5.0-Android\5.5\android_armv7\qml

    خب تقریبا مسیر ها یکی هستن یعنی داخل پوشه qml طبق چیزی که میبینید.

    بعدش کافیه یک پروژه ی جدیدی ایجاد کنید از نوع QML Application کدتون معمولا به صورت زیر خواهد بود :


    importQtQuick2.4importQtQuick.Window2.2
    Window {
    visible:true
    }


    حالا من این میخوام از استایل Button که Material Design هستش استفاده کنم کافیه ماژول Material رو وارد فایل کنم به صورت زیر :


    import Material 0.1


    و یه کدی که شامل چند نمونه Button هستش به صورت زیر :


    import QtQuick 2.4
    import QtQuick.Window 2.2
    import Material 0.1




    Window {
    visible: true




    Item {


    anchors.centerIn: parent
    anchors.fill: parent


    Column {
    anchors.centerIn: parent
    spacing: Units.dp(20)


    Button {
    text: "Simple Button"
    anchors.horizontalCenter: parent.horizontalCenter
    onClicked: snackbar.open("Simple, isn't it?")
    }


    Button {
    text: "Raised Button"
    elevation: 1
    anchors.horizontalCenter: parent.horizontalCenter
    onClicked: snackbar.open("This is a snackbar")
    }


    Button {
    text: "Disabled Raised Button"
    elevation: 1
    enabled: false
    anchors.horizontalCenter: parent.horizontalCenter
    }


    Button {
    text: "Wide Button"


    width: Units.dp(200)
    elevation: 1
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("That button is wide, and so is this snackbar!")
    }


    Button {
    id: focusableButton
    text: "Focusable with really long text"
    elevation: 1
    activeFocusOnPress: true
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("The text is really very very very very very long and now it needs to wrap, so this should show as two lines!")
    }


    Button {
    text: "Colored button"
    textColor: Theme.accentColor
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("That button is colored!")
    }


    Button {
    text: "Focusable button #2"
    elevation: 1
    activeFocusOnPress: true
    backgroundColor: Theme.primaryColor
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("That button is colored!")
    }
    }


    ActionButton {
    anchors {
    right: parent.right
    bottom: snackbar.top
    margins: Units.dp(32)
    }


    iconName: "content/add"
    }


    Snackbar {
    id: snackbar
    }
    }




    }




    خیلی ترو تمیز به همین راحتی...
    برای ادامه نمونه استایل هاش نیازی نیست همرو اینجا آموزش بدم چون همشون تو پوشه demo موجود هستش ازشون استفاده کنید و لذتشو ببرید.
    ادامه‌ی آموزش‌ها در این بخش
    آخرین ویرایش به وسیله کامبیز اسدزاده : یک شنبه 17 تیر 1397 در 15:56 عصر

  2. #2

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    به صورت عادی ماژول های موجود برای استایل در QML به صورت زیر هستند :


    import QtQuick.Controls.Styles 1.2
    import QtQuick.Controls.Styles.Flat 1.0


    توسط این دو ماژول شما میتونید رابط های خلاقانه رو به صورت پیشفرض طراحی کنید.

    من تصاویری از این استال هارو معرفی کردم ولی باور نید اگه وقت داشتم دونه دونه نحوه استفاده از هر کدوم رو و اینکه چه متد هایی دارند رو میگفتم ولی خب خوشبختانه مستندات کامل هستند و تحت لینک های زیر میتونید به نحوه استایل نویسی در C++‎‎‎‎‎ برسید:

    روش پیشفرض وسط ماژول QtQuick.Controls.Styles در دسترس خواهد بود و شامل تعاریف زیر هستند.
    معرفی کنترل ها ی استاندارد : QML : http://doc.qt.io/qt-5/qtquickcontrols-index.html
    نحوه استایل نویسی در QML برای Basic Style : http://doc.qt.io/qt-5/qtquick-contro...qmlmodule.html




    روش مدرن و تخت یا همان Flat
    معرفی کنترل های تحت که در صنعت خودرو سازی و مخصوصا iOS و Android استفاده میشه : http://doc.qt.io/QtQuickEnterpriseControls/index.html
    نحوه استایل نویسی برای این نسخه از استایل ها : http://doc.qt.io/QtQuickEnterpriseCo...les-index.html

    مثل تصاویر زیر :

    btn-flat.pngflat-1.pngdelay.pngdial.pngprogres.pngswtch-flat.png

  3. #3

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    سلام آقای کامبیز اسدزاده.
    واقعا از اینکه اینگونه تاپیک های خوب و آموزنده رو قرار میدید ، ممنونم.
    اما بهتر نبود اول آموزش QML رو قرار بدید ؟؟!! آخه اصلا هیچ آموزش فارسی در این رابطه وجود نداره !!

    خیلی ممنون.
    موفق باشید.

  4. #4

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    نقل قول نوشته شده توسط AliRezaBeytari مشاهده تاپیک
    سلام آقای کامبیز اسدزاده.
    واقعا از اینکه اینگونه تاپیک های خوب و آموزنده رو قرار میدید ، ممنونم.
    اما بهتر نبود اول آموزش QML رو قرار بدید ؟؟!! آخه اصلا هیچ آموزش فارسی در این رابطه وجود نداره !!

    خیلی ممنون.
    موفق باشید.

    قبول دارم اول آموزش خود QML مهمه ولی من واقعا فرصت آموزش ندارم و مهمتر از همه اینکه آموزش های قبلی راجب Widgets رو هم تو سایت های دیگه بدون ذکر نام کپی کردن و کلا اینجور حرکات تو ایران عادی شده و ترجیح میدم از این پس زیاد راجب آموزش وقت نزارم این مواردی رو هم که هر از گاهی ارسال میکنم در کمترین فرصت آزادی که به دستم میاد سریع اقدام میکنم و اگرنا آموزش QML به صورت فارسی از واجبات هستش.

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

    انشالله فرصتی باشه یک سری موارد هم راجب QML آموزش میدیم ... ببینیم خدا چی میخواد.

  5. #5

    Smile نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    سلام

    امروز داشتم رو قسمت ابزار Power پروژه پانامرا کار میکردم گفتم این بخش از طراحی رو بزارم برای اشتراک ، البته اشاره کنم که به صورت Component نیست.
    در این قسمت از Rectangle , MouseArea , Image و Text استفاده کردم و همچنین از NumberAnimation در وضعیت انیمیشنش استفاده شده.
    چیزه ساده ای هستش ولی برای مبتدی ها بسیاری از موارد رو روشن خواهد کرد.
    درضمن خاصیت های onClick برای Mouse Click هم موجود هست که برای هر کدام از دکمه های Sign Out , Restart , Sleep و Shut down میتونید توابع C++‎‎‎ خودتون رو صدا بزنید.

    این تصاویر مربوط هستش به همین ابزار در پروژه خودم که این بخش رو به صورت یک پروژه جدا براتون ضمیمه کردم.

    p0.pngp1.png

    سعی میکنم همچین موارد کوچیک رو از این پس به اشتراک بزارم بستگی به حال و حوصله داره
    فایل های ضمیمه فایل های ضمیمه

  6. #6
    کاربر جدید
    تاریخ عضویت
    اسفند 1393
    محل زندگی
    کابل
    پست
    23

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    سلام
    فایل زیب موقع باز شدن برای من ارور میده
    کسی از دوستان هم این مشکل رو داره؟

  7. #7
    کاربر جدید
    تاریخ عضویت
    اسفند 1393
    محل زندگی
    کابل
    پست
    23

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    آقای اسد زاده عزیز
    اگه براتون مقدوره یه مثال برای این عکس زیر بزنید. جالب به نظر میاد
    dkvwn1hogxrjmwk06q13.png

  8. #8

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    نقل قول نوشته شده توسط alireza.alavi2015 مشاهده تاپیک
    آقای اسد زاده عزیز
    اگه براتون مقدوره یه مثال برای این عکس زیر بزنید. جالب به نظر میاد
    dkvwn1hogxrjmwk06q13.png
    این کار سادست شما روی یک فرم از کنترل های معمولی همین Button استفاده خواهید کرد فقط نکته جالبش امکان نمایش منو روی دکمه هستش که این هم خیلی ساده تسط یک کنترل Menu میشه ایجادش کرد روش کار رو به صورت زیر توضیح میدم البته بدون این استایلی که میبینید اگه نیاز بود بگید یک توضیحی هم راجب استایل بندی ها و قوانینش بدم.

    به این کد توجه کنید :


    Button {
    id: button
    text: "MyButton"
    }


    خیلی واضحه که این کد یک دکمه رو ایجاد میکنه ولی برای اینکه به کنترل Button دسترسی داشته باشیم ابتدا باید ماژول مربوط به کنترل رو وارد پروژه کنیم به روش زیر :


    import QtQuick.Controls 1.3


    یه توضیحی راجب قوانین import شدن هم بدم اینکه برای وارد کردنش از دستور import استفاده میکنیم نام ماژول در مرحله بعد و نسخه اون مشخص میشه که در نسخه های مختلف Qt اینها متفاوت هستش البته از لحاظ نسخه.
    با وارد کردن این گزینه دسترسی به کنترل ها آزاد شده و میتونیم از کنترل های مختلفی استفاده کنیم که در Qt 5.x نسخه 1.3 به بعد دارای کنترل های ذکر شده هستش : http://doc.qt.io/qt-5/qtquick-controls-qmlmodule.html

    راجب منو که چطور میشه روی دکمه ازش استفاده کرد خیلی راحته کافیه از خاصیت menu استفاده کنیم که در نسخه 1.4 موجود هست.
    بنا براین با در نظر داشتن خاصیت menu برای دکمه میریم سراغ این مطلب.
    با توجه به این توضیحات : http://doc.qt.io/qt-5/qml-qtquick-co...html#menu-prop
    کار این خاصیت امکان ایجاد منوی ویژه به صورت کشویی هستش که نوع بازگشتی اون هم null خواهد بود به صورت زیر :


    Button {
    text: "MyButton"
    menu: Menu {
    MenuItem { text: "Normal"; shortcut: "Ctrl+N" }
    MenuSeparator { }
    MenuItem { text: "Checkable 1"; checkable: true; checked: true }
    MenuItem { text: "Checkable 2"; checkable: true; checked: true }
    MenuSeparator { }
    }
    }


    خب کد رو تجزیه تحلیل کنیم...
    ابتدا Button رو صدا زدیم در داخل بنده که توسط آکولاد مشخص میشه خاصیت ها و گزینه های مورد نیاز رو وارد میکنیم که میتونه شامل گزینه های مختلفی باشه که در این لینک مشخصه : http://doc.qt.io/qt-5/qml-qtquick-co...n-members.html
    ما به همه اینا نیاز نداریم تنها با menu کار خواهیم کرد.

    بنابراین خاصیت menu رو وارد میکنیم و باید توجه کنید که با حروف کوچیک تایپ کنید.

    خب منو رو ایجاد میکنیم و بعد نیاز داریم به ایتم هایی که باید منوی ما اونهارو داشته باشه با توجه به کنترل منو در این لینک : http://doc.qt.io/qt-5/qml-qtquick-controls-menu.html میریم از خاصیت های اون هم استفاده کنیم که یکیش هست MenuItem و یه گزینه ای هم به نام MenuSeparator داریم که اینارو لازم خواهیم داشت.

    MenuItem امکان افزودن آیتم به منو رو میده و گزینه MenuSeparator امکان ایجاد یک جدا کننده که معمولا به صورت یک خط مشخص میشه رو میدهد.

    البته به این اشاره کنم خود MenuItem دارای خاصیت مثلا text و shortcut و ... هستش که در کد مشخص کردیم.
    یا مثلا خاصیت checked که با نوع بازگشتی boolian قابل مقدار دهی هستش که مشخص کردیم تیک خورده باشه وقتی مقدار true هستش به صورت انتخابی نمایش داده خواهد شد.
    و خاصیت checkable هم که نوع boolian هستش مشخص میکنه که کنترل شما قابلیت انتخاب شدن داشته باشه یا خیر اگر true باشه شما اجازه انتخاب خواهید داشت.


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

    کد کامل :


    import QtQuick 2.4
    import QtQuick.Controls 1.3


    ApplicationWindow {
    title: qsTr("Modern UI")
    width: 300
    height: 300
    visible: true


    Button {
    x: 78
    y: 145
    text: "Checkable"
    checkable: true
    }
    Button {
    x: 159
    y: 145
    text: "MyButton"
    menu: Menu {
    MenuItem { text: "Normal"; shortcut: "Ctrl+N" }
    MenuSeparator { }
    MenuItem { text: "Checkable 1"; checkable: true; checked: true }
    MenuItem { text: "Checkable 2"; checkable: true; checked: true }
    }
    }




    }




    فایل کامل پروژه هم ضمیمه گردید.
    فایل های ضمیمه فایل های ضمیمه

  9. #9
    کاربر جدید
    تاریخ عضویت
    اسفند 1393
    محل زندگی
    کابل
    پست
    23

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    اگه نیاز بود بگید یک توضیحی هم راجب استایل بندی ها و قوانینش بدم.
    اگه زحمت بکشی ممنون میشم
    تشکر الیرم

  10. #10

    Smile نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    بسیار خب

    با توجه به مستندات موجود در نسخه جاری : http://doc.qt.io/qt-5/qtquick-contro...qmlmodule.html
    قبل از شروع به این اشاره کنم که راجب همه این کنترل ها توضیح نخواهم داد بنا براین تنها در رابطه با یکی از کنترل ها مانند Button توضیحاتی رو میدم که قوانین و شرایط استایل نویسی مشخص بشه و در تمامی کنترل ها نیز همین قوانین حکم خواهند کرد پس با یاد گیری همین Button و مراجعه به مستندات موجود در رابطه با استایل های هر کدام از کنترل ها میتونیم هر طرحی رو پیاده سازی کنیم.

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

    برای شروع همین استایل پیشفرض رو توضیح میدم و بعد یک نمونه سفارشی تر رو کار میکنیم : http://doc.qt.io/qt-5/qml-qtquick-co...ttonstyle.html

    برای دسترسی به ماژول استایل باید اون رو به صورت زیر صدا بزنیم :


    import QtQuick.Controls.Styles 1.3


    نسخه 1.4 دارای استایل بندی بیشتری هستش که در کنترل های پیشرفته کاربرد زیادی خواهد داشت.


    Button {
    text: "A button"
    style: ButtonStyle {
    background: Rectangle {
    implicitWidth: 100
    implicitHeight: 25
    border.width: control.activeFocus ? 2 : 1
    border.color: "#888"
    radius: 4
    gradient: Gradient {
    GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
    GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
    }
    }
    }
    }


    این مثالی هست که در مستندات موجوده که از رنگ بندی گرادینت استفاده کرده میشه این رو ساده تر در نظر گرفت به صورت زیر :


    Button {
    text: "A button"
    style: ButtonStyle {
    background: Rectangle {
    implicitWidth: 100
    implicitHeight: 25
    border.width: control.activeFocus ? 2 : 1
    border.color: "#888"
    radius: 4
    color: control.pressed ? "#aaa" : "#ccc"
    }
    }
    }


    خب... بریم سر توضیحات ، در کل هر کنترلی خاصیتی داره به نام style که به شما قابلیت سفارشی سازی استایل کنترل رو میده برای مثال در کنترل Button شما میتونید در خود خاصیت style خاصیت هایی رو اعمال و سفارشی سازی کنید که شامل مثلا : background , control , label و ... که در لیست آمده است :http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle-members.html اینها برای کنترل Button ثابت میباشند و شاید در کنترل های دیگر خاصیت های اضافی یا کمتری باشه که نسبت به نوع کنترل مشخص خواهد شد.


    در حالت عادی کنترل ما به این صورت هستش با کد زیر :

    b0.png


    Button { text: "A button" }


    در یک مثال من روی خاصیت background برای کنترل کار میکنیم ، پس در این بخش خاصیت و نوعش رو از Rectangle میگیریم :

    background: Rectangle {...}


    حالا این Rectangle ما میتونه دارای انواعی از خاصیت ها باشه که اینجا لیست کاملش موجوده : http://doc.qt.io/qt-5/qml-qtquick-re...e-members.html ما قراراه از چندتاشون استفاده کنیم نه بیشتر.
    یک Rectangle میسازم به صورت زیر :




    Rectangle {
    implicitWidth: 100
    implicitHeight: 30
    border.color: "#888"
    radius: 2


    }




    • خاصیت های implicitWidth و implicitHeight هم طول و عرض رو به صورت ضمنی به Rectangle تخصیص میده البته شاید سوال باشه که چرا از تنها width و height استفاده نکردی خب ای گزینه در حالت تنها Rectangle ایرادی نداره ولی ما چون هدف نهاییمون تخصیص دادن این Rectangle به عنوان پیش زمینه دکمه هستش بنابراین برای اعمال طول و عرضش باید از خاصیت طول و عرض ضمنی استفاده کنیم که همان تخصیص مقدار طول و عرض به صورت مجازی هستش.
    • با توجه به مباحث CSS خب مشخصه border خاصیت زبانه ها رو مشخص میکنه و اینکه رنگش چی باشه از خاصیت border.color استفاده میشه و مقدارش رنگی هستش که تخصیص خواهیم داد در رابطه با ضخامتش هم که اینجا اشاره نمیکنیم همون border.width خواهد بود که مقدار int مشخص میکنه ضخامتش چقدر باشه در صورت عدم استفاده از این خاصیت ضخامت به صورت پیشفرض 1 خواهد بود.
    • گزینه radius نیز مشخصه منحنی لبه های شیء هستش با مقدار 2 مشخص میکنیم که به چه اندازه ای لبه های شیء حالت خمیدگی پیدا کنه.


    نتیجه حاص از این بخش به صورت زیر خواهد بود :

    b1.png

    من این بخش رو کامل کردم و میخوام بقیه مراحلش روی کنترل کار کنیم پس از خاصیت background کنترل استفاده میکنم به صورت زیر :


    background: Rectangle {
    implicitWidth: 100
    implicitHeight: 30
    border.color: "#888"
    radius: 2

    }



    در بدنه کنترل به صورت زیر درج خواهد شد :


    Button {
    x: 100
    y: 83
    text: "A button"
    style: ButtonStyle {
    background: Rectangle {
    implicitWidth: 100
    implicitHeight: 30
    border.color: "#888"
    radius: 2

    }
    }
    }




    کاملا مشخصه که در خاصیت style کنترل و زیر خاصیت اون یعنی background از نوع شیء Rectangle استفاده شده است نتیجه به صورت زیر خواهد بود.

    b2.png

    اگر روی دکمه کلیک کنیم نه رنگ و نه ابعاد و نه هیچ تغییری اعمال نخواهد شد بنابراین برای اعمال افکت و غیره میری سراغ خاصیت color که در Button از خاصیت control استفاده میکنیم تا بتونیم مشخصه کلیک شدن رو بگیریم که در رابطه با این خاصیت نیز در این بخش توضیح داده شده : http://doc.qt.io/qt-5/qml-qtquick-co...l#pressed-prop

    قرار اینه وقتی کنترل فشار داده میشه رنگش تغییر پیدا کنه و در صورت عدم فشار بر روی کنترل رنگش به حالت قبلی یا یک رنگ دیگه غییر پیدا کنه در این صورت باید از خاصیت control.pressed استفاده کنیم که مقدار باز گشتی اون boolian خواهد بود بنا بر این نوع با یک دستور شرطی میتونیم به صورت زیر کد رو بنویسیم :



    color: control.pressed ? "#ccc" : "#fff"


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

    قبل از کلیک شدن :

    b2.png

    هنگام کلیک شدن :

    b3.png

    شاید لازم باشه وقتی ماوس میره روی کنترل و خاصیت Mouse Hover اجرا میشه در این حالت یک رنگ ملایمی روی کنترل اعمال بشده برای این کار چکار میکنیم ؟ معمولا رو طراحی های تحت وب CSS3 به این موارد توجه خاصی میکنند به صورت زیر از خاصیت Opacity استفاده میکنم :


    opacity: control.hovered ? 0.8 : 1.0


    در این کد مشخص شده خاصیت opacity کنترل هنگام شناور شدن ماوس روی اون از 1.0 به 0.8 تغییر پیدا کنه این باعث میشه خاصیت تار بودن یا همون کدر بودن کنترل کاهش پیدا کنه و مشخص بشه که کنترل در حالت شناور ماوس بر روی اون قرار گرفته به صورت زیر کد رو تکمیل میکنیم :


    Button {
    x: 100
    y: 83
    text: "A button"
    style: ButtonStyle {
    background: Rectangle {
    implicitWidth: 100
    implicitHeight: 30
    border.color: "#888"
    radius: 2
    color: control.pressed ? "#ccc" : "#fff"
    opacity: control.hovered ? 0.8 : 1.0


    }
    }
    }


    فایل کامل ضمیمه شد.
    فایل های ضمیمه فایل های ضمیمه

  11. #11

    Smile نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    سلامی دوباره...
    داشتم رو پروژه ای کار میکردم گفتم تصاویری ازش بزارم تا یکی دیگه از طرح های ساخته شده در C++‎‎‎‎‎‎‎‎‎ با فناوری QML رو ببینید.

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

    012.jpg

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

    011.jpg

    حالا یه ایده جالبی بعد از اینکه فرم پر شد و اقدام به ذخیره کردیم با کلیک بر روی دکمه مثلا ذخیره یه لحظه اتفاق جالبی به صورت زیر خواهد افتاد :

    014.jpg

    همینکه اقدام به ذخیره میکنم سریعا در وسط همون کادر به صورت Fill شده پیغام ذخیره شد داده میشه و بعد دوباره فرم میره به مرحله افزودن جدید. با همچین خلاقیت های نه چندان سخت میشه طرحی رو ارائه کرد که تکراری نیست و این برای مشتری مهمه.

    013.jpg

    متاسفانه این کامپوننت ها خیلی تکمیل نشده و دارم سعی میکنم سریعتر نسخه ای از این برنامه رو برای مشتری ارائه بدم ، برای همین امکان ارائه سورس کامپوننت ها رو ندارم ولی سعی میکنم کم کم از درون پروژه مثال هایی رو مثل این براتون آماده کنم.

  12. #12

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    خب... حال احوالات برنامه نویسای عزیز چطوره ؟

    FX.jpg

    نظرتون راجب همچین طرح ها چیه ؟

    این دو گزینه ای که مشخص کردم رو نوشتم و براتون قرار میدم برین کیف کنید
    دقیقا مثل طرح FX هستش ، حالت Hover رو هم داره که روش میری زبانه کنترل رنگش تغییر پیدا میکنه دقیقا کپی فایرفاکس در آوردمش میتونید تغییرش بدین ، هدف اینه که با نحوه کد نویسی QML آشنا بشیم که چطور با ترکیب JS و CSS میشه غوغا کرد.

    اولی Radio Button هستش و دومی CheckBox به صورت زیر :

    MU-01.jpg

    کد های مربوط به طرح Radio Button :


    RadioButton {
    id: radioButton1
    x: 48
    y: 39
    text: qsTr("Radio Button")


    style: RadioButtonStyle
    {
    label: Text


    {
    text: control.text
    font.pixelSize: 12
    anchors.margins: 0
    horizontalAlignment: Text.left
    }


    indicator: Rectangle


    {
    implicitWidth: 22
    implicitHeight: 22
    radius: 16
    border.color: control.hovered ? "#2292d0" : "#c1c1c1"
    border.width: 1


    Rectangle


    {
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    color: "#2292d0"
    visible: control.checked
    implicitWidth: 12
    implicitHeight: 12
    radius: 16
    }




    }


    }
    }





    اینم مال Check Box :




    CheckBox {
    id: checkBox1
    x: 163
    y: 39
    text: qsTr("Check Box")


    style: CheckBoxStyle


    {
    label: Text


    {
    text: control.text
    font.pixelSize: 12
    horizontalAlignment: Text.left


    }


    indicator: Rectangle


    {


    implicitWidth: 20
    implicitHeight: 20
    radius: 1
    border.color: control.hovered ? "#2292d0" : "#c1c1c1"
    border.width: 1


    Image


    {
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAA f8/9hAAABNklEQVQ4T6WTwVGDUBRF781CNxBTwu9ArEDsIFZgsg0L pQLpwGwgy2AFjhUQKxA7+HaggRkncYbnwAz4SQxDRpbAPTzOfZ/458Vj8yrMHaBIgIGvPSs+CqAWXwrF9yvJUflhIYLeAPUgI5zkC QmnnlqAl/6AKEsJnBvhN2wstxdAReuY4M2vL/mUja20z48KoBaZC5ElZHCtPSs1xaowm5O4bYVl4NbvUYVZQOK+ kiJIsbWuSnIFDvMJKUsTKMIL8yNUUbYicNn8m0isveFUResxwa ed8LSszrzH0i5PMw3wrIEQAQq5q+uqpgN9PbPmu3vTOKAgObRU AnnUs+Hkr+dNC6aL9th41p49PgRv1bjnA6i6rqV2TlBZN32IvM vWdrrCZWZvkcrDQhYrMbruOnC9NrEL8AOVu4ZhvKxLIgAAAABJ RU5ErkJggg=="
    visible: control.checked
    width: 16
    height: 16
    sourceSize.height: 16
    sourceSize.width: 16


    }
    }


    }


    }




    درضمن ماژول زیر رو حتما باید وارد کنید :


    import QtQuick.Controls.Styles 1.4


    و یک توضیح کوچیکی بدم راجب این کد که شاید جای سوال داشته باشه برای کسانی که آشنا نیستند با این نوع کد ها:


    source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAA f8/9hAAABNklEQVQ4T6WTwVGDUBRF781CNxBTwu9ArEDsIFZgsg0L pQLpwGwgy2AFjhUQKxA7+HaggRkncYbnwAz4SQxDRpbAPTzOfZ/458Vj8yrMHaBIgIGvPSs+CqAWXwrF9yvJUflhIYLeAPUgI5zkC QmnnlqAl/6AKEsJnBvhN2wstxdAReuY4M2vL/mUja20z48KoBaZC5ElZHCtPSs1xaowm5O4bYVl4NbvUYVZQOK+ kiJIsbWuSnIFDvMJKUsTKMIL8yNUUbYicNn8m0isveFUResxwa ed8LSszrzH0i5PMw3wrIEQAQq5q+uqpgN9PbPmu3vTOKAgObRU AnnUs+Hkr+dNC6aL9th41p49PgRv1bjnA6i6rqV2TlBZN32IvM vWdrrCZWZvkcrDQhYrMbruOnC9NrEL8AOVu4ZhvKxLIgAAAABJ RU5ErkJggg=="


    این کد اگه دقت کنید در داخل سورس یک شیء تصویر قرار گرفته و من دقیقا به جای فایل تصویری با فرمت مثلا png و ... کد تصویر Checked رو به صورت Base64 قرار دادم که از سورس و فایل تصویری استفاده نکنم معمولا در چنین جاها بهترین روش هستش که مزیت هایی رو هم داره.

  13. #13

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    تشکر واقعا جالبه اقای اسد زاده

    اگه ممکنه یک آموزش دز موزد کنترل ها قرار بدید تا علاقه ما بیشتر برای کار با ++C بشه.

  14. #14

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    نقل قول نوشته شده توسط sg.programmer مشاهده تاپیک
    تشکر واقعا جالبه اقای اسد زاده

    اگه ممکنه یک آموزش دز موزد کنترل ها قرار بدید تا علاقه ما بیشتر برای کار با ++C بشه.
    در رابطه با نحوه استفاده از کنترل ها پست های بالاتر رو بررسی کنید : https://barnamenevis.org/showthread.p...=1#post2251747
    تقریبا یک سری قوانین موجوده که در تمامی کنترل ها یکسان هست.

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

    این لینک : http://doc.qt.io/qt-5/qtquickcontrols-index.html
    و این لینک : http://doc.qt.io/qt-5/qtquickcontrolsstyles-index.html

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

  15. #15

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    بنا به درخواست دوستان در بخش های دیگه سعی کردم یک فیلم کوتاهی از خروجی یکی از پروژه هام قرار بدم تا ببینیم C++‎‎‎‎ و QML یعنی چی اصلا یک حسی بسیار خاصی رو به آدم میده وقتی میبینی ظاهر برنامه جذاب و در پس زمینه یک پرفرمنس وحشتناکی داره برنامت رو حمایت میکنه اصلا ذوق میکنی در حد هوا فضا

    خدمت شما : http://www.aparat.com/v/OX0RW سعی کنید در حالت HD مشاهده کنید.

  16. #16

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    اینم یک طرح جدید و جالب که 45 دقیقه وقتمو گرفت و به زودی تو پروژه هام استفاده میکنم.
    میتونید ازش ایده بگیرید.

    دو کامپوننت Card Info و Card Button هستش که میشه در بخش های خاصی ازشون استفاده کرد.

    قابلیت هایی که این دو کامپوننت دارند :

    کامپوننت Card Info :

    • امکان کلیک شدن
    • امکان لمسی
    • امکان تغییر اندازه و رنگ
    • امکان تغییر متن اصلی
    • پشتیبانی از حالت های انیمیت
    • زیبا و جزاب


    کامپوننت Card Box:

    • امکان کلیک شدن
    • امکان لمسی
    • امکان تغییر اندازه و رنگ
    • امکان تغییر متن اصلی
    • امکان لینک دهی
    • امکان منو
    • امکان فعال و غیر فعال شدن همراه با خاصیت های لمسی ، کلیدی و ماوس
    • سفارشی سازی با دو دکمه بعدی Edit و Remove
    • پشتیبانی از حالت های انیمیت
    • زیبا و جزاب


    کاربرد این کامپوننت بستگی داره به سلیقه شما ، مثلا میشه در بخشی که قراره دکمه های بزرگ و شیکی قرار بدین از همچین باکسی استفاده کنید که نسبت به Button از ویژگی های بهتری برخوردار هست.


    Card-Info_Card-Button.jpg

    اینهم فایل ویدیوئی که حالت های انیمیت رو میتونید ببینید : http://www.aparat.com/v/XnTsM

    کد مربوط به Card Info رو قرار میدم تا متوجه نحوه Component نویسی بشید.



    /*=============================================
    Copyright (C) 2015 Nanosoft Corporation
    Programmer & Developer : Kambiz Asadzadeh
    *==============================================*/

    import QtQuick 2.4
    import QtQuick.Controls 1.4
    import QtGraphicalEffects 1.0


    Item {

    id: card_general

    property alias title : title.text //for title
    property alias desc : desc.text //for desc

    property alias iconLetterText : icon_letter_text.text //for icon_letter text
    property alias iconLetterTextColor : icon_letter_text.color //for icon_letter text
    property alias iconLetterColor : icon_letter.color //for icon_letter color
    property alias mouseArea : card_item_mouseArea //for mouse area

    property alias edit_mouseArea : card_menu_edit_mouseArea //for edit mouse area
    property alias turnOff_mouseArea : card_menu_turnoff_mouseArea //for turn on/off mouse area
    property alias remove_mouseArea : card_menu_remove_mouseArea //for remove mouse area


    width: 190
    height: 300

    property int turn: 0 // turning on/off status 0 is Enable / 1 is Disable

    Rectangle {
    id: card_body
    width: 190
    height: 300
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    radius: 2

    Behavior on scale { NumberAnimation { duration: 300 } }
    Behavior on color {ColorAnimation{}}

    layer.enabled: true
    layer.effect: DropShadow {
    horizontalOffset: 0;
    radius: 8
    samples: 16
    source: card_item
    color: "#20000000"
    verticalOffset: 0;
    transparentBorder: true
    spread: 0
    }



    }

    Rectangle {
    id: card_item
    width: 190
    height: 300
    anchors.verticalCenter: card_body.verticalCenter
    anchors.horizontalCenter: card_body.horizontalCenter
    radius: 2

    Behavior on scale { NumberAnimation { duration: 300 } }
    Behavior on color {ColorAnimation{}}

    Rectangle {
    id: card_overlay
    x: 1
    y: 0
    width: 190
    height: 190
    color: "#ffffff"
    anchors.horizontalCenter: parent.horizontalCenter
    Behavior on scale { NumberAnimation { duration: 300 } }
    Behavior on color {ColorAnimation{}}

    Rectangle {
    id: icon_letter
    width: 150
    height: 150
    color: "#87cefa"
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    Behavior on scale { NumberAnimation { duration: 300 } }

    Text {
    id: icon_letter_text
    color: "#ffffff"
    text: qsTr("K")
    anchors.fill: parent
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 90
    }
    }

    }

    Item {
    id: card_info
    x: 0
    y: 191
    width: 190
    height: 105

    Text {
    id: title
    x: 15
    y: 14
    width: 150
    height: 21
    text: qsTr("Static pages")
    anchors.horizontalCenter: parent.horizontalCenter
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignLeft
    font.pixelSize: 16
    }

    Label {
    id: desc
    x: 20
    y: 41
    width: 150
    height: 32
    color: "#888888"
    text: qsTr("Module for configurating static pages")
    wrapMode: Text.WordWrap
    verticalAlignment: Text.AlignTop
    horizontalAlignment: Text.AlignLeft
    anchors.horizontalCenter: parent.horizontalCenter
    font.pixelSize: 12

    }
    }

    MouseArea {
    id: card_item_mouseArea
    anchors.bottomMargin: 36
    anchors.fill: parent

    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {

    if(card_item_mouseArea.containsMouse) {
    card_overlay.color = "#e6e6e6"
    }

    else {
    card_overlay.color = "#ffffff"

    }
    }

    onPressedChanged: {

    icon_letter.scale = 0.8

    }

    onClicked: {

    icon_letter.scale = 1.0

    }

    }
    }


    Rectangle {
    id: card_menu_in
    x: 5
    width: 190
    height: 305
    color: "#ffffff"
    opacity: 0
    visible: false
    y: 5

    NumberAnimation on x{
    id: anim_open
    running: true
    from: 50
    to: 5
    duration: 200

    }


    Rectangle {
    id: card_menu_edit
    x: -3
    y: 112
    width: 190
    height: 36
    color: "#00000000"
    anchors.horizontalCenter: parent.horizontalCenter

    Text {
    id: card_menu_edit_text
    color: "#333333"
    text: qsTr("Edit")
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    anchors.fill: parent
    font.pixelSize: 14
    Behavior on scale { NumberAnimation{}}
    Behavior on color {ColorAnimation{}}
    }

    MouseArea {
    id: card_menu_edit_mouseArea
    anchors.fill: parent
    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {

    if(card_menu_edit_mouseArea.containsMouse) {
    card_menu_edit.color = "#337AB7"
    card_menu_edit_text.color = "#ffffff"
    }

    else {
    card_menu_edit.color = "transparent"
    card_menu_edit_text.color = "#333333"
    }
    }
    onPressedChanged: {

    card_menu_edit_text.scale = 0.8

    }

    onClicked: {

    card_menu_edit_text.scale = 1.0

    }
    }
    }

    Rectangle {
    id: card_menu_turnoff
    x: -2
    y: 148
    width: 190
    height: 36
    color: "#00000000"
    anchors.horizontalCenterOffset: 0
    anchors.horizontalCenter: parent.horizontalCenter

    Text {
    id: card_menu_turnoff_text
    color: "#333333"
    text: ("Turn off")
    anchors.fill: parent
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 14
    Behavior on scale { NumberAnimation{}}
    Behavior on color {ColorAnimation{}}
    }

    MouseArea {
    id: card_menu_turnoff_mouseArea
    x: 1
    y: 3
    anchors.fill: parent
    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {

    if(card_menu_turnoff_mouseArea.containsMouse) {
    card_menu_turnoff.color = "#337AB7"
    card_menu_turnoff_text.color = "#ffffff"
    }

    else {
    card_menu_turnoff.color = "transparent"
    card_menu_turnoff_text.color = "#333333"
    }
    }
    onPressedChanged: {

    card_menu_turnoff_text.scale = 0.8

    }
    onClicked: {
    card_menu_turnoff_text.scale = 1.0
    if (turn === 1){
    turn = 0
    card_foot.color = "#f6f6f6"
    services_over_list.text = "Link"
    services_over_list.color = "#337AB7"
    card_menu_turnoff_text.text = "Turn off"
    card_item_mouseArea.enabled = true
    card_info.enabled = false
    card_overlay.enabled = false
    card_info.opacity = 1.0
    card_overlay.opacity = 1.0


    } else if (turn === 0){
    turn = 1
    card_foot.color = "#F54C48"
    services_over_list.text = "Off"
    services_over_list.color = "#ffffff"
    card_menu_turnoff_text.text = "Turn on"
    card_item_mouseArea.enabled = false
    card_info.opacity = 0.5
    card_overlay.opacity = 0.5

    }


    }
    }
    }

    Rectangle {
    id: card_menu_remove
    x: 5
    y: 182
    width: 190
    height: 36
    color: "#00000000"
    anchors.horizontalCenterOffset: 0
    anchors.horizontalCenter: parent.horizontalCenter

    Text {
    id: card_menu_remove_text
    color: "#333333"
    text: qsTr("Remove")
    anchors.fill: parent
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 14
    Behavior on scale { NumberAnimation{}}
    Behavior on color {ColorAnimation{}}
    }

    MouseArea {
    id: card_menu_remove_mouseArea
    x: 1
    y: 3
    anchors.fill: parent
    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {
    if(card_menu_remove_mouseArea.containsMouse) {
    card_menu_remove.color = "#337AB7"
    card_menu_remove_text.color = "#ffffff"
    }

    else {
    card_menu_remove.color = "transparent"
    card_menu_remove_text.color = "#333333"
    }
    }
    onPressedChanged: {

    card_menu_remove_text.scale = 0.8

    }

    onClicked: {

    card_menu_remove_text.scale = 1.0

    }
    }
    }
    }

    Rectangle {
    id: card_body_border
    width: 190
    height: 300
    color: "#00000000"
    border.color: "#cccccc"
    radius: 2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    }

    }




    اینم فایل main و نحوه فراخوانی کامپوننت :



    import QtQuick 2.4
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.2

    Window {
    id: window1


    visible: true

    width: 1000
    height: 1000

    Item {

    width: 1000
    height: 1000
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter

    CardInfo {
    x: 302
    y: 226

    mouseArea.onClicked: {
    text_card_info.text = "Card info Clicked!" ;
    text_card_info.color = "green"

    // Call C++‎‎ Function in here to do anything ! :-)
    }



    }


    Text {
    id: text1
    x: 322
    y: 556
    text: qsTr("Card info status:")
    font.pixelSize: 12
    }

    Text {
    id: text_card_info
    x: 416
    y: 556
    width: 95
    height: 14
    text: qsTr("None")
    font.pixelSize: 12
    }

    }

    }





    میتونید در بخش onClicked تابع مورد نظر خودتون رو از C++‎‎‎‎‎ صدا بزنید.
    آخرین ویرایش به وسیله کامبیز اسدزاده : یک شنبه 19 مهر 1394 در 00:43 صبح

  17. #17

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    یک ویدیو در رابطه با Google Material که دیدنش خالی از لطف نیست : http://www.aparat.com/v/UVoZg

  18. #18

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎‎

    سلام

    ممنون از استاد اسدزاده
    آخرین ویرایش به وسیله ali_72 : دوشنبه 23 آذر 1394 در 14:22 عصر دلیل: مشکل حل شد

  19. #19

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    نقل قول نوشته شده توسط کامبیز اسدزاده مشاهده تاپیک
    روش مدرن و تخت یا همان Flat
    معرفی کنترل های تحت که در صنعت خودرو سازی و مخصوصا iOS و Android استفاده میشه : http://doc.qt.io/QtQuickEnterpriseControls/index.html
    نحوه استایل نویسی برای این نسخه از استایل ها : http://doc.qt.io/QtQuickEnterpriseCo...les-index.html

    مثل تصاویر زیر :

    btn-flat.pngflat-1.pngdelay.pngdial.pngprogres.pngswtch-flat.png
    سلام ، این کنترل هارو از کجا میشه دانلود کرد ؟؟؟

  20. #20

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    نقل قول نوشته شده توسط Sir-Programmer مشاهده تاپیک
    سلام ، این کنترل هارو از کجا میشه دانلود کرد ؟؟؟

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

  21. #21

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    نقل قول نوشته شده توسط کامبیز اسدزاده مشاهده تاپیک
    اینم یک طرح جدید و جالب که 45 دقیقه وقتمو گرفت و به زودی تو پروژه هام استفاده میکنم.
    میتونید ازش ایده بگیرید.

    دو کامپوننت Card Info و Card Button هستش که میشه در بخش های خاصی ازشون استفاده کرد.

    قابلیت هایی که این دو کامپوننت دارند :

    کامپوننت Card Info :

    • امکان کلیک شدن
    • امکان لمسی
    • امکان تغییر اندازه و رنگ
    • امکان تغییر متن اصلی
    • پشتیبانی از حالت های انیمیت
    • زیبا و جزاب


    کامپوننت Card Box:

    • امکان کلیک شدن
    • امکان لمسی
    • امکان تغییر اندازه و رنگ
    • امکان تغییر متن اصلی
    • امکان لینک دهی
    • امکان منو
    • امکان فعال و غیر فعال شدن همراه با خاصیت های لمسی ، کلیدی و ماوس
    • سفارشی سازی با دو دکمه بعدی Edit و Remove
    • پشتیبانی از حالت های انیمیت
    • زیبا و جزاب


    کاربرد این کامپوننت بستگی داره به سلیقه شما ، مثلا میشه در بخشی که قراره دکمه های بزرگ و شیکی قرار بدین از همچین باکسی استفاده کنید که نسبت به Button از ویژگی های بهتری برخوردار هست.


    Card-Info_Card-Button.jpg

    اینهم فایل ویدیوئی که حالت های انیمیت رو میتونید ببینید : http://www.aparat.com/v/XnTsM

    کد مربوط به Card Info رو قرار میدم تا متوجه نحوه Component نویسی بشید.



    /*=============================================
    Copyright (C) 2015 Nanosoft Corporation
    Programmer & Developer : Kambiz Asadzadeh
    *==============================================*/

    import QtQuick 2.4
    import QtQuick.Controls 1.4
    import QtGraphicalEffects 1.0


    Item {

    id: card_general

    property alias title : title.text //for title
    property alias desc : desc.text //for desc

    property alias iconLetterText : icon_letter_text.text //for icon_letter text
    property alias iconLetterTextColor : icon_letter_text.color //for icon_letter text
    property alias iconLetterColor : icon_letter.color //for icon_letter color
    property alias mouseArea : card_item_mouseArea //for mouse area

    property alias edit_mouseArea : card_menu_edit_mouseArea //for edit mouse area
    property alias turnOff_mouseArea : card_menu_turnoff_mouseArea //for turn on/off mouse area
    property alias remove_mouseArea : card_menu_remove_mouseArea //for remove mouse area


    width: 190
    height: 300

    property int turn: 0 // turning on/off status 0 is Enable / 1 is Disable

    Rectangle {
    id: card_body
    width: 190
    height: 300
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    radius: 2

    Behavior on scale { NumberAnimation { duration: 300 } }
    Behavior on color {ColorAnimation{}}

    layer.enabled: true
    layer.effect: DropShadow {
    horizontalOffset: 0;
    radius: 8
    samples: 16
    source: card_item
    color: "#20000000"
    verticalOffset: 0;
    transparentBorder: true
    spread: 0
    }



    }

    Rectangle {
    id: card_item
    width: 190
    height: 300
    anchors.verticalCenter: card_body.verticalCenter
    anchors.horizontalCenter: card_body.horizontalCenter
    radius: 2

    Behavior on scale { NumberAnimation { duration: 300 } }
    Behavior on color {ColorAnimation{}}

    Rectangle {
    id: card_overlay
    x: 1
    y: 0
    width: 190
    height: 190
    color: "#ffffff"
    anchors.horizontalCenter: parent.horizontalCenter
    Behavior on scale { NumberAnimation { duration: 300 } }
    Behavior on color {ColorAnimation{}}

    Rectangle {
    id: icon_letter
    width: 150
    height: 150
    color: "#87cefa"
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    Behavior on scale { NumberAnimation { duration: 300 } }

    Text {
    id: icon_letter_text
    color: "#ffffff"
    text: qsTr("K")
    anchors.fill: parent
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 90
    }
    }

    }

    Item {
    id: card_info
    x: 0
    y: 191
    width: 190
    height: 105

    Text {
    id: title
    x: 15
    y: 14
    width: 150
    height: 21
    text: qsTr("Static pages")
    anchors.horizontalCenter: parent.horizontalCenter
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignLeft
    font.pixelSize: 16
    }

    Label {
    id: desc
    x: 20
    y: 41
    width: 150
    height: 32
    color: "#888888"
    text: qsTr("Module for configurating static pages")
    wrapMode: Text.WordWrap
    verticalAlignment: Text.AlignTop
    horizontalAlignment: Text.AlignLeft
    anchors.horizontalCenter: parent.horizontalCenter
    font.pixelSize: 12

    }
    }

    MouseArea {
    id: card_item_mouseArea
    anchors.bottomMargin: 36
    anchors.fill: parent

    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {

    if(card_item_mouseArea.containsMouse) {
    card_overlay.color = "#e6e6e6"
    }

    else {
    card_overlay.color = "#ffffff"

    }
    }

    onPressedChanged: {

    icon_letter.scale = 0.8

    }

    onClicked: {

    icon_letter.scale = 1.0

    }

    }
    }


    Rectangle {
    id: card_menu_in
    x: 5
    width: 190
    height: 305
    color: "#ffffff"
    opacity: 0
    visible: false
    y: 5

    NumberAnimation on x{
    id: anim_open
    running: true
    from: 50
    to: 5
    duration: 200

    }


    Rectangle {
    id: card_menu_edit
    x: -3
    y: 112
    width: 190
    height: 36
    color: "#00000000"
    anchors.horizontalCenter: parent.horizontalCenter

    Text {
    id: card_menu_edit_text
    color: "#333333"
    text: qsTr("Edit")
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    anchors.fill: parent
    font.pixelSize: 14
    Behavior on scale { NumberAnimation{}}
    Behavior on color {ColorAnimation{}}
    }

    MouseArea {
    id: card_menu_edit_mouseArea
    anchors.fill: parent
    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {

    if(card_menu_edit_mouseArea.containsMouse) {
    card_menu_edit.color = "#337AB7"
    card_menu_edit_text.color = "#ffffff"
    }

    else {
    card_menu_edit.color = "transparent"
    card_menu_edit_text.color = "#333333"
    }
    }
    onPressedChanged: {

    card_menu_edit_text.scale = 0.8

    }

    onClicked: {

    card_menu_edit_text.scale = 1.0

    }
    }
    }

    Rectangle {
    id: card_menu_turnoff
    x: -2
    y: 148
    width: 190
    height: 36
    color: "#00000000"
    anchors.horizontalCenterOffset: 0
    anchors.horizontalCenter: parent.horizontalCenter

    Text {
    id: card_menu_turnoff_text
    color: "#333333"
    text: ("Turn off")
    anchors.fill: parent
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 14
    Behavior on scale { NumberAnimation{}}
    Behavior on color {ColorAnimation{}}
    }

    MouseArea {
    id: card_menu_turnoff_mouseArea
    x: 1
    y: 3
    anchors.fill: parent
    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {

    if(card_menu_turnoff_mouseArea.containsMouse) {
    card_menu_turnoff.color = "#337AB7"
    card_menu_turnoff_text.color = "#ffffff"
    }

    else {
    card_menu_turnoff.color = "transparent"
    card_menu_turnoff_text.color = "#333333"
    }
    }
    onPressedChanged: {

    card_menu_turnoff_text.scale = 0.8

    }
    onClicked: {
    card_menu_turnoff_text.scale = 1.0
    if (turn === 1){
    turn = 0
    card_foot.color = "#f6f6f6"
    services_over_list.text = "Link"
    services_over_list.color = "#337AB7"
    card_menu_turnoff_text.text = "Turn off"
    card_item_mouseArea.enabled = true
    card_info.enabled = false
    card_overlay.enabled = false
    card_info.opacity = 1.0
    card_overlay.opacity = 1.0


    } else if (turn === 0){
    turn = 1
    card_foot.color = "#F54C48"
    services_over_list.text = "Off"
    services_over_list.color = "#ffffff"
    card_menu_turnoff_text.text = "Turn on"
    card_item_mouseArea.enabled = false
    card_info.opacity = 0.5
    card_overlay.opacity = 0.5

    }


    }
    }
    }

    Rectangle {
    id: card_menu_remove
    x: 5
    y: 182
    width: 190
    height: 36
    color: "#00000000"
    anchors.horizontalCenterOffset: 0
    anchors.horizontalCenter: parent.horizontalCenter

    Text {
    id: card_menu_remove_text
    color: "#333333"
    text: qsTr("Remove")
    anchors.fill: parent
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 14
    Behavior on scale { NumberAnimation{}}
    Behavior on color {ColorAnimation{}}
    }

    MouseArea {
    id: card_menu_remove_mouseArea
    x: 1
    y: 3
    anchors.fill: parent
    hoverEnabled: true
    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

    onHoveredChanged: {
    if(card_menu_remove_mouseArea.containsMouse) {
    card_menu_remove.color = "#337AB7"
    card_menu_remove_text.color = "#ffffff"
    }

    else {
    card_menu_remove.color = "transparent"
    card_menu_remove_text.color = "#333333"
    }
    }
    onPressedChanged: {

    card_menu_remove_text.scale = 0.8

    }

    onClicked: {

    card_menu_remove_text.scale = 1.0

    }
    }
    }
    }

    Rectangle {
    id: card_body_border
    width: 190
    height: 300
    color: "#00000000"
    border.color: "#cccccc"
    radius: 2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    }

    }




    اینم فایل main و نحوه فراخوانی کامپوننت :



    import QtQuick 2.4
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.2

    Window {
    id: window1


    visible: true

    width: 1000
    height: 1000

    Item {

    width: 1000
    height: 1000
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter

    CardInfo {
    x: 302
    y: 226

    mouseArea.onClicked: {
    text_card_info.text = "Card info Clicked!" ;
    text_card_info.color = "green"

    // Call C++‎‎‎‎‎‎ Function in here to do anything ! :-)
    }



    }


    Text {
    id: text1
    x: 322
    y: 556
    text: qsTr("Card info status:")
    font.pixelSize: 12
    }

    Text {
    id: text_card_info
    x: 416
    y: 556
    width: 95
    height: 14
    text: qsTr("None")
    font.pixelSize: 12
    }

    }

    }





    میتونید در بخش onClicked تابع مورد نظر خودتون رو از C++‎‎‎‎‎‎‎‎‎ صدا بزنید.
    سلام
    ایجاد و استفاده از کامپوننت

    http://stackoverflow.com/questions/2...qml-toolbutton
    آخرین ویرایش به وسیله ali_72 : سه شنبه 15 دی 1394 در 08:12 صبح دلیل: مشکل حل شد

  22. #22
    کاربر دائمی آواتار zidanerfan
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    ProgRaMMer
    پست
    182

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    نقل قول نوشته شده توسط Sir-Programmer مشاهده تاپیک
    سلام ، این کنترل هارو از کجا میشه دانلود کرد ؟؟؟
    سلام دوستان منم میخوام از این کنترل های سبز رنگ استفاده کنم خواهشاااااااااااااااااا رهنماییم کنید چیکار باید بکنم ممننننننون

  23. #23

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

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

  24. #24
    کاربر دائمی آواتار zidanerfan
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    ProgRaMMer
    پست
    182

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    نقل قول نوشته شده توسط ali_72 مشاهده تاپیک
    لینک هایی که آقای اسدزاده گذاشتن رو از ابتدا مطالعه کنید و پروژه ای که در ابتدای تاپیک گفتن رو دانلود کنید
    دوست عزیز material design رو نمیگم


    اینارو میگم راهنمایی کن لطفااااا ممنون

  25. #25

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    سلام...
    من تازه با qt آشنا شدم و فقط C++‎‎‎ تنها زبانیه که بلدم و کمی ناآشنا هستم...
    اگر بخوام برنامه ام ظاهر گرافیکی داشته باشه باید از QML استفاده کنم، درست متوجه شدم؟!(مثلا Button ها ظاهر زیبایی داشته باشند، یا مثلا تصویرِ یک ضربدرقرمز (آیکن ) بعنوان botton عمل کنه...
    میشه پیرامون این موضوع راهنماییم کنید خیلی لازم دارم!
    پروژه ای رو دارم با C++‎ مینویسم، بعد برای طراحی GUI اومدم سمت کیوت، میشه ساده طراحی کنم ولی میخوام گرافیکی و چشم نواز باشه...
    ممنون.

  26. #26
    کاربر جدید آواتار IMAN4k
    تاریخ عضویت
    خرداد 1393
    محل زندگی
    Tehran
    پست
    22

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎‎

    نقل قول نوشته شده توسط introvert مشاهده تاپیک
    سلام...
    من تازه با qt آشنا شدم و فقط C++‎‎‎‎‎‎‎ تنها زبانیه که بلدم و کمی ناآشنا هستم...
    اگر بخوام برنامه ام ظاهر گرافیکی داشته باشه باید از QML استفاده کنم، درست متوجه شدم؟!(مثلا Button ها ظاهر زیبایی داشته باشند، یا مثلا تصویرِ یک ضربدرقرمز (آیکن ) بعنوان botton عمل کنه...
    میشه پیرامون این موضوع راهنماییم کنید خیلی لازم دارم!
    ممنون.
    دوست عزیز من تو قضیه حرفه ای نیستم و چند وقت میشه با Qt اشنا شدم.تجربه خودم و میگم:
    اول سعی کنید Qt رو اصولی تسلط پیدا کنید.
    در مورد ui هم با Qt میشه انجام دادم (تا یه جاهایی) که پیچیدگی خودش داره (کار با event ها و ...) اما طبق گفته ها با qml این کار راحت تره و دست شما رو خیلی باز تر میذاره (مخصوصا در مورد انمیشن ها)
    ویدئو های زیر از Pluralsight هم در مورد Qt quick و qml میتونه کمک کنه :
    اما اگر فقط قصدتون تغییر ظاهر ابتدایی ویجت ها و... فقط به همین بسنده کنید :

  27. #27

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

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

    فایل کامل پروژه هم ضمیمه گردید.
    سلام استاد
    فایل خراب هست.
    Untitled.png

  28. #28

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎

    نقل قول نوشته شده توسط JustCompiler مشاهده تاپیک
    سلام استاد
    فایل خراب هست.
    Untitled.png
    سلام

    نه خراب نیستن بعضی از فایل هارو من با 7zip فشرده کردم برای همین WinRar باهاشون سازگار نیست.
    نرم افزار 7Zip رو نصب و با اون اکسترکتش کنید.

  29. #29
    کاربر دائمی آواتار Roia_del
    تاریخ عضویت
    اسفند 1385
    محل زندگی
    تبریز
    پست
    178

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    با سلام .
    استاد اسدزاده اون فایلهایی که تو پست اول هست ، از gitHub دانلود کردم ، پروژه رو به نظر میرسه تغییر دادن. چون من پوشه Module ندیدم. امکانش هست راهنمایی بفرمایید. با qpm هم نتونستم اون کارهایی رو گفته بود انجام بدم به dependencies گیر میداد. این پایینی هم عکس پوشه های کد gitHub هست.

    papyros.png

    https://github.com/papyros/qml-material

  30. #30
    کاربر دائمی آواتار Roia_del
    تاریخ عضویت
    اسفند 1385
    محل زندگی
    تبریز
    پست
    178

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    نقل قول نوشته شده توسط Roia_del مشاهده تاپیک
    با سلام .
    استاد اسدزاده اون فایلهایی که تو پست اول هست ، از gitHub دانلود کردم ، پروژه رو به نظر میرسه تغییر دادن. چون من پوشه Module ندیدم. امکانش هست راهنمایی بفرمایید. با qpm هم نتونستم اون کارهایی رو گفته بود انجام بدم به dependencies گیر میداد. این پایینی هم عکس پوشه های کد gitHub هست.

    papyros.png

    https://github.com/papyros/qml-material

    البته پس از تغییر Branch از develop به Release اون پوشه ها اومدند. فقط الان بعد کپی اونها هم به پوشه های مذکور که فرمودین ، باز import Material 0.1 v رو نمیشناسه. من Release v 0.1 رو دانلود کردم.

    الان مشکل من یعنی از کجاست؟ (در ضمن QtQuick 2.5 هست)
    آخرین ویرایش به وسیله Roia_del : دوشنبه 13 اردیبهشت 1395 در 06:31 صبح دلیل: افزودن موارد

  31. #31
    کاربر دائمی
    تاریخ عضویت
    اردیبهشت 1387
    محل زندگی
    مشهد
    پست
    281

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    سلام
    ممکنه فایلهای لازمه ( پروژه متریال دیزاین)
    رو توی سرور همین سایت هم برای دانلود بذارین، من با دانلود از گیت هاپ مشکل دارم، تشکر
    آخرین ویرایش به وسیله Hadiir.net : چهارشنبه 14 تیر 1396 در 00:54 صبح

  32. #32
    کاربر دائمی
    تاریخ عضویت
    اردیبهشت 1387
    محل زندگی
    مشهد
    پست
    281

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    سلام، وقت بخیر، یک پیشنهاد داشتم ، ممکنه آموزش Qt C++‎ & Qml رو در قالب یک پروژه پیش ببرین، یک پروژه ساده و اوپن سورس
    بعنوان مثال، یک پروژه دفتر تلفن یا برنامه ای برای ثبت اطلاعات اشخاص که کاربرد عمومی خوب و زیادی داره، طراحی فرم ها و ظاهر برنامه با Qml انجام بشه، کدهای اصلی در کیوت و با C++‎ و همچنین از یک دیتابیس مناسب برای ذخیره و بازیابی اطلاعات استفاده بشه.
    بنظرم اینجور تاثیر بیشتری در یادگیری داره و نهایتا خروجی برنامه رو هر کسی میتونه ازش استفاده کنه
    و از طرفی چون پروژه اوپن سورس هست ، هرکسی میتونه به روند تکاملش کمک کنه.
    تشکر

  33. #33

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

    نقل قول نوشته شده توسط Hadiir.net مشاهده تاپیک
    سلام، وقت بخیر، یک پیشنهاد داشتم ، ممکنه آموزش Qt C++‎‎ & Qml رو در قالب یک پروژه پیش ببرین، یک پروژه ساده و اوپن سورس
    بعنوان مثال، یک پروژه دفتر تلفن یا برنامه ای برای ثبت اطلاعات اشخاص که کاربرد عمومی خوب و زیادی داره، طراحی فرم ها و ظاهر برنامه با Qml انجام بشه، کدهای اصلی در کیوت و با C++‎‎ و همچنین از یک دیتابیس مناسب برای ذخیره و بازیابی اطلاعات استفاده بشه.
    بنظرم اینجور تاثیر بیشتری در یادگیری داره و نهایتا خروجی برنامه رو هر کسی میتونه ازش استفاده کنه
    و از طرفی چون پروژه اوپن سورس هست ، هرکسی میتونه به روند تکاملش کمک کنه.
    تشکر
    سلام من هم موافقم

  34. #34

    نقل قول: نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎‎‎

    نقل قول نوشته شده توسط کامبیز اسدزاده مشاهده تاپیک
    سلام

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

    شاید یکی از دلایلی که باعث میشه خیلی ها سراغ C++‎‎‎‎‎‎‎‎‎ نروند سخت بودن پیاده سازی رابط های گرافیکی هستش که بر اساس تجربه شخصی میتونم بگم این به سختی زبان بر نمیگرده به تنبلی و عدم شناخت کافیه برنامه نویس بر میگرده چرا که یا کمی پشت کار کتابخانه ای مثل Qt رو پیدا میکنه حال توسط معرفیه یکی از نمونه های QML نشون میدم که چطور سختی C++‎‎‎‎‎‎‎‎‎ براتون جذابیت پیدا خواهد کرد ! در نتیجه هر چیز سختی نتیجه خارق العاده ای رو خواهد داشت.

    برای اینکه روشن بشید و قبول کنید که طراحی رابط کاربری با QML خیلی فراتر از HTML5 و CSS3 هستش هرچند اینهارم پشتیبانی میکنه در خودش ولی در کل استایل نویسی توسط QML خیلی جذابیت و قدرت خاص خودش رو داره که عمرا تو WPF یا فناوری های دات نتی بشه همچین چیزی رو به سادگی خلق کرد.

    خیلی ساده در یک جمله معرفیش میکنم QML یک زبان برنامه نویسی برای طراحی رابط گرافیکی هستش که بر پایه JavaScript ارائه شده و برای طراحی رابط کاربری توسط C++‎‎‎‎‎‎‎‎‎ پشتیبانی میشه در کل هدفش اینه که سرعت بده به طراحی و حل کنه مشکلات برنامه نویس بدبخت رو در لایه UI برای مثال توسط QML ظاهر برنامه رو طراحی کرده و سپس توسط C++‎‎‎‎‎‎‎‎‎ کلاس ها و توابعتون رو پیاده سازی کنید کلی وقت آزاد میشه و کاملا معماری چند لایه رعایت خواهد شد.

    کیفیت و سرعت QML خیلی بهتر از Widget هستش یکم اولش سخته ولی اگه میخواهید برنامه های زیبا و جذابی رو طراحی کنید که هیچ چیزی به گرد پاشم نرسه از همین QML استفاده کنید که خارق العادست.
    نکته : اگر تجربه کار با JavaScrip و HTML , CSS رو داشته باشید QML رو بهتر درک خواهید کرد که چطور به کمک C++‎‎‎‎‎‎‎‎‎ میاد دقیقا مثل JavaScript و HTML که به کمک PHP میروند.

    بنابراین میرم برای معرفی اولین استایل که بعد ها موارد بهتر و بیشتری رو هم معرفی خواهیم کرد و امیدوارم مدیران عزیز هم از معرفی طرح های جذاب در این زمینه دریغ نکنند که بزرگترین سوال برای مبتدیان نحوه طراحی ظاهر در C++‎‎‎‎‎‎‎‎‎ هستش.

    احتمالا میدونید که ظاهر کاربری Android 5.X بسیار بهتر از قبل و دلنشینتر شده و این طوریه که گوگل اومده یک سری متد و طرح های جالبی رو عرضه کرده با عنوان Material design که ما این طراحی و سبک کاملا دلنشین و آرام بخش هستش حداقل که برای شخصه من اینطور بوده لینک در رابطه با Material design : https://www.google.com/design/spec/m...roduction.html

    تصاویری از کنترل های خلاقانه توسط Material Design برای C++‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎ که تقریبا از کنترل های پر کاربرد عکس گرفتم بقیش رو هم در پوشه demo خواهید دید.

    ProgressBarDemo.png
    SwitchDemo.png
    SliderDemo.png
    ButtonDemo.png
    TimePickerDemo.png
    BottomSheetDemo.png
    TextFieldDemo.png
    CheckBoxDemo.png
    DatePickerDemo.png
    ColorPaletteDemo.jpg

    برای استفاده از این Material لینک GitHub رو بررسی کنید : https://github.com/papyros/qml-material
    همه چیز خیلی ساده هستش کافیه طبق آموزش ابتدا qml-material.pro رو کامپایل کنید و برای اینکه بتونید از این Material ها در طراحی های خودتون استفاده کنید توضیحاتی داده ولی شاید گنگ باشه برای همین به صورت زیر یه توضیحی میدم تا انشالله به نتیجه برسید.



    1. وارد پوشه Module در پروژه ای بشید که از GitHub دانلود میکنید که داخلش دو تا پوشه Material و QtQuick وجود داره اینارو باید کپی کنید در آدرس های فوق بر اساس نوع کامپایلرتون :


    • C:\Qt\Qt5.5.0-MSVC-x64\5.5\msvc2013_64\qml
    • C:\Qt\Qt5.5.0-Mingw\5.5\mingw492_32\qml
    • C:\Qt\Qt5.5.0\5.5\msvc2013\qml
    • و برای اندروید : C:\Qt\Qt5.5.0-Android\5.5\android_armv7\qml

    خب تقریبا مسیر ها یکی هستن یعنی داخل پوشه qml طبق چیزی که میبینید.

    بعدش کافیه یک پروژه ی جدیدی ایجاد کنید از نوع QML Application کدتون معمولا به صورت زیر خواهد بود :


    importQtQuick2.4importQtQuick.Window2.2
    Window {
    visible:true
    }


    حالا من این میخوام از استایل Button که Material Design هستش استفاده کنم کافیه ماژول Material رو وارد فایل کنم به صورت زیر :


    import Material 0.1


    و یه کدی که شامل چند نمونه Button هستش به صورت زیر :


    import QtQuick 2.4
    import QtQuick.Window 2.2
    import Material 0.1




    Window {
    visible: true




    Item {


    anchors.centerIn: parent
    anchors.fill: parent


    Column {
    anchors.centerIn: parent
    spacing: Units.dp(20)


    Button {
    text: "Simple Button"
    anchors.horizontalCenter: parent.horizontalCenter
    onClicked: snackbar.open("Simple, isn't it?")
    }


    Button {
    text: "Raised Button"
    elevation: 1
    anchors.horizontalCenter: parent.horizontalCenter
    onClicked: snackbar.open("This is a snackbar")
    }


    Button {
    text: "Disabled Raised Button"
    elevation: 1
    enabled: false
    anchors.horizontalCenter: parent.horizontalCenter
    }


    Button {
    text: "Wide Button"


    width: Units.dp(200)
    elevation: 1
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("That button is wide, and so is this snackbar!")
    }


    Button {
    id: focusableButton
    text: "Focusable with really long text"
    elevation: 1
    activeFocusOnPress: true
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("The text is really very very very very very long and now it needs to wrap, so this should show as two lines!")
    }


    Button {
    text: "Colored button"
    textColor: Theme.accentColor
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("That button is colored!")
    }


    Button {
    text: "Focusable button #2"
    elevation: 1
    activeFocusOnPress: true
    backgroundColor: Theme.primaryColor
    anchors.horizontalCenter: parent.horizontalCenter


    onClicked: snackbar.open("That button is colored!")
    }
    }


    ActionButton {
    anchors {
    right: parent.right
    bottom: snackbar.top
    margins: Units.dp(32)
    }


    iconName: "content/add"
    }


    Snackbar {
    id: snackbar
    }
    }




    }




    خیلی ترو تمیز به همین راحتی...
    برای ادامه نمونه استایل هاش نیازی نیست همرو اینجا آموزش بدم چون همشون تو پوشه demo موجود هستش ازشون استفاده کنید و لذتشو ببرید.
    ادامه‌ی آموزش‌ها در این بخش
    خسته نباشید مهندس.
    متاسفانه
    دو تا پوشه Material و QtQuick مسیری که مشخص کردید وجود نداره




تاپیک های مشابه

  1. پاسخ: 0
    آخرین پست: شنبه 08 فروردین 1394, 13:09 عصر
  2. گفتگو: گفتگو در مورد نحوه ایجاد پنل کاربری !
    نوشته شده توسط siavashsay در بخش PHP
    پاسخ: 28
    آخرین پست: شنبه 25 خرداد 1392, 11:42 صبح
  3. راهنمایی برای ایجاد رابط کاربری مشابه IE 9
    نوشته شده توسط NitroPlus در بخش VB.NET
    پاسخ: 7
    آخرین پست: جمعه 12 خرداد 1391, 02:15 صبح
  4. سوال: نحوه ایجاد دیتا بیس جدید توسط vb6
    نوشته شده توسط conter در بخش مطالب مرتبط با بانکهای اطلاعاتی در VB6
    پاسخ: 20
    آخرین پست: دوشنبه 24 مرداد 1390, 00:58 صبح
  5. نحوه ایجاد پرسجوی پارامتری توسط
    نوشته شده توسط moustafa در بخش SQL Server
    پاسخ: 2
    آخرین پست: شنبه 15 بهمن 1384, 14:26 عصر

برچسب های این تاپیک

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •