Home > JavaScript, Object Pascal, OP4JS, Smart Mobile Studio > Porting ACE to Smart Pascal

Porting ACE to Smart Pascal

People have been asking me for this since the dawn of time, and while I figured someone would make a package for this – I guess a small demonstration is in order.

What is Ace?

Ace is basically a code editor written in Javascript, more or less the same as SynEdit is for Delphi. Except it looks better and runs on the JavaScript Virtual Machine and Document Object Model.
Faster and better than SynEdit, with highlighting and syntax checking!

Faster and better than SynEdit, with highlighting and syntax checking!

Ok, here is how to get ACE into your Smart Mobile Studio codebase:
var LEditor: TW3AceEditor;
LEditor := TW3AceEditor.Create(self);
LEditor.SetBounds(32,33,400,250);
LEditor.Text := "This is so cool!";

Note that the property EditorHandle is the direct reference to the Ace editor instance. So now you can go to the ACE docs and call the functions you need via that handle.

Right, here is the whole shabam — you may want to isolate the different syntax highlighters and themes in their own units, because it takes a few seconds to load all the files. A splash screen should make that look good.

Oh, and remember to remove this from your stylesheet or the cursor will calculate wrong!

font-family: “Helvetica Neue”, Helvetica, sans-serif;

unit SmartCL.AceEditor;

interface

uses 
  system.types,
  system.types.convert,
  SmartCL.Components,
  SmartCL.System;

type

  TW3AceEditor = class(TW3CustomControl)
  private
    FEditor:  THandle;
  protected
    procedure InitializeObject;override;
    procedure FinalizeObject;override;
    procedure Resize;override;
  public
    property  EditorHandle: THandle read FEditor;
    property  Text: string read ( FEditor.getValue() ) write ( FEditor.setValue(Value) );
  end;


implementation


procedure TW3AceEditor.InitializeObject;
var
  LEditor: THandle;
  LId:  string;
begin
  inherited;

  Handle.ReadyExecute( procedure ()
    begin
      LId := TagId;
      asm
        @LEditor = ace.edit(@LId);
        (@LEditor).setTheme("ace/theme/monokai");
        (@LEditor).getSession().setMode("ace/mode/pascal");
      end;
      FEditor := LEditor;
      TW3Dispatch.DelayedDispatch( procedure ()
        begin
          FEditor.resize();
        end,100);
    end);
end;

procedure TW3AceEditor.Resize;
begin
  inherited;
  if (FEditor) then
    FEditor.resize();
end;

procedure TW3AceEditor.FinalizeObject;
begin
  if (FEditor) then
  begin
    // Blank out the editor, this kills the instance
    FEditor := TVariant.CreateObject;
    FEditor := unassigned;
  end;
  inherited;
end;


{$R "ace.js"}
{$R "ext-beautify.js"}
{$R "ext-chromevox.js"}
{$R "ext-elastic_tabstops_lite.js"}
{$R "ext-emmet.js"}
{$R "ext-error_marker.js"}
{$R "ext-keybinding_menu.js"}
{$R "ext-language_tools.js"}
{$R "ext-linking.js"}
{$R "ext-modelist.js"}
{$R "ext-old_ie.js"}
{$R "ext-searchbox.js"}
{$R "ext-settings_menu.js"}
{$R "ext-spellcheck.js"}
{$R "ext-split.js"}
{$R "ext-static_highlight.js"}
{$R "ext-statusbar.js"}
{$R "ext-textarea.js"}
{$R "ext-themelist.js"}
{$R "ext-whitespace.js"}
{$R "keybinding-emacs.js"}
{$R "keybinding-vim.js"}
{$R "mode-abap.js"}
{$R "mode-abc.js"}
{$R "mode-actionscript.js"}
{$R "mode-ada.js"}
{$R "mode-apache_conf.js"}
{$R "mode-applescript.js"}
{$R "mode-asciidoc.js"}
{$R "mode-assembly_x86.js"}
{$R "mode-autohotkey.js"}
{$R "mode-batchfile.js"}
{$R "mode-c_cpp.js"}
{$R "mode-c9search.js"}
{$R "mode-cirru.js"}
{$R "mode-clojure.js"}
{$R "mode-cobol.js"}
{$R "mode-coffee.js"}
{$R "mode-coldfusion.js"}
{$R "mode-csharp.js"}
{$R "mode-css.js"}
{$R "mode-curly.js"}
{$R "mode-d.js"}
{$R "mode-dart.js"}
{$R "mode-diff.js"}
{$R "mode-django.js"}
{$R "mode-dockerfile.js"}
{$R "mode-dot.js"}
{$R "mode-eiffel.js"}
{$R "mode-ejs.js"}
{$R "mode-elixir.js"}
{$R "mode-elm.js"}
{$R "mode-erlang.js"}
{$R "mode-forth.js"}
{$R "mode-ftl.js"}
{$R "mode-gcode.js"}
{$R "mode-gherkin.js"}
{$R "mode-gitignore.js"}
{$R "mode-glsl.js"}
{$R "mode-gobstones.js"}
{$R "mode-golang.js"}
{$R "mode-groovy.js"}
{$R "mode-haml.js"}
{$R "mode-handlebars.js"}
{$R "mode-haskell.js"}
{$R "mode-haxe.js"}
{$R "mode-html.js"}
{$R "mode-html_elixir.js"}
{$R "mode-html_ruby.js"}
{$R "mode-ini.js"}
{$R "mode-io.js"}
{$R "mode-jack.js"}
{$R "mode-jade.js"}
{$R "mode-java.js"}
{$R "mode-javascript.js"}
{$R "mode-json.js"}
{$R "mode-jsoniq.js"}
{$R "mode-jsp.js"}
{$R "mode-jsx.js"}
{$R "mode-julia.js"}
{$R "mode-latex.js"}
{$R "mode-lean.js"}
{$R "mode-less.js"}
{$R "mode-liquid.js"}
{$R "mode-lisp.js"}
{$R "mode-live_script.js"}
{$R "mode-livescript.js"}
{$R "mode-logiql.js"}
{$R "mode-lsl.js"}
{$R "mode-lua.js"}
{$R "mode-luapage.js"}
{$R "mode-lucene.js"}
{$R "mode-makefile.js"}
{$R "mode-markdown.js"}
{$R "mode-mask.js"}
{$R "mode-matlab.js"}
{$R "mode-maze.js"}
{$R "mode-mel.js"}
{$R "mode-mips_assembler.js"}
{$R "mode-mipsassembler.js"}
{$R "mode-mushcode.js"}
{$R "mode-mysql.js"}
{$R "mode-nix.js"}
{$R "mode-nsis.js"}
{$R "mode-objectivec.js"}
{$R "mode-ocaml.js"}
{$R "mode-pascal.js"}
{$R "mode-perl.js"}
{$R "mode-pgsql.js"}
{$R "mode-php.js"}
{$R "mode-plain_text.js"}
{$R "mode-powershell.js"}
{$R "mode-praat.js"}
{$R "mode-prolog.js"}
{$R "mode-properties.js"}
{$R "mode-protobuf.js"}
{$R "mode-python.js"}
{$R "mode-r.js"}
{$R "mode-razor.js"}
{$R "mode-rdoc.js"}
{$R "mode-rhtml.js"}
{$R "mode-rst.js"}
{$R "mode-ruby.js"}
{$R "mode-rust.js"}
{$R "mode-sass.js"}
{$R "mode-scad.js"}
{$R "mode-scala.js"}
{$R "mode-scheme.js"}
{$R "mode-scss.js"}
{$R "mode-sh.js"}
{$R "mode-sjs.js"}
{$R "mode-smarty.js"}
{$R "mode-snippets.js"}
{$R "mode-soy_template.js"}
{$R "mode-space.js"}
{$R "mode-sql.js"}
{$R "mode-sqlserver.js"}
{$R "mode-stylus.js"}
{$R "mode-svg.js"}
{$R "mode-swift.js"}
{$R "mode-swig.js"}
{$R "mode-tcl.js"}
{$R "mode-tex.js"}
{$R "mode-text.js"}
{$R "mode-textile.js"}
{$R "mode-toml.js"}
{$R "mode-twig.js"}
{$R "mode-typescript.js"}
{$R "mode-vala.js"}
{$R "mode-vbscript.js"}
{$R "mode-velocity.js"}
{$R "mode-verilog.js"}
{$R "mode-vhdl.js"}
{$R "mode-wollok.js"}
{$R "mode-xml.js"}
{$R "mode-xquery.js"}
{$R "mode-yaml.js"}
{$R "theme-ambiance.js"}
{$R "theme-chaos.js"}
{$R "theme-chrome.js"}
{$R "theme-clouds.js"}
{$R "theme-clouds_midnight.js"}
{$R "theme-cobalt.js"}
{$R "theme-crimson_editor.js"}
{$R "theme-dawn.js"}
{$R "theme-dreamweaver.js"}
{$R "theme-eclipse.js"}
{$R "theme-github.js"}
{$R "theme-idle_fingers.js"}
{$R "theme-iplastic.js"}
{$R "theme-katzenmilch.js"}
{$R "theme-kr_theme.js"}
{$R "theme-kuroir.js"}
{$R "theme-merbivore.js"}
{$R "theme-merbivore_soft.js"}
{$R "theme-mono_industrial.js"}
{$R "theme-monokai.js"}
{$R "theme-pastel_on_dark.js"}
{$R "theme-solarized_dark.js"}
{$R "theme-solarized_light.js"}
{$R "theme-sqlserver.js"}
{$R "theme-terminal.js"}
{$R "theme-textmate.js"}
{$R "theme-tomorrow.js"}
{$R "theme-tomorrow_night.js"}
{$R "theme-tomorrow_night_blue.js"}
{$R "theme-tomorrow_night_bright.js"}
{$R "theme-tomorrow_night_eighties.js"}
{$R "theme-twilight.js"}
{$R "theme-vibrant_ink.js"}
{$R "theme-xcode.js"}
{$R "worker-coffee.js"}
{$R "worker-css.js"}
{$R "worker-html.js"}
{$R "worker-javascript.js"}
{$R "worker-json.js"}
{$R "worker-lua.js"}
{$R "worker-php.js"}
{$R "worker-xml.js"}
{$R "worker-xquery.js"}

end.

Advertisements
  1. May 17, 2016 at 9:36 pm

    Jon, look at this http://forums.smartmobilestudio.com/index.php?/topic/4088-sms-component-generator/

    This is an experimental tool generates smart mobile visual prototypes components on-the-fly.

    • Jon Lennart Aasenden
      May 18, 2016 at 2:26 pm

      Sweet! Email me, we need to talk: lennart dot aasendeen at gmail dot com!

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: