COBOL-HTML
COBOL-HTML
COBOL’s Bright Future We’ll crack open a COBOL program that takes a JSON file as
input and prints a grocery store flyer. You’ll learn the basics of
Nothing besides the
fundamentals (VS Code, data
Here for the long haul COBOL in the process of completing the challenges. Being able
to add COBOL to your own personal list of talents will definitely
sets, JCL) is required.
1. INSTALL IBM Z OPEN EDITOR 2. COLUMN SECTION MODE 3. SET TO STAY OPEN
By default, when you select lines of code, they will be Create your own COBOL source library – from your VSCode
This VSCode extension supplies COBOL language support,
highlighted in columns, which can be handy in some situations terminal , allocate a new dataset:
including syntax highlighting zowe files create pds --data-class spds 'Zxxxxxx.CBL'
but probably not in this challenge.
Note: for copy and paste, make sure formatting remains the same
If you don’t already have the IBM Z Open Editor installed, let’s
If you’d like to turn off this feature, in your top menu bar, go to Open the source dataset ‘ZXP.PUBLIC.SOURCE’ and copy the
get that done. JSONCBL and JSONJCL members into your own CBL and JCL
Selection->Column Selection Mode and uncheck.
datasets, respectively. No need to read through them yet.
Open VSCode and in the left side tool menu select Extensions.
There’s a default feature of VS Code that can be helpful
From there, in the "Search Extensions in Marketplace" search in this challenge to save you from having to close files
field, type “IBM Z Open Editor”. Search results will begin you only need to preview. To take our main files out of
populating, select "IBM Z Open Editor" and click install preview mode, double click the italicized tab name. Once
set, italics are removed.
COBOL Here for the long haul
4. SET UP COLUMN RULERS 5. CHECK COBOL SYNTAX ERRORS 6. SAVE, COMPILE AND RUN
IBM Z Open Editor already sets up the vertical rulers you’ll Save using File->Save.
Open the COBOL source file by doing Select View->Problems in
need for COBOL source files.
the top menu.
Right click your JCL member JSONJCL and Submit Job.
JCL statements are up to 80 columns wide, but columns 73-80
A list of two COBOL syntax errors is displayed in the Problems
are ignored. Set up a column ruler after column 72 so you don’t The JCL script compiles and runs the COBOL program. A
type past there. tab at the bottom. Double click each problem and see if you can
resolve the errors. notification will appear that the job has been submitted. If it
disappears, click the bell icon to see recent notifications.
Open Command Palette (Ctrl+Shift+P on Windows) and type
“settings json” (Select “Preferences: Open Settings (JSON)”) Once they are resolved, the Problems tab should show 0 errors
and there should be no red underlines in your COBOL program. Click the job number to open the job results.
à Column rulers, add this at the end: "editor.rulers":[72]
Make sure to add a comma at the end of the line before.
WHY ARE WE LEARNING COBOL IN THIS DECADE?
Simple answer: COBOL is everywhere.
Have you or someone you know ever gone to a bank or withdrawn cash from an ATM? Most likely, you
are running a COBOL transaction. More than one million COBOL programs run every second of every
day on mainframes. In fact, most IBM Fortune 1000 customers run on COBOL.
10. MISSING TITLE 11. PLAIN JANE WON’T DO 12. RUN THE CODE
Our grocery store name “Corner Grocery Store” is missing from We fixed the title, but we can’t show our customers the flyer in Open the job dataset - RUNPROG:FLYRFILE(105).
the plain text flyer. plain text like this!
If you see HTML tags starting with <html>, you did it! But how
This one is tricky! Could there be a parameter to pass to the program to add can we preview it to see the formatting?
formatting?
Spot and fix the error, then submit the JCL job again (from Step
8) to make sure the title is added. Once you think you’ve figured it out, submit the JCL job (again
from Step 8) and check the flyer once more.
COBOL Here for the long haul
13. INSTALL HTML PREVIEW EXT. 14. SET LANGUAGE MODE 15. OPEN SESAME
Select Extensions in the VSCode left side tool menu. With your FLYRFILE open, in the bottom right, click “Plain At the top right, click the icon to “Open Preview to the Side”.
Text” then “Configure File Association for ‘.FLYRFILE’…”
Search HTML Preview and install one of the options, such as and enter HTML The flyer is better formatted now, but there’s still some
the one by Thomas Haakon Townsend problems.
Once done, you will see HTML syntax highlighting.
COBOL Here for the long haul
16. ADD CURRENCY SYMBOLS 17. ADD PRODUCT IMAGES 18. EXPAND YOUR KNOWLEDGE
Want to learn more? Take IBM's free COBOL course.
The currency should be in US dollars ($), but the dollar sign is This is the final challenge. Once you figure it out, submit the
missing, what’s wrong? JCL job and open the flyer’s HTML preview to make sure it It includes hands-on labs in VS Code:
looks nice.
Once the issue is fixed, submit the JCL job (Step 8 again), open
• Video version: https://ibm.biz/learn-cobol-vscode
the flyer’s HTML preview again to check your work. To finish off, create a copy of the html produced in a • Text version: https://ibm.biz/github-cobol
cobol.html file in your USS home directory, then submit the
Didn’t our input JSON (in the JCL file) contain links to real CHKACBLH job from ‘ZXP.PUBLIC.JCL’
product images? Why aren’t they showing up? Did we forget to
map these images when declaring the JSON structure in
COBOL?