Transcript 1A (session #) This is the Title of My Presentation

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