Hidden stylesheets with Smart Pascal

CSS styles makes it easy to create a visual design for an application that can later be adjusted, hot-swapped or completely re-written. The benefit of this model is of course that you can change the look of your application without changing a line of your smart pascal code.

Having said that there are times when it would be handy to create a style sheet “on the fly”. Since CSS is also used to control things like animation, hardware accelerated movement and general behavior of elements — being able to create a style sheet and define rules “by code” is bordering on critical.

Well, here is a class that does exactly that. It creates a style sheet and allows you to create CSS styles (named rule-sets) which you can apply immediately to your TW3CustomControl descendants. This is fantastic because it allows you to separate the look (as defined in the CSS file of your project) from your animations (!)

Armed with this class plus other snippet’s I’ve posted here – you should be able to give jQuery and the rest of them a run for their money effect wise.

type

  TW3StyleSheet = Class(TObject)
  private
    FHandle:    THandle;
  protected
    function    getSheet:THandle;
  public
    Property    Sheet:THandle read getSheet;
    Property    Handle:THandle read FHandle;
    function    Add(aName:String;const aRules:String):String;

    class procedure addClassToElement(const aElement:THandle;const aName:String);
    class procedure removeClassFromElement(const aElement:THandle;const aName:String);
    class function  findClassInElement(const aElement:THandle;const aName:String):Boolean;

    Constructor Create;virtual;
    Destructor  Destroy;Override;
  End;

//############################################################################
// TW3StyleSheet
//############################################################################

Constructor TW3StyleSheet.Create;
var
  mDocument: THandle;
begin
  inherited Create;
  mDocument:=BrowserAPI.document;
  FHandle:=mDocument.createElement('style');
  FHandle.type := 'text/css';
  mDocument.getElementsByTagName('head')[0].appendChild(FHandle);
end;

Destructor TW3StyleSheet.Destroy;
Begin
  if (FHandle) then
  FHandle.parentNode.removeChild(FHandle);
  FHandle:=null;
  Inherited;
end;

function TW3StyleSheet.getSheet:THandle;
  var
    xRef: THandle;
Begin
  if (FHandle) then
  begin
    xRef:=FHandle;
    asm
      @result = (@xRef).styleSheet || (@xRef).sheet;
    end;
  end;
end;

class procedure TW3StyleSheet.addClassToElement(const aElement:THandle;
      const aName:String);
Begin
 w3_AddClass( aElement,aName);
end;

class procedure TW3StyleSheet.removeClassFromElement(const aElement:THandle;
      const aName:String);
Begin
  w3_RemoveClass(aElement,aName);
end;

class function  TW3StyleSheet.findClassInElement(const aElement:THandle;
      const aName:String):Boolean;
Begin
  result:=w3_hasClass(aElement,aName);
end;

function TW3StyleSheet.Add(aName:String;const aRules:String):String;
var
  mRef: THandle;
  mDocument: THandle;
  mSheet: THandle;
Begin
  aName:=trim(aName);
  if length(aName)=0 then
  aName:=w3_GetUniqueObjId;

  mDocument:=BrowserAPI.document;
  if (FHandle) then
  Begin
    mSheet:=getSheet;
    if not (mSheet.insertRule) then
    mSheet.addRule('.' + aName,aRules) else
    mSheet.insertRule('.' + aName + '{' + aRules + '}',0);
  end;

  result:=aName;
end;

Using it

Very simple to use. Also, when you release the stylesheet object — the styles are deleted from the system. That is pretty nice. Note: if you dont add a name in the add() call, a name is automatically generated. The add() function returns the generated rule-name. Here you go:

var
  mSheet: TW3StyleSheet;
  mStyle: String;
begin
  mSheet:=TW3StyleSheet.Create;
  mStyle:=mSheet.Add('','color: rgb(255,0,0); background: rgb(255,255,0);');
  self.StyleClass:=mStyle;