<!DOCTYPE html>


<html>

<head>
    <meta charset="utf-8">
    <title>Jaggery - Delicious Javascript</title>
    <meta name="description" content="">
    <meta name="author" content="">


    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body {
            padding-top: 60px;

        }


        .about li {
            font-family: Georgia, serif;
            font-size: 16px;
            font-style: italic;
            font-weight: normal;
            text-transform: normal;
            letter-spacing: normal;
            line-height: 1.4em;
            list-style: none;
            margin-bottom: 20px;
            color: #666;
        }

        .about {
            margin-top: 20px;
            margin-left: 0px;
            padding: 10px;
            background: #efefef;
            border: 1px solid #ccc;
        }

        .center-align {
            text-align: center;
        }




    </style>
    <link href="/css/prettify.css" rel="stylesheet">
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="/images/favicon.ico">
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72"
          href="/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114"
          href="/images/apple-touch-icon-114x114.png">
</head>

<body>


<%

include('/includes/topnavi.jag');


%>

<div class="container-fluid" style="width: 960px; margin: auto;">
    <div class="row">
        <div class="span16">
            <div class="page-header">
                <h1>
                    <span class="parent">Tools</span> / IDE support(IntelliJ IDEA- Ultimate)
                </h1>
            </div>
        </div>
    </div>

    <div class="container">


        <!-- Example row of columns -->
        <div class="row">
            <div class="span16">

                <h3>Introduction</h3>

                <p>Jaggery Syntax highlighting plugin enables IntelliJ IDEA IDE to assist development in
                    Jaggery. It provides syntax highlighting and code completion for Jaggery, JavaScript and HTML so
                    far.
                    it provides code formatting for HTML. So developer can develop a .jag file conveniently in lesser
                    amount of time with the assistance given by IDE. </b>
                </p>

                <h3>Installation</h3>



                <ol class="steps1">

                    <li><a href="http://www.jetbrains.com/idea/download/">Download </a> IntelliJ IDEA if you haven't done so far.(Make sure you download the ultimate edition).</li>
                    <li><a href="http://plugins.intellij.net/plugin?pr=idea&pluginId=7108">Download </a> the plugin.</li>

                    <li>Go to <b>File</b> --> <b>settings</b>. </li>
                    <li>Choose plugins under <b>IDE settings</b>.</li>
                    <li>Click install plugin from disk.</li>
                    <li>Choose the plugin and click ok.</li>
                    <li>Restart the IDE.</li>

                </ol>


                <h3>Open file and edit the content </h3>



                <ol class="steps2">
                    <li> Open your project.</li>
                    </br>
                    <img src="/images/ide_doc_images/createnewproject.png" alt="" class="config_thumb" align="middle" width=""/>
                    </br>
                    </br>
                    </br>
                    <li> Right click on the directory that you need to have your <b>.jag</b> file in.</li>
                    <li> Go to New --> File.</li>
                    <li> Enter the name with the <b>.jag</b> extension.</li>
                    </br>
                    <img src="/images/ide_doc_images/createfile.png" alt="" class="config_thumb" align="middle"/>
                    </br>
                    </br>
                    </br>
                    <li> Click ok.</li>

                    <li> You will notice that new file is created with .jag extension. And JaggeryLibrary is added to External Libraries.</li>
                    </br>
                    <img src="/images/ide_doc_images/aftercreatingfile.png" alt="" class="config_thumb" align="middle"/>
                    </br>
                    </br>
                    </br>
                    <li> Enter the content as you wish. Entering of HTML content is shown with the javascript support.</li>
                    </br>
                    <img src="/images/ide_doc_images/typehtml.png" alt="" class="config_thumb" align="middle"/> </br></br></br>
                    <img src="/images/ide_doc_images/javascriptoutoftags.png" alt="" class="config_thumb" align="middle"/>
                    </br>
                    </br>
                    </br>
                    <li> Edit the Jaggery content out of the HTML tags.</li>
                    </br>
                    <img src="/images/ide_doc_images/getallthemethodsforrequest.png" alt="" class="config_thumb" align="middle"/>
                    </br>
                    </br>
                    </br>
                     <li> Create object and access its operations.</li>
                     </br>
                     <img src="/images/ide_doc_images/createobject.png" alt="" class="config_thumb" align="middle"/>
                     </br>
                     </br>
                     </br>
                     <li> Show parameter types when creating an operation.</li>
                     </br>
                     <img src="/images/ide_doc_images/methodparam.png" alt="" class="config_thumb" align="middle"/>
                     </br>
                     </br>
                     </br>
                   


                </ol>


            </div>
        </div>

        <%
        include('/includes/footer.jag');
        %>
    </div>
</div>
</body>
</html>
