Generating Smart Pascal from Blockly Blocks

BlocklyToSmartPascal is based on the Blockly Playground, which outputs five languages with these online consoles that you can use for testing: JavaScript, Python, PHP, Lua and Dart. Java output is available elsewhere.

Follow this link to the online BlocklyToSmartPascal application when you have read the instructions if necessary. This screenshot shows the small assembly of blocks that you can recreate with the XML representation below.

Blockly Screenshot

Blockly Screenshot

To get started, click on Text in the list of block categories, drag the panel up to view the two blocks in the Input/Output section at the bottom. Double click on the Print block to drop it onto the Blockly workspace. Press the To SmartPascal button on the left of the screen to see the Smart Pascal code in the text area below the three buttons. To test the code generated, copy it to the TApplication.PopulateConsole procedure of a Smart Pascal console project in Smart Mobile Studio (freely available for student use upon registration by a teacher) or use the free smsc command line compiler as described below.

Variable names should include:
  • str for String e.g. strName
  • int for Integer e.g. intCount
  • float for Float e.g. floatAverage
  • array for array (list) e.g. MyFloatArray
  • just a single letter such as i, j, k for a for-loop control variable. (A single letter variable will not be declared with the others at the start of the Smart Pascal program).
These suitably named variables will then be declared as the corresponding type and the Smart Pascal compiler will report errors if you attempt to use them inappropriately.

You can save your arrangement of blocks by exporting to XML then copying the XML from the text area to a text file. Valid XML that is copied into the text area will display as blocks on pressing the Import from XML button.

See Neil Fraser's guidance on the use of the blocks in these categories: IfElse, Logic, Loops, Text, Lists and Variables. (Some of the images show the old "+" icon for the mutator instead of the gear icon).

Our demonstration material includes XML representations of blocks. This is an XML representation of a few blocks that you can copy into the text area:
<xml xmlns="http://www.w3.org/1999/xhtml">
  <block type="variables_set" id="`IKhyOT3Ok?Jy[Hl{8Jl" x="-662" y="-587">
    <field name="VAR">strForename</field>
    <value name="VALUE">
      <block type="text_prompt_ext" id="VGUCM/UCBAuK#{l,yYVS">
        <mutation type="TEXT"></mutation>
        <field name="TYPE">TEXT</field>
        <value name="TEXT">
          <shadow type="text" id=")t23-oq6rgg[eTy=g$rZ">
            <field name="TEXT">Please give your forename</field>
          </shadow>
        </value>
      </block>
    </value>
    <next>
      <block type="text_print" id="2Rb]b6DSD%e;E@,Fk4py">
        <value name="TEXT">
          <shadow type="text" id="3o;crDe^jgI^ef}9`/q@">
            <field name="TEXT">abc</field>
          </shadow>
          <block type="text_join" id="YD.F;S`]W-l=bzy%M2_0">
            <mutation items="2"></mutation>
            <value name="ADD0">
              <block type="text" id="u,m7,F(TklrCqGJ7V-9M">
                <field name="TEXT">Hello, </field>
              </block>
            </value>
            <value name="ADD1">
              <block type="variables_get" id="}_3-mc#.McN.2iSk!xd(">
                <field name="VAR">strForename</field>
              </block>
            </value>
          </block>
        </value>
      </block>
    </next>
  </block>
</xml>

Follow the numbered links at the foot of the page for a description the conversion of output from JavaScript to Smart Pascal (including numbered links to the code of the new files), for the introductions to series of demonstrations and tests, for a page of suggestions about programs to attempt and for some tips.

Using the Smart Pascal Command Line Compiler

The free command line compiler smsc.exe is easy to install (and is part of the full installation of Smart Mobile Studio). After installation, create a file named BlocklyTest.sproj in Notepad++ and save it in the same folder as smsc.exe. Copy into it this empty console project code and then your generated Smart Pascal code between the lines of hashes near the bottom of the file.

<SMART>
  <Project version="2" subversion="2">
    <Name>BlocklyResult</Name>
    <Options>
      <Compiler>
        <Assertions>1</Assertions>
        <Optimize>1</Optimize>
        <HintsLevel>1</HintsLevel>
      </Compiler>
      <Codegen>
        <InlineMagics>1</InlineMagics>
        <Devirtualize>1</Devirtualize>
        <MainBody>1</MainBody>
        <SmartLinking>1</SmartLinking>
        <Verbosity>1</Verbosity>
      </Codegen>
      <ConditionalDefines>
        <HandleExceptions>1</HandleExceptions>
      </ConditionalDefines>
      <Linker>
        <ExternalCSS>0</ExternalCSS>
        <Theme>iOS.css</Theme>
        <EmbedJavaScript>1</EmbedJavaScript>
      </Linker>
      <Output>
        <HtmlFileName>BlocklyResult.html</HtmlFileName>
      </Output>
      <Import />
      <Execute>
         <Server>1</Server>
      </Execute>
    </Options>
    <Files>
      <File type="main">
        <Name>BlocklyResult</Name>
        <Source>
          <![CDATA[uses SmartCL.System, Unit1;
{$IFDEF SMART_INTERNAL_HANDLE_EXCEPTIONS}
try
{$ENDIF}
  var Application := TApplication.Create;
  Application.RunApp;
{$IFDEF SMART_INTERNAL_HANDLE_EXCEPTIONS}
except
  on e: Exception do
    ShowMessage(e.Message);
end;
{$ENDIF}
]]>
        </Source>
      </File>
      <File type="unit">
        <Name>Unit1</Name>
        <Source>
          <![CDATA[unit Unit1;
interface
uses
  System.Types, System.Lists, SmartCL.System, SmartCL.Scroll, SmartCL.Console,
  SmartCL.Components, SmartCL.Application, SmartCL.ConsoleApp;
type
  TApplication = class(TW3CustomConsoleApplication)
  protected
    procedure PopulateConsole; override;
  end;

implementation

procedure TApplication.PopulateConsole;
begin
//#################################################################

//#################################################################
end;
end.
]]>
        </Source>
      </File>
    </Files>
    <Target>Browser</Target>
    <Generator>Console Project</Generator>
  </Project>
</SMART>

Open your command prompt, change directory to the folder containing smsc.exe and BlocklyTest.sproj, and compile your Smart Pascal code with the command smsc BlocklyTest.sproj. You will find BlocklyResult.html in the project folder.

Programming - a skill for life!

How to learn the Pascal language the fun way by making games in Smart Mobile Studio