You are here: JavaScript to Flex Bridge > Getting started with JavaScript to Flex Bridge

Getting started with ArcWeb Explorer JavaScript to Flex Bridge

The ArcWeb Explorer JavaScript to Flex Bridge gives JavaScript developers direct access to almost all ArcWeb Explorer Flex API functionality, plus some additional convenience methods.

For Bridge reference documents, see the Flex API reference documents. The Bridge is the same as the Flex API with the differences noted below. See ArcWeb Explorer JavaScript to Bridge API Reference for links to the API reference documents.

Requirements

Steps to get started

Basic example

Using properties

Requirements

NOTE: Make sure you access your application through http:// URLs rather than file:// URLs. ArcWeb API Key authentication and/or the Flash Player security sandbox may prevent it from working correctly if accessed as a local file.

Steps to get started

  1. Include the js file:

    <script type="text/javascript" src="http://api.arcwebservices.com/awx/v4/awxbridge-4.0.1.js"></script>

  2. Create div with an id:

    <div id="awx" style="width: 100%; height: 80%"> Map goes here.</div>

  3. Insert the application using the insertFramework convenience method. Use the id from above:

    function onBodyLoad()
    {
    AWXBridge.insertFramework("awx", {apiKey:"<ArcWeb Explorer API Key>"'});
    }

  4. Create a javascript function called onCreationComplete() which will get called the awx map is complete:

    function onCreationComplete() { }

  5. In onCreationComplete(), create a variable to access the AWX application root instance from JavaScript:

    m_root = FABridge.awx.root();

  6. In onCreationComplete(), create the map and add it to the root:

    m_map = m_root.createMap();
    m_root.addChild(m_map);

Basic example 

This basic example shows how to use the ArcWeb JavaScript to Flex Bridge.

<html>
     <head>
     <title>AWX JavaScript to Flex Bridge - Basic Map</title>

     <!-- reference to the ArcWeb Explorer Advanced JavaScript library -->
     <script type="text/javascript" src="http://api.arcwebservices.com/awx/v4/awxbridge-4.0.1.js"></script>
     <script language="JavaScript" type="text/javascript">

          // The Flex application root.
          var m_root;
          // The map component in the flex application.
          var m_map;

          function onBodyLoad()
          {
               AWXBridge.insertFramework("awx", {apiKey:"<ArcWeb Explorer API Key>"'});
          }
          function onCreationComplete()
          {
               try
               {
                    m_root = FABridge.awx.root();
                    m_map = m_root.createMap();
                    m_root.addChild(m_map);
               }
               catch(ex)
               {
                    alert(ex.message);
               }
          }
     </script>
     </head>
     <body onLoad="onBodyLoad()">
     <h3>AWX JavaScript to Flex Bridge - Basic Map</h3>
     <div id="awx" style="width: 100%; height: 80%">Map goes here.</div>
     </body>
</html>

 

Using properties

Getting properties

To get the value of a property, call it like a function; use the same syntax to access objects by id, as the following example shows:

var currentScale = m_map.getScale();

Compare this to the Map properties in Flex where the property is listed as "scale" rather than "getScale(). Where Flex API uses m_map.scale, the JavaScript to Flex Bridge uses m_map.getScale().

Setting properties

To set the value of a property from JavaScript, call the function setPropertyName(), as the following example shows:

m_map.setScale(500000);

See also

ArcWeb Explorer JavaScript to Flex Bridge overview

ArcWeb Explorer JavaScript to Bridge live samples

Troubleshooting the JavaScript to Flex Bridge

Visit the Feedback page to give comments or suggestions about the ArcWeb Explorer Developer's Guide.

ArcWeb site | ArcWeb support | support.esri.com

Copyright © ESRI