Leveraging google transliteration within a Flex environment

Here is an illustration of how the Google transliteration feature can be utilized in specific HTML textboxes. I am looking to incorporate this same functionality for a Flex application. Is there a method through which this can be achieved?

  <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="http://www.google.com/jsapi">
        </script>
        <script type="text/javascript">

          // Load the Google Transliteration API
          google.load("elements", "1", {
                packages: "transliteration"
              });

          function onLoad() {
            var options = {
              sourceLanguage: 'en',
              destinationLanguage: ['hi','kn','ml','ta','te'],
              shortcutKey: 'ctrl+g',
              transliterationEnabled: true
            };

            // Create an instance on TransliterationControl with the required
            // options.
            var control =
                new google.elements.transliteration.TransliterationControl(options);

            // Enable transliteration in the textfields with the given ids.
            var ids = [ "transl1", "transl2" ];
            control.makeTransliteratable(ids);

            // Show the transliteration control which can be used to toggle between
            // English and Hindi and also choose other destination language.
            control.showControl('translControl');
          }
          google.setOnLoadCallback(onLoad);

        </script>
      </head>
      <body>
      <center>Enter text in Indian languages (Press Ctrl+g to switch between English and Hindi)</center>
        <div id='translControl'></div>
        <br>Title : <input type='textbox' id="transl1"/>
        <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
      </body>
    </html>
javascriptajaxapache-flextransliteration

Answer №1

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:TextArea x="209" y="139" height="245" width="318"  id="text1" fontSize="28"/>
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
    import flash.external.*;

     public function callWrapper():void {
        var s:String;
        if (ExternalInterface.available) {
           var wrapperFunction:String = "initialize";
           s = ExternalInterface.call(wrapperFunction,text1.text);
           text1.text = s;

        } else {
           s = "Wrapper not available";
        }
        trace(s); 
     }

            ]]>
    </mx:Script>
    <mx:Button x="92" y="118" label="Transliterate" click="callWrapper()"/>
</mx:Application>

HTML Wrapper :

<!-- saved from url=(0014)about:internet -->
<html lang="en">

<!-- 
Smart developers always View Source. 

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->

... (rest of the HTML content)

Answer №2

Here's the completed and functional code :

ajax_api.mxml : 

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
        <mx:TextArea x="209" y="139" height="245" width="318"  id="text1" fontSize="28"/>
        <mx:Script>
                <![CDATA[
                        import mx.rpc.events.ResultEvent;
        import flash.external.*;

         public function callWrapper():void {
            var s:String;
            if (ExternalInterface.available) {
       ExternalInterface.addCallback("g", g);
               var wrapperFunction:String = "initialize";
               ExternalInterface.call(wrapperFunction,text1.text);

            } else {
               s = "Wrapper not available";
            }
            trace(s); 
         }
         public function g(str:String):void
         {
            text1.text = str;
         }

                        ]]>
        </mx:Script>
        <mx:Button x="75" y="50" label="Type in some text and hit this button to view the transliteration output" click="callWrapper()" height="37"/>
    </mx:Application>

HTML Wrapper : 

<!-- saved from url=(0014)about:internet -->
<html lang="en">

<!-- 
Smart developers always View Source. 

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->

<title>ajax_api</title>
<script src="AC_OETags.js" language="javascript"></script>

<!--  BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!--  END Browser History required section -->

<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 28;
// -----------------------------------------------------------------------------
// -->
</script>
</head>

<body scroll="no">
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("language", "1");
function thisMovie(movieName)
{

    if(navigator.appName.indexOf("Microsoft")!=-1)
    {
        alert("microsoft");
        return window[movieName];
    }
    else
    {
        return document[movieName];
    }
}

function initialize(input) {
      google.language.transliterate([input], "en", "hi", function(result) {
        if (!result.error) {
          var container = document.getElementById("transliteration");
          if (result.transliterations && result.transliterations.length > 0 &&
            result.transliterations[0].transliteratedWords.length > 0) {
            output = result.transliterations[0].transliteratedWords[0];
        thisMovie("ajax_api").g(output);
          }
        }
      });
    }

    </script>
    <script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

if ( hasProductInstall && !hasRequestedVersion ) {
    // DO NOT MODIFY THE FOLLOWING FOUR LINES
    // Location visited after installation is complete if installation is required
    var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
    var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

    AC_FL_RunContent(
        "src", "playerProductInstall",
        "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
        "width", "100%",
        "height", "100%",
        "align", "middle",
        "id", "ajax_api",
        "quality", "high",
        "bgcolor", "#869ca7",
        "name", "ajax_api",
        "allowScriptAccess","sameDomain",
        "type", "application/x-shockwave-flash",
        "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );
} else if (hasRequestedVersion) {
    // if we've detected an acceptable version
    // embed the Flash Content SWF when all tests are passed
    AC_FL_RunContent(
            "src", "ajax_api",
            "width", "100%",
            "height", "100%",
            "align", "middle",
            "id", "ajax_api",
            "quality", "high",
            "bgcolor", "#869ca7",
            "name", "ajax_api",
            "allowScriptAccess","sameDomain",
            "type", "application/x-shockwave-flash",
            "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
    + 'This content requires the Adobe Flash Player. '
    + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
</script>
<noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="ajax_api" width="100%" height="100%"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="movie" value="ajax_api.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#869ca7" />
            <param name="allowScriptAccess" value="sameDomain" />
            <embed src="ajax_api.swf" quality="high" bgcolor="#869ca7"
                width="100%" height="100%" name="ajax_api" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
</noscript>
</body>
</html>

Answer №3

While the Google AS3 API available at http://code.google.com/p/googleas3api/ does not currently support transliteration, I am curious if it can be incorporated in a manner similar to the AS3 translation implementation. Does anyone have insights on how this could be achieved?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to verify whether a user is currently logged in? (Using everyauth in node.js)

Previously, I relied on client-side auth for my application. Recently, I integrated server-side everyauth and it's functioning well. However, I'm unsure how to perform a function similar to FB.getLoginStatus (which I used in the client-side) when ...

javascriptnode.jseveryauth

Generating a matrix of HTML video elements in p5.js triggers Uncaught TypeError

Struggling to create a 2D array of video objects. It works fine with a regular array, but throws an error when attempting to make it 2D - Uncaught TypeError: Cannot read property 'tv' of undefined. The problem seems to be in this line of code: tv ...

javascriptarrays

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

Need help with a renderWorkoutUpdated function that replaces specific workout records with updated values. _renderWorkoutUpdated(currentWorkout) { let html = `<li class="workout workout--${currentWorkout.type}" data-id="${ curre ...

javascripthtmlinnerhtml

Attempting to send an AJAX request using jQuery, receiving a successful response but encountering an error with the AJAX functionality

My AJAX request in jQuery is as follows: $.ajax({ url: "http://someurl.stuff.com", beforeSend: function(xhr) { xhr.setRequestHeader("Accept", "application/json"); xhr.setRequestHeader("Host",null); xhr.setRequestHeader("Access ...

jqueryajax

Guide on converting arrays and sending this information in Node.js

I managed to retrieve quiz data and now I want to enhance it by mapping each answer to its respective quiz. I have a feeling that I should use something like forEach.push, but I haven't quite figured out the exact method... const API_KEY="https: ...

javascriptnode.jsexpress

Is it necessary to exclude the 'scripts' folder from your Aurelia project's .gitignore file?

Should I exclude the 'scripts' directory that Aurelia is building to in my CLI project from Git by adding it to .gitignore, or is there a specific purpose for tracking changes to this directory? ...

javascriptgitaurelia

Implement a T3 App Redirect in a TRPC middleware for unsigned users

Is there a way to implement a server-side redirect if a user who is signed in has not finished filling out their profile page? const enforceUserIsAuthed = t.middleware(({ ctx, next }) => { if (!ctx.session || !ctx.session.user) { throw new TRPCE ...

javascriptreactjstypescriptnext.jstrpc.io

What purpose does the "io" cookie serve in Socket.IO?

Can someone explain the purpose of Socket.IO using the io cookie as a session cookie? I understand that it can be disabled, but I couldn't find any information on it in the documentation. Why is it turned on by default and what consequences would ther ...

javascriptexpresssocket.ioengine.io

Filtering incoming data from a Firestore database: A step-by-step guide

I'm facing a challenge while trying to incorporate this filtering mechanism into my code. FILTERING An issue arises when I attempt to implement the following lines of code: function search(text: string, pipe: PipeTransform): Country[] { return CO ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

Currently, I am utilizing the kendo ui mobile listview and encountering an issue when setting endlessScroll or loadMore to true. The problem arises as the listview only displays the first item in such instances. Upon inspecting with Chrome inspector, I ob ...

javascriptcsslistviewkendo-ui

Using AJAX to send data to the server in jQuery

Currently, I have an AJAX request implemented on my webpage. I am exploring methods to detect when an AJAX call is initiated within the page using jQuery or JavaScript. Is there a way to identify or trigger a function upon the initiation of an AJAX reques ...

javascriptajaxjquery

Unlimited digest loop in Angular.js caused by nested ng-repeat and filter

In my AngularJS project, I have developed a custom filter that categorizes elements by type and performs a search for multiple search terms across all attributes of devices. angular.module('abc').filter('searchFor', function(){ return ...

javascriptangularjsangularjs-ng-repeat

Tips for adding an array to an array of objects with AngularJs

I'm facing an issue with the array structure in my code. Here's what I currently have: $scope.arrayList=[{FirstName:"",LastName:""}]; $scope.Address=[{address:"",PhoneNumber:""}]; What I want to achieve is to push the $scope.Address array into ...

javascriptarraysangularjsarraylist

Issue with Knockout.js: Parsing error in bindings - SyntaxError: Unexpected token `};`

Take a look at this example. I've tried to simplify it as much as possible, but I'm still struggling to figure out where I went wrong. Any help would be greatly appreciated )) P.S Stack Overflow requires code, not just a link to jsfiddle. H ...

javascriptknockout.jsknockout-mapping-plugin

JavaScript validation is failing to return false when re-entering the password

My JavaScript validation code is working fine. Javascript: All fields return false when re-entering the password, but JavaScript does not return false if it's not working The Re-Enter password JavaScript code is failing to work... An alert is displ ...

javascript

Guide to enclosing selected text within a span tag and positioning a div in relation to it using JavaScript

My main objective is to enable the user to: highlight text within a paragraph enclose the highlighted text in a span element add an action button or div at the end of the selected text for further interaction Here's the code I've worked on so ...

javascriptjquery

What is the best way to capture the output of a script from an external website using Javascript when it is returning simple text?

Recently, I decided to incorporate an external script into my project. The script in question is as follows: <script type="application/javascript" src="https://api.ipify.org"> </script> This script is designed to provide the client's IP ...

javascripthtmljson

"Utilizing a Handlebars Helper to Evaluate if Two Values (v1 and v2) are Equal, and Displaying Content from

To make the actual call, I require something along these lines: <script id="messagesTemplate" type="text/x-handlebars-template"> {{#each messages.messages}} {{#each to}} {{#ifCond username messages.sessionUserName}} <h1> ...

javascriptexpresshelperhandlebars.js

Setting a CSS Variable with the Help of jQuery

I need help with changing the background color of a specific .div element when it is clicked on. I want the color to be a variable that can be changed by the user, and this change should occur when the document is ready. Currently, I am using a CSS variab ...

javascriptjqueryhtmlcss

Leveraging the back button in an AngularJS Mobile SPA

Utilizing AngularJS for my Single Page App (SPA), I am currently exploring the most effective way to handle the back button functionality on mobile devices. My setup involves a single JavaScript file, one HTML page, and no partials. The content is reveale ...

javascripthtmlangularjssingle-page-application