آموزش کیوت - قسمت ششم

معرفی و کار با قابلیت های HTML و CSS در طراحی

ا سلام؛

همانطور که میدونید امروزه داشتن گرافیک و طراحی های درست حسابی روی نرم افزار نویسی خودش یکی از مهمترین قسمت های تولید یک برنامه هستش که اکثرا به خاطر ای دلیل که C++‎‎‎‎‎‎ رو فقط یک محیط Console میدونن سراغ این زبان نیومدن نمیدونم چرا شاید براشون سخته یا شایدم اطلاعات کافی ندارن...

ولی در کل اگه با زبان های راحتی مثل C#‎‎‎‎‎‎ کار کردین میدونید که برای طراحی فناوری هایی مثل WPF رو دارند که بجای CSS از XAML استفاده میکنه و در نوبت خودش در طراحی کیفیت خوبی رو در خروجی ارائه میده.

ولی هرچی باشه خودتون میدونید طرح هایی که در برنامه های تحت وب تولید میشن همشون به کمک CSS و HTML هستش و همچنین JavaScript و ... حالا اگه این فناوری ها روی پلتفرم های دسکتاپی باشه چی میشه ؟ مسلما یکی من خودم خیلی خوشحال میشم و WPF رو میزارم کنار و میام سراغ همین Qt.

قبل از هرچیز یه تعریفی در رابطه به CSS و HTML بدم بعد بریم سر اصل مطلب....

فناوری CSS با آوای (سی‌اس‌اس) : روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. شیوه‌نامهٔ آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره‌ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

فناوری HTML : زبان امتدادپذیر نشانه‌گذاری فرامتن یا اکس‌اچ‌تی‌ام‌ال (Extensible HyperText Markup Language - XHTML) همان اچ‌تی‌ام‌ال است به همراه رعایت دقیق تمامی قواعد و دستورات نحوی نزدیک‌تر به زبان اکس‌ام‌ال که موجبات افزایش اطمینان از عمل‌کرد صححیح سندها در شرایط پیچیده‌تر موجود در اینترنت امروزین را فراهم می‌سازد. XHTMLها، نوع‌های سندها و ماژول‌ها در حال حاضر و در آینده هستند که در واقع زیر مجموعه و گسترش یافته HTML4 است. این نوع اسناد بر پایه XML هستند و برای کار در ترکیب با عامل کاربر مبتنی بر XML طراحی شده‌اند. و در حال حاضر نیز جدیدترین آن HTML5 هستش.



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



سوال .... مگر HTML و CSS مختص طراحی وب نیست ؟ در جواب باید گفت بله... ولی از این به بعد نه  همونطور که متوجه شدید در Qt ما قابلیت این رو خواهیم داشت از دستورات HTML و CSS در طراحی استفاده کنیم برای همینه که دارم میگم بهتر از این نمیشههههههه اقا نمیشههه !

بریم سر پروژه ... مثل قبل یه پروژه ایجاد میکنیم با نام MyDesign و از نوع همون Widgets ...
خب حالا برای شروع کار از HTML من میخوام شروع کنم که چطوری میشه دستورات HTML رو توی کد های C++‎‎‎‎‎‎ استفاده کرد.

فرض کنید من یه متنی هست در روی یه label یا هر شیئ دیگری میخوام توسط کد های HTML بهش ویژگی های خاصی بدم... میام کد رو به صورت زیر در نظر میگیرم :

یه Label و 2 تا دکمه ایجادمیکنم که در حالت عادی به صورت زیر دارای افکت و شکل ظاهرای استانداردی هستند که از استایل پیشفرض سیستم عامل تبعیت کردن ...

حالا من میخوام از HTML استفاده کنم و دیگه این وابستگی رو از سیستم عامل بگیرم ... چکار میکنیم به صورت زیر باید دقت کنید ما برای دستور نویسی HTML باید بین کتیشن و دابل کتیشن از کد های HTML استفاده کنیم که درستش هم همینه به صورت زیر.

"<b>This is C++‎‎‎‎‎‎/Qt HTML Code</b>"

میبینید این کد در بین تگ های دستور bold که با <b> اغاز کننده و </b> خاتمه دهنده شروع شده قرار گرفته و تمامی اونهارم در بین "" و یا ' قرار میدیم تا قابل شناسایی برای کامپایلر باشه.

حالا ما چطور باید این نوع نویسه رو روی یک لیبل ستش کنیم اینم خیلی راحت میشه به صورت زیر انجامش داد و خروجی رو مشاهده کرد.

ui->label->setText("<b>This is C++‎‎‎‎‎‎/Qt HTML Code</b>");

این کد چی میگه؟ خیلی راحت داره میگه آقا جان از کلاس فرم من شیئ label رو انتخاب کن و متن یا همون محتویاتش رو برام در بین کد HTML ست کن. که رد حالت عادی به صورت زیر هستش.

ui->label->setText("This is C++‎‎‎‎‎‎/Qt HTML Code");

تنها چیزی که من اضافه کردم چیه ؟ فقط تگ های شروع و پایان دهنده Bold هست پس در نتیجه شما با وارد کردن تگ های HTML به صورت استاندارد در کدتون میتونید ازشوتن استفاده کنید.

نتیجه خروجی : 

میبینید طبق تصویر مقایسه کنید متن label در حالت HTML پر رنگ شده به حالت bold تغییر کرده.

یه مثالی میزنم در رابطه با Tooltip با HTML ... طوری که وقتی روی دکمه اول ماوس رو نگه داریم یه Tooltip باز بشه که توسط HTML نوشتیم.

برای اینکار باید از Propertie چی استفاده کنیم ؟ مسلما باید از setToolTip استفاده کنیم :)

به این روش :

ui->pushButton->setToolTip("Hello <font color='red'><b>My name is Kambiz Asadzadeh</b></font>"

                            "<ul>"

                            "<li>Item 1</li>"

                            "<li>Item 2</li>"

                            "<li>Item 3</li>"

                            "</ul>");

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

حالا یه نکته ای هم اشاره کنم که اگه دقت کنید در فرم بالا من از CSS هم در داخل همون HTML تگ استفاده کردم ... این یعنی چی یعنی HTML به طور کلی قابل پشتیبانی هست چون اگه نبود ویژگی خاصش رو اجرا نمیکرد.

در رابطه با CSS یکم توضیح بدم چطور میتونیم یه CSS کد به فرممون نسبت بدیم.

قبل از هر چیز باید اینو بگم شما میتونید هم با این روشی که گفتم در بین تگ های HTML از CSS استفاده کنید هم روش های دیگه در کد نویسی خود C++‎‎‎‎‎‎ و همچنین روش دستی در قسمت طراحی توسط Qt به صورت های زیر...

روش اول رو که دیدین...روش دوم چطوریه در روش دوم شما میتونید از خاصیت setStyleSheet برای کنترل ها و اشیائ استفاده کنید مثلا به صورت زیر :

ui->label->setStyleSheet("color: #ff0000;");

خروجیش میشه تصویر زیر :

تغییری که کرده رنگ محتویات label قرمز شده که توسط خاصیت CSS بهش ربط دادیم.

حالا میشه با یه روش دیگه ای هم این کار رو کرد اونم اینه روی فرم و روی label راست کلیک میکنیم و گزینه Change StyleSheet رو انتخاب میکنیم در این حالت میتونید بر اساس نام کلاس و شناسه هر یک خاصیت و استایل رو ست کنید.

مثلا کد زیر رو در کادر باز شده وارد کنید و تایید کنید :

color: rgb(0, 85, 255);

رنگ خروجی میشه آبی...

در کل باید بگم شما میتویید کلا کدهای CSS رو در مرحله طراحی و همچنین کد نویسی به برنامتون ربط بدین و یا در نهایت یه کلاس های درست حسابی بنویسید برای استایل برنامتون و کلی کارای دیگه.

منبع