You should uninstall V1 before installing V2!

Download here, of course install Google Chrome Frame here.

Bugs in Chrome affecting the add-in:
79097 Sadly this prevents navigation within chrome without owing the addin UI, I worked around this so if you get the add-in UI becoming invisible just resave your page. Hopefully Google will fix this bug soon. Hovers, basic input all seem good to go.

The list of browsers now stands as:

1. IE
2. FireFox
3. Chrome
4. Windows Phone 7 (Emulator)

Fortunately we do have Visual Studio available, a debugger in which is quite helpful. This blog post will describe how to get Visual Studio and an Expression Web 4 add-in connected so you can use the rich JavaScript debugger in VS to help find and fix your bugs.

The first step is set Internet Explorer up for debugging. For background you should understand that add-ins within Expression Web run in a IE Web Control that Expression Web hosts. As with any web page (running in IE or an IE embedded Web Control) debugging is turned off from a Window installation. We will start with that as step 1.

1. Load Internet Explorer
2. Open IE Options

3. Click the Advanced Tab, locate the Browsing section and uncheck the 'Disable script debugging' checkboxes.

 4. Click Apply, OK and close any and all IE instances, as well as all Expression Web instances.

IE is now ready to have Visual Studio attached and script debugging can commence with the JS script debugger. We will not go into that today as we want to explore how to script debug Expression Web JavaScript add-ins. To do that start by loading Visual Studio. Make sure the add-in that you want to load up and debug is installed into Expression Web 4. For this example we will use SlapShot. I'd suggest downloading and installing it now if you are following this tutorial (versus just reading).

With Visual Studio launched and SlapShot installed open SlapShot.html from your add-ins directory within VS:

1. In VS choose 'File Open -> File' and use %appdata% directy ala: %appdata%\Microsoft\Expression\Web 4\AddIns\SlapShot\SlapShot.html

2. Once open in VS find and place your cursor on line 30, then press F9 to insert a breakpoint:

3. Start Expression Web 4 (if SlapShot is open close it and restart Expression Web). Create a website, configure it to use the Dev Server, run any page one time in IE (F12).

4. Back in VS use Debug ->Attach to process, find expressionweb.exe and click it once:

5. Next click the 'select' button, choose the 'Debug these code types' radio and choose 'Script', uncheck all others

6. Click OK and then attach, back we go to expression Web 4, time to load SlapShot up.

7. Choose the Panels menu and choose SlapShot

8. You should cleanly break into Visual Studio at your breakpoint, hit F10 once and you will start to see your locals populate with data, your call stack window showing your stack (nice):

 Some nice thoughts here are that you can inspect some of the less documented objects within the API:

Sweet, locals, watch, callstack, function eval and object inspection. Enjoy, any problems let me know!

John

1. Download the DEV Tools for WM7 here.

2. Download the Expression Web add-in here.

3. Install the add-in

4. Restart Expression Web

5. Create a new Web Site

6. Configure the Website to use the development server

b. Make sure Use Microsoft Expression Development Server is checked and select For all web pages.

c. Run at least one page from the site in SnapShot or just preview in IE.

7. Open the page and click the Preview WM7 label in the Standard Toolbar

You will see the Windows Phone 7 emulator startup and preview your Expression Web page on Internet Explorer mobile. The first time launch is a bit slow, however concurrent preview requests reuse the emulator and are much faster. You'll see full layout, interactivity (navigation, image fidelity, everything that Internet Explorer offers on the device) as well as get a feel for what your customers will encounter when they visit your site when using a Windows Phone 7 device - before they ship.

Enjoy this very early pre-release, will be working on an integration into SlapShot soon.

Special thanks and some cred to Soban :)

John

Check it out here!

Hope this helps!

John

1. Create a c# Class library project in Visual Studio, for this sample call it 'web'

2. mark the class as ComVisible

namespace web
{
    [ComVisible(true)]
    public class Class1
    {
    }
}

3. This will cause a compile time error, you will need to add the following using statement:
using System.Runtime.InteropServices;

4. Next implement Extensibility.IDTExtensibility2 in your class:

namespace web
{
    [ComVisible(true)]
    public class Class1 : Extensibility.IDTExtensibility2
    {
    }
}

5. This will cause a compile time error, you will need to add a reference to:
C:\Program Files (x86)\Common Files\microsoft shared\MSEnv\PublicAssemblies\extensibility.dll
or for 32 bit machines
C:\Program Files\Common Files\microsoft shared\MSEnv\PublicAssemblies\extensibility.dll

6. You will still have a compile time error, you will need to stub out this interface:
     #region IDTExtensibility2 Members
    [ComVisible(true)]
    public class Class1 : Extensibility.IDTExtensibility2
    {
        public void OnAddInsUpdate(ref Array custom) {
            throw new NotImplementedException();
        }

        public void OnBeginShutdown(ref Array custom) {
            throw new NotImplementedException();
        }

        public void OnConnection(object Application, Extensibility.ext_ConnectMode ConnectMode, object AddInInst, ref Array custom){}

        public void OnDisconnection(Extensibility.ext_DisconnectMode RemoveMode, ref Array custom) {
            throw new NotImplementedException();
        }

        public void OnStartupComplete(ref Array custom) {
            throw new NotImplementedException();
        }
    }
    #endregion

7. At this point you should be able to build, the last thing you will want to do is create a method to call from your add-in, something like this should suffice for testing:
        #region JavaScript implementation
        public Class1(){} //CTor
        public String Version() { return "1.0"; } //Version info
        public String TestFunction() { return "MyTestFunction"; } //My test method to call
        #endregion

8. Next up is adding a JavaScript mapping in your manifest. A few bits of information will be needed

a. your DLL name on disk
b. your namespace
c. your class name

edit your manifest and a load element within the <addin> element, something like:

<addin>
<name>My</name>
<description>My</description>
<version>1.0</version>
<load type="web.Class1, web" name="utils" />
<panel id="My" title="My" src="my.html" />
</addin>

Looking at the load element in depth:

type="web.Class1, web"
web.class1, web == <namespace>.<classname>, <dll name on disk>

AND

name="utils"
utils is the namespace you wish to use in JavaScript to eventually call your methods (more later, but eventually we will call utils.TestFunction() from JavaScript).

9. Given you are following the code above you should create this manifest on disk as addin.xml, copy your web.dll right next to it.

10. create the html page, for this blog I use my.html, with the contents to follow, place it next to the addin.xml and your dll

<html>
<head></head>
<body onload="document.write(utils.TestFunction())">
</body>
</html>

11. copy all of your files (addin.xml, web.dll, my.html to a new directory call 'my' (or any name you prefer) in
%appdata%\Microsoft\Expression\Web 4\Addins

12. Run Web 4

13. Under the panels meny you should see My, click that and you will see the return value from
public String TestFunction() { return "MyTestFunction"; }
placed into your document, in this case "MyTestFunction".

There are many usages that come to mind when looking at this functionality, passing a file location of a JPG and resizing it in managed code and then returning the URI or file path back to javascript is one example.

Hope you guys find this useful, if you have any problems I wanted to call out a few common issues I have seen people fall into
1. Make sure your class is public
2. make sure your methods are public

Enjoy!
 

For those of you who haven’t yet used SnapShot (or who need a quick refresher course), SnapShot is a panel in Expression Web that displays an image of the current page as rendered by the selected browser. It allows you to easily change the browser and browser resolution without having to repeatedly preview in browser to see your changes.

SlapShot is based on the same premise in that you can easily preview a page without loading a browser, however SlapShot extends the features of SnapShot by including full ActiveX support (Silverlight®, Flash®, and so on), as well as interactivity within the page (including navigation).

In the following screenshot, you can see that SnapShot displays only the Install Silverlight message but SlapShot displays the actual Silverlight content.

Slapshot works by listening to the Expression Web ondocumentchanged and ondocumentsaved events (for more information about these events, see The add-in manifest in the Expression Web SDK User Guide). When a page is saved or the active document is changed (for example, the user clicks on the tab of a different page), the SlapShot display updates. Quite nifty.

There are a few conditions that must be met before SlapShot will work correctly:

• The page must belong to a site on the local computer.
•  Expression Web must be configured to use the Microsoft Expression Development Server.
• To configure Expression Web to use the Development Server: 

1. On the Site menu, click Site Settings, and then click the Preview tab.
2. Make sure Use Microsoft Expression Development Server is checked and select For all web pages.

• A page from each site must have been loaded once to start the server.

Version 1 of SlapShot includes default support for the version of Internet Explorer that is installed on your computer.

You can enable Firefox support in the SlapShot panel using the following steps:

1. Download the Mozilla XUL SDK from the Mozilla download center: https://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/.
2. Unzip the latest version to your hard drive.
3. Start a command prompt as an administrator and change to the bin subdirectory where you unzipped the XUL SDK.
4. Type regsvr32.exe mozctl.dll and press ENTER.
5. Restart Expression Web 4. The SlapShot panel now supports Firefox.

Enjoy! The SlapShot add-in uses a fairly large swath of the extensibility layer and, hopefully, can provide a reference about how to get various pieces of data out of Expression Web 4 (as well as be a useful tool). Download here!

John Dixon

Expression Web

Expression Web and the ASP.NET Web Admin Tool

A lot of web designers have asked about the ASP.NET Web Site Administration tool and how to use it when designing websites in Expression Web 1.0. So I decided a quick blog might be beneficial going forward. Hope this helps out everyone and if you have updates do not hesitate to send them my way. For those who have not heard of the ASP.NET Web Admin Tool, it is a nice configuration utility for setting up ASP.NET Membership, Web Protection.and Server settings (just to name a few). Here is a great link of full details to the ASP.NET Web Administration tool.

Currently Expression Web does not load up the Web Admin tool, we all see this type of experience when we try:

The first thing to do to get this going is to fire up Expression Web and create a web site, I'll use a file based directory, on my d: drive, and call it d:\casWeb

Now that I have a website on disk I can fire up the ASP.NET development server to be able to load the Web Admin Tool, I'll do this from the command line. Simply navigate to the directory on your hard disk where .NET 2.0 is installed, in my case this is: D:\WINDOWS\Microsoft.NET\Framework\v2.0.50727

Advanced Note: You could just place this on your 'Windows Sytem Path' to simplify repetitive navigations to this directory in the future.

Once in the directory we'll need to start the ASP.NET web server with some special params for the Web Admin Tool (all one line):

WebDev.WebServer.EXE /port:8011 /path:"D:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\asp.netwebadminfiles" /vpath:"/asp.netwebadminfiles"

Note: for path replace my D:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 with the location of your Windows and .NET install

Advanced Note: For detailed understanding (if interested) on the params simply type in WebDev.WebServer.EXE and hit enter, you'll get this:

You should now see a nice little icon in your task bar:

OK - so now we have the ASP.NET Development server fired up and ready to configure ASP.NET websites. The next step is to load a URL against that port\webserver with some specific queryString values which target your website you created in Expression Web. To do this launch your web browser and paste or type this URL (note: you need to replace the d:\casweb with the path to the folder to your website):

https://localhost:8011/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=d:\casweb\&applicationUrl=/casweb

You'll now see the Web Site Administration Tool load up in your browser:




Since we targeted the Web Admin tool against our website (via the query string: ?applicationPhysicalPath=d:\casweb\&applicationUrl=/casweb) we can use the features of the Web Admin Tool and see that indeed we are working with the website we created in Expression Web. To test this click the Application Tab in your browser,

then click Configure SMTP e-mail Settings



Then just fill out any old text in the server name and from field (note: these are just values testing that we are indeed hooked up to the right web site, so just enter anything).

Click Save

Now let's head back to Expression Web and refresh the Folder List task pane, just click inside the task pane and press F5. You'll see a web.config file that the ASP.NET Web Administration Tool created for you:

Open the web.config file and you'll see the values you entered within the tool.

So longer term I'd like to find some more time for this topic and see about writing a plug in for Expression Web that handles a bit of this for you automagically, maybe I can talk some of you Expression fans out there in the ether to help me out? :)

For the brave at heart I did manage to get the following Macro working to do all of the tasks noted above, I tested this on Vista only so let me know what people run into. Also 64Bit is not tested and you do need to close the Web Server down (sorry my VBA is rusty!)...I'll create a quick blog next week for how to hook it up in Expression Web, but basically you need to create a macro by choosing Tools-Macro-Visual Basic Editor and paste the following in:

Sub foo()
    Dim RetVal As Variant
    RetVal = VBA.Shell(System.ProfileString("HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\ASP.NET\2.0.50727.0", "Path") & "\WebDev.WebServer.EXE /port:8011 /path:""" & System.ProfileString("HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\ASP.NET\2.0.50727.0", "Path") & "\asp.netwebadminfiles"" /vpath:""/asp.netwebadminfiles""", vbHide)
    Value = System.ProfileString("HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Applications\iexplore.exe\shell\open\command", "")
    totalLength = Len(Value) - 3
    RetVal = VBA.Shell(Mid(Value, 1, totalLength) + " https://localhost:8011/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=" & Mid(ParseURL(ActiveWebWindow.Web.Url, URLComponentServer), 4) + ParseURL(ActiveWebWindow.Web.Url, URLComponentPath) & ParseURL(ActiveWebWindow.Web.Url, URLComponentFileName) & "\&applicationUrl=" & "/" & ParseURL(ActiveWebWindow.Web.Url, URLComponentFileName), vbNormalFocus)
End Sub

save, close and then go to Tools->Customize, click the Command Tab, then in the categories list select macros, then drag and drop the happy Face icon  somewhere in the app, I placed it right on the right of the menu bar.. next right click the happy face (with that dialog still up) and select Assign Macro. You should see the macro you created in the previous step listed. Select it, click OK and click close. Your happy face should now do all of the config goo mentioned above for free.

Thanks for reading and I hope this helps you all out a little as you design in Expression Web and author for ASP.NET!

JD

Expression Web and the ASP.NET Web Admin Tool

A lot of web designers have asked about the ASP.NET Web Site Administration tool and how to use it when designing websites in Expression Web 1.0. So I decided a quick blog might be beneficial going forward. Hope this helps out everyone and if you have updates do not hesitate to send them my way. For those who have not heard of the ASP.NET Web Admin Tool, it is a nice configuration utility for setting up ASP.NET Membership, Web Protection.and Server settings (just to name a few). Here is a great link of full details to the ASP.NET Web Administration tool.

Currently Expression Web does not load up the Web Admin tool, we all see this type of experience when we try:

The first thing to do to get this going is to fire up Expression Web and create a web site, I'll use a file based directory, on my d: drive, and call it d:\casWeb

Now that I have a website on disk I can fire up the ASP.NET development server to be able to load the Web Admin Tool, I'll do this from the command line. Simply navigate to the directory on your hard disk where .NET 2.0 is installed, in my case this is: D:\WINDOWS\Microsoft.NET\Framework\v2.0.50727

Advanced Note: You could just place this on your 'Windows Sytem Path' to simplify repetitive navigations to this directory in the future.

Once in the directory we'll need to start the ASP.NET web server with some special params for the Web Admin Tool (all one line):

WebDev.WebServer.EXE /port:8011 /path:"D:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\asp.netwebadminfiles" /vpath:"/asp.netwebadminfiles"

Note: for path replace my D:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 with the location of your Windows and .NET install

Advanced Note: For detailed understanding (if interested) on the params simply type in WebDev.WebServer.EXE and hit enter, you'll get this:

You should now see a nice little icon in your task bar:

OK - so now we have the ASP.NET Development server fired up and ready to configure ASP.NET websites. The next step is to load a URL against that port\webserver with some specific queryString values which target your website you created in Expression Web. To do this launch your web browser and paste or type this URL (note: you need to replace the d:\casweb with the path to the folder to your website):

https://localhost:8011/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=d:\casweb\&applicationUrl=/casweb

You'll now see the Web Site Administration Tool load up in your browser:




Since we targeted the Web Admin tool against our website (via the query string: ?applicationPhysicalPath=d:\casweb\&applicationUrl=/casweb) we can use the features of the Web Admin Tool and see that indeed we are working with the website we created in Expression Web. To test this click the Application Tab in your browser,

then click Configure SMTP e-mail Settings



Then just fill out any old text in the server name and from field (note: these are just values testing that we are indeed hooked up to the right web site, so just enter anything).

Click Save

Now let's head back to Expression Web and refresh the Folder List task pane, just click inside the task pane and press F5. You'll see a web.config file that the ASP.NET Web Administration Tool created for you:

Open the web.config file and you'll see the values you entered within the tool.

So longer term I'd like to find some more time for this topic and see about writing a plug in for Expression Web that handles a bit of this for you automagically, maybe I can talk some of you Expression fans out there in the ether to help me out? :)

For the brave at heart I did manage to get the following Macro working to do all of the tasks noted above, I tested this on Vista only so let me know what people run into. Also 64Bit is not tested and you do need to close the Web Server down (sorry my VBA is rusty!)...I'll create a quick blog next week for how to hook it up in Expression Web, but basically you need to create a macro by choosing Tools-Macro-Visual Basic Editor and paste the following in:

Sub foo()
    Dim RetVal As Variant
    RetVal = VBA.Shell(System.ProfileString("HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\ASP.NET\2.0.50727.0", "Path") & "\WebDev.WebServer.EXE /port:8011 /path:""" & System.ProfileString("HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\ASP.NET\2.0.50727.0", "Path") & "\asp.netwebadminfiles"" /vpath:""/asp.netwebadminfiles""", vbHide)
    Value = System.ProfileString("HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Applications\iexplore.exe\shell\open\command", "")
    totalLength = Len(Value) - 3
    RetVal = VBA.Shell(Mid(Value, 1, totalLength) + " https://localhost:8011/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=" & Mid(ParseURL(ActiveWebWindow.Web.Url, URLComponentServer), 4) + ParseURL(ActiveWebWindow.Web.Url, URLComponentPath) & ParseURL(ActiveWebWindow.Web.Url, URLComponentFileName) & "\&applicationUrl=" & "/" & ParseURL(ActiveWebWindow.Web.Url, URLComponentFileName), vbNormalFocus)
End Sub

save, close and then go to Tools->Customize, click the Command Tab, then in the categories list select macros, then drag and drop the happy Face icon  somewhere in the app, I placed it right on the right of the menu bar.. next right click the happy face (with that dialog still up) and select Assign Macro. You should see the macro you created in the previous step listed. Select it, click OK and click close. Your happy face should now do all of the config goo mentioned above for free.

Thanks for reading and I hope this helps you all out a little as you design in Expression Web and author for ASP.NET!

JD

HTH

JD

https://blogs.msdn.com/jdixon/articles/509700.aspx

a. IE Specific
b. I never optimized the javascript to use parameters

Hope this helps soeone achieve what they need. If you find a better solution please feel free to let me know!