Building the HTML interface and the web application

Using isCOBOL IDE

1.	Right click on the html folder

2.	Choose New > Other...

3.	Choose Web > HTML File...

4.	Click on the Next button

5.	Give it the name "index.html" and click Finish

6.	Put the Content of Index.html in the file

At this point you can test the HTML application in the Eclipse to have a clue on how it will look on Android. So far you’ve produced a web application that can run on a web server and be used by any browser enabled device.

Note - Veryant suggests to run an external browser for the test. You can instruct the IDE to launch an external browser by following these simple steps:

1.	Click on the Window menu

2.	Choose Preferences

3.	Expand General and select Web Browser in the tree

4.	Check the "Use external web browser" option

5.

Click Ok

To test the application, proceed as follow:

1.	Right click on the project name in the tree

2.	Choose Run As > isCOBOL EIS Application

 

If you wish to debug the COBOL program, choose Debug As > isCOBOL EIS Application, instead

 

Note - The debug of an 'EIS Application' consists in a remote debug session of the 'Jetty' application server included in the IDE. The first time the Debugger server suspends itself because it is waiting for a connection from the client; when the debugged program ends, the Debugger session doesn’t terminate as it would happen in a stand alone Debugger session. The connection with the client part is still active. So the Debugger server goes in a 'continue' state, it means that it will suspend only when a breakpoint is reached. Hence, in order to debug the program another time, it is necessary to set some breakpoints.

Before going to the next step, that will make you run the simple hello world application on Android, it’s necessary to provide a valid isCOBOL Mobile license key in the file iscobol.properties under the resources folder.

Edit the file iscobol.properties under the html folder and insert your license key. At the end, the file should look like this:

iscobol.mobile.license.2017=<your license code> iscobol.exception.message=2

Without isCOBOL IDE

1.	Create a new file named “Index.html” and put the Content of Index.html in it.

2.	Download JQuery scripts and css files (see Where to find JQuery files) .

3.	Create a file named “iscobol.properties” and add the following entries to it:

iscobol.mobile.license.2017=<your license code> iscobol.exception.message=2

4.	Using external software create a zip archive named "html.zip" and include the above items into it. The zip should contain:

At this point you can test the application in a servelet container. The following steps show how to test in Tomcat.

1.	Create the following folder structure under Tomcat’s webapps directory:

2.	Put the following files under simple_HTML:

o	index.html

o	jquery-1.8.2.min.js

o	jquery.mobile-1.3.0.min.css

o	jquery.mobile-1.3.0.min.js

3.	Create a file named “web.xml” under WEB-INF and put the Content of Web.xml into it.

4.	Put the following files under lib:

o	cobol.jar (previously created)

o	iscobol.jar (found in C:\Program Files\Veryant\isCOBOL2017R1\lib)

o	ishttp.jar (found in C:\Program Files\Veryant\isCOBOL2017R1\lib)

5.	Start the Tomcat service

6.	Assuming that you’re testing on localhost and Tomcat is started on the default port, navigate to “http://127.0.0.1:8080/simple_HTML”

o	Content of Web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">   <display-name>testHTML</display-name>   <welcome-file-list>     <welcome-file>index.html</welcome-file>     <welcome-file>index.htm</welcome-file>     <welcome-file>index.jsp</welcome-file>     <welcome-file>default.html</welcome-file>     <welcome-file>default.htm</welcome-file>     <welcome-file>default.jsp</welcome-file>   </welcome-file-list>   <filter>         <filter-name>isCOBOL filter</filter-name>         <filter-class>com.iscobol.web.IscobolFilter</filter-class>   </filter>    <filter-mapping>         <filter-name>isCOBOL filter</filter-name>         <url-pattern>/servlet/*</url-pattern>   </filter-mapping>   <servlet>          <servlet-name>isCobol</servlet-name>         <servlet-class>com.iscobol.web.IscobolServletCall</servlet-class>   </servlet>   <servlet-mapping>         <servlet-name>isCobol</servlet-name>         <url-pattern>/servlet/*</url-pattern>   </servlet-mapping>   <listener>    <listener-class>com.iscobol.web.IscobolSessionListener</listener-class>   </listener> </web-app>

Content of Index.html

<html>     <head>     <title>Test Mobile </title>    <link href="jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />    <script src="jquery-1.8.2.min.js"></script>    <script src="jquery.mobile-1.3.0.min.js"></script>            <script>    function handleError (jqXHR, textStatus, errorThrown) {       alert (textStatus +" "+ jqXHR.status + " "+jqXHR.statusText +                    "\n" + jqXHR.responseText);    }    function handleSuccess (data, textStatus, jqXHR) {       response = jqXHR.responseText;       try {          xmlDoc = jQuery.parseXML (response);       } catch (err) {          alert (response);          return false;       }       xml = jQuery (xmlDoc);       _status = xml.find ("_status");       _message = xml.find( "_message" );       _hello = xml.find( "hellotext" );       jQuery("#hello_div").html(_hello.text());       return true;    }      function callServer (cobolProg) {       var url = "servlet/isCobol(" + cobolProg + ")";       jQuery.ajax(url, {                     success: handleSuccess,                     error: handleError                  });       return false;    }        window.onload = callServer("HELLO");    </script>

</head> <body>   <div data-role="page">       <div data-role="header" data-theme="a">         <h1>isCOBOL MOBILE</h1>     </div><!-- /header -->       <div data-role="content" data-fullscreen="true">         <div id="hello_div" align="center"></div>      </div><!-- /content -->   </div><!-- /page -->   </body> </html>

Where to find JQuery files

JQuery script and css files used by Index.html can be downloaded from the following sites:

File	Web Site	Direct URL
jquery-1.8.2.min.js	http://jquery.com	http://code.jquery.com/jquery-1.8.2.min.js
jquery.mobile-1.3.0.min.css	http://jquerymobile.com/	http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css
jquery.mobile-1.3.0.min.js	http://jquerymobile.com/	http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js