SPRY Widget Porting SOP

Saturday, July 19, 2008

DS-Accordion Widget Porting SOP
1. start the project with two folders:
a. target folder, and
b. spry_example (such as livetutor_template) folder.

2. copy all spry_example files to the target folder;
2.1 index-1.html for accordion-ds widget example
2.2 index-2.html for sliding panel widget example

3. rearrange the target files as the structure inside the spry_example folder:
3.1 place all html files on top level, and
3.2 sort the rest of files into css, images, js, podcast, and xml folders.
* if the original files were moved to a different directory, make sure to update all references inside the file.

4. copy the code line 41-67 from old index-1.html to new index-1.html
line 41:
line 42: < href="css/spry_style.css" rel="stylesheet" type="text/css">
...
line 67: < /style>
line 68:

line 69:

5. copy and insert the Accordion Widget, from old index-1.html to new index-1.html
line 91: < id="Accordion1" class="Accordion" tabindex="0">
...
line 132: < /div>

6. copy the following files from the example folder to the target folder:
6.1 spry_example/xml/ to target/xml/
6.2 spry_example/images/4xml/ to target/images/4xml/
6.3 spry_example/images/4thumbs/ to target/images/4thumbs/

7. follow the Lynda DWCS3 Beyond 3-8 to structure the div for both Data Set and Accordion Widget.
(a) select the outer most tag covers the outer most area that the dataset control is to be placed.
(b) insert the layout div tag, as id="ds_control",
(c) click on "New CSS",
(d) define in the spry_style.css, and
(e) edit the appropriate width property, inside the category box,
(f) do the same for "widget_display", as in step b to step e

8. follow the LDWCS3B 5-2 to 5-5,

9. Check the SpryAssets folder, make sure all files are accounted for,
**sometimes DWCS3 DOES NOT copy all the necessary files to the SpryAssets folder

10. preview to make sure all previous steps are done correctly

11. add effects to the div tag that you like, by following the LDWCS3B 5-11 for effects

SOP for porting sliding panel widget
1. copy the following from index-2.html to index-2.html
< id="panelContainer"> and &ltdiv id="panelContainer">
.....
< /div>

2. change the inline style css:
#content #thumb
to
#what_ever_is_on_the_outer_div #thumb

3. copy the following
< id="thumbs">
.... < /div>
< id="panelContainer">
....< /div> and
< class="clearfloat">

< language="javascript" type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("detailSlide1", {duration:500, fps:80});
< /script>

to index-2.html