Archive
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;
Recent
The vatican vault
- January 2022
- October 2021
- March 2021
- November 2020
- September 2020
- July 2020
- June 2020
- April 2020
- March 2020
- February 2020
- January 2020
- November 2019
- October 2019
- September 2019
- August 2019
- July 2019
- June 2019
- May 2019
- April 2019
- March 2019
- February 2019
- January 2019
- December 2018
- November 2018
- October 2018
- September 2018
- August 2018
- July 2018
- June 2018
- May 2018
- April 2018
- March 2018
- February 2018
- January 2018
- December 2017
- November 2017
- October 2017
- August 2017
- July 2017
- June 2017
- May 2017
- April 2017
- March 2017
- February 2017
- January 2017
- December 2016
- November 2016
- October 2016
- September 2016
- August 2016
- July 2016
- June 2016
- May 2016
- April 2016
- March 2016
- January 2016
- December 2015
- November 2015
- October 2015
- September 2015
- August 2015
- June 2015
- May 2015
- April 2015
- March 2015
- February 2015
- January 2015
- December 2014
- November 2014
- October 2014
- September 2014
- August 2014
- July 2014
- June 2014
- May 2014
- April 2014
- March 2014
- February 2014
- January 2014
- December 2013
- November 2013
- October 2013
- September 2013
- August 2013
- July 2013
- June 2013
- May 2013
- February 2013
- August 2012
- June 2012
- May 2012
- April 2012