Web Editable Widgets

[Acorn]

Xara created a small number of Web editable widgets and presents them in scattered across the Online Content Catalogue without offering any explanation.
There are pages on-line:

• https://www.xara.com/us/widgets/365/other/
• https://www.xara.com/us/widgets/365/forms/
• https://www.xara.com/us/widgets/365/e-commerce/
• https://www.xara.com/us/widgets/365/audio_video/

I count 36 XWR files in my local Cache:

1. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\imagecomponents\slidesh ows\widget_mediawidget_live_xh.xwr
2. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\ecomme rce\amazon_com.xwr
3. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\ecomme rce\amazon_uk.xwr
4. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\ecomme rce\ecwid_browser.xwr
5. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\ecomme rce\paypaladdtocart.xwr
6. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\ecomme rce\paypalbuybutton.xwr
7. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\ecomme rce\paypalviewcart.xwr
8. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\ecomme rce\wazala.xwr
9. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\forms\ form2go.xwr
10. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\forms\ googleforms.xwr
11. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\forms\ jotform.xwr
12. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\forms\ wufoo.xwr
13. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\media\ flickrslideshow.xwr
14. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\media\ picasaweb.xwr
15. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\media\ youtube.xwr
16. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\adsense1.xwr
17. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\adsense3.xwr
18. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\adsense5.xwr
19. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\bingmaps.xwr
20. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\googlecustomsearch.xwr
21. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\googlemaps.xwr
22. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\iframe.xwr
23. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\components\layoutcomponents\widget s\nabble_blog.xwr
24. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\facebook_17_0\facebookbadge s.xwr
25. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\facebook_17_0\facebookplugi ns.xwr
26. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\facebook_17_1\facebookbadge s.xwr
27. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\facebook_17_1\facebookplugi ns.xwr
28. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\googleplus\googleplusbadge. xwr
29. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\googleplus\googleplusbutton .xwr
30. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\instagram\snapwidget.xwr
31. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\instagram_17_1\snapwidget.x wr
32. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\linkedin\linkedin.xwr
33. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\tumblr\addthis.xwr
34. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\twitter\twitter_buttons.xwr
35. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\twitter\twitter_widgets.xwr
36. C:\Users\xpa\AppData\Local\Xara\XtremeProSub\18\Ca che\designs\eng\social\twitter\twitterforweb.xwr

#1 is the Xara Slideshow Widget. #22 is the Embed a Website Widget.
I thought Google+ was no more but we have #28 & #29. Ditto Picasa Web Albums, #14.
Not very inspiring when even #20, Google Custom Search, still carries the same Comment "test 2", there since Version 10!

The killer for these abandoned Widgets is a growing number will no longer work as the Third-Parties these components access reject Internet Explorer browser access.
New Widgets, they are easy to assemble, face this same disaster.

Xara has made a token advance in no longer using IE for Preview since version 18.
Sadly, this has not expended to other XDA internals like the Help application (e.g., mk:@MSITStore:C:\PROGRA~1\Xara\XARADE~4\HelpAndSup port\ENG\XaraX.CHM::/7874.htm#o6686) and the Website Editable Widget pop-up window.

Another delay in those Widgets that do still work is Xara redirects though its own servers so it can keep tabs on your usage.
In the case of the Embed a Website Widget, you could argue for this as it lands on a Xara resource.

All the Widgets even fail to use SSH as as well as using an obsolete client the calls themselves are insecure.

I have bypassed all these issues by copying the Widgets into a separate folder.
Each is around 1kB in size and can be examined and edited in a text editor as they as XML structures.

I use a protocol available in Windows 10 that invokes the MS Edge browser instead.
Clearly you need W10 and Edge on your machine.

The simple changes are:

1. <WidgetName> - prepend "MS Edge - "
2. <CreateURL> - prepend "microsoft-edge:"
3. <CreateURL> - remove any "http://www.xara.com/statsredirect/?url=" redirects and use the current SSL link to the Third Party asset.
4. <BrowserWidth>480</BrowserWidth>
5. <BrowserHeight>128</BrowserHeight>
6. The last two as the IE Window pop-up after a complaint and has the Insert, Cancel & Help buttons. MS Edge also launches to the correct website and any copy there is saved in the Global Clipboard so the IE Insert action is still valid.
7. <WidgetHelp> - ad any changes to remind you what now happens.

Here is a Test Case for a new Widget:

FILENAME
The filename is boxicons.xwr

CODE
It has this code:

<XaraWidget><WidgetName>MS Edge - SVG Icon Generator</WidgetName>
<CreateURL>microsoft-edge:https://boxicons.com</CreateURL>
<BrowserWidth>480</BrowserWidth>
<BrowserHeight>128</BrowserHeight>
<WidgetHelp>
- This Widget uses MS Edge as the website fails with the Xara-generated IE window
- Use the MS Edge window to create your icon
- Pick your icon and design it in the pop-up
- Click the SVG Code button
- Click on the code to copy to your Clipboard
- Click on the IE window Insert button
- Close the MS Edge window
</WidgetHelp>
</XaraWidget>

USAGE

• Save to a local folder (e.g., Xara Widgets)
• Drag its icon onto your open design.
• Click OK when the Error appears:
  
• Pick an icon and change its appearance.
• Follow the WidgetHelp instructions.

You should now have a Placeholder with SVG code.
I untick the Regenerate box at this point.
I also use Web Properties > Placeholder > HTML code (body) and change the width & height parameters to be both 100%.

Here are a few XWR files for you to try on W10/Edge: Xara Widgets (W10+Edge).zip

Enjoy.

Acorn

[Egg Bramhill]

Sorry Acorn, not following this. Tried my best for a couple of hours but can't get my head around it. I think I'm getting stuck re the 'Pick an icon and change its appearance' bit.

[Acorn]

Sorry Acorn, not following this. Tried my best for a couple of hours but can't get my head around it. I think I'm getting stuck re the 'Pick an icon and change its appearance' bit.

Egg, click an icon.

A pop-up window appears with controls for Fill Colour, Style, Rotation, Animation & Flip.
For Animation, it is a different approach and you have to add styling. Click on the Usage link.
You then have its size.

You click on the SVG Code button and then hover over the <svg> Tag and click (Copy svg code).
In the small IE pop-up on your design page, click the Insert button.
I change the H&V to 100% there.

Acorn

[Egg Bramhill]

Cheers Acorn, I think I'm following you but this is my progress at present:

[Acorn]

Egg, because it is a Web Editable Widget, the Edit is linked back to the XWR and so will re-open the target page (boxicons.com).
I did say use Web Properties > Placeholder > HTML code (body) to edit the <svg> code.

XDA > F1 Key > Index > Web Editable Widgets:

Editing existing widgets

At any time you can double click the widget placeholder (or right click and choose Edit Widget) in your Designer Pro+'s [] Acorn: XDA] page to return to the widget provider's website so you can easily modify or replace the widget.

Acorn