index.html

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link rel="icon" href="https://haxe.org/favicon.ico" type="image/x-icon"/>
  <link rel="shortcut icon" type="image/x-icon" href="https://haxe.org/favicon.ico" />

  <title>Try Haxe !</title>
  <meta name="description" content="Haxe is an amazing multiplatform programming language. Check it out !">
  <meta name="author" content="Haxe Community">
  <meta property="og:image" content="https://try.haxe.org/share.png" />

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  <link rel="stylesheet" type="text/css" href="https://haxe.org/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap-responsive.min.css" />

  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">


  <link rel="stylesheet" href="lib/codemirror-5.28.0/lib/codemirror.css"/>
  <link rel="stylesheet" href="lib/codemirror-5.28.0/addon/hint/show-hint.css"/>
  <link rel="stylesheet" href="lib/codemirror-5.28.0/theme/rubyblue.css"/>
  <link rel="stylesheet" href="lib/codemirror-5.28.0/theme/cobalt.css"/>
  <link rel="stylesheet" href="style.css"/>

  <link rel="stylesheet" href="lib/codemirror-5.28.0/addon/fold/foldgutter.css">
  <link rel="stylesheet" href="lib/codemirror-5.28.0/addon/dialog/dialog.css">
  <link href="lib/codemirror-5.28.0/addon/lint/lint.css" type="text/css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="haxe-nav.css"/>
</head>

<body data-api=".">
  <nav class="section nav dark">
  	<div class="navbar navbar-fixed-top navbar-inverse">
  		<div class="navbar-inner">
  			<button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="brand haxe-logo" href="https://haxe.org/"><img alt="Haxe" height="21" onerror="this.src='https://haxe.org/img/haxe-logo-horizontal-on-dark.png'" src="https://haxe.org/img/haxe-logo-horizontal-on-dark.svg" width="107" /></a>
  			
  			<a class="brand sub try" href="./" onclick="return confirm('Are you sure?')">TRY</a>

  			<div class="nav-collapse collapse">
  				<ul class="nav">
  					<li><a href="./" onclick="return confirm('Are you sure?')"><i class="fa fa-file"></i> New</a></li>
  					<li class="dropdown">
  						<a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples <b class="caret"></b></a>
  						<ul class="dropdown-menu">
  							<li><a class="hx-example" data-value="1" href="#example1">Hello world</a></li>
  							<li><a class="hx-example" data-value="2" href="#example2">Inheritance</a></li>
  							<li><a class="hx-example" data-value="17" href="#example17">Generic types</a></li>
  							<li><a class="hx-example" data-value="3" href="#example3">Enums</a></li>
  							<li><a class="hx-example" data-value="4" href="#example4">Maps</a></li>
  							<li><a class="hx-example" data-value="5" href="#example5">Abstracts</a></li>
  							<li><a class="hx-example" data-value="6" href="#example6">Static Extension</a></li>
  							<li><a class="hx-example" data-value="7" href="#example7">String interpolation</a></li>
  							<li><a class="hx-example" data-value="8" href="#example8">Array Comprehension</a></li>
  							<li><a class="hx-example" data-value="9" href="#example9">Pattern Matching - Array matching</a></li>
  							<li><a class="hx-example" data-value="21" href="#example21">Pattern Matching - Structure matching</a></li>
  							<li><a class="hx-example" data-value="18" href="#example18">Pattern Matching - Enum matching</a></li>
  							<li><a class="hx-example" data-value="10" href="#example10">Iterators</a></li>
  							<li><a class="hx-example" data-value="11" href="#example11">Function Bindings</a></li>
  							<li><a class="hx-example" data-value="12" href="#example12">Metadata</a></li>
  							<li><a class="hx-example" data-value="19" href="#example19">Load Json using Http</a></li>
  							<li><a class="hx-example" data-value="13" href="#example13">Access Control</a></li>
  							<li><a class="hx-example" data-value="14" href="#example14">Inline constructors</a></li>
  							<li><a class="hx-example" data-value="15" href="#example15">Conditional compilation</a></li>
  							<li><a class="hx-example" data-value="16" href="#example16">StringTools</a></li>
  							<li><a class="hx-example" data-value="22" href="#example22">Unit testing</a></li>
  							<li><a class="hx-example" data-value="20" href="#example20">Drawing</a></li>
  						</ul>
  					</li>
  					<li><a href="#hx-about" onclick="document.getElementById('about-tab').click();return false">About</a></li>
  					
  					<li class="divider"></li>
  					<!-- required submenu  on every subsite, put class="active" on   -->
  					<li class="dropdown">
  						<a class="dropdown-toggle" data-toggle="dropdown" href="#">Learn Haxe <b class="caret"></b></a>

  						<ul class="dropdown-menu">
  							<li><a href="https://haxe.org/documentation/">Introduction</a></li>
  							<li class="divider"></li>
  							<li><a href="https://haxe.org/manual/">Manual</a></li>
  							<li><a href="https://api.haxe.org">API Documentation</a></li>
  							<li class="divider"></li>
  							<li class="active"><a href="https://try.haxe.org">Try Haxe</a></li>
  							<li><a href="https://lib.haxe.org">Haxelib</a></li>
  							<li><a href="http://code.haxe.org">Code Cookbook</a></li>
  						</ul>
  					</li>
  					<li class=" dropdown">
  						<a class="dropdown-toggle" data-toggle="dropdown" href="#">Connect <b class="caret"></b></a>
  						<ul class="dropdown-menu">
  							<li><a href="https://github.com/clemos/try-haxe/"><i class="fa fa-github"></i> Github</a></li>
  							<li><a href="https://github.com/clemos/try-haxe/issues"><i class="fa fa-github"></i> Bug reports</a></li>
  							<li><a href="https://stackoverflow.com/questions/tagged/haxe"><i class="fa fa-stack-exchange"></i> Stack Overflow</a></li>
  							<li><a href="https://groups.google.com/group/haxelang?hl=en"><i class="fa fa-envelope-o"></i> Google Groups</a></li>
  							<li><a href="https://webchat.freenode.net/?channels=haxe"><i class="fa fa-comments-o"></i> IRC</a></li>
  							<li><a href="https://haxe.org/blog"><i class="fa fa-rss"></i> Blog</a></li>
  							<li class="divider"></li>
  							<li><a href="https://plus.google.com/communities/103302587329918132234"><i class="fa fa-google-plus"></i> Google+</a></li>
  							<li><a href="https://www.facebook.com/haxe.org/"><i class="fa fa-facebook"></i> Facebook</a></li>
  							<li><a href="https://twitter.com/search?q=%23haxe"><i class="fa fa-twitter"></i> #haxe</a></li>
  							<li><a href="https://twitter.com/haxelang"><i class="fa fa-twitter"></i> @haxelang</a></li>
  							<li><a href="https://twitter.com/haxe_org"><i class="fa fa-twitter"></i> @haxe_org</a></li>
  							<li class="divider"></li>
  							<li><a href="https://haxe.org/foundation/contact.html">Contact</a></li>
  						</ul>
  					</li>
  				</ul>

  			</div>
  		</div>
  	</div>
  </nav>
  <div role="main" class="container-fluid main">
    <div class="row-fluid">
      <div class="span6">
        <div class="compiler-in">
          <a href="#" class="compile-btn btn side-btn" data-loading-text="Compiling"><i class="fa fa-cog"></i> Build + Run</a>
          <ul class="nav nav-tabs">
            <li class="active"><a href="#hx-source" data-toggle="tab">Source</a></li>
            <li><a href="#hx-source2" data-toggle="tab">Source 2</a></li>
            <li><a href="#hx-options" data-toggle="tab">Options</a></li>
            <li style="display:none"><a href="#hx-about" data-toggle="tab" id="about-tab">About</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane hx-source active" id="hx-source">
              <form id="hx-options-form" class="form-horizontal">
                  <div class="control-group">
                    <label class="control-label" for="module-a">Module name:</label>
                    <div class="controls">
                      <input type="text" class="input-main" name="module-a" value="Test"></input>
                    </div>
                  </div>
              </form>
              <textarea name="hx-source" class="code haxe-source" rows="15">
class Test {
  static function main() {
    trace("Haxe is great!");
  }
}</textarea>
            </div>
            <div class="tab-pane hx-source" id="hx-source2">
              <form id="hx-options-form" class="form-horizontal">
                  <div class="control-group">
                    <label class="control-label" for="module-b">Module name:</label>
                    <div class="controls">
                      <input type="text" class="input-main" name="module-b" value="Macro"></input>
                    </div>
                  </div>
              </form>
              <textarea name="hx-source2" class="code haxe-source" rows="15">
//use this for macros or other classes
class Macro {

}</textarea>
            </div>
            <div class="tab-pane hx-options" id="hx-options">
              <form id="hx-options-form" class="form-horizontal">
                  <div class="control-group hx-main-name">
                    <label class="control-label" for="main-class">Main class</label>
                    <div class="controls">
                      <input type="text" class="input-main" name="main" value="Test"></input>
                    </div>
                  </div>
                  <div class="control-group hx-haxe-ver">
                    <label class="control-label" for="haxe-ver-dropdown">Haxe version</label>
                    <div class="controls">
                      <select>
                        <option value="3.3.0-rc.1">3.3.0-rc.1</option>
                        <option value="3.2.1">3.2.1</option>
                      </select>
                    </div>
                  </div>
                  <div class="control-group hx-targets">
                    <label class="control-label" for="libs-checkbox">Target</label>

                    <div class="controls">
                      <label class="radio inline"><input type="radio" name="target" value="JS" checked></input> Javascript</label>
                      <label class="radio inline"><input type="radio" name="target" value="SWF"></input> SWF</label>
                      <label class="radio inline"><input type="radio" name="target" value="NEKO"></input> Neko</label>
                    </div>

                  </div>
                  <div class="control-group hx-dce-name">
                    <label class="control-label" for="main-class">DCE <a href="https://haxe.org/manual/cr-dce.html" target="_blank"><i class="fa fa-question-circle"></i></a></label>
                    <div class="controls">

                      <label class="radio inline"><input type="radio" name="dce" value="full" checked></input> Full</label>
                      <label class="radio inline"><input type="radio" name="dce" value="no"></input> No</label>
                      <label class="radio inline"><input type="radio" name="dce" value="std"></input> Std</label>

                    </div>
                  </div>
                  <div class="control-group hx-analyzer-name">
                    <label class="control-label" for="main-class">Analyzer optimize <a href="https://haxe.org/manual/cr-static-analyzer.html" target="_blank"><i class="fa fa-question-circle"></i></a></a></label>
                    <div class="controls">

                      <label class="radio inline"><input type="radio" name="analyzer" value="yes" checked></input> Yes</label>
                      <label class="radio inline"><input type="radio" name="analyzer" value="no"></input> No</label>

                    </div>
                  </div>
                  <div class="control-group hx-libs">
                    <label class="control-label" for="libs-checkbox">Libraries</label>

                    <div class="controls SWF-libs"></div>
                    <div class="controls JS-libs"></div>
                    <div class="controls NEKO-libs"></div>

                  </div>
              </form>
            </div>
			      <div class="tab-pane" id="hx-about">
              <h2>Try Haxe <small>- The Haxe Playground</small></h2>
              <a href="https://haxe.org" target="_blank" title="Haxe"><img src="haxe-logo.svg" class="logo" onerror="this.src='haxe-logo.png'" width="90" height="90" /></a>
              
              <strong><a href="https://haxe.org" target="_blank" title="Haxe">Haxe</a></strong> is an awesome language that compiles to <strong>Javascript</strong>, <strong>Flash</strong>, <strong>C++</strong>, <strong>PHP</strong>, <strong>Neko</strong>, <strong>Java</strong>, <strong>C#</strong> and <strong>Python</strong>.
              It thus allows to write applications that target native <strong>iOS</strong>, <strong>Android</strong> as well as traditional browsers (<strong>HTML5</strong> or <strong>SWF</strong>), servers and desktops (Mac, PC or Linux).
              <br clear="both" />
              <hr />
              <span><img class="logo-github" src="https://assets-cdn.github.com/favicon.ico" align="left"/> The source code of try-haxe is <a href="https://github.com/clemos/try-haxe" title="Try-Haxe">available on GitHub</a>.</span>

              <hr/>
            </div>
          </div>
		    </div>
      </div>

      <div class="compiler-out span6">
        <a href="#" target="_blank" class="link-btn btn disabled side-btn"><i class="fa fa-share"></i> Run standalone</a>
        <ul class="nav nav-tabs">
              <li class="active"><a href="#js-output" data-toggle="tab" id="output">Output</a></li>
              <li><a href="#tab-errors" data-toggle="tab">Errors</a></li>
              <li><a href="#js-source" data-toggle="tab">JS Source</a></li>
              <li><a href="#embed-source" data-toggle="tab">Embed</a></li>
              <li><a href="#compiler-output" data-toggle="tab">Compiler output</a></li>
              <li><a href="#compiler-times" data-toggle="tab">Compiler times</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane js-output active" id="js-output">

            <div class="thumbnail js-canvas">
				<iframe class="js-run" src="about:blank" name="js-run" frameborder="no" scrolling="no">
				</iframe>
            </div>

          </div>
          <div class="tab-pane js-source" id="js-source">
            <textarea name="js-source" class="code js-source">
            </textarea>
          </div>
          <div class="tab-pane embed-source" id="embed-source">
            <h4>Code</h4>
            <textarea name="embed-source" class="code embed-source">
            </textarea>
            <h4>Preview</h4>
            <div class="embed-preview" id="embed-preview">
            </div>
          </div>
          <div class="tab-pane tab-errors" id="tab-errors">

          </div>
          <div class="tab-pane compiler-output" id="compiler-output">

          </div>
          <div class="tab-pane compiler-times" id="compiler-times">

          </div>
        </div>

        <div class="messages">

        </div>
      </div>


	</div>
  <div class="foot">
    <div class="row-fluid">
      <div class="social span6">
        <div class="row-fluid">
          <div class="span3 span-plusone">
            <g:plusone size="medium" href="https://try.haxe.org"></g:plusone>
          </div>

          <div class="span3 span-twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
          </div>

          <div class="span3 span-fb">
            <div class="fb-like" data-send="true" data-layout="button_count" data-width="100" data-show-faces="true"></div>
          </div>
        </div>
      </div>
      <!---
      <div class="span6 text-muted">
        <span class="pull-right">Haxe version: 3.4.2</span>
      </div>
      -->
    </div>
    <div class="row-fluid">
      <div class="span12 text-center text-muted">
        Disclaimer: The code you enter on Try-Haxe is compiled and saved on our servers.
      </div>
    </div>
  </div>
</div>

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

	<script src="https://haxe.org/js/bootstrap.min.js"></script>

  <!-- scripts concatenated and minified via build script -->
  <script src="lib/codemirror-5.28.0/lib/codemirror.js"></script>
  <script src="lib/codemirror-5.28.0/addon/hint/show-hint.js"></script>
  <script src="lib/codemirror-5.28.0/mode/haxe/haxe.js"></script>
  <script src="lib/codemirror-5.28.0/mode/javascript/javascript.js"></script>
  <script src="lib/codemirror-5.28.0/mode/xml/xml.js"></script>
  <script src="lib/codemirror-5.28.0/mode/css/css.js"></script>
  <script src="lib/codemirror-5.28.0/mode/htmlmixed/htmlmixed.js"></script>
	<!--script src="https://haxe.org/js/bootstrap.min.js"></script-->
  <script src="lib/bootstrap/js/bootstrap.min.js" ></script>
  <!--<script src="lib/codemirror-5.28.0/addon/search/searchcursor.js"></script>
  <script src="lib/codemirror-5.28.0/addon/search/search.js"></script>
  <script src="lib/codemirror-5.28.0/addon/dialog/dialog.js"></script>-->
  <script src="lib/codemirror-5.28.0/addon/comment/comment.js"></script>
  <script src="lib/codemirror-5.28.0/addon/lint/lint.js"></script>
  <script src="lib/codemirror-5.28.0/addon/wrap/hardwrap.js"></script>
  <script src="lib/codemirror-5.28.0/keymap/sublime.js"></script>

  <script src="lib/codemirror-5.28.0/addon/hint/show-hint.js"></script>
  <script src="lib/codemirror-5.28.0/addon/edit/matchbrackets.js"></script>
  <script src="lib/codemirror-5.28.0/addon/edit/closebrackets.js"></script>
  <script src="lib/codemirror-5.28.0/addon/fold/foldcode.js"></script>
  <script src="lib/codemirror-5.28.0/addon/fold/foldgutter.js"></script>
  <script src="lib/codemirror-5.28.0/addon/fold/brace-fold.js"></script>
  <script src="lib/codemirror-5.28.0/addon/fold/comment-fold.js"></script>
  <script src="lib/js/addons/show-context-info.js"></script>
  <script src="app.js?v=2"></script>
  <!-- end scripts -->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-32389876-1']);
  _gaq.push(['_setDomainName', 'haxe.org']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '282509548865510',
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>