ملفّ تعليميّ لتطبيق الأشكال

[ العودة إلى تطبيق أشكال شريزا ]

إبتداع أشكال تشبه الريموت.

فلنبدأ بمثال تبسيطيّ، شكل الريموت يشبة رأس مستر بطاطا. تختار صورة للخلفيّة (الوجه) ثمّ تُلسق كلّ الوسائط وأجزاء الإتصال (العيون، الأنف، الفم ...) على هذه الخلفيّة. مع هذا الريموت يمكنك أن تسيطر على الوسائط ووظائف الإتصال. هو قابل للتعديل كلّيًّا ويمكن أن يتضمّن ما تشاء من وظائف شريزا، من القليل جدًّا إلى الكثير جدًّا.

In this section, you will be taken step-by-step through the building of the remote. This section assumes you have a knowledge of Shareaza skinning. That's why it's a great idea to read up on manifests as well as windowskin elements before building your remote skin. However, if you feel like diving right in, this tutorial demonstrates the elements you need. Look for the bold red text whenever you need a bit more explanation. Let's get started =)

قبل زيادة المراسي والأجزاء فإنّ ملفّ .xml يجب أن يظهر كالآتي:

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://shareaza.sourceforge.net/"
 email="Me@myemail.com"
 version="1.0"
 type="skin"
 language="en"
 />
<windowSkins>
<windowSkin>
</windowSkin>
</windowSkins>
</skin>

في هذه المرحلة، يُنصح أن تقوم بنسخ الآتي إلى ملفّك النّصّي والقيام بتعديل حقول المانيفستو.

هنا تفسير قصير لكلّ عناصر المانفستو.

  • Name - إسم الريموت.
  • Author - إسم مبتدع الريموت.
  • Description - تفسير عن الريموت (مثلاً، هذا مراقب mini-bandwidth).
  • Link - إلى صفحة رئيسيّة لمزيد من المعلومات حول الريموت خاصّتك أو مجموعات ريموت أخرى.
  • E-mail - بريد إلكترونيّ للحصول على مزيد من المعلومات أو/و الأغلاط البرمجيّة المتعلّقة بالريموت.
  • Version - رقم يحدّد النّسخة. النّسخات الأجدّ لها أرقام أكبر (1، 1.1، 1.2 ألخ)
  • Type - دائمًا حدّد لتطبيق وتغيير الأشكال.
  • Language - إذا كان باللغة الإنكليزيّة حدّده إلى "en".

تاليًا، سوف نحدّد صورة الخلفيّة. هنا الخطوات الواجب اتباعها:

  • حدّد موقع الصور (.bmp) التي تريد استخدامها في الريموت.
  • حدّد النافذة الهدف مثل "CremoteWnd" (the remote window).
  • حدّد المنطقة (<part name="Background") التي ستحتلّها خلفيّة الريموت (this is in x, y, width, height).

<?xml version="1.0" encoding="UTF-8"?>
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
<manifest name="My Remote"
 author="My name"
 description="A remote"
 link="http://shareaza.sourceforge.net/"
 email="Me@my_email.com"
 version="1.0"
 type="skin"
 language="en"
 />
 
<windowSkins>
 
 <windowSkin>
 
 
 <image type="image" path="MyRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 </parts>
 
 
 </windowSkin>
 
        
</windowSkins>
 
</skin>

    

  

  
المراسي

  
الآن، بعد أن حدّدت الخلفيّة، تريد أن تزيد أو ترسي أزرارًا، أليس كذلك؟ المراسي تخبر شريزا أين ترسم أجزاء الأزرار على نافذة الريموت. هذه الأجزاء تُرسى أيضًا على النافذة حسب x,y,width,height وبالنسبة إلى خلفيّة الريموت. هنا لائحة وتفسيرات عمّا يمكنك إرساؤه:

  

    
 
      المراسي
      شرح
    

    
 
      StatusText
      المساحة التي تُظهر إسم الأغنية، الوقت الذي مضى، سرعة الإتصال ألخ.
    

    
 
      History
      عَرْض حجم الإتصال المستخدم حاليًّا
    

    
 
      FlowTx
      عَرْض حجم الإتصال الذّاهب
    

    
 
      FlowRx
      عَرْض حجم الإتصال الآتي
    

    
 
      MediaSeekTrack
      طريق تفتيش للوسائط
    

    
 
      MediaVolTrack
      طريق المجلّد للوسائط
    

    
 
      ScalerTrack
      طريق المُقيس لمحدّد حجم الإتصال
    

    
 
      MediaStatePlaying
      المساحة المخصّصة لإشارة "اللعب" البيانيّة أثناء لعب الوسائط
    

    
 
      MediaStatePaused
      المساحة المخصّصة لإشارة "الوقفة" البيانيّة أثناء وقف الوسائط المؤقّت
    

    
 
      MediaStateStopped
      المساحة المخصّصة لإشارة "الوقوف" البيانيّة أثناء وقف الوسائط
    

    
 
      _ID_TRAY_OPEN
      إعادة إظهار شريزا متى كان في system tray
    

    
 
      _ID_MONITOR_CLOSE
      يغلق الريموت
    

    
 
      _ID_NETWORK_SEARCH
      يفتح أظفر بحث جديد
    

    
 
      _ID_TOOLS_DOWNLOAD
      يفتح نافذة تنزيل التيّار
    

    
 
      _ID_TAB_LIBRARY
      يفتح أظفر المكتبة
    

    
 
      _ID_MEDIA_PLAY
      زرّ اللّعب
    

    
 
      _ID_MEDIA_PAUSE
      زرّ الوقفة
    

    
 
      _ID_MEDIA_STOP
      زرّ الوسائط
    

    
 
      _ID_MEDIA_PREVIOUS
      زرّ السّابق
    

    
 
      _ID_MEDIA_NEXT
      زرّ التالي
    

    
 
      _ID_MEDIA_MUTE
      زرّ الصّمت
    

  

  
أيّة وظيفة لشريزا يمكن إرساؤها على الريموت. لإيجاد المزيد من الوظائف إفتح ملفّ default-en.xml. يتواجد في محفظة اللغات المتواجدة في محفظة الأشكال خاصّتك. كيف يظهر شكل قسم المراسي خاصّتك؟ لا تتأخّر بالنّظر.

  

    
 
      
<anchors>
 
<anchor name="StatusText" rect="69,46,262,20"/>
 
<anchor name="History" rect="70,27,208,13"/>
 
<anchor name="FlowTx" rect="292,27,12,13"/>
 
<anchor name="FlowRx" rect="319,27,12,13"/>
 
        
<anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
<anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
<anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
<anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
<anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
        
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
<anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
<anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
<anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
        
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
<anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
</anchors>

    

  

  
الأجزاء

  
تاليًا، ستريد أن تملك أزرارك أحوال فوق، حَوْم، تحت ومتوقّف عن العمل. هنا نعطيك كيفيّة زيادة صفات للأزرار:

  

    
 
      الأجزاء
      شرح
    

    
 
      _ID_MEDIA_STOP.Up
      أوقف الزّر في حالة الراحة (فوق).
    

    
 
      _ID_MEDIA_STOP.Hover
      أوقف الزّرّ في حالة حوم الفأرة.
    

    
 
      _ID_MEDIA_STOP.Down
      أوقف الزّرّ في حالة المضغوط إلى تحت.
    

    
 
      _ID_MEDIA_STOP.Disabled
      أوقف الزرّ في حالة المتوقّف عن العمل (لاعب الوسائط متوقّف).
    

  

  
كلّ الأجزاء يمكنها الحصول على هذه الأحوال. عندما تحوم حولها، حالة الحوم ستظهر. عندما تضغط الزر إلى تحت، حالة تحت ستظهر. بالتّأكيد هذه الحالات لن تظهر إلاّ إن كانت مترافقة بمرساة. إذا أردت التوقّف تحتاج إلى المراسي والأجزاء التالية. أنظر.

  

    
 
      
<anchors>
 
<anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
</anchors>
 
<parts>
 
        
  <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
        
  <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
</parts>

    

  

  
هنا بعض الحيل المثيرة:

  
    
    
  • إرسِ اللعب والوقفة في المكان عينه مع استثناء جزء الحالة المتوقّف عن العمل. سيظهر زرّ الوقفة في حال لعب الموسيقى وزرّ اللعب في حال توقّف الموسيقى.
    • 
    
  • إستثنِ حالة التوقّف عن العمل للّعب، فسيقوم زرّ اللعب بدور زرّ إفتح ملف الوسائط عندما يكون لاعب الوسائط مغلقًا أو فارغًا.
    • 
    
  • لأجزاء التاريخ أو السيل إستعمل "1"؛ لكي تكون الصورة مرسومة من القاع و"2"؛ لكي تُرسم الصورة من الأعلى.
    • 
  

  
هذا هو شكل قسم الأجزاء (حالات أزرار: فوق، تحت، متوقّف عن العمل، حَوْم).

  

    
 
      
<parts>
 
<part name="Background" rect="0,0,341,125"/>
 
<part name="HistoryTx1" rect="6,150,208,13"/>
 
<part name="HistoryRx1" rect="6,131,208,13"/>
 
<part name="FlowTx1" rect="228,131,12,13"/>
 
        
<part name="FlowRx1" rect="255,131,12,13"/>
 
<part name="MediaSeekTab" rect="159,210,23,11"/>
 
<part name="MediaSeekBar" rect="209,210,92,10"/>
 
<part name="MediaVolTab" rect="140,210,9,17"/>
 
<part name="MediaVolBar" rect="159,221,58,17"/>
 
<part name="ScalerTab" rect="224,224,9,9"/>
 
        
<part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
<part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
<part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
<part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
<part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
<part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
        
<part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
<part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
<part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
        
<part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
<part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
<part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
<part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
        
<part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
<part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
<part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
<part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
<part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
        
<part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
<part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
<part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
        
</parts>

    

  

  
خطوط

  
تاليًا، علينا تحديد نموذج الخطّ. إذ يحدّد إسم وشكل الخطّ الذي سيظهر في مرسى نصّ الحالة. سوف يُستعمل لعنوان الأغنية، الوقت، حجم الإتصال ألخ.

  
    
    
  • Face - إسم شكل الخطّ، مثلاً "Tahoma".
    • 
    
  • Size - حجم الخطّ، مثلاً "8".
    • 
    
  • Weight - عُرض الخطّ، إمّا يكون ثابتًا أو رقمًا كاملاً من 1 إلى 1000. إنّ "normal" and "bold" تُقبل أيضًا.
    • 
    
  • Colour - لون نصّ الحالة في html.
    • 
  

  

    
 
      
<caption fontFace="Tahoma" fontSize="8" fontWeight="normal" colour="FFB000"/>

    

  

  
المناطق

  
Lastly, you can have any shape of a remote through the use of regions. If the region element is included, it consists of one or more <shape> elements, each representing a primitive shape, which are merged together using standard set operations to produce the final complex region.

  
هنا مثال على ذلك:

  

    
 
      
<region>
 
 <shape type="rectangle" rect="9,25,-11,-1"/>
 
 <shape type="roundRect" rect="0,0,-1,26" size="16,25" combine="or"/>
 
</region>

    

  

  
كلّ مظهر يُدمج مع المنطقة الحاليّة للحصول على المظهر المنشود للنافذة. كلّ مظهر يحتوي على:

  
    
    
  • type - نوع المظهر (أنظر إلى الأسفل).
    • 
    
  • rect - المستطيل المحدّد لهذا المظهر حسب x1,y1,x2,y2. الأرقام السّلبيّة تُنسب إلى الأطراف اليمنى والسّفلى من النافذة، إذًا فإنّ "0,0,-1,-1" سيغطّي كلّ النّافذة.
    • 
    
  • combine - كيفيّة دمج هذا المظهر مع سابقيه. إنّ المظهر الأوّل لا يملك صفات دمج.
    • 
  

  
إنّ أنواع الدمج الممكنة هي:

  
    
    
  • or - أضف هذا المظهر إلى سابقيه (logical or)
    • 
    
  • and - خذ المساحة المشتركة بين هذا المظهر وسابقيه (logical and)
    • 
    
  • xor - خذ المساحة المُغطّاة من قبل هذا المظهر أو المظاهر الأخرى ولكن ليس المساحة المشتركة (logical xor)
    • 
    
  • diff - إطرح هذا المظهر من سابقيه
    • 
  

  
إنّ أنواع المظاهر هي:

  
    
    
  • rectangle - مستطيل
    • 
    
  • ellipse - إهليلج
    • 
    
  • roundRect - مستطيل مع أطراف مدوّرة. إنّ مظاهر من هذا النوع تحتاج إلى صفةٍ إضافيّة تُسمّى الحجم مع متغيّرتين اثنتين تمثّلان طول وعرض الخطوط المنحنية، مثلاً size="16,20"
    • 
  

  
ملفّ .XML النّهائيّ

  

    
 
      
<?xml version="1.0" encoding="UTF-8"?>
 
<skin xmlns="http://www.shareaza.com/schemas/Skin.xsd" version="1.0">
 
<manifest name="My Remote"
 
 author="My name"
 
 description="A remote"
 
        
 link="http://www.shareaza.com/"
 
 email="Me@myemail.com"
 
 version="1.0"
 
 type="skin"
 
 language="en"
 
 />
 
        
<windowSkins>
 <windowSkin> 
 <image type="image" path="WMPRemote.bmp"/>
 
 <target window="CRemoteWnd"/>
 
 <anchors>
 
 <anchor name="StatusText" rect="69,46,262,20"/>
 
        
 <anchor name="History" rect="70,27,208,13"/>
 
 <anchor name="FlowTx" rect="292,27,12,13"/>
 
 <anchor name="FlowRx" rect="319,27,12,13"/>
 
 <anchor name="MediaSeekTrack" rect="71,67,232,12"/>
 
 <anchor name="MediaVolTrack" rect="162,91,64,17"/>
 
 <anchor name="ScalerTrack" rect="71,40,206,9"/>
 
        
 <anchor name="_ID_TRAY_OPEN" rect="8,18,48,48"/>
 
 <anchor name="_ID_MONITOR_CLOSE" rect="318,7,13,13"/>
 
 <anchor name="_ID_NETWORK_SEARCH" rect="258,83,22,22"/>
 
 <anchor name="_ID_TOOLS_DOWNLOAD" rect="280,83,22,22"/>
 
 <anchor name="_ID_TAB_LIBRARY" rect="302,83,22,22"/>
 
 <anchor name="_ID_MEDIA_PLAY" rect="20,85,30,30"/>
 
        
 <anchor name="_ID_MEDIA_PAUSE" rect="20,85,30,30"/>
 
 <anchor name="_ID_MEDIA_STOP" rect="55,90,20,20"/>
 
 <anchor name="_ID_MEDIA_PREVIOUS" rect="82,90,20,20"/>
 
 <anchor name="_ID_MEDIA_NEXT" rect="107,90,20,20"/>
 
 <anchor name="_ID_MEDIA_MUTE" rect="134,90,20,20"/>
 
 </anchors>
 
        
 <parts>
 
 <part name="Background" rect="0,0,341,125"/>
 
 <part name="HistoryTx1" rect="6,150,208,13"/>
 
 <part name="HistoryRx1" rect="6,131,208,13"/>
 
 <part name="FlowTx1" rect="228,131,12,13"/>
 
 <part name="FlowRx1" rect="255,131,12,13"/>
 
        
 <part name="MediaSeekTab" rect="159,210,23,11"/>
 
 <part name="MediaSeekBar" rect="209,210,92,10"/>
 
 <part name="MediaVolTab" rect="140,210,9,17"/>
 
 <part name="MediaVolBar" rect="159,221,58,17"/>
 
 <part name="ScalerTab" rect="224,224,9,9"/>
 
 <part name="_ID_TRAY_OPEN.Hover" rect="221,147,48,48"/>
 
        
 <part name="_ID_TRAY_OPEN.Down" rect="269,147,48,48"/>
 
 <part name="_ID_MONITOR_CLOSE.Hover" rect="324,148,13,13"/>
 
 <part name="_ID_MONITOR_CLOSE.Down" rect="318,7,13,13"/>
 
 <part name="_ID_NETWORK_SEARCH.Hover" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Checked" rect="275,114,22,22"/>
 
 <part name="_ID_NETWORK_SEARCH.Down" rect="258,83,22,22"/>
 
        
 <part name="_ID_TOOLS_DOWNLOAD.Hover" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Checked" rect="297,114,22,22"/>
 
 <part name="_ID_TOOLS_DOWNLOAD.Down" rect="280,83,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Hover" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Checked" rect="319,114,22,22"/>
 
 <part name="_ID_TAB_LIBRARY.Down" rect="302,83,22,22"/>
 
        
 <part name="_ID_MEDIA_PLAY.Up" rect="140,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Hover" rect="0,180,30,30"/>
 
 <part name="_ID_MEDIA_PLAY.Down" rect="0,210,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Up" rect="170,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Hover" rect="30,180,30,30"/>
 
 <part name="_ID_MEDIA_PAUSE.Down" rect="30,210,30,30"/>
 
        
 <part name="_ID_MEDIA_STOP.Hover" rect="60,180,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Down" rect="60,200,20,20"/>
 
 <part name="_ID_MEDIA_STOP.Disabled" rect="60,220,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Hover" rect="80,180,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Down" rect="80,200,20,20"/>
 
 <part name="_ID_MEDIA_PREVIOUS.Disabled" rect="80,220,20,20"/>
 
        
 <part name="_ID_MEDIA_MUTE.Hover" rect="100,180,20,20"/>
 
 <part name="_ID_MEDIA_MUTE.Down" rect="100,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Hover" rect="120,180,20,20"/>
 
  <part name="_ID_MEDIA_NEXT.Down" rect="120,200,20,20"/>
 
 <part name="_ID_MEDIA_NEXT.Disabled" rect="120,220,20,20"/>
 
 </parts>
 
        
 <caption fontFace="Small Fonts" fontSize="8" fontWeight="normal" colour="FFB000"/>
 
 <region>
 
  <shape type="rectangle"  rect="1,15,341,83"/>
 
  <shape type="roundrectangle" rect="319,0,332,1" combine="or" />
 
 </region>
 
 </windowSkin>
 
        
</windowSkins>
</skin>

    

  

  
Good luck! If you have any questions, please post them on the skinning forum. =)
  

  

 
[ 
    العودة إلى تطبيق أشكال شريزا ]





      

    

    



  

    
    
      
  • en
    • 
      
  • es
    • 
      
  • fr
    • 
      
  • de
    • 
      
  • hr
    • 
      
  • it
    • 
      
  • lt
    • 
      
  • nl
    • 
      
  • nb
    • 
      
  • pl
    • 
      
  • pt
    • 
      
  • sl
    • 
      
  • tr
    • 
      
  • el
    • 
      
  • he
    • 
      
  • ja
    • 
      
  • zh-tw
    • 
      
  • en
    • 
      
  • ca
    • 
      
  • fa
    • 
      
  • ru
    • 
    

  



  




العديد من الناس يكرّسون وقتهم وجهدهم لشريزا. الرّجاء الإطلاع على صفحة الشّكر.


Visit Shareaza's Project Page at SourceForge.net



  < رأس الصفحة | إتّصل بنا >