Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
10B CA 2E Web Option Advanced Techniques Laura Houchin, ADC Rory Hewitt, CA September 21, 2007 3rd Annual Plex/2E Worldwide Users Conference Biography - Laura Houchin > Laura Houchin > Software Architect - CA > Lead developer of 2E Development team > [email protected] > Other facts 2 Live in St. Louis, MO September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Biography - Rory Hewitt > Rory Hewitt > Software Architect - CA > Lead developer of 2E Development team System i developer for 13 years Joined Synon in 1997... and stayed! > [email protected] > Other facts 3 Live in San Francisco, CA Award winning author Snowboarder, badass September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Topic 1: Element Customization Element Customization > Simplest way to customize Web Option > Builds on default 'out of the box' look and feel > 2 parts to element customization Create customization data (known by Customization ID) Attach customization data to model 'element' > Several basic examples shipped > Use YWRKELMCST command to view/create/edit ElmCst 5 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Element Customization 1: STRIPE > Striping a subfile row Alternate colors make it easy to visually scan across > ElmCst is very simple: <script>stripeRow(' &&_sflalt ');</script> > Attach to subfile row > &&_sflalt alternates between '1' and '0' > stripeRow() function defined in util.js file 6 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Create STRIPE Element Customization ID 7 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Press F17 from screen editor 8 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Take 'Z' against subfile record 9 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Press F17 to add Element Customization 10 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Enter 'STRIPE' and press Enter 11 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Basic screen with no ElmCst applied 12 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA STRIPE Element Customization applied 13 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Element Customization 2: STRIPESEL > Striping a subfile row plus allow double-click Alternate colors make it easy to visually scan across Double-click anywhere on row executes *SFLSEL option Any valid *SFLSEL option can be used Perfect for SELRCD and any default functionality > Attach to subfile row (as with STRIPE) 14 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Create STRIPESEL Element Customization ID 15 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA STRIPESEL Element Customization applied Double-click record to select 16 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Element Customization 3: Context menu > Provide right-click (context) menu for e.g. *SFLSEL > Displays as 'floating' drop-down list (like Windows) > Attach to subfile row (as with STRIPE) or *SFLSEL field 17 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Create CTXMENU_245 Element Customization ID 18 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA STRIPE and CTXMENU_245 applied 19 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Topic 2: User-defined JavaScript & CSS User-defined JavaScript & CSS > Avoids 'clash' with system (shipped) files e.g. YSCRIPT.JS Don't use 'Y' prefix > Create util.js and util.css 'text files' on PC first > Copy into IFS using FTP, Navigator etc. > Change MLS Syntax file to include references Direct references Import references 21 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA User-defined JavaScript & CSS > Change MLS Syntax file to include references: Add new records to *SCRIPT and *STYLE object groups – More obvious, but requires change to MLS Syntax > Import references into shipped .JS and .CSS files Add link to util.js into YSCRIPT.JS Use @import to include util.css in e.g. WHITE.CSS – Requires no changes to MLS Syntax 22 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Topic 3: Turn JIT pages into Skeletons Turn JIT pages into Skeletons > View the screen in the browser as a JIT page View Source, Save As (menu.htm) to desktop 24 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Turn JIT pages into Skeletons > View the screen in the browser as a JIT page View Source, Save As (menu.htm) to desktop 25 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Turn JIT pages into Skeletons > Edit the source on the PC or on the iSeries using SEU (do next 2 steps first!) <title> <form method=“post” action=“(_xCALLURL)” name=“(_xSKEL)” etc. Compare to a generated skeleton > Copy into IFS using FTP, Navigator etc. > Run YPRCSKL and use *CVTTOSKL > Use YWRKSCRXRF and create cross reference records > Now check out your menu screen 26 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA Turn JIT pages into Skeletons > Now check out your screen (simple example, of course!) 27 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA CA 2E Web Option Advanced Techniques > Any number of customizations are possible with Web Option! Use Stylesheets to simply global look Use JavaScripts to beef up web pages Simple to complex customization can be accomplished easily Questions? 28 September 21, 2007 CA 2E Web Option Advanced Techniques Copyright © 2007 CA