1	Integrating JavaScript into uScript Jim Songer MainTree Systems jsonger@maintree.com
2	Overview Basic Concepts Control Tweaking Display Tweaking Other Possibilities Bonus Materials Reference Sources
3	Basic Concepts First things first
4	Basic Considerations Only useable in BUI mode %preload and $assignobj will be your friend Watch out for CMHC patches Not limited to JavaScript, can use VBScript
5	Why JavaScript Easy to use and develop for Relatively easy to debug Plenty of online sources for help Can do cool tricks
6	Element Naming All form fields are prefixed with brAcdsp Use $assignobj for any form fields or buttons that you will be working with Example: (void)$assignobj(“MyButton”) $button(“Click Me”) Becomes: brAcdsp.MyButton in Javascript
7	Early Binding Use early binding to assign JavaScript functions to form fields before the page loads. Example: <SCRIPT language='javascript' for='ClientID' event='onchange'> <!-- GetInfo(); --> </SCRIPT> … Or … <td id=“Header” onclick=“DoCall();”>
8	Late Binding Use late binding to assign JavaScript functions to form fields after the page loads. This also allows for reassignment on the fly. Example: brAcdsp.ClientID.onchange=GetInfo;
9	Control Tweaking Cool things with form controls
10	Changing Drop Boxes
11	Changing Drop Boxes $table("T1",," border='1' cellspacing='1' id='table1'") $row() $col(,"middle",,,,) (void)$assignobj("DropDown2") $dropbox(DropDown2,"Option 1","1",,,,,) $dropbox(DropDown2,"Option 2","2",,,,,) $dropbox(DropDown2,"Option 3","3",,,,,) $dropbox(DropDown2,"Option 4","4",,,,,) $dropbox(DropDown2,"Option 5","5",,,,,) $dropbox(DropDown2,"Option 6","6",,,,,) $endtable("T1")
12	Changing Drop Boxes <script language="javascript"> <!-- brAcdsp.DropDown2.size=5; //--> </script>
13	Changing Drop Boxes Display drop down options with out a click Caveat: Drop box must be in a table
14	$textblock to HTML Editor
15	$textblock to HTML Editor
16	$textblock to HTML Editor xWork is x $form("TextAreaDemo") "mt-libHTMLArea":HTMLAreaInit() (void)$assignobj("TextTest") $textblock(xWork,20,80,,,,) "mt-libHTMLArea":HTMLArea("TextTest",,"100%") $sendform("TextAreaDemo")
17	$textblock to HTML Editor mt-libHTMLArea HTMLAreaInit() Inserts base JavaScript – Once per form HTMLArea(ObjectID, Height, Width, BodyStyle, ToolBar) Insert for each $textblock to convert Can use more than once per form
18	Display Tweaking Make your forms look nice
19	Roll Up / Roll Down Sections
20	Roll Up / Roll Down Sections 2 JavaScript Functions 3 Defined DHTML objects Executed initial state
21	Roll Up / Roll Down Sections $table("T1",," border='0' cellspacing='1' id='table1' width='50%‘”) $row() $col(,"middle",,,," bgcolor='#00CCFF'") $ctag("<font face='Webdings' id='UpArrow' onclick='RollUp()' style='cursor: hand'>") $text("5") $ctag("</font>") $ctag("<font face='Webdings' id='DownArrow' onclick='RollDown()' style='cursor: hand'>") $text("6") $ctag("</font>") $text("Header Cell") $row() $col(,"middle",,,," id='Content'") $text("This is a example of a content that can be rolled up and down.") $ctag("<p>") $text("It can contain any information you want and it will be hidden") $text("with a click of the above arrow, and it returns just as fast.") $endtable("T1")
22	Roll Up / Roll Down Sections <script language="javascript"> <!-- function RollUp() { UpArrow.style.display="none"; DownArrow.style.display="inline"; Content.style.display="none"; } function RollDown() { UpArrow.style.display="inline"; DownArrow.style.display="none"; Content.style.display="inline"; } RollDown(); //--> </script>
23	Floating Session Tabs
24	Floating Session Tabs Wraps around the $sessiontabs function Uses the left-side-html & right-side-html parameters to place the base JavaScript Uses the mt-STFloat.js to contain the guts of the JavaScript Also adds a button to hide the tabs
25	Other Possibilities What else can you do?
26	Other Possibilities Edit checks On-the-fly form updates Floating tables Pop up menus Your imagination is the only limit
27	Reference Sources Where to look for answers
28	Reference Sources Microsoft Platform SDK http://msdn.microsoft.com Download (342MB) Google O’Reilly Books JavaScript & DHTML Cookbook JavaScript Pocket Reference Safari Bookshelf
29	Bonus Materials Working code for the 4 examples MainTree uScript Shared Libraries mt-libBUI mt-libDialog mt-libGeneral mt-libHTMLArea mt-libPrint
30	Thank You Questions?