SpiderBasic (JavaScript) Language in the Context o...

Stefan-Schnell · ‎2016 Feb 10

At first I want to introduce SpiderBasic.

An introduction to SpiderBasic

SpiderBasic is a web client-side programming language based on established BASIC rules. Its main purpose is to allow development of very complex windowed based web applications. It provides a large commandset to handle complex and reactive GUI and many more in a coherent manner. Learning SpiderBasic is very easy. You can find SpiderBasic here.

SpiderBasic is a compiler which generates optimized JavaScript, which needs a modern browser to run (HTML5). As a compiler, it has strong typing and various checks that JavaScript doesn't provide, allowing robust code construction. SpiderBasic supports structured programming, it is not object oriented. It provides flexible namespace support and many other features.

SpiderBasic offers a very powerful and effective IDE with syntax highlighting, code completion and much more features. Years of experience is accumulated in this IDE.

SpiderBasic offers a wide range of libraries to use different functions easily:
2D Drawing, Drawing, Array, Cipher, Date, Debugger, Desktop, Dialog, File, Font, Gadget, Http, Image, JSON, List, Map, Math, Memory, Menu, Regular Expression, Requester, Runtime, Sort. String, System, Toolbar, Window and XML.
Also multimedia libraries: Joystick, Keyboard, Mouse, Screen, Sprite and Sound.

The syntax is easy and the possibilities are huge with the "advanced" functions that have been added to this language like structures, procedures, dynamic lists and much more. For the coder, there are no problems gaining access to external third party libraries.
You can download a free version of SpiderBasic here.

SAP and SpiderBasic

You can upload the SpiderBasic framework with the report BSP_UPDATE_MIMEREPOS in the SAP MIME repository. You find the SpiderBasic framework in the directory spiderbasic/libraries/javascript. After this step you can upload your html page as bsp application in the SE80 and also your javascript file. Here an SpiderBasic example of gadgetoverviews:

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta charset="utf-8">

    <title>SpiderBasic</title>

    <script type="text/javascript">var spider = {}; spider.nbModules = 0; spider.nbLoadedModules = 0;</script>



    <script type="text/javascript">

      var Path = "/SAP/BC/BSP/SAP/PUBLIC/spiderbasic/libraries/javascript";

      document.write("<script type='text/javascript' data-main='" + Path + "/main.js' src='" + Path + "/require.js'><\/script>");

      document.write("<script type='text/javascript' src='" + Path + "/library.js'><\/script>");

    </script>



    <script type="text/javascript">var dojoConfig = { locale: 'en',  async: 1 }; </script>

    <script type="text/javascript">

      document.write("<link rel='stylesheet' href='" + Path + "/dijit/themes/flat/flat.css' type='text/css' />");

      document.write("<link rel='stylesheet' href='" + Path + "/dgrid/css/dgrid.css' />");

      document.write("<link rel='stylesheet' href='" + Path + "/cbtree/icons/cbtreeIcons.css' type='text/css' />");

      document.write("<link rel='stylesheet' href='" + Path + "/cbtree/icons/fileIconsMS.css' type='text/css' />");

      document.write("<script type='text/javascript' src='" + Path + "/xdate.dev.js'><\/script>");

      document.write("<script type='text/javascript' src='" + Path + "/canvas-toBlob.js'><\/script>");

      document.write("<script type='text/javascript' src='" + Path + "/FileSaver.js'><\/script>");

      document.write("<link rel='stylesheet' href='" + Path + "/themes/blue/window.css' type='text/css' />");

    </script>



    <script type="text/javascript" src="gadgetoverview.js"></script>

    <link rel="icon" type="image/png" href=""/>



</head>



<body class="flat" id="spiderbody">

</body>



</html>

Here the result in the SAP environment:

Communication between SAP and SpiderBasic

Here a SpiderBasic code to communicate with an SAP system via WebService with the function module RFC_READ_TABLE. You can find a step by step guide to create this WebService here.

; Begin-----------------------------------------------------------------



  ; Directives----------------------------------------------------------

    EnableExplicit



  ; Constants-----------------------------------------------------------

    Enumeration

      #MainWin

      #tUser

      #User

      #tPassword

      #Password

      #tTableName

      #TableName

      #btnReadTable

      #XMLTree

      #XML

    EndEnumeration



  ; Variables-----------------------------------------------------------

    Global wsurl.s = "http://ABAP:8080/sap/bc/srt/rfc/sap/ztest/001/" +

      "ztest/rfc_read_table"



  ; Sub FillTree--------------------------------------------------------

    Procedure FillTree(CurrentNode.i, CurrentSublevel.i)



      ; Variables-------------------------------------------------------

        Protected NodeName.s, ChildNode.i



      If XMLNodeType(CurrentNode) = #PB_XML_Normal

        ChildNode = ChildXMLNode(CurrentNode)

        NodeName = GetXMLNodeName(CurrentNode)

        If ChildNode <> 0

          AddGadgetItem(#XMLTree, -1, NodeName, 0, CurrentSublevel)

        Else

          If Trim(GetXMLNodeText(CurrentNode)) <> ""

            AddGadgetItem(#XMLTree, -1, NodeName + " = " +

              GetXMLNodeText(CurrentNode), 0, CurrentSublevel)

          Else

            AddGadgetItem(#XMLTree, -1, NodeName, 0, CurrentSublevel)

          EndIf

        EndIf

        While ChildNode <> 0

          FillTree(ChildNode, CurrentSublevel + 1)     

          ChildNode = NextXMLNode(ChildNode)

        Wend       

      EndIf



    EndProcedure



  ; Sub btnReadTableHandler---------------------------------------------

    Procedure btnReadTableHandler()



      ; Variables-------------------------------------------------------

        Protected User.s, Password.s, id.s, basicauth.s

        Protected soaprequest.s

        Protected answer.s, MainNode.i



      User = GetGadgetText(#User)

      Password = GetGadgetText(#Password)

      id = User + ":" + Password

      !v_basicauth = "Basic " + btoa(v_id)



      soaprequest = "<?xml version='1.0' encoding='UTF-8'?>" +

        "<env:Envelope xmlns:env='http://schemas.xmlsoap.org/soap/envelope/' " +

        "xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' " +

        "xmlns:xs='http://www.w3.org/2001/XMLSchema'>" +

        "<env:Body>" +

        "<ns1:RFC_READ_TABLE xmlns:ns1='urn:sap-com:document:sap:rfc:functions'>" +

        "<DATA />" +

        "<FIELDS />" +

        "<OPTIONS />" +

        "<QUERY_TABLE>" + GetGadgetText(#TableName) + "</QUERY_TABLE>" +

        "<DELIMITER>~</DELIMITER>" +

        "</ns1:RFC_READ_TABLE>" +

        "</env:Body>" +

        "</env:Envelope>"



      !$.ajax({

      !  type: "POST",

      !  url: v_wsurl,

      !  contentType: 'text/xml',

      !  dataType: 'xml',

      !  headers: {

      !    'Authorization': v_basicauth,

      !    'Accept': '*/*'

      !  },

      !  data: v_soaprequest,

      !  success: processSuccess,

      !  error: processError

      !});



      !function processSuccess(data, textStatus, jqXHR) {

      !  if (textStatus == "success") {

      !    spider.debug.Print(textStatus);

      !    v_answer = jqXHR.responseText;

           If ParseXML(#XML, answer)

             If XMLStatus(#XML) = #PB_XML_Success

               MainNode = MainXMLNode(#XML)     

               If MainNode

                 ClearGadgetItems(#XMLTree)

                 FillTree(MainNode, 0)

               EndIf            

             EndIf

           EndIf

      !  }

      !}



      !function processError(jqXHR, textStatus, errorThrown) {

      !  spider.debug.Print(textStatus);

      !}   



    EndProcedure



  ; Main----------------------------------------------------------------

    If OpenWindow(#MainWin, 10, 10, 480, 640, "RfcReadTable")



      TextGadget(#tUser, 10, 10, 100, 24, "User:")

      StringGadget(#User, 110, 10, 150, 24, "BCUSER")

      TextGadget(#tPassword, 10, 44, 100, 24, "Password:")

      StringGadget(#Password, 110, 44, 150, 24, "minisap", #PB_String_Password)

      TextGadget(#tTableName, 10, 78, 100, 24, "Tablename:")

      StringGadget(#TableName, 110, 78, 150, 24, "USR01")

      ButtonGadget(#btnReadTable, 10, 112, 250, 24, "ReadTable")

      TreeGadget(#XMLTree, 10, 146, 460, 484)



      BindGadgetEvent(#btnReadTable, @btnReadTableHandler())



    EndIf



; End-------------------------------------------------------------------

We create a SOAP request and sent it via POST to an SAP system. The response is catched with the function processSuccess and the result is shown in the TreeGadget.

The WebService can easily create in TAC SE80.

Here the corresponding HTML code:

<html>



<head>

  <meta charset="utf-8"/>

  <title>SpiderBasic</title>

  <script type="text/javascript">var spider = {}; spider.nbModules = 0; spider.nbLoadedModules = 0;</script>



  <script type="text/javascript">

    var Path = "/SAP/BC/BSP/SAP/PUBLIC/spiderbasic/libraries/javascript";

    document.write("<script type='text/javascript' data-main='" + Path + "/main.js' src='" + Path + "/require.js'><\/script>");

    document.write("<script type='text/javascript' src='" + Path + "/library.js'><\/script>");

    document.write("<script type='text/javascript' src='" + Path + "/debug.js'><\/script>");

  </script>

  <script type="text/javascript">var dojoConfig = { async: 1 }; </script>

  <script type="text/javascript">

    document.write("<link rel='stylesheet' href='" + Path + "/dijit/themes/flat/flat.css' type='text/css' />");

    document.write("<link rel='stylesheet' href='" + Path + "/dgrid/css/dgrid.css' />");

    document.write("<link rel='stylesheet' href='" + Path + "/cbtree/icons/cbtreeIcons.css' type='text/css' />");

    document.write("<link rel='stylesheet' href='" + Path + "/cbtree/icons/fileIconsMS.css' type='text/css' />");

    document.write("<script type='text/javascript' src='" + Path + "/xdate.dev.js'><\/script>");

    document.write("<script type='text/javascript' src='" + Path + "/canvas-toBlob.js'><\/script>");

    document.write("<script type='text/javascript' src='" + Path + "/FileSaver.js'><\/script>");

    document.write("<script type='text/javascript' src='" + Path + "'/wgxpath.install.js'><\/script>");

    document.write("<link rel='stylesheet' href='" + Path + "/themes/blue/window.css' type='text/css' />");

  </script>



  <script type="text/javascript" src="spiderbasic.js"></script>



  <link rel="icon" type="image/png" href=""/>



</head>



<body class="flat" id="spiderbody">

</body>



</html>

Here the result with the content of the table USR01 in a tree structure:

Conclusion

SpiderBasic offers a lot of possibilities to create web based applications easily. It can be also easily seamless integrate in an SAP environment and it runs problem-free in the context of the SAP Web Application Server. Also it can communicate via the standards mechanisms with an SAP system. These are good conditions for an intensive consideration. Try it and let us know your results.

SpiderBasic (JavaScript) Language in the Context of SAP Web Application Server

Get Started with the ABAP Development Tools for SAP NetWeaver

Become an ABAP in Eclipse Feature Explorer and earn the Explorer Badge

Six kinds of debugging tips to find the source code where the message is raised