{{tag>مقالات تصميم سمات}}
~~ODT~~
====== تصميم السمات ======
سمات التطبيقات والأطر الخاصة بالنظام ككل تكون موجودة في ''/usr/share/themes/'' وأما الخاصة بالمستخدم تكون موجودة داخل مجلد  ‪ .themes ‬ المخفي في بيت المستخدم.

كل سمة تأخذ مجلد خاص بها داخله ويتفرع عنه مجلد اسمه gtk-2.0 لسمة تطبيقات gtk وهو يحتوي على ملف gtkrc ومجلد metacity-1 لسمات الإطارات ويحتوي على ملف metacity-theme-1.xml. ولمن أن يحتوي هذا المجلد أو ذاك أي صور إضافية يحتاجها.

<code>
MyThemeFolder
|-- gtk-2.0
|   `-- gtkrc
`-- metacity-1
    `-- metacity-theme-1.xml
</code>


مؤشرات الفأرة والأيقونات تكون موجودة في ''/usr/share/icons/'' أو في مجلد  ‪ .icons ‬ المخفي في بيت المستخدم.



===== سمات تطبيقات GTK =====
لعمل سمة كل ما عليك هو إنشاء ملف نصي اسمه gtkrc ووضعه في مجلد باسم السمة. وأول ما نحدده هو الألوان التلقائية للسمة وهي الألوان التي تظهر بها التطبيقات إن لم يغيرها المستخدم أو عند النقر على استعادة reset كما في هذه الصورة.

{{ :docs:gtk-theme-colors.png |تبويب ألوان السمة}}

يتم تحديدها بسطر يشبه

<code javascript>
gtk_color_scheme = "fg_color:#101010\nbg_color:#f8f8f1\nbase_color:#ffffff\ntext_color:#000000\nselected_bg_color:#5F7829\nselected_fg_color:#ffffff\ntooltip_bg_color:#FFFFBF\ntooltip_fg_color:#000"
</code>
وهو يحدد 8 ألوان هي:
  * ألوان عناصر النوافذ Windows
    * لون الخلفية **bg_color**
    * اللون الأمامي **fg_color** وهو لون الكتابة على الأزرار مثلا.
  * ألوان المدخلات النصية input boxes
    * لون الأساس **base_color** وهو لون الخلفية لعناصر الإدخال
    * لون النص **text_color** في تلك العناصر
  * ألوان التحديد Selected Items
    * لون خلفية التحديد **selected_bg_color**
    * لون التحديد الأمامي **selected_fg_color** أي لون الكتابة المحددة
  * لون التلميحات tooltips
    * خلفية التلميح **tooltip_bg_color**
    * لون التلميح الامامي **tooltip_fg_color** أي لون الكتابة فيه.

وكما تلاحظ نستخدم في تحديد هذه الألوان أسلوب # ثم RRGGBB 

فعليا هذا السطر لا يغير أي لون بل فقط يعرّف متغيرات macros بتلك القيم ليتم استعمالها لاحقا بوضع @ قبل اسم المتغير.

يتم تحديد شكل ولون الودجات (عناصر النوافذ كالأزرار) عبر تعريف سمات styles ثم ربطها بالودجة المطلوبة. انظر 
[[http://library.gnome.org/devel/gtk/unstable/gtk-Resource-Files.html#id462436|أهم معاملات السمات]].

وحيث أن صنوف gtk تتوزع في هرمية وراثية تشبه شجرة العائلة يمكنك ربط السمة بالجد فترتبط بكل أحفاده ما لم يتم تعديلها صراحة لاحقا. انظر [[http://library.gnome.org/devel/gtk/unstable/ch01.html|هرمية الكائنات في وثائق gtk]]

هذا مثال على سمة بسيطة
<code css>
# Test gtkrc
#
# Authors:
# Muayyad Alsadi <alsadi@ojuba.org>

gtk_color_scheme = "fg_color:#101010\nbg_color:#f8f8f1\nbase_color:#ffffff\ntext_color:#000000\nselected_bg_color:#5F7829\nselected_fg_color:#ffffff\ntooltip_bg_color:#FFFFBF\ntooltip_fg_color:#000"

style "ojuba-default"
{

	fg[NORMAL]			= @fg_color
	fg[PRELIGHT]			= @fg_color
	fg[ACTIVE]			= @text_color
	fg[SELECTED]			= @selected_fg_color
	fg[INSENSITIVE]			= shade (0.9, @bg_color)

	bg[NORMAL]			= @bg_color
	bg[PRELIGHT]			= shade (1.05, @bg_color)
	bg[ACTIVE]			= shade (0.86, @bg_color)
	bg[SELECTED]			= @selected_bg_color
	bg[INSENSITIVE]				= shade (0.9437, @bg_color)
	
	base[NORMAL]			= @base_color
	base[PRELIGHT]			= shade (1.05, @selected_bg_color)
	base[SELECTED]			= @selected_bg_color
	base[INSENSITIVE]		= @bg_color
	base[ACTIVE]			= shade (1.15, @selected_bg_color) 
	base[PRELIGHT]			= shade (1.05, @selected_bg_color)

	text[NORMAL]			= @text_color
	text[PRELIGHT]			= @text_color
	text[ACTIVE]			= @selected_fg_color
	text[SELECTED]			= @selected_fg_color
	text[INSENSITIVE]		= darker (@selected_fg_color)
}
class "GtkWidget" style "ojuba-default"

</code>
وهذه لقطة منها عبر برنامج twf من حزمة thewidgetfactory

{{ :docs:gtk-theme-mysimple1.png?480 |لقطة من السمة البسيطة}}

وعلى الرغم من بساطة هذه السمة إلا أنها سمة أنيقية وتحمل تأثيرات سنشرحها الآن.

لاحظ أن هذا الملف يعمل سمة ojuba-default ويربطها مع GtkWidget الذي ترثه كل ودجات GTK. هذه السمة تعرف قيمة الألوان الأمامية والخلفية (لودجات الأزرار) والأساس والنص (في ودجات تحرير النص) مستفيدة من القيمة الثمانية التي تحدثنا عنها سابقا لحالات الودجة الخمسة وهي:
  * NORMAL وهو الوضع الطبيعي للودجة
  * PRELIGHT وهو عندما يكون مؤشر الفأرة فوق الودجة.
  * ACTIVE عندما يتم النقر على الودجة
  * INSENSITIVE عندما تكون الودجة غير فاعلة أو معطلة.
  * SELECTED عندما تكون محددة
لاحظ كيف استفدنا من لون الخلفية bg_color في تعريف لون الزر عندما نوشر عليه بالفأرة وذلك عبر
  bg[PRELIGHT] = shade (1.05, @bg_color)

وذلك يعني أن لون الزر سيكون أفتح بمقدار 5% عندما تكون الفأرة فوق الزر PRELIGHT.

ليس فقط الألوان بل يمكن التحكم أيضا في سمك الخطوط أو مقدار الهوامش وغيرها انظر [[http://live.gnome.org/GnomeArt/Tutorials/GtkThemes/StyleProperties#head-8a615f30b5bf7ae306811609bec0568ddbc8acdf|قائمة بكل خصائص السمات]]


كذلك ويمكن تبليط صورة في خلفية ودجة بطريقة تشبه
<code javascript>
	bg_pixmap[NORMAL]		= "bg.png"
</code>
حيث bg.png هي اسم ملف نسبتا للمجلد الذي يحتوي ملف gtkrc ويمكن أن تكون "<parent>" وهي قيمة خاصة تعني نفس خلفية والد الودجة.

ويمكن أيضا عمل ذلك لكل حالات الودجة.
{{ :docs:gtk-theme-bg_pixmap.png |استعمال bg_pixmap لعمل تبليط لزخرفة}}

يمكن ربط سمات مختلفة على ودجات مختلفة والأكثر من ذلك يمكن ربط سمات مختلفة على نفس الودجة لكن في مسار مختلفة مثلا يمكن أن نجعل مظهر الزر إن ظهر في شريط الأدوات غير مظهر الزر العادي حيث أن مسار الأول هو ''GtkWindow.GtkHBox.GtkToolbar.GtkButton''
أو منظر لصاقات الكتابة GtkLabel التي تكون داخل الزر غير منظهرها خارج الزر. يمكن مطابقة الودجة عبر أنماط تحتوي * هكذا "*.GtkButton.*" لمطابقته أي شيء يكون داخل زر GtkButton. لكن استعمال الأنماط يتجاهل الصنوف المشتقة منه في هذه الحالة يفضل أن تستعمل الأقواس الزاوية (أي علامة <> حول اسم الصنف) هكذا "*.<GtkButton>.*" مما تعني الودجة التي مسارها يطابق ما ذكر سابقا مع اعتبار الهرمية الوراثية مثلا هذا سيطابق لصاقة عنوان GtkLabel موجودة داخل GtkToggleButton موجودة داخل نافذة GtkWindow.

من تطبيقات ذلك إعطاء اللوحة وشريط المهام وصنية النظام ..إلخ مظهر مختلف عن البقية عبر
<code javascript>
widget "*PanelWidget*" style "ojuba-panel-style"
widget "*PanelApplet*" style "ojuba-panel-style"
class "*Panel*" style "ojuba-panel-style"
widget_class "*Mail*" style "ojuba-panel-style"
widget_class "*notif*" style "ojuba-panel-style"
widget_class "*Notif*" style "ojuba-panel-style"
widget_class "*Tray*" style "ojuba-panel-style"
widget_class "*tray*" style "ojuba-panel-style"
class "*notif*" style "ojuba-panel-style"
class "*Notif*" style "ojuba-panel-style"
class "*Tray*" style "ojuba-panel-style"
class "*tray*" style "ojuba-panel-style"
widget_class "*BonoboDockItem" style "ojuba-panel-style"
class "*BonoboDockItem" style "ojuba-panel-style"
widget_class "*Panel*GtkToggleButton" style "ojuba-panel-buttons-style"
</code>
حيث عليك تعريف سمة اسمه ojuba-panel-style وأخرى اسمها ojuba-panel-buttons-style تكون مختلفة عن بقية الأزرار.

للمزيد عن تصميم سمات GTK انظر http://live.gnome.org/GnomeArt/Tutorials/GtkThemes

==== محركات السمات Theme Engines ====
إذا كنت تريد أكثر من مجرد ألوان مثلا كعمل لمعة أو تدرجات أو كساءات textures عليك استخدام محركات. يتم استخدام المحرك بين حاصرتي style هكذا

<code javascript>
style "my_style_name" {
	// ...
	// general options goes here
	// ...
	engine "pixmap" {
		// ...
		// engine options goes here
		// ...
	}
}
</code>

ويمكن استعمال أكثر من محرك في السمة الواحدة مثلا يمكن أن أستعمل Nodoka في الأزرار و clearlooks في ألسنة التبويب.

تتفاوت المحركات في سرعتها وفي [[http://gianvito.wordpress.com/2008/02/20/gtk-engines-benchmarks-whats-the-fastest/2/|مقال لقياس سرعة المحركات]] كان الناتج كما في الشكل التالي (الزمن الأقل أقضل)

{{ :docs:gtk-theme-engines-benchs.png?480 |قياس سرعة المحركات}}

وكان الأسرع هو Bluecurve لكن صاحب المقال ذكر أن محرك نودوكا nodoka عند تعطيل الاستدارة فيه roundness فإنه حقق 5.3 أي كان الأسرع.

<code javascript>
engine “nodoka”
{
animation = FALSE
contrast = 1.0
gradients = FALSE
listviewheaderstyle = 0
listviewstyle = 1
menubarstyle = 0
roundness = 0
scrollbarstyle = 2
stripes = FALSE
}
</code>

=== محرك الصور Pixmap ===
باستخدام هذا المحرك تستطيع أن تضع عدة صور على الودجات بطرق مختلفة لعمل السمة المطوبة. عيب هذا المحرك أنك لا تستطيع تلوين السمة (بسهولة) لأن وهذا المحرك يعتمد على صور لكن هذا لا يقلل من شانه حيث أن 
[[http://gnome-look.org/content/show.php?action=content&content=42697|سمة LiNsta]] تستخدم محرك pixmap

{{ :docs:gtk-theme-linsta.png?480 |سمة linsa}}

يستخدم هذا المحرك عبر وضع لبنة image أو أكثر اسمها كذا
<code javascript>
	engine "pixmap" {

		image
		{
			function		= BOX
			recolorable	= TRUE
			state			= NORMAL
			file			= "img1.png"
			border		= { 4, 4, 4, 4 }
			stretch		= TRUE
		}

		image
		{
			function		= BOX
			recolorable	= TRUE
			state			= PRELIGHT
			file			= "img2.png"
			border		= { 4, 4, 4, 4 }
			stretch		= TRUE
		}
</code>

الجزء أعلاه يطبق الصورة img1.png في الوضع الطبيعي state=NORMAL وعندما تؤشر الفأرة على الودجة (أي state=PRELIGHT) يستخدم الصورة img2.png وفي الحالتين يتم مط streach الصورة عدا أول 4 نقاط من أطرافها بسبب استخدام function=BOX و تحديد سمك الإطار بقيمة 4.

ومن الخيارات المفيدة في هذا المحرك الطبقة الفوقية overlay_file حيث يتم وضع الصورة المشار إليها في طبقة فوق الحالية ومزجهما معا.

إليك قائمة بكامل خيارات محرك pixmap

<code javascript>
        image
    {
        function = HLINE|VLINE|SHADOW|POLYGON|ARROA|DIAMOND|OVAL|STRING|BOX|FLAT_BOX|CHECK|OPTION|CROSS|RAMP|TAB|SHADOW_GAP|BOX_GAP|EXTENSION|FOCUS|SLIDER|ENTRY|HANDLE|STEPPER|EXPANDER|RESIZE_GRIP
        recolorable = TRUE|FALSE
        detail = <<Any String>>
        state = NORMAL|ACTIVE|PRELIGHT|SELECTED|INSENSITIVE
        shadow = NONE|IN|OUT|ETCHED_IN|ETCHED_OUT
        gap_side = TOP|BOTTOM|LEFT|RIGHT
        arrow_direction = UP|DOWN|LEFT|RIGHT
        orientation = HORIZONTAL|VERTICAL
        file = <<Relative File Path>>
        border = {INT_LEFT, INT_RIGHT, INT_TOP, INT_BOTTOM}
        stretch = TRUE|FALSE
        gap_file = <<Relative File Path>>
        gap_border = {INT_LEFT, INT_RIGHT, INT_TOP, INT_BOTTOM}
        gap_start_file = <<Relative File Path>>
        gap_start_border = {INT_LEFT, INT_RIGHT, INT_TOP, INT_BOTTOM}
        gap_end_file = <<Relative File Path>>
        gap_end_border = {INT_LEFT, INT_RIGHT, INT_TOP, INT_BOTTOM}
        overlay_file = <<Relative File Path>>
        overlay_border = {INT_LEFT, INT_RIGHT, INT_TOP, INT_BOTTOM}
        overlay_stretch = TRUE|FALSE
        expander_style = COLLAPSED|SEMI_COLLAPSED|SEMI_EXPANDED|EXPANDED
        window_edge = NORTH_WEST|NORTH|NORTH_EAST|WEST|EAST|SOUTH_WEST|SOUTH|SOUTH_EAST
        }
    }
</code>

==== محرك nodoka ====
المحرك المعتمد في فيدورا وهو يوفر العديد من الخيارات مثل

<code javascript>
engine "nodoka" {
  animation = TRUE, FALSE                      # FALSE = disabled, TRUE = enabled
  bullet_color = six-digit hex value           # set custom bullet color (for check and radio buttons)
  contrast = 1.0                               # double value, sets the contrast on borders
  gradients = TRUE, FALSE                      # use gradients
  hilight_ratio = 0.909090909                  # currently has no effect, will be asigned new function in some future release
  listviewheaderstyle = 0, 1, 2                # 0 = flat, 1 = gradient, 2 = raised
  listviewstyle = 0, 1                         # 0 = nothing, 1 = dotted
  menubarstyle = 0, 1, 2, 3                    # 0 = flat, 1 = normal raised gradient, 2 = normal lowered gradient, 3 = menubar gradient
  toolbarstyle = 0, 1, 2, 3                    # 0 = flat, 1 = normal raised gradient, 2 = normal lowered gradient, 3 = menubar gradient
  roundness = 0, 1, 2, 3...                    # set the roundness of widgets
  scrollbar_color = six-digit hex value        # set custom scrollbar slider color
  scrollbarstyle = 0, 1, 2                     # 0 = no handles, 1 = circles, 2 = bars
  stripes = TRUE, FALSE                        # use stripes in progressbars
  focus_inner = TRUE, FALSE                    # TRUE = secondary focus ring inside, FALSE = secondary focus ring outside widgets
  focus_fill = TRUE, FALSE                     # enable or disable focus overlay fill  
}
</code>

==== محرك clearlooks ====
يأتي هذا المحرك ب 4 أنماط هي CLASSIC و GLOSSY و GUMMY و INVERTED وتستعمل هكذا
<code javascript>
	engine "clearlooks"
	{
		style			= GLOSSY	// CLASSIC GLOSSY GUMMY INVERTED
		reliefstyle		= 1		// 0: inset 1: Shadow
		menubarstyle		= 1		// 0: flat  1: gradient
		toolbarstyle		= 1		// 0: flat  1: gradient
		colorize_scrollbar	= TRUE
		animation		= TRUE
		//scrollbar_color	= // "#RRGGBB" // defaults to @selected_bg_color
	}
</code>


===== سمات إطارات النوافذ Metacity =====

===== الأيقونات =====

===== مؤشرات الفأرة =====