Dreamweaver Widget Packager:Testing Guide
From Adobe Labs
Web Widget Testing Guidelines
Thank you for downloading the Dreamweaver Web Widgets SDK. Before creating a Widget Extension, make sure this really is a Web Widget to be packaged:
There exists a collection of javascript, CSS, and other asset files that together render an object on a single page. This rendered object can be contained within a div tag with a unique ID. an XML file following the WDF format that describes the web widget. We have included a generic set test plans to follow once the WDF has been created for the widget. If followed one can be assured that the widget will install and be usable on other users computers. If you are looking for other information besides testing, check the Readme.
To check before packaging
- Verify that the WDF has, at least, all of the required tags.
Widget, Description, Content, and Javascript.
- Make sure that for each required file and/or asset there is a corresponding <require> tag.
Each of these tags has required attributes, all of which are described on the OAA web site and in our Getting Started document.
- Verify that if any proprietary tags have been added, such as <dw:extension>, their required elements exist as well. If any of these proprietary tags are being used, then the xmlns:dw="http://ns.adobe.com/dreamweaver" attribute needs to be added to the widget tag.
To check after installing
Make sure all information in Extension Manager is correct Check the Widget Name, Author, Version, and Description fields. Make sure the information displayed there is what should be displayed. If you did not provide an author, Extension Manager will display "Anonymous" as the author. Make sure Widget Extension appears under the Insert menu
Click Insert at the top of the screen A drop down menu will appear. At the bottom should be a sub-menu with a name the same as the category specified in the WDF. If a category was not specified then the sub-menu will be named "Web Widgets" Inside the sub-menu the name of the recently installed Widget Extension should appear. Make sure Widget Extension appears in insert panel Open the Insert Panel. This will look different depending on how Dreamweaver is set up, there is:
- Iconic mode
- Minimized
- Full Panel
Click the drop-down at the top and find the category specified in the WDF. The Widget Extension should be listed with it's appropriate icon next to it. Note: If you did not specify an <icon> tag this will show the default gears as in the image below.
Make sure the correct code is being inserted in the correct place Create a new HTML page. Using either the Insert Panel or the Insert Menu select the Widget Extension. An outline of similar size to the installed Widget Extension should appear. Switch to "Code View." Proper links to required files should appear in the head. Javascript and Content should have been placed in the correct places according to the location attribute. Save the page. The user will be prompted to copy files to a place relative to the newly saved page. Make sure that all of the required files are listed in the proper place. Note: If the WDF has used either of the dw:shared="true" or type="library" attributes in a require tag, then those file will be copied site relative not document relative. If no site has been defined they will be copied document relative anyway. Make sure Property Inspector is displaying correct information Insert the Widget Extension using either the Insert Panel or Insert Menu . In Design View select the inserted Widget Extension by clicking on it. If the dw:extension and dw:translator tags were not specified in the WDF then the Property Inspector will look similar to this:
If the dw:extension and dw:translator tags were specified in the WDF then a blue box will outline the widget. Selecting this blue outline will show a Property Inspector in which one can change the ID of the inserted Widget Extension. Make sure that when you change the id in the Property Inspector that the ID actually changes in the code to verify that the dw:translator is being used properly. There should also be a link to the widget's help page. Click on this link to verify it is going to the correct web site.
Other <dw:translator> tests Note: These tests are irrelevant if the dw:extension and dw:translator tags have not been specified in the WDF. Insert the Widget Extension into a page. Save the page. Select the widget and delete it. Go into Code View Verify that all HTML markup and JavaScript has been removed. Verify that the links to the Widget Extension's asset files in the <head> have been removed. Now insert the Widget Extension multiple times. Verify that the ID is incremented properly and that each works properly on the page in either Live Mode or a browser. Check the widget in a browser. Does it run correctly? Submit extension to the Adobe Exchange Go to http://www.adobe.com/cfusion/exchange/upload/ and upload your Widget Extension for the world to see! Note: You will need an Adobe ID to submit a widget to the Exchange. Multiple Widget Tests Note: These tests are only relevant if you are building multiple variations of a widget based on the same asset files. After testing each individual widget using the above tests, create a new page and insert all of the widgets. Save the page. Verify that only one copy of each <require> appears in the <head> Go through the page in Design View and select each widget. For each widget that has the dw:extension and dw:translator tags specified, make sure that the Property Inspector shows the correct corresponding ID. Open a browser or Live View and verify that the widgets work as expected and do not collide in some unintended way.
