SpiderBasic

Posted: **Fri May 08, 2020 1:37 pm**

How can you find out in the editor gadget in which line (position) the cursor is located?

If this is not possible, can you display line numbers in the EditorGadget?

Greetz Dirk

Posted: **Fri May 08, 2020 2:48 pm**

The EditorGadget is a simple TextArea. You could provide the TextArea with line numbers, but that would require quite a lot of effort.

How about CodeMirror or the Ace Editor?

viewtopic.php?f=12&t=144

Posted: **Mon May 11, 2020 5:47 am**

Thx Peter, I'll give it a try.
But how can I place the ACE Editor within a PanelGadget?

Code: Select all

  ; Shows using of several panels...
  If OpenWindow(0, 0, 0, 322, 220, "PanelGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    PanelGadget     (0, 8, 8, 306, 203)
      AddGadgetItem (0, -1, "Panel 1")
        PanelGadget (1, 5, 5, 290, 166)
          AddGadgetItem(1, -1, "Sub-Panel 1")
          AddGadgetItem(1, -1, "Sub-Panel 2")
          AddGadgetItem(1, -1, "Sub-Panel 3")
        CloseGadgetList()
      AddGadgetItem (0, -1,"Panel 2")
        ButtonGadget(2, 10, 15, 80, 24,"Button 1")
        ButtonGadget(3, 95, 15, 80, 24,"Button 2")
        
        AddGadgetItem(0, -1, "ACE EDitor")
        EditorGadget(4, 10, 10, 280, 140) ; <- The Ace Editor should be located here
    CloseGadgetList()
  EndIf

Many thanks in advance!

Dirk

Posted: **Mon May 11, 2020 6:13 am**

Dirk Geppert wrote:But how can I place the ACE Editor within a PanelGadget?

Code: Select all

EnableExplicit

Procedure.s GetTestSource()
  
  Protected ReturnValue.s = ""
  
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  
  ProcedureReturn ReturnValue
  
EndProcedure

Procedure Main()
  
  ; Shows using of several panels...
  If OpenWindow(0, 0, 0, 322, 220, "PanelGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    
    PanelGadget     (0, 8, 8, 306, 203)
      
      AddGadgetItem (0, -1, "Panel 1")
      
      AddGadgetItem (0, -1, "Panel 2")
      
        ButtonGadget(2, 10, 15, 80, 24,"Button 1")
        ButtonGadget(3, 95, 15, 80, 24,"Button 2")
      
      AddGadgetItem(0, -1, "ACE EDitor")
      
        ContainerGadget(4, 10, 10, 280, 140) ; <- The Ace Editor should be located here
          
          Protected GID = GadgetID(4)
          
          Protected TestSource.s = GetTestSource()
          
          ! $(v_gid.div).attr("id", "ace")
          
          ! var editor = ace.edit("ace");
          ! editor.getSession().setMode("ace/mode/javascript");
          ! editor.getSession().setValue(v_testsource);
          ! editor.focus();
          
        CloseGadgetList()
      
    CloseGadgetList()
    
  EndIf
  
EndProcedure

Procedure Loading(url.s, status)
  
  If status<>#True
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug ""
    ProcedureReturn
  EndIf
  
  Main()
  
EndProcedure

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())

Greetings ... Peter

Posted: **Mon May 11, 2020 3:40 pm**

Thx a lot, Peter!

I need something like

Code: Select all

BindGadgetEvent(#ACE, @Change(), #PB_EventType_Change)

Seems I can do this with:

Code: Select all

! editor.getSession.on("change", function() { f_change()});

But it doesnt work.

What is the right way?

Code: Select all

EnableExplicit

Procedure.s GetTestSource()
 
  Protected ReturnValue.s = ""
 
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
 
  ProcedureReturn ReturnValue
 
EndProcedure

Procedure Change()
  Debug "Changed"
EndProcedure

Procedure Main()
 
  ; Shows using of several panels...
  If OpenWindow(0, 0, 0, 322, 220, "PanelGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
   
    PanelGadget     (0, 8, 8, 306, 203)
     
      AddGadgetItem (0, -1, "Panel 1")
     
      AddGadgetItem (0, -1, "Panel 2")
     
        ButtonGadget(2, 10, 15, 80, 24,"Button 1")
        ButtonGadget(3, 95, 15, 80, 24,"Button 2")
     
      AddGadgetItem(0, -1, "ACE EDitor")
     
        ContainerGadget(4, 10, 10, 280, 140) ; <- The Ace Editor should be located here
         
          Protected GID = GadgetID(4)
         
          Protected TestSource.s = GetTestSource()
         
          ! $(v_gid.div).attr("id", "ace")
         
          ! var editor = ace.edit("ace");
          ! editor.getSession().setMode("ace/mode/javascript");
          ! editor.getSession().setValue(v_testsource);
          ! editor.setTheme("ace/theme/monokai");
          ! editor.focus();
          ! editor.getSession.on("change", function() { f_change()});
;          ! editor.getSession().on("changeAnnotation", f_change())
        CloseGadgetList()
     
    CloseGadgetList()
   
  EndIf
 
EndProcedure

Procedure Loading(url.s, status)
 
  If status<>#True
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug ""
    ProcedureReturn
  EndIf
 
  Main()
 
EndProcedure

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())

Posted: **Mon May 11, 2020 3:47 pm**

Dirk Geppert wrote:
Code: Select all
! editor.getSession.on("change", function() { f_change()});

Code: Select all

! editor.getSession().on("change", function() { f_change()});

Posted: **Tue May 12, 2020 5:02 am**

Ah

I see

Thx!

SpiderBasic

EditorGadget and Cursor

EditorGadget and Cursor

Re: EditorGadget and Cursor

Re: EditorGadget and Cursor

Re: EditorGadget and Cursor

Re: EditorGadget and Cursor

Re: EditorGadget and Cursor

Re: EditorGadget and Cursor