Pro+v21.9 Widget - HTML Tidy Editor

First off store any of these Xara Widget (file extension XWR) in one place on you hard disk.
They will work form any location but if you subsequently move any, an existing design will not know where to look.

This file is only zipped to allow it to be loaded into TalkGraphics.
Just unzip Attachment 131873 into your chosen folder.

The code is almost trivial and all praise to the Xara developer who created the mechanism:

Code:

---

<XaraWidget>
<WidgetName>On-line HTML Browser Editor (HTML Tidy.Net)</WidgetName>
<CreateURL>https://htmltidy.net/</CreateURL>
<BrowserWidth>1024</BrowserWidth>
<BrowserHeight>960</BrowserHeight>
<ControlID>mceu_56</ControlID>
<WidgetHelp>
- Copy any existing HTML code (body) into the right pane
- Configure and use the Tidy button
- Use the left pane controls to format your code
- Select and copy all the code you want in the right pane
- Click on the Insert button to create the Widget code
</WidgetHelp>
</XaraWidget>

---

You use HTML Tidy Editor.xwr by dragging in from your folder onto your design page (approximately where you want it to be).
The Xara code wraps the HTML Tidy.Net website in a frame with Insert/Cancel/Help buttons to the size I defined.
Press Cancel to close the pop-up with no follow-on action.
Press Help to recall what to do.
Press Insert after copying your HTML code to the Clipboard.

In between the actions, you compose an HTML document using the MCE HTML Editor supplied.
At a very simple very, this vastly augments the Placeholder Body textarea that Xara has been niggardly with.

The key actions to create a new Placeholder is Click in the right pane, press Ctrl+A+C and then press the Insert button.
A Placeholder Body is populated and appears on your design if you have Re-generate ticked.

For editing, this is a little confusing.
If you double-click you new Placeholder, the Widget is fired again and will show the default web page content.
What you should do is select the Placeholder and open Web Properties > Placeholder > HTML code (body) and copy your current contents.
Close this and then double-click on the Placeholder.
Select the right pane and press Ctrl+A+V to get your code in place for editing.

Wave any flags over this as you wish.
When you crack it, it enhances your additional coding needed for other widgets.

Acorn

That's really cool Acorn, looks like people could create custom widgets with this. Is there any further documentation on it or did you just figure it out yourself?

Edit: Here are some additional things I've found in some other xwr files. Not sure what they all do but you can add classes to the exported div which is good to know too. Helplink adds a button to the help that opens web page for further help.

Code:

---

<RenderDelay>6000</RenderDelay>
<Force100Percent/>
<Classes>xr_reset</Classes>
<SnippetWidth>550</SnippetWidth>
<SnippetHeight>600</SnippetHeight>
<HelpLink>http://www.xara.com/us/widgets/forms</HelpLink>

---

Edit2: For reference SnippetWidth and SnippetHeight add width and height to the exported div.

I see now you have a bunch of older posts on this so you probably know already but just posting for reference.

xtom, thank you for your contribution.

Yes the whole rationale behind the Xara Widget file type was to make third-party widgets accessible and updatable
Until XPro+v21.9, Xara has never updated the widgets and as they ran under IE, thy were failing one by one.

Here is my interpretation of the XWR Schema:

<!-- A Comment can be added anywhere -->
<XaraWidget> <!-- (Mandatory - M) Start of outer widget wrapper -->
<WidgetName> </WidgetName> <!-- (M) Title of Xara's wrapper reads as - Create new widget: WidgetName value -->
<CreateURL> </CreateURL> <!-- (M) Full URL of the on-line widget page -->
<BrowserWidth> </BrowserWidth> <!-- (Optional but better declared - O/M) Value in pixels of the first-opened width of the widget - can be dragged -->
<BrowserHeight> </BrowserHeight> <!-- (O/M) Value in pixels of the first-opened width of the widget - can be dragged -->
<RenderDelay> </RenderDelay> <!-- (O) Delay in milliSeconds to allow remote resource to synchronise all its assets -->
<SnippetWidth> </SnippetWidth> <!-- (O) Value in pixels of the populated widget on the design page and when rendered -->
<SnippetHeight> </SnippetHeight> <!-- (O) Value in pixels of the populated widget on the design page and when rendered -->
<Force100Percent /> <!-- (O) Set the rendered widget to display at a minimum of its intrinsic width and height -->
<ControlID> </ControlID> <!-- (O) Location the the expected code to be copied before the Insert button is pressed -->
<WidgetHelp> </WidgetHelp> <!-- (O/M) Descriptive text that fills a Help pop-up when the Widget Help button is clicked -->
<HelpLink> </HelpLink> <!-- (O) Add a More Help button to the Xara wrapper that opens another remote web page in your default browser -->
<NotIE6 /> <!-- (Redundant - R) Blocks IE6 as the default browser - not needed in XPro+ v21.9 -->
<TaskPilotLogin /> <!-- (R) Invokes a rather specific login to Xara Hosting -->
<EditURL> </EditURL> <!-- (Question - Q) Link to go to when the inserted widget is double-clicked -->
</XaraWidget> <!-- (M) End of outer widget wrapper -->

I have repeatedly asked Xara for the proper specification.
I have not encountered <Classes> doing what you suggest but I am open to persuasion.

The one thing that would make this all work better would be the means to direct a <CreateURL> to the local filestore.
That way, one could use a locally hosted control file rather than having to publish it to the web or set up a local server (which I do).
With this, you can add IDs to text areas, buttons to add to the Clipboard, and other code to embellish the captured detail.

I will upload an XWR that uses <Force100Percent/> to ensure the saved SVG Icon has the right-sized Placeholder.
If you scale the Placeholder at any time the SVG Widget adjusts its size.

Acorn

Thanks for the extra reference information Acorn. I imported a few of the widgets from the catalog and opened the downloaded xwr files which is how I found <Classes>xr_reset</Classes> so I reckon it should work if it's not redundant, I didn't actually try changing it though.

Acorn, thanks for posting about XWR. One of the users sent me a link to your post. I had no idea about those files. It gives some pretty interesting possibilities. I will be testing and researching the subject ...

I have an additional question about the widgets. Do you know how other "internal" widgets such as the "Other Components/Table widget" and most of the old galleries from "Components/Image resources/Photo Slideshows & Galleries" are created? Do you have a link for more information on how something like this is done?

Michal.

Quote:

---

Originally Posted by jarmoluk

Acorn, thanks for posting about XWR. One of the users sent me a link to your post. I had no idea about those files. It gives some pretty interesting possibilities. I will be testing and researching the subject ...
I have an additional question about the widgets. Do you know how other "internal" widgets such as the "Other Components/Table widget" and most of the old galleries from "Components/Image resources/Photo Slideshows & Galleries" are created? Do you have a link for more information on how something like this is done?
Michal.

---

Michal, I understand where you are coming from but I am very careful about any suggestion of reverse engineering of Xara's code.

The XWR schema is different as I am not altering any compiled code, just using the known capability of the XML Tagging as above.

The internal Xara widgets all come with a number of codewords saved in the Names Gallery. Some things like WTag:image:lastdark is associated with the hidden Jump Last icon so you might be able to use another graphic and add that name to it.
Elswhere WTags can control the scale of an image.

There is no documentation for any of these so anything I have have been done through experimentation. Resizing images dimensions have been about it.

Acorn

Acorn, thanks for the explanation. I have seen these codewords in the Names Gallery. I also experimented a bit and came to similar conclusions.
I have good intentions, too bad there is no documentation.
Good that you wrote about XWR. It's a very useful mechanism. Thanks.

Michal.