Skip to Content

Hello community,

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.

/wp-content/uploads/2016/02/001_885304.jpg

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:

/wp-content/uploads/2016/02/spiderbasic011_885338.jpg

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:

/wp-content/uploads/2016/02/spiderbasic012_885339.jpg

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.

Enjoy it.

Cheers
Stefan

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply