Just starting out? Need help? Post your questions and find answers here.
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

EditorGadget and Cursor

by Dirk Geppert 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
User avatar
Peter
 
Posts: 727
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: EditorGadget and Cursor

by Peter 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?

https://forums.spiderbasic.com/viewtopic.php?f=12&t=144
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

Re: EditorGadget and Cursor

by Dirk Geppert 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
User avatar
Peter
 
Posts: 727
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: EditorGadget and Cursor

by Peter 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
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

Re: EditorGadget and Cursor

by Dirk Geppert 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())
User avatar
Peter
 
Posts: 727
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: EditorGadget and Cursor

by Peter 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()});
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

Re: EditorGadget and Cursor

by Dirk Geppert Tue May 12, 2020 5:02 am

Ah :o I see :D Thx!
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 12 guests