Customizing Ribbon Style

[SMP3]

السلام عليكم و رحمة الله و بركاته

يعد مكون Ribbon من أشهر المكونات التي لاقت تفاعل كبير من المبرمجين , أول اصدار له كان سنة 2007 مع الأوفيس 2007 من مايكروسوفت , سرعان ما تم محاولة استخدامه حتى قامت ميكروسوفت بتوفير حزمة للمبرمجين .
يأتي المكون مع ثلاث ستايلات : Obsidian , Silver & Luna , أشهر و أكثر ستايل استخداما Luna .
تم ارفاق حزمة Ribbon مع كل اصدارات دلفي الحديثة (انطلاقا من الاصدار 2009) .
في الحقيقة لقد بحثت عدة مرات حول طريقة للتعديل على هذه الستايلات .. لكني لم أجد أي شيئ في النت , حتى قررت تحليل الحزمة المرفقة مع دلفي .
تحليل الحزمة ليس بالأمر الصعب .. لكن هناك العديد من الأمور التي يجب مراعاتها حتى نتمكن من تصميم أو تعديل على الستايل .
حتى نتمكن من التعديل على الستايل يتوجب علينا المرور ب 10 مراحل , سنتطرق لها في هذا الموضوع بالتفصيل ..
نبدأ على بركة الله :

أول مرحلة : الحصول على صورة ستايل Luna : Step 1 : Save Luna Bitmap Style :
سنحتاج للصورة حتى نتمكن من التعديل على هذا الستايل باستخدام الفوتوشوب أو أي محرر صور آخر ..
من التحليل الذي قمت به تبين أن ملف الستايل الخاص ب Ribbon , ماهو الى عبارة عن صورة Bitmap مضغوطة بمكتبة ZLib .
أنشئ مشروع جديد و أضف اليه مكون TRibbon
أرفق الوحدة ZLib للمشروع ..
أضف هذه الدالة حتى نتمكن من الحصول على صورة و حفظها في القرص الصلب :

PHP كود :

procedure ExtractLunaStyle(AFile: String);
var
  Res: TResourceStream;
  ZDecompress: TZDecompressionStream;
  MS: TMemoryStream;
begin
  Res := TResourceStream.Create(HInstance, 'RIBBON_LUNA', RT_RCDATA);
  Res.Position := 0;
  ZDecompress := TZDecompressionStream.Create(Res);
  MS := TMemoryStream.Create;
  ZDecompress.Position := 0;
  MS.CopyFrom(ZDecompress, ZDecompress.Size);
  MS.SaveToFile(AFile);
  MS.Free;
  ZDecompress.Free;
  Res.Free;
end; 


الدالة تقوم بأخذ ملف الستايل من الرسورس ثم القيام بعملية فك تشفير للملف .
احفظ الصورة الناتجة باسم Luna.bmp

المرحلة الثانية : التعديل على صورة الستايل باستخدام الفوتوشوب Step 2 : Modify the Bitmap using PhotoShop
بعد أن حصلنا على الصورة نقوم بالتعديل عليها باستخدام الفوتوشوب أو أي محرر صور آخر شريطة أن يكون محرر الصور يدعم الحفظ الى 32 بت مع Alpha channels .
في الحقيقة لست محترف فوتوشوب ولا أعلم عنه الا القليل و القليل , لذلك اكتفيت بالتعديل على الصور من ناحية الألوان فقط .

PhotoShop : Image=>Adjustments=>Hue/Saturation.

بعد اجراء التعديلات اللازمة ننتقل الى المرحلة الثالثة .

[COLOR="Red"]المرحلة الثالثة : حفظ الصورة :
Step 3 : Save the customized bitmap as 32 bit format and make sure that the bitmap is a Alpha Channels .[/COLOR]
تأكد من حفظ الصورة بدعم ل Alpha channels و 32 بت

المرحلة الرابعة : ضغط الصورة باستخدام خوارزمية ZLib : Step 4 : Compress the Bitmap using ZLib .
في هذه المرحلة نقوم بضغط الصورة بخوارزمية مكتبة ZLib حتى نتحصل في الأخير على ملف ستايل خاص ب Ribbon .

PHP كود :

procedure CompressBitmapStyle(BmpFile, DstFile: String);
var
  ZCompress: TZCompressionStream;
  MS, MSDst: TMemoryStream;
begin
  MS := TMemoryStream.Create;
  MSDst := TMemoryStream.Create;
  MS.LoadFromFile(BmpFile);
  MS.Position := 0;
  ZCompress := TZCompressionStream.Create(MSDst);
  ZCompress.CopyFrom(MS, MS.Size);
  ZCompress.Free;
  MSDst.SaveToFile(DstFile);
  MSDst.Free;
  MS.Free;
end; 


المرحلة الخامسة : اضافة الستايل للرسورس Step 5 : include the compressed file into the application resource .
بعد أن حصلنا على ملف ستايل نقوم باضافته للرسورس :

Project=>Resource and Images => Add

المرحلة السادسة : Step 6 : Create a new Class derived from TCustomRibbonColorMap.
أضف Unit جديدة باسم RibbonMyNewStyleActnCtrls
سنقوم بتوريث كلاس TRibbonMyNewStyleColorMap من الكلاس TCustomRibbonColorMap
مهمة هذا الكلاس هي تحديد الألوان الخاصة بالخطوط و الستايل :

PHP كود :

TRibbonMyNewStyleColorMap = class(TCustomRibbonColorMap)
  public
    procedure UpdateColors; override;
  published
    property BevelMinimizedInner default $00E3BB9B;
    property BevelMinimizedOuter default $00F3E2D5;
    property BtnSelectedFont default $006E1500;
    property CaptionFontColor default $00AA6A3E;
    property ControlColor default clWhite;
    property ControlInactiveColor default $00FBF2EA;
    property ControlFrameColor default $00DFC4AF;
    property DisabledFontColor default $00A7A7A7;
    property DocumentFontColor default $00797069;
    property FontColor default $006E1500;
    property HighlightColor default $006E1500;
    property ActiveTabFontColor default $006E1500;
    property GroupFontColor default $006E1500;
    property InactiveTabFontColor default $006E1500;
    property QuickAccessToolbarMoreColor default $00FFDCC2;
    property QuickAccessToolbarMoreBorderColor default $00A06437;
  end;
//----------------------------------------------------------
{ TRibbonMyNewStyleColorMap }

procedure TRibbonMyNewStyleColorMap.UpdateColors;
begin
  inherited;
  BevelMinimizedInner := $00E3BB9B;
  BevelMinimizedOuter := $00F3E2D5;
  BtnSelectedFont := $006E1500;
  CaptionFontColor := $00AA6A3E;
  ControlColor := clWhite;
  ControlInactiveColor := $00FBF2EA;
  ControlFrameColor := $00DFC4AF;
  DisabledFontColor := $00A7A7A7;
  DocumentFontColor := $00797069;
  FontColor := $006E1500;
  MenuColor := clMenu;
  HighlightColor := $006E1500;
  ActiveTabFontColor := $006E1500;
  InactiveTabFontColor := $006E1500;
  GroupFontColor := $006E1500;
  QuickAccessToolbarMoreColor := $00FFDCC2;
  QuickAccessToolbarMoreBorderColor := $00A06437;
end; 


يمكنك تغيير هذه الألوان لتتناسب مع الستايل المستخدم .

المرحلة السابعة : Step 7 : Create a new Class derived from TCustomRibbonSkin .
في هذه المرحلة سنقوم باضافة كلاس جديد مورث من الكلاس TCustomRibbonSkin
وضيفة هذا الكلاس توفير معلومات خاصة بالستايل : اسم ملف الستايل في الرسورس , اسم الصورة في القرص الصلب (ان أردنا تحميلها من القرص الصلب) .

PHP كود :

TRibbonMyNewStyleSkin = class(TCustomRibbonSkin)
  public
    function GetLoadTypeValue: string; override;
    function GetLoadType: TCustomRibbonSkin.TRibbonSkinLoadType; override;
  end;
//---------------------------------------------------
{ TRibbonMyNewStyleSkin }

// The method of loading a skin.
//
// Override this method in your custom skin to allow the loading of a skin
// from a physical file on disk.
function TRibbonMyNewStyleSkin.GetLoadType
  : TCustomRibbonSkin.TRibbonSkinLoadType;
begin
  if ActionBarDesigner <> nil then
    Exit(ltResource)
  else
    Result := ltResource // ltFile
end;

// The value specific to the selected load type for the Luna Skin
//
// When the load type is ltResource for a custom skin, GetLoadTypeValue should
// return the name of the resource.
// When the load type is ltFile, GetLoadTypeValue should return the name and
// location of the skin file to load.
function TRibbonMyNewStyleSkin.GetLoadTypeValue: string;
begin
  case GetLoadType of
    ltResource:
      Result := 'MyNewStyle';{Resource Name}
    ltFile:
      Result := ExtractFilePath(ParamStr(0)) + 'MyNewStyle.bmp';
  end;
end; 


لاحظ أن اسم الستايل في الرسورس = MyNewStyle .

المرحلة الثامنة : Step 8 : Create a new Class derived from TRibbonStyleActionBars
نقوم بانشاء كلاس جديد مورث من الكلاس TRibbonStyleActionBars

PHP كود :

TRibbonMyNewStyleActionBars = class(TRibbonStyleActionBars)
  public
    function GetColorMapClass(ActionBar: TCustomActionBar)
      : TCustomColorMapClass; override;
    function GetSkinClass: TCustomRibbonSkinClass; override;
    function GetStyleName: string; override;
  end;
//-----------------------------------------
{ TRibbonMyNewStyleActionBars }

function TRibbonMyNewStyleActionBars.GetColorMapClass
  (ActionBar: TCustomActionBar): TCustomColorMapClass;
begin
  Result := TRibbonMyNewStyleColorMap;
end;

function TRibbonMyNewStyleActionBars.GetSkinClass: TCustomRibbonSkinClass;
begin
  Result := TRibbonMyNewStyleSkin;
end;

function TRibbonMyNewStyleActionBars.GetStyleName: string;
begin
  Result := 'Ribbon - MyNewStyle'; // do not localise
end; 


هذا الكلاس كمى ترى يحتوي معلومات خاصة بالكلاسات السابقة التي تم توريثها (TRibbonMyNewStyleSkin,TRibbonMyNewStyleColorMap).

المرحلة التاسعة :Step 9 : Register your new Style
سنحتاج الى تسجيل الستايل حتى يتم تحميله من قبل مكون Ribbon :
أضف متغير Global الى الوحدة RibbonMyNewStyleActnCtrls :

PHP كود :

var
  RibbonMyNewStyle: TRibbonMyNewStyleActionBars;

implementation
....
...
initialization

RibbonMyNewStyle := TRibbonMyNewStyleActionBars.Create;
RegisterActnBarStyle(RibbonMyNewStyle);

finalization

UnregisterActnBarStyle(RibbonMyNewStyle);
RibbonMyNewStyle.Free; 


الستايل يتم انشاءه و تحميله ل Ribbon عند initialization (عند تشغيل التطبيق)
ويتم تحريره عند finalization .

المرحلة الأخيرة : تغيير الستايل :

PHP كود :

Ribbon1.Style := RibbonMyNewStyle; 


مثال كامل للمشروع :

كود :

https://dl.dropboxusercontent.com/u/99625333/Ribbon%20Style.rar

[S.FATEH]

بارك الله فيك درس مميز

[SMP3]

على فكرة : لقد تم اصلاح بعض ال Bug الموجودة في Ribbon في نسخة XE5
من بين ال Bug : تم اصلاح Bug المشار اليها في هذا الموضوع