Formatted method code

Is there a way of getting method code in a nicely-formatted layout, as seen in the Method Editor? Such that if one were writing an explorer, it could be displayed after clicking on a method.

Jeremy

The indentation is easy :sunglasses:

Hi

Yes. QST does it.
You can have also a look on the github of Lutz Veith. He made a wonderful work with Code Mirror.

This version will be available sooner (as beta).

Patrick

Patrick, thanks but I didn’t phrase my question very well. I didn’t mean “is it possible?”, since clearly it is; I meant rather, “can it be done using native 4D commands”, to which it appears the answer is no.

Arnaud, ha!

Jeremy

just copy&paste from method-editor to a multi-style-text-area-form-object, ha :wink:
minimum on mac this works. you got 1:1 styled text into form-object.

But i am not realy understand what is your wish to have. CodeMirrorSolutionBeta i offered to use it in a 4D-form-object-webarea. Some other alternatives exist too with webarea. When you say, nicely-formatted as seen in methodEditor, what you mean what a native 4D command do. A complete Keys-Detection must be done to identify Keywords in code and than when this is done it needs styling this by detection-infos. Styling you can have in 4D with webarea or svg or with 4Ds-multistyle-text. Yes this can be done purly in 4D to write your own methods for key-detection and than defining styles. CodeMirror has a API (just if you not know) and with this you can use the 4D wa commands to executeJS or executeJSfunction to remote the codemirror area inside the 4Dwebarea.

Hi Jeremy,
QST used only 4D commands, no plugins.
The screenshot added uses only 4D commands and a web area using external JS code (code mirror) to set the color. Listboxes is managed by a collection. Like Lutz, may I do not understand exactly what you mean by ‘native 4D comamnds’ in this case.

Lutz, Patrick,

I now understand: web area, JS code and code mirror are what I was looking for. Thank you both.

Jeremy

1 Like

@Lutz_Veith
May I have a link to your work? I’m sorry I didn’t find.

@kikashi I plan to do this from 4D code + editor settings + styled text. It’s not ended at all, but some pieces of code if you’re interested:

  //Dev_4DprefsFilePath
  //$0 chemin du fichier des préférences 4D courant
  //contient entre autres les couleurs de l'éditeur de méthode
C_TEXT($0;$path_t)
C_TEXT($version_t)

$path_t:=Convert path system to POSIX(System folder(User preferences_user))
$path_t:=$path_t+"/4D/4D Preferences __VERSION__.4DPreferences"
$version_t:="v"+Substring(Application version;1;2)
$path_t:=Replace string($path_t;"__VERSION__";$version_t;*)
$path_t:=Convert path POSIX to system($path_t)
If (Test path name($path_t)=Is a document)
	$0:=$path_t
End if 
  //_

  //Doa_methodEditorSettingsGet -> coll
C_COLLECTION($0;$settings_c)

$path_t:=Dev_4DprefsFilePath 
If (Test path name($path_t)#Is a document)
	$error_t:="File not found "+$path_t
Else 
	$xml_t:=DOM Parse XML source($path_t)
	If (ok=1)
		$prefs_o:=Xml_ToObject ($xml_t)
		DOM CLOSE XML($xml_t)
		If (False)  //debug
			$temp_o:=New object
			$temp_o.action:="processNew"
			$temp_o.data:=$prefs_o
			jsonViewer_mng ($temp_o)
		End if 
		  //ASSERT($prefs_o.preferences#Null)
		ASSERT($prefs_o.preferences.com__4d#Null)
		$r:=String(Num($prefs_o.preferences.com__4d.method_editor.back_color.color.red);"&x")
        $g:=String(Num($prefs_o.preferences.com__4d.method_editor.back_color.color.green);"&x")
        $b:=String(Num($prefs_o.preferences.com__4d.method_editor.back_color.color.blue);"&x")
		$RGB_t:="#"+$r[[5]]+$r[[6]]+$g[[5]]+$g[[6]]+$b[[5]]+$b[[6]]
		  //$RGB_l:=($r << 16)+($g << 8)+$b
		$settings_c:=New collection
		For each ($syntax_o;$prefs_o.preferences.com__4d.method_editor.syntax_style.syntax)
			  //précalcul couleur html en chaine hexa "#rrggvv"
			$r:=String(Num($syntax_o.color.red);"&x")
			$g:=String(Num($syntax_o.color.green);"&x")
			$b:=String(Num($syntax_o.color.blue);"&x")
			$syntax_o.rgb:="#"+$r[[5]]+$r[[6]]+$g[[5]]+$g[[6]]+$b[[5]]+$b[[6]]
			$settings_c.push($syntax_o)
			  //.kind
		End for each 
	End if 
End if 
$0:=$settings_c
  //_
  //Doa_controlFlowsGet -> coll
  //$0 instruction de branchement du langage
  //#TODO à gérer 
  //  le ':' à l'intérieur de 'Au cas ou/Fin de cas'
  //  le For each(Element_courant;Expression{;début{;fin}}){Until|While}(Expression_booléenne)}
C_COLLECTION($0;$keyword_c)
$keyword_c:=New collection

If (Command name(1)="Sum")  //en
	$keyword_c.push(New object("start";"If";"end";"End if";"else";"Else"))
	$keyword_c.push(New object("start";"Case of";"end";"End case";"else";"Else";"branch";":"))
	$keyword_c.push(New object("start";"For";"end";"End for"))
	$keyword_c.push(New object("start";"While";"end";"End while"))
	$keyword_c.push(New object("start";"Repeat";"end";"Until"))
	$keyword_c.push(New object("start";"Begin SQL";"end";"End SQL"))
	$keyword_c.push(New object("start";"For each";"end";"End for each"))
Else   //fr
	$keyword_c.push(New object("start";"Si";"end";"Fin de si";"else";"Sinon"))
	$keyword_c.push(New object("start";"Au cas ou";"end";"Fin de cas";"else";"Sinon";"branch";":"))
	$keyword_c.push(New object("start";"Boucle";"end";"Fin de boucle"))
	$keyword_c.push(New object("start";"Tant que";"end";"Fin tant que"))
	$keyword_c.push(New object("start";"Repeter";"end";"Jusque"))
	$keyword_c.push(New object("start";"Debut SQL";"end";"Fin SQL"))
	$keyword_c.push(New object("start";"Pour chaque";"end";"Fin de chaque"))
End if 
$0:=$keyword_c
  //_

  //Doa_4DcommandsGet -> coll
  //$0 collection des commandes 4D de la version courante, 
  //  [ {name:libelleConstante;token:libelléToken} ]

C_COLLECTION($0;$command_c)

$command_c:=New collection
$i_l:=1
Repeat 
	$nom_t:=Command name($i_l)
	If ($nom_t#"")
		$token_t:="C:"+String($i_l)
		$command_c.push(New object("name";$nom_t;"token";$token_t))
	End if 
	$i_l:=$i_l+1
Until (ok=0)
  //$test:=$command_c.query("cmde=ds")
$0:=$command_c
  //_

I answer: here
I just could say: open your mind :wink:

With webarea their exists a lot of different solutions (must not be my 4D in codeMirror)
When destination is only preview-display, than a much more too exists.

At the moment i remember only one (but their exists more).
All works have different destinations,
for example one is feature rich but not easy in end-deployed,
one is easy in but missed a lot of important things…and so on…

In summit you see a video and down their is a example db to download
https://events.4d.com/summit2020/session/a-new-era-of-debugging/
https://download.4d.com/Documents/Website/4DSummit2020/DigitalExperience_Contents/English/A_New_Era_Of_Debugging-Demo.zip

I do not inspect this feature, but their destinations was maybe only some pretty display
(not fully featured and multi-flexible) for any 4D code without any formatting details.

My github repos are all free to use for everybody.
But there is no example for exact only that job to have a easy integrated preview.
This is not my destination, and my work is only a begin/experiment and not a ready use product whith all UI and all documented.
At the moment when i need a html-doc for only preview and flex easy to integrate it anywhere, i write it with one day work+test and than i offered it some too on my github for anybody who needs it.

Basic codeMirror added with my 4D.mode and 4D.demos

UseCase example with codemirror as compare-merge-tool

These are ready done working experiments/demos
without documentation and how to use UI is only in my head, UI destination was only to make a demo in onetime presentation and not for intuitiv understanding (sorry)

The job is not so simple, which commands which 4D version which DB-struct which methods with components which plugins which all other ressources. For that job Patrick build some interface to give definitions of different 4D versions and DBstructs as codeMirror dynamic 4D mode. This is than flexible to use with any intern 4D/DB or any extern 4D/DB-Definition-Archiv. All this things belongs too what you need, only some pretty colors or a correct working syntax-parser in all cases and must it belong only to current used 4D version and DB or did you load any extern Archives which based on a different 4D version than that what you are currently running.

Arnaud,

That’s helpful. I was hoping there might be a hook into the method editor that would persuade it to return the method code as styled text.

Jeremy

no problem, this and thounsands of other things possible with simple 4D-WA calls. StyledText back, no problem it is one line of code get back html-block of styled text plus one line get back all not inlined extern style rules to that.

Sorry, i not see your answer goes to Arnaud. For today i stop working to get fresh.

Maybe, someone often tells me I do useless code, but it amuses me :rofl:
When I see how code is displayed in the previous forum and on this one, I’m not the only one I guess :sneezing_face:

PS thanks for the link!

Forum editor is maybe build on this github repo.
As i can remember,
in the md-files (4D project) where method comments placed,
their you can use too same syntax (maybe or did i see this on github readme.md?)
The syntax for code-section 4D is known press button </> in forum-comment-editor
Bildschirmfoto 2020-06-18 um 15.05.38
https://github.com/highlightjs/highlight.jshighlight.js

Thanks for the link :slight_smile:
In this thread, the code seems perfectly displayed, but I seem to remember some “formatting errors” in others.

in addition to my last post about highlight.js
used too on github-readme.md and in 4DprojectMode-methodComment.md and here in forum and …
https://blog.4d.com/project-databases-build-your-own-documentation-for-components/

Markdown Cheatsheet

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

See info codemirror 4D readme

Just some demo examples to 4D mode and theme