| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <meta name="generator" content="Adobe RoboHelp 8"> |
| <title>Setting the JavaScript Build Path</title> |
| <link rel="StyleSheet" href="default.css" type="text/css"> |
| <style type="text/css"> |
| <!-- |
| body { border-left-style:None; |
| border-right-style:None; |
| border-bottom-style:None; |
| background-color:Transparent; |
| border-top-style:None; } |
| --> |
| </style> |
| <style type="text/css"> |
| <!-- |
| body { border-left-style:None; |
| border-right-style:None; |
| border-bottom-style:None; |
| background-color:Transparent; |
| border-top-style:None; } |
| --> |
| </style> |
| <script type="text/javascript" language="JavaScript"> |
| //<![CDATA[ |
| function reDo() { |
| if (innerWidth != origWidth || innerHeight != origHeight) |
| location.reload(); |
| } |
| if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) { |
| origWidth = innerWidth; |
| origHeight = innerHeight; |
| onresize = reDo; |
| } |
| onerror = null; |
| //]]> |
| </script> |
| <style type="text/css"> |
| <!-- |
| div.WebHelpPopupMenu { position:absolute; |
| left:0px; |
| top:0px; |
| z-index:4; |
| visibility:hidden; } |
| p.WebHelpNavBar { text-align:right; } |
| --> |
| </style> |
| <script type="text/javascript" language="javascript1.2" src="whmsg.js"></script> |
| <script type="text/javascript" language="javascript" src="whver.js"></script> |
| <script type="text/javascript" language="javascript1.2" src="whproxy.js"></script> |
| <script type="text/javascript" language="javascript1.2" src="whutils.js"></script> |
| <script type="text/javascript" language="javascript1.2" src="whlang.js"></script> |
| <script type="text/javascript" language="javascript1.2" src="whtopic.js"></script> |
| <script type="text/javascript" language="javascript1.2">//<![CDATA[ |
| <!-- |
| if (window.gbWhTopic) |
| { |
| var strUrl = document.location.href; |
| var bc = 0; |
| var n = strUrl.toLowerCase().indexOf("bc-"); |
| if(n != -1) |
| { |
| document.location.href = strUrl.substring(0, n); |
| bc = strUrl.substring(n+3); |
| } |
| |
| if (window.setRelStartPage) |
| { |
| addTocInfo("Tasks\nDeveloping with JavaScript\nSetting the JavaScript Build Path"); |
| addAvenueInfo("Tasks","enabling_javascript_support_in_php_projects.htm","viewing_javascript_elements_in_the_outline_view.htm"); |
| |
| } |
| |
| document.write("<p style=\"text-align:left\"> "); |
| AddMasterBreadcrumbs("ide_help.htm", "", ">", "Home", "pdt_table_of_contents.htm"); |
| document.write("<a href=\"tasks.htm\">Tasks<\/a> > <a href=\"using_javascript.htm\">Developing with JavaScript<\/a> > Setting the JavaScript Build Path<\/p>"); |
| |
| |
| if (window.setRelStartPage) |
| { |
| setRelStartPage("ide_help.htm"); |
| |
| autoSync(0); |
| sendSyncInfo(); |
| sendAveInfoOut(); |
| } |
| |
| } |
| else |
| if (window.gbIE4) |
| document.location.reload(); |
| //--> |
| //]]></script> |
| </head> |
| |
| <body leftmargin="5" topmargin="5" rightmargin="5" bottommargin="5"><script type="text/javascript" language="javascript1.2">//<![CDATA[ |
| <!-- |
| if (window.writeIntopicBar) |
| writeIntopicBar(4); |
| //--> |
| //]]></script> |
| <div style="width: 100%; position: relative;" id="header"> |
| |
| |
| <p align="right"><a |
| title="Documentation Survey" href="http://spreadsheets.google.com/viewform?formkey=dC1scEswTjFia2tDQ3Y5TVJBbkNQcWc6MQ">Documentation |
| Survey</a> |
| | <a href="javascript:crlf="";h=location.href;t=document.title;e = "" + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text); if (e!=null) location="mailto:documentation@zend.com" + "?Subject= Feedback on PDT for page " + escape(t) + "&Body=" + escape(e).replace(/ /g, "+") + crlf + " "; void 0"><span |
| style="background-color: #ffffff;">Submit Documentation</span><span |
| style="background-color: #ffffff;"> Feedback</span></a><span |
| style="background-color: #ffffff;"></span><span style="background-color: #ffffff;"> |
| </span><span style="background-color: #ffffff;">| |
| </span><span |
| style="background-color: #ffffff;"><a title="View Latest Version and Get PDF Online" |
| href="http://www.zend.com/en/resources/zend-documentation/" |
| target="_blank">View Latest |
| Version and Get PDF Online</a></span></p> |
| </div> |
| |
| |
| <h1>Setting the JavaScript Build Path |
| </h1> |
| <p>The JavaScript build process scans all files, folders, projects and |
| libraries that are on the project's JavaScript Build Path so that resources |
| which are referenced in the project can be made available for Content |
| Assist options |
| . The required resources must therefore be included in the JavaScript |
| Build Path.</p> |
| <p>JavaScript's Build Path allows you to select JavaScript resources to |
| include/exclude from this process. Rather than automatically scanning |
| all referenced projects and libraries, configuring the JavaScript Build |
| Path allows you to select which resources will be scanned, and so can |
| significantly speed up the build process.</p> |
| <p class="Note">Note:</p> |
| <p class="NoteText">JavaScript Support must be <a href="enabling_javascript_support_in_php_projects.htm">enabled |
| for the project</a> before you can set the JavaScript Build Path.</p> |
| <p> </p> |
| <p>The JavaScript Build Path is determined by the resources included in |
| the project's JavaScript Libraries properties page.</p> |
| <table cellspacing="0" width="100%"> |
| <col style="width: 7.093%;"> |
| <col style="width: 92.907%;"> |
| <tr valign="top"> |
| <td style="width: 7.093%; padding-right: 10px; padding-left: 10px;"><p |
| style="font-size: 6pt;"> </p></td> |
| <td style="width: 92.907%; padding-right: 10px; padding-left: 10px;"><p |
| style="font-weight: bold;"> </p></td> |
| </tr> |
| <tr valign="top"> |
| <td style="width: 7.093%; padding-right: 10px; padding-left: 10px;"><p |
| style="font-size: 6pt;"><img src="ref_icon.png" alt="Instructions on how to complete a procedure" title="Instructions on how to complete a procedure" style="border: none;" width="28" height="33" border="0"></p></td> |
| <td style="width: 92.907%; padding-right: 10px; padding-left: 10px;"><p |
| style="font-weight: bold;">To configure the project's JavaScript |
| Build Path:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px;"><p>In PHP Explorer |
| view, right-click the required project and select Properties |
| | JavaScript | JavaScript Libraries.<br> |
| In this properties page you can add the following elements |
| to the project's JavaScript Build Path:</p></li> |
| <li class="p-ListBullet1" style="margin-left: -20px;"><p class="ListBullet1" |
| style="text-indent: -0in; margin-left: 0in;"><a href="#Libraries">Libraries</a> |
| - Built-in and user defined libraries contain pre-written |
| collections of JavaScript source files that have prototyped |
| object/class definitions and JsDoc.</p></li> |
| <li class="p-ListBullet1" style="margin-left: -20px;"><p class="ListBullet1" |
| style="text-indent: -0in; margin-left: 0in;"><a href="#Global_SuperType">Global |
| Super Types</a> - Each object/field/function in the added |
| libraries will be added to the project's Global Scope. Every |
| JavaScript file in the project will then have access to these |
| objects/fields/functions.</p></li> |
| <li class="p-ListBullet1" style="margin-left: -20px;"><p class="ListBullet1" |
| style="text-indent: -0in; margin-left: 0in;"><a href="#Source">Source</a> |
| - Other folders/files/variables from your file system or linked |
| from an external source.</p></li> |
| <li class="p-ListBullet1" style="margin-left: -20px;"><p class="ListBullet1" |
| style="text-indent: -0in; margin-left: 0in;"><a href="#Projects">Projects</a> |
| - Other projects in the workspace or on your file system</p></li> |
| </ol> |
| <h3><a name="Libraries" id="Libraries"></a>Libraries Tab</h3> |
| <p>If your project references a JavaScript library, it should be |
| added to this list so that it's elements can be available for |
| Content Assist options.</p> |
| <p>Through the Libraries tab you can add PDT |
| 's built-in libraries, or create and add your own User Libraries.</p> |
| <p class="Note">Note:</p> |
| <p class="NoteText">The default Runtime Libraries (Script Language |
| Libraries, Web Project support for JSDT and ECMA 3 Browser Support |
| Library) are added to the JavaScript Build Path automatically.</p> |
| <p class="picture"><img src="javascript_libraries.png" alt="JavaScript Libraries Properties" title="JavaScript Libraries Properties" style="border: none;" width="599" height="357" border="0"></p> |
| <p style="font-weight: bold;"><a name="adding_builtin_libraries" |
| id="adding_builtin_libraries"></a>To |
| add a built-in library to the JavaScript Build Path:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Click 'Add a Runtime |
| Library...'.<br> |
| The Add Library dialog will appear.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Select the required |
| library and click Next and Finish.</p></li> |
| </ol> |
| <p style="font-weight: bold;"> </p> |
| <p style="font-weight: bold;">To add a User Library to the JavaScript |
| Build Path:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Click 'Add a Runtime |
| Library...'.<br> |
| The Add Library dialog will appear.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Select 'User Library' |
| and click Next.<br> |
| A list of previously configured User Libraries will appear.</p></li> |
| </ol> |
| |
| <p class="FIgureCaption"><img src="javascript_includepath_lib1.png" alt="javascript_includepath_lib1.png" style="border: none;" width="295" height="219" border="0"></p> |
| |
| <ol start="3" type="1"> |
| <li class="p" style="margin-left: -20px;"><p>If you have not |
| yet configured your User Libraries:</p></li> |
| </ol> |
| <ol start="1" type="1"> |
| <li class="p" type="i"><p>Click the User Libraries button to |
| be taken to the JavaScript User Libraries preferences page |
| (also accessible from Window | Preferences | JavaScript | |
| Include Path | User Libraries).</p></li> |
| <li class="p" type="i"><p>Click New.<br> |
| The New User Library dialog will open.</p></li> |
| </ol> |
| |
| <p class="FIgureCaption"><img src="javascript_new_user_library1.png" alt="javascript_new_user_library1.png" style="border: none;" width="176" height="110" border="0"></p> |
| |
| <ol start="1" type="1"> |
| <li style="list-style: none; display: inline;"><ol start="3" |
| type="i"> |
| <li class="p" style="margin-left: -20px;"><p>Enter a name |
| for the library you would like to add and click OK.<br> |
| The library name will be added to the User Libraries list. |
| This is just a placeholder name to which you will add |
| the required files in order to create your own library.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Select the |
| name from the list and click 'Add .js.'</p></li> |
| <li class="p" style="margin-left: -20px;"><p>In the .js |
| File Selection dialog, browse to the required JavaScript |
| files on your file system and click Open.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>The JavaScript |
| files will be added to your User Library.</p></li> |
| </ol></li> |
| </ol> |
| <p class="picture"><img src="javascript_user_libraries_preferences.png" alt="javascript_user_libraries_preferences.png" style="border: none;" width="333" height="351" border="0"></p> |
| |
| <ol start="1" type="1"> |
| <li style="list-style: none; display: inline;"><ol start="7" |
| type="i"> |
| <li class="p" style="margin-left: -20px;"><p>Click OK to |
| return to the User Library selection list.</p></li> |
| </ol></li> |
| </ol> |
| <ol start="4" type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Mark the checkbox |
| of the User Library you would like to add to the project's |
| Build Path and click Finish.<br> |
| The User Library will be added to the project's JavaScript |
| Libraries Build Path list.</p></li> |
| </ol> |
| <p style="font-weight: bold;"> </p> |
| <p style="font-weight: bold;">To add a library folder from your |
| Workspace to the JavaScript Build Path:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Click the 'Add a Library |
| Folder' button.<br> |
| The library folder selection dialog will display a list of |
| available folders.</p></li> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Select the required folder(s) |
| and click OK.</p></li> |
| </ol> |
| <h3><a name="Global_SuperType" id="Global_SuperType"></a>Global |
| SuperType Tab</h3> |
| <p>The project's Global Scope contains all the objects, fields |
| and functions contained in the libraries which have been added |
| to the JavaScript Build Path. Elements in the Global SuperType |
| will be available to all PHP and JavaScript files within the project.</p> |
| <p class="picture"><img src="javascript_global_supertype.png" alt="javascript_global_supertype.png" style="border: none;" width="419" height="344" border="0"></p> |
| |
| <p>In addition, the Global SuperType tab allows you to select a |
| 'SuperType' class. All JavaScript elements which are not defined |
| in their own class will automatically be added to this class. |
| This will allow you to select these elements from the Content |
| Assist list according to the SuperType Class name you selected.</p> |
| <p style="font-weight: bold;">To configure the SuperType class:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Click the 'Select |
| & Re-order Libraries' button.<br> |
| The JavaScript Sourcefile SuperType Selection dialog will open.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Select the class |
| name for the SuperType class and click OK.<br> |
| All elements which are not defined in a class will be added |
| to the selected class. Entering the class name will display |
| these elements in the Content Assist list.</p></li> |
| </ol> |
| <h3><a name="Source" id="Source"></a>Source Tab</h3> |
| <p>The Source tab allows you to include/exclude specific files, |
| folders and variables from the JavaScript Build Path.</p> |
| <p class="picture"><img src="javascript_source.png" alt="javascript_source.png" style="border: none;" width="383" height="301" border="0"></p> |
| |
| <p style="font-weight: bold;">To add a folder from your Workspace:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Click Add folder.<br> |
| The Source Folder Selection dialog will display.</p></li> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Select the required folders |
| and click OK.</p></li> |
| </ol> |
| <p style="font-weight: bold;"> </p> |
| <p style="font-weight: bold;">To add an external folder:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Click Add External Folder.<br> |
| The Link Source dialog is displayed.</p></li> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Click Browse to select a |
| folder from your file system and click OK.</p></li> |
| </ol> |
| <p style="font-weight: normal;"> </p> |
| <p style="font-weight: bold;">To add a JavaScript file from your |
| filesystem:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Click Add File from Filesystem.</p></li> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Select a JavaScript file |
| and click Open.</p></li> |
| </ol> |
| <p style="font-weight: bold;"> </p> |
| <p style="font-weight: bold;">To add JavaScript files from your |
| Workspace:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Click Add File From Project.</p></li> |
| <li class="p" style="margin-left: -20px; font-weight: normal;"><p |
| style="font-weight: normal;">Select the required file(s) |
| and click OK.</p></li> |
| </ol> |
| <p style="font-weight: bold;"> </p> |
| <p style="font-weight: normal;">Using a Classpath Variable allows |
| you to point to a JavaScript library without having to specify |
| it's local file system location. This is important when sharing |
| resources in a team.</p> |
| <p style="font-weight: bold;">To add a Variable Classpath Entry:</p> |
| <ol start="1" type="1"> |
| <li class="p" style="margin-left: -20px;" type="1"><p>Click |
| Add Variable.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>The list of Configured |
| Classpath Variables will be displayed.<br> |
| If you have not configured any Classpath Variables:</p></li> |
| </ol> |
| <ol start="1" type="1"> |
| <li class="p" type="i"><p>Click the Configure Variables button |
| to open the JavaScript Include Path Variables preferences |
| page (also accessible from Window | Preferences | JavaScript |
| | Include Path | Include Path Variables).</p></li> |
| <li class="p" type="i"><p>Click New.<br> |
| The New Variable Entry dialog will appear.</p></li> |
| <li class="p" type="i"><p>Enter the Name and Path of the variable |
| (click the File or Folder buttons to browse to the path).</p></li> |
| <li class="p" type="i"><p>Click OK.<br> |
| The Variable will be added to the Include Path Variables list.</p></li> |
| <li class="p" type="i"><p>Click OK to return to the Variable |
| Classpath Entry selection list.</p></li> |
| </ol> |
| <ol start="3" type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Select the variable |
| you would like to add to the project's JavaScript Build Path |
| and click OK.</p></li> |
| </ol> |
| <p class="Note" style="margin-left: 24px;">Note:</p> |
| <p class="NoteText" style="margin-left: 24px;">The Variable points |
| to a folder. To choose an archive inside the folder, click Extend.</p> |
| <ol start="4" type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Click OK.</p></li> |
| </ol> |
| <p> </p> |
| <p>You can choose to include or exclude specific resources or file |
| name patterns from within source folders which you have added.</p> |
| <p style="font-weight: bold;">To include/exclude specific resources |
| from the JavaScript Build Path:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Expand the node |
| next to the folder from which you would like to include/exclude |
| resources.<br> |
| A list of the resources which are included and excluded will |
| be displayed (by default, all resources within the folder |
| are included).</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Select the Included |
| or Excluded list and click Edit.<br> |
| The Inclusion and Exclusion patterns dialog is displayed.</p></li> |
| </ol> |
| <ol start="3" type="1"> |
| <li class="p" style="margin-left: -20px;"><p>The Add Inclusion/Exclusion |
| Pattern dialog is displayed.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Enter or select |
| the required resources / pattern to Include/Exclude and click |
| OK.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Click Finish.<br> |
| All resources in the folder which match an Inclusion pattern |
| but do not match an Exclusion pattern will be added to the |
| JavaScript Build Path.</p></li> |
| </ol> |
| <p class="picture"><img src="javascript_source_excluded.png" alt="javascript_source_excluded.png" style="border: none;" width="371" height="303" border="0"></p> |
| |
| <h3><a name="Projects" id="Projects"></a>Projects Tab</h3> |
| <p>The Projects tab allows you to select projects from your Workspace |
| to add to the JavaScript Build Path.</p> |
| <p class="picture"><img src="javascript_projects_tab.jpg" alt="javascript_projects_tab.jpg" style="border: none;" width="413" height="229" border="0"></p> |
| |
| <p style="font-weight: bold;">To add a project to the JavaScript |
| Build Path:</p> |
| <ol type="1"> |
| <li class="p" style="margin-left: -20px;"><p>Click the 'Add..' |
| button.<br> |
| The Required Project Selection dialog is displayed.</p></li> |
| <li class="p" style="margin-left: -20px;"><p>Select the required |
| projects and click OK.<br> |
| The selected projects will be added to the JavaScript Build |
| Path.</p></li> |
| </ol> |
| <p class="Note">Note:</p> |
| <p class="NoteText">During the Build process, the referenced projects |
| will be built before the project itself.</p> |
| <h3>Saving your changes</h3> |
| <p>Once you have made all necessary changes to your JavaScript |
| Build Path, click OK.</p> |
| <p>Click Add next to the Inclusion or Exclusion patterns panes.</p></td> |
| </tr> |
| <tr valign="top"> |
| <td colspan="2" style="width: 100%; padding-right: 10px; padding-left: 10px;"><p>Your |
| project will be rebuilt to reflect the changes, according to the |
| settings you configured.</p> |
| |
| </td> |
| |
| </tr> |
| </table> |
| <table cellspacing="0" width="100%"> |
| <col style="width: 7.093%;"> |
| <col style="width: 92.907%;"> |
| <tr style="height: 16px;" valign="top"> |
| <td style="width: 7.093%; padding-right: 10px; |
| padding-left: 10px;"><p |
| style="font-size: 6pt;"> </p></td> |
| <td style="width: 92.907%; |
| padding-right: 10px; padding-left: 10px;"><p> </p></td> |
| </tr> |
| <tr style="height: 35px;" valign="top"> |
| <td style="width: 7.093%; padding-right: 10px; |
| padding-left: 10px;"><p |
| style="font-size: 6pt;"><img src="link_icon.png" alt="link_icon.png" style="border: none;" width="32" height="40" border="0"> </p></td> |
| <td style="width: 92.907%; |
| padding-right: 10px; padding-left: 10px;"><p |
| style="font-weight: bold;">Related Links:</p> |
| <p><a |
| href="../../plugins_root/com.zend.php.help/html/javascript.htm">JavaScript |
| Support</a> </p> |
| <p><a href="../../plugins_root/com.zend.php.help/html/using_javascript.htm">Developing |
| with JavaScript</a> <a |
| href="../../plugins_root/com.zend.php.help/html/enabling_javascript_support_in_php_projects.htm"><br> |
| Enabling JavaScript Support in PHP Projects</a> |
| </p> |
| |
| <p><a href="viewing_javascript_elements_in_the_outline_view.htm">Viewing |
| JavaScript Elements in the Outline View</a> </p> |
| <p><a href="using_javascript_content_assist.htm">Using JavaScript Content |
| Assist</a> </p> |
| <p><a href="using_javascript_syntax_coloring.htm">Using |
| JavaScript Syntax Coloring</a> </p> |
| |
| <p><a href="using_javascript_mark_occurences.htm">Using JavaScript Mark |
| Occurrences</a> </p></td> |
| </tr> |
| <tr style="height: 19px;" valign="top"> |
| <td style="width: 7.093%; padding-right: 10px; |
| padding-left: 10px;"><p |
| style="font-size: 6pt;"> </p></td> |
| <td style="width: 92.907%; |
| padding-right: 10px; padding-left: 10px;"><p> </p></td> |
| </tr> |
| </table> |
| <div style="width: 100%; position: relative;" id="footer"> |
| |
| <p style="text-decoration: underline; " |
| align="center">PHP Development |
| Tools</p> |
| |
| |
| </div> |
| <script type="text/javascript" language="javascript1.2">//<![CDATA[ |
| <!-- |
| if (window.writeIntopicBar) |
| writeIntopicBar(0); |
| |
| highlightSearch(); |
| //--> |
| //]]></script> |
| </body> |
| </html> |
