Introducing the ScriptStyle Widget

May 30, 2013

ATTENTION DEVELOPERS

Stop using JavaScriptEmbed\CssEmbed widgets IMMEDIATELY...boy are you in for a treat.

Check this out:
<sf:ScriptStyle id="scriptStyle" runat="server">
    <script>
        $(document).ready(function () {
            alert("works");
        });
    </script>
    <style>
        .form-completed.smile .face{
                float:left;  
        }
    </style>
</sf:ScriptStyle>

Keep in mind this assumes the control has been registered with an "sf prefix", either at the top of the page or in the webconfig.

Examples (either\or):
Webconfig:
<add tagPrefix="sf" namespace="RandomSiteControls" assembly="RandomSiteControls" />

Page\Widget:
<%@ Register TagPrefix="sf" Namespace="RandomSiteControls" Assembly="RandomSiteControls" %>

What's it all about

So you get one simple to use control which will handle both scripts and styles.  The bonus is that the scripts will automatically render at the bottom of the page, and styles will render in the header.  However you can feed the control a property to change the position of the script.
<sf:ScriptStyle runat="server" ScriptEmbedPosition="InPlace"
  • Head
  • InPlace
  • BeforeBodyEndTag (default)
This is one thing the Sitefinity controls can't do...inline scripting\styling.  You need to hard-link to a physical file in the markup.  LIMITATION, REMOVED!

Features

  • Inline code in the markup
  • Duplicate script detection: Will only load scripts once.  If you have 5 ScriptStyle widgets all loading the same script, it'll only appear on the page once.  (Keeping in mind...it's not searching the page for what scripts are there, it's just checking other instances itself).  So if you manually have a script linked on the masterpage, then you link it again in this widget...it'll appear twice.
  • Visual Studio\Editors will syntax highlight the inline code
  • Ability to render in multiple places on the page
  • Automatic detection and wrapping of the <script and <style nodes
  • You can set an alias that will render in design mode so you can denote what the code you've written will do.  Currently NOTHING renders in the existing widgets so you have to keep opening them to figure out what they do.
  • Define if you want the script to run in design mode or not
  • You won't get caught hard-coding the domain prefix on your links...this is a bug in SF that nobody just ever seems to want to take the 30 seconds to fix.
  • Doesn't render an empty <span>\<div> on your page where you dropped the widget

Design-Time

Drop it on a page
scriptstyle1-default

Give it a description, choose where to put things
scriptstyle2-General Tab

Write some javascript
scriptstyle3-Javascript Tab

...and\or write some css
scriptstyle4-Css Tab

Link in your external files in a nice kendoui powered MVVM UI
scriptstyle5 - External Tab

Because I'm always thinking of you...code snippit to use the widget inline in a template
scriptstyle6 - Templates Tab

...and when you save it, this is what you see....your custom description...not...nothing (font-awesome aware)
scriptstyle7 - Save

Breaking Changes

(from 6.0.4200.0 to 6.0.4200.1)
  • JavaScriptTemplate and CssTemplate nodes have been renamed to "script" and "style" respectively...easier to remember, and editors like Visual Studio give syntax highlighting automatically.

Finally

@Telerik I'll be happy to give you this control to tweak and put into the SF core (and remove it from my assembly)...it's better than yours :)

Go download the latest version now


Image Description

Steve McNiven-Scott

Best\Only Blogger on this site. Therefore defacto blogger of the year Award Winner.