Unigui 自定义FontAwesome与自定义字体
本人要解决的问题如标题所示：
根据SF的组件TUniSFLabel进行修改，增加一个FTSIcon类，FTSIcon类如下：
TTSIcon = class(TPersistent)
private
FIconName : string; //Aw Icon图标名字
FClassName: string; //属于CSS中那个类名
FIconType : string; //是那种ICON 类型, s,l,r,d
FFontSize : string; //当前字体大小
FEnable : Boolean; //是否使能当前功能
FSexyClass: string;
FSpanClass: string;
FSpanNum : Integer; //SPAN的数量
FUseType : Integer; //使用那种类型，类型0是Aw字体。
published
property IconName: string read FIconName write FIconName ;
property ClassName: string read FClassName write FClassName ;
property IconType: string read FIconType write FIconType ;
property FontSize: string read FFontSize write FFontSize ;
property SexyClass: string read FSexyClass write FSexyClass ;
property SpanClass: string read FSpanClass write FSpanClass ;
property UseType: Integer read FUseType write FUseType ;
property SpanNum: Integer read FSpanNum write FSpanNum ;
property Enable: Boolean read FEnable write FEnable default False;
end;
相关参数说明如下：
TSICon
Enable : 当前控制是否使能，如果不使能则使用组件的FAIcon的属性进行设置。
UseType ：当前使用方式，分为以下几种。
A): 0: 使用模式0，采用aw方式显示，有效属性为。ClassName,IconName,IconType,FontSize.
a):其中IconType,表示使用的是那种类型。 取值为s,l,b,r.
b):ClassName设置当前使用的类的名字。
c):IconName当前使用的iocn的名字。
d):FontSize为字体大小。
B): 1，2: 使用模式1或2
a): 当为1时 使用SexBtn模式。 有效的参数为SexyClass，SpanClass ，SpanNum。SexyClass为最外层的属性，SpanClass为内层。
b): 当为2时 使用TsBtn模式。 有效的参数为SexyClass，SpanClass ，SpanNum。SexyClass为最外层的属性，SpanClass为内层。
修改后的TUniSFLabel文件如下：
interface
uses
uniLabel, Classes, sysUtils, UniGUIInterfaces, UniSFCore, uniGUIJSInterface, uniGUITypes, uniGUIClasses, UniGUIAbstractClasses;
type
[ComponentPlatformsAttribute(pidWin32 or pidWin64)]
TUniSFLabel = class(TUniCustomLabel)
private
FStyleLabel: TUniSFStyleLabel;
FFAIcon: TFAIcon;
FTSIcon:TTSIcon;
procedure setStyleLabel(const Value: TUniSFStyleLabel);
function GetAbout: string;
procedure SetAbout(const Value: string);
protected
procedure SetJSCaption(const Value: string); override;
property TextConversion;
{Being painted}
procedure Paint; override;
procedure WebCreate; override;
published
property About: string read GetAbout write SetAbout stored False;
property Alignment;
property AutoSize default True;
property Caption;
property Align;
property Anchors;
property ParentFont;
property Font;
property ParentColor;
property Color;
property ClientEvents;
property Transparent;
property TabOrder;
property ScreenMask;
property LayoutConfig;
property StyleLabel: TUniSFStyleLabel read FStyleLabel write setStyleLabel;
property OnDblClick;
property OnClick;
property OnMouseDown;
property OnMouseUp;
property OnMouseEnter;
property OnMouseLeave;
property OnAjaxEvent;
property FAIcon: TFAIcon read FFAIcon write FFAIcon;
property TSIcon: TTSIcon read FTSIcon write FTSIcon;
public
constructor Create(AOwner: TComponent); override;
destructor Destroy; override;
end;
implementation
uses
uniGUIServer;
// ------------------------------------------------------------------------------
{ TUniSFLabel }
constructor TUniSFLabel.Create(AOwner: TComponent);
begin
inherited;
AutoSize := True;
FStyleLabel := TUniSFStyleLabel.Create;
FFAIcon := TFAIcon.Create;
FFAIcon.IconName := 'fa-abacus';
FFAIcon.ClassName := 'ts';
FFAIcon.IconType := 's';
FTSIcon := TTSIcon.Create;
FTSIcon.IconName := 'fa-abacus';
FTSIcon.ClassName := 'ts';
FTSIcon.IconType := '';
FTSIcon.FontSize := 'sf-48';
FTSIcon.UseType := 0;
end;
destructor TUniSFLabel.Destroy;
begin
FStyleLabel.Free;
FFAIcon.Free;
inherited;
end;
function TUniSFLabel.GetAbout: string;
begin
Result := GetUniSFVersion(cnLabel);
end;
procedure TUniSFLabel.Paint;
begin
if FStyleLabel.Model = lm_required then
Text := '* ' + Caption
else
Text := Caption;
inherited;
end;
procedure TUniSFLabel.SetAbout(const Value: string);
begin
//
end;
procedure TUniSFLabel.SetJSCaption(const Value: string);
var
vStyle: string;
vCaption: string;
i,j : Integer;
begin
vCaption := Caption;
if FTSIcon.Enable then
begin
if FTSIcon.UseType = 0 then
begin
vCaption := format('<i class="fa%s %s fa-%s"></i>', [FTSIcon.IconType,FTSIcon.IconName,FTSIcon.FontSize]) + vCaption;
vStyle := Format('<span class="f-%s f-%s-btn %s">%s</span>', [FTSIcon.ClassName,FTSIcon.ClassName,FTSIcon.SpanClass, vCaption]);
end
else if ((FTSIcon.UseType = 1) or (FTSIcon.UseType = 2)) then
begin
if FTSIcon.SpanNum <> 0 then
begin
vCaption := format('<span class="%s">%s</span>', [FTSIcon.SpanClass,vCaption]);
j := FTSIcon.SpanNum-1;
for i := 0 to j-1 do
vCaption := '<span>'+vCaption+'</span>';
end;
// vCaption := format('<span><span><span class="%s">%s</span></span></span>', [FTSIcon.SpanClass,vCaption]);
if FTSIcon.UseType = 1 then
vStyle := Format('<button class="sexybutton %s">%s</button>', [FTSIcon.SexyClass, vCaption])
else
vStyle := Format('<button class="tsbutton %s">%s</button>', [FTSIcon.SexyClass, vCaption])
end
else if (FTSIcon.UseType = 3) then
begin
vCaption := format('<i class="%s"></i>', [FTSIcon.SpanClass]) + vCaption;
vStyle := Format('<span class="%s">%s</span>', [FTSIcon.ClassName,vCaption]);
end;
end
else
begin
if FFAIcon.Icon <> fa_none then
begin
if FStyleLabel.Model = lm_badge_btn then
begin
vCaption := '';
Height := 40;
Width :=40;
AutoSize := false;
FFAIcon.Size := fs_24;
end;
if vCaption <> '' then
vCaption := ' ' + vCaption;
if FStyleLabel.Model = lm_badge_btn then
vCaption := format('<i class="fa %s fa-badge-sf-24 %s"></i>', [FontAwesomeToStr(FFAIcon.Icon), FontColorToStr(FFAIcon.Color)]) + vCaption
else if FStyleLabel.Model = lm_ts_btn then
vCaption := format('<i class="fa %s %s"></i>', [FFAIcon.IconName, FontSizeToStr(FFAIcon.Size)]) + vCaption
// vCaption := format('<i class="fa %s %s"></i>', [FontAwesomeToStr(FFAIcon.Icon), FontSizeToStr(FFAIcon.Size)]) + vCaption
else if FStyleLabel.Model = lm_fas_btn then
vCaption := format('<i class="fa%s %s %s"></i>', [FFAIcon.IconType,FFAIcon.IconName, FontSizeToStr(FFAIcon.Size)]) + vCaption
else
vCaption := format('<i class="fa %s %s %s"></i>', [FontAwesomeToStr(FFAIcon.Icon), FontSizeToStr(FFAIcon.Size), FontColorToStr(FFAIcon.Color)]) + vCaption;
end;
if FStyleLabel.Model = lm_required then
vStyle := '<i class="fa fa-asterisk fa-sf-required"></i>' + vCaption
else if (Ord(FStyleLabel.Model) > 1) and (Ord(FStyleLabel.Model) < 12) then
vStyle := Format('<span class="f-label %s %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme), LabelModelToStr(FStyleLabel.Model), vCaption])
else if FStyleLabel.Model = lm_badge then
vStyle := Format('<span class="f-badge %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme, true), vCaption])
else if FStyleLabel.Model = lm_badge_btn then
vStyle := Format('<span class="f-badge f-badge-btn %s">%s</span>', [LabelThemeToStr(FStyleLabel.Theme, true), vCaption])
else if FStyleLabel.Model = lm_ts_btn then
vStyle := Format('<span class="f-%s f-%s-btn ">%s</span>', [FFAIcon.ClassName,FFAIcon.ClassName, vCaption])
else if FStyleLabel.Model = lm_fas_btn then
vStyle := Format('<span class="f-%s f-%s-btn ">%s</span>', [FFAIcon.ClassName,FFAIcon.ClassName, vCaption])
else
vStyle := vCaption;
end;
JSProperty('html', [vStyle, False], 'setText');
end;
procedure TUniSFLabel.setStyleLabel(const Value: TUniSFStyleLabel);
begin
FStyleLabel := Value;
end;
procedure TUniSFLabel.WebCreate;
begin
inherited;
TextConversion := txtHTML;
end;
initialization
//增加的CSS文件位置
UniAddCSSLibrary('uniSFJS/thinksign/ts_wix.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
UniAddCSSLibrary('uniSFJS/SexyButtons/sexybuttons.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
UniAddCSSLibrary('uniSFJS/fenix/fenix.css?' + FenixCSSVersion, False, [upoFolderUni, upoPlatformBoth]);
UniAddCSSLibrary('uniSFJS/font-awesome/css/fontawesome-all.min.css', False, [upoFolderUni, upoPlatformBoth]);
end.
到这里，然后主程序，只要设置UniSFLabel的TTSIcon 即可显示对应的组件。
