Search Results

Search found 688 results on 28 pages for 'addeventlistener'.

Page 7/28 | < Previous Page | 3 4 5 6 7 8 9 10 11 12 13 14  | Next Page >

  • Flash and Google Maps - Only Last Icon showing

    - by Peter
    I have a simple Map and geocoding sample in Flash using CS4 The problem is simple - I can retrieve a short list from the google search api, but when I try to generate the icons on the map using a loop, only the last icon is displayed. (ignore the house icon, it is generated earlier) I feel I am missing something or made a stupid AS3 mistake (like treating it as if it was c#) - or even a stupid wood-for-the-trees mistake. The problem is in the last line of the code. I have added all my code just in case somebody else can find a use for it - lord knows it took me a great while to figure this out :) It runs here (also, if anybody has an idea why the icon is slightly in the wrong place on render, but corrects if you move the map - please let me know) Any help would be great. Thanks. P import com.google.maps.services.ClientGeocoder; import com.google.maps.services.GeocodingEvent; import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.overlays.Marker; import com.google.maps.overlays.MarkerOptions; import com.google.maps.styles.FillStyle; import com.google.maps.styles.StrokeStyle; import com.google.maps.controls.* import com.google.maps.overlays.* import flash.display.Bitmap; import flash.display.BitmapData; import com.adobe.utils.StringUtil; import be.boulevart.google.ajaxapi.search.GoogleSearchResult; import be.boulevart.google.events.GoogleApiEvent; import be.boulevart.google.ajaxapi.search.local.GoogleLocalSearch; import be.boulevart.google.ajaxapi.search.local.data.GoogleLocalSearchItem; var strZip:String = new String(); strZip="60661"; var strAddress:String = new String(); strAddress ="100 W. Jackson Blvd, chicago, IL 60661"; var IconArray:Array = new Array; var SearchArray:Array = new Array; /*-------------------------------------------------------------- // The returned search data gets placed into this array ---------------------------------------------------------------*/ var LocalInfo:Array = new Array(); var intCount:int = new int; var intMapReady:int=0; /*=================================================================================== We load the map first and then get the search criteria - this will keep the order of operation clean. The ====================================================================================*/ var map:Map = new Map(); map.key = "ABQIAAAAHwSPp7Lhew456ffD6qa2WmxT_VwdLJEfmcCgytxKjcH1jLKkiihQtfC- TbcwryvBQYhRwHWa8F_Gp9Q"; map.setSize(new Point(600, 550)); map.addEventListener(MapEvent.MAP_READY, onMapReady); //Places the map on the page this.addChild(map); map.x=5; map.y=5; function onMapReady(event:Event):void { //Center the map and place the house marker doGeocode(); } /*========================================================================== Goecode to return the LAT and LONG for the specific address, center the map and add the house icon ===========================================================================*/ function doGeocode() { var geocoder:ClientGeocoder = new ClientGeocoder(); geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, function(event:GeocodingEvent):void { var objPlacemarks:Array = event.response.placemarks; if (objPlacemarks.length > 0) { map.setCenter(objPlacemarks[0].point, 14, MapType.NORMAL_MAP_TYPE); var request:URLRequest = new URLRequest("house.png"); var imageLoader:Loader = new Loader(); imageLoader.load(request); var objMarkerOptions:MarkerOptions = new MarkerOptions(); objMarkerOptions.icon=imageLoader; objMarkerOptions.icon.scaleX=.15; objMarkerOptions.icon.scaleY=.15; objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER; var objMarker:Marker = new Marker(objPlacemarks[0].point, objMarkerOptions); map.addOverlay(objMarker); doLoadSearch() } }); //Failure code - good practice, really geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, function(event:GeocodingEvent):void { txtResult.appendText("Geocoding failed"); }); // generate geocode geocoder.geocode(strAddress); } /*=============================================================== XML Loader - loads icon file and search text pair from xml file =================================================================*/ function doLoadSearch() { var xmlLoader:URLLoader = new URLLoader(); var xmlData:XML = new XML(); xmlLoader.addEventListener(Event.COMPLETE, LoadXML); xmlLoader.load(new URLRequest("config.xml")); function LoadXML(e:Event):void { xmlData = new XML(e.target.data); RetrieveSearch(); } function RetrieveSearch() { //extract the MapData subset var xmlSearch = xmlData.MapData; // push this to an xml list object var xmlChildren:XMLList = xmlSearch.children(); //loop the list and extract the data into an //array of formatted search criteria for each (var Search:XML in xmlChildren) { txtResult.appendText("Searching For: "+Search.Criteria+" Icon=" + Search.Icon+ "Zip=" + strZip +"\r\n\r\n"); //retrieve search criteria loadLocalInfo(Search.Criteria,Search.Icon,strZip); } } } /*================================================================================== Search Functionality - does a google API search and loads the lats and longs required to place the icons on the map - THIS WILL NOT RUN LOCALLY ===================================================================================*/ function loadLocalInfo(strSearch,strIcon,strZip) { var objLocal:GoogleLocalSearch=new GoogleLocalSearch() objLocal.search(strSearch+" "+strZip,0,"0,0","","") objLocal.addEventListener(GoogleApiEvent.LOCAL_SEARCH_RESULT,onSearchComplete) function onSearchComplete(e:GoogleApiEvent):void { var resulta:GoogleSearchResult=e.data as GoogleSearchResult; //------------------------------------------------ // Load the icon for this particular search //------------------------------------------------ var request:URLRequest = new URLRequest(strIcon); var imageLoader:Loader = new Loader(); imageLoader.load(request); //------------------------------------------------------------- // For test purposes txtResult.appendText("Result Count for "+strSearch+" = "+e.data.results.length+"\r\n\r\n"); for each (var result:GoogleLocalSearchItem in e.data.results as Array) { LocalInfo[intCount]=[String(result.title),strIcon,String(result.latitude),String(result.longitude)]; //--------------------------------------- // Pop the icon onto the map //--------------------------------------- var objLatLng:LatLng = new LatLng(parseFloat(result.latitude), parseFloat(result.longitude)); var objMarkerOptions:MarkerOptions = new MarkerOptions(); objMarkerOptions.icon=imageLoader; objMarkerOptions.hasShadow=false; objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER; var objMarker:Marker = new Marker(objLatLng, objMarkerOptions); /********************************************************** *Everything* works to here - I have traced out execution and all variables. It only works on the last item in the array :( ***********************************************************/ map.addOverlay(objMarker); } } }

    Read the article

  • sorting dynamic table created by form inputs [migrated]

    - by mille
    i am having problems with sorting can someone help to sort this table not just by its form entry id but onclick with some other columns i tried a lot of plugins but cant get anything to work and i dont know what to do i am new at this i sorry for my english thanks. here is the js: var Animals ={ index: window.localStorage.getItem("Animals:index"), $table: document.getElementById("animals-table"), $form: document.getElementById("animals-form"), $button_save: document.getElementById("animals-save"), $button_discard: document.getElementById("animals-discard"), init: function() { if (!Animals.index) { window.localStorage.setItem("Animals:index", Animals.index = 1); } Animals.$form.reset(); Animals.$button_discard.addEventListener("click", function(event) { Animals.$form.reset(); Animals.$form.id_entry.value = 0; }, true); Animals.$form.addEventListener("submit", function(event) { var entry = { id: parseInt(this.id_entry.value), animal_id:this.animal_id.value, animal_name: this.animal_name.value, animal_type: this.animal_type.value, bday: this.bday.value, animal_sex: this.animal_sex.value, mother_name: this.mother_name.value, farm_name: this.farm_name.value, money: this.money.value, weight: this.weight.value, purchase_partner: this.purchase_partner.value }; if (entry.id === 0) { Animals.storeAdd(entry); Animals.tableAdd(entry); } else { // edit Animals.storeEdit(entry); Animals.tableEdit(entry); } this.reset(); this.id_entry.value = 0; event.preventDefault(); }, true); if (window.localStorage.length - 1) { var animals_list = [], i, key; for (i = 0; i < window.localStorage.length; i++) { key = window.localStorage.key(i); if (/Animals:\d+/.test(key)) { animals_list.push(JSON.parse(window.localStorage.getItem(key))); } } if (animals_list.length) { animals_list.sort(function(a, b) {return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);}) .forEach(Animals.tableAdd);} Animals.$table.addEventListener("click", function(event) { var op = event.target.getAttribute("data-op"); if (/edit|remove/.test(op)) { var entry = JSON.parse(window.localStorage.getItem("Animals:"+ event.target.getAttribute("data- id"))); if (op == "edit") { Animals.$form.id_entry.value = entry.id; Animals.$form.animal_id.value = entry.animal_id; Animals.$form.animal_name.value = entry.animal_name; Animals.$form.animal_type.value = entry.animal_type; Animals.$form.bday.value = entry.bday; Animals.$form.animal_sex.value = entry.animal_sex; Animals.$form.mother_name.value = entry.mother_name; Animals.$form.farm_name.value = entry.farm_name; Animals.$form.money.value = entry.money; Animals.$form.weight.value = entry.weight; Animals.$form.purchase_partner.value = entry.purchase_partner; } else if (op == "remove") { if (confirm('Are you sure you want to remove this animal from your list?' )) { Animals.storeRemove(entry); Animals.tableRemove(entry); } } event.preventDefault(); } }, true); }, storeAdd: function(entry) { entry.id = Animals.index; window.localStorage.setItem("Animals:index", ++Animals.index); window.localStorage.setItem("Animals:"+ entry.id, JSON.stringify(entry)); }, storeEdit: function(entry) { window.localStorage.setItem("Animals:"+ entry.id, JSON.stringify(entry)); }, storeRemove: function(entry) { window.localStorage.removeItem("Animals:"+ entry.id); }, tableAdd: function(entry) { var $tr = document.createElement("tr"), $td, key; for (key in entry) { if (entry.hasOwnProperty(key)) { $td = document.createElement("td"); $td.appendChild(document.createTextNode(entry[key])); $tr.appendChild($td); } } $td = document.createElement("td"); $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>'; $tr.appendChild($td); $tr.setAttribute("id", "entry-"+ entry.id); Animals.$table.appendChild($tr); }, tableEdit: function(entry) { var $tr = document.getElementById("entry-"+ entry.id), $td, key; $tr.innerHTML = ""; for (key in entry) { if (entry.hasOwnProperty(key)) { $td = document.createElement("td"); $td.appendChild(document.createTextNode(entry[key])); $tr.appendChild($td); } } $td = document.createElement("td"); $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>'; $tr.appendChild($td); }, tableRemove: function(entry) { Animals.$table.removeChild(document.getElementById("entry-"+ entry.id)); } }; Animals.init();

    Read the article

  • Metro Walkthrough: Creating a Task List with a ListView and IndexedDB

    - by Stephen.Walther
    The goal of this blog entry is to describe how you can work with data in a Metro style application written with JavaScript. In particular, we create a super simple Task List application which enables you to create and delete tasks. Here’s a video which demonstrates how the Task List application works: In order to build this application, I had to take advantage of several features of the WinJS library and technologies including: IndexedDB – The Task List application stores data in an IndexedDB database. HTML5 Form Validation – The Task List application uses HTML5 validation to ensure that a required field has a value. ListView Control – The Task List application displays the tasks retrieved from the IndexedDB database in a WinJS ListView control. Creating the IndexedDB Database The Task List application stores all of its data in an IndexedDB database named TasksDB. This database is opened/created with the following code: var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; The msIndexedDB.open() method accepts two parameters: the name of the database to open and the version of the database to open. If a database with a matching version already exists, then calling the msIndexedDB.open() method opens a connection to the existing database. If the database does not exist then the upgradeneeded event is raised. You handle the upgradeneeded event to create a new database. In the code above, the upgradeneeded event handler creates an object store named “tasks” (An object store roughly corresponds to a database table). When you add items to the tasks object store then each item gets an id property with an auto-incremented value automatically. The code above also includes an error event handler. If the IndexedDB database cannot be opened or created, for whatever reason, then an error message is written to the Visual Studio JavaScript Console window. Displaying a List of Tasks The TaskList application retrieves its list of tasks from the tasks object store, which we created above, and displays the list of tasks in a ListView control. Here is how the ListView control is declared: <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> The ListView control is bound to the TaskList.tasks.dataSource data source. The TaskList.tasks.dataSource is created with the following code: // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); }; }; }; // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks }); Notice the success event handler. This handler is called when a database is successfully opened/created. In the code above, all of the items from the tasks object store are retrieved into a cursor and added to a WinJS.Binding.List object named tasks. Because the ListView control is bound to the WinJS.Binding.List object, copying the tasks from the object store into the WinJS.Binding.List object causes the tasks to appear in the ListView: Adding a New Task You add a new task in the Task List application by entering the title of a new task into an HTML form and clicking the Add button. Here’s the markup for creating the form: <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> Notice that the INPUT element includes a required attribute. In a Metro application, you can take advantage of HTML5 Validation to validate form fields. If you don’t enter a value for the newTaskTitle field then the following validation error message is displayed: For a brief introduction to HTML5 validation, see my previous blog entry: http://stephenwalther.com/blog/archive/2012/03/13/html5-form-validation.aspx When you click the Add button, the form is submitted and the form submit event is raised. The following code is executed in the default.js file: // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); The code above retrieves the title of the new task and calls the addTask() method in the tasks.js file. Here’s the code for the addTask() method which is responsible for actually adding the new task to the IndexedDB database: // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", "readwrite"); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } The code above does two things. First, it adds the new task to the tasks object store in the IndexedDB database. Second, it adds the new task to the data source bound to the ListView. The dataSource.insertAtEnd() method is called to add the new task to the data source so the new task will appear in the ListView (with a nice little animation). Deleting Existing Tasks The Task List application enables you to select one or more tasks by clicking or tapping on one or more tasks in the ListView. When you click the Delete button, the selected tasks are removed from both the IndexedDB database and the ListView. For example, in the following screenshot, two tasks are selected. The selected tasks appear with a teal background and a checkmark: When you click the Delete button, the following code in the default.js file is executed: // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); The selected tasks are retrieved with the TaskList selection.getItem() method. In the code above, the deleteTask() method is called for each of the selected tasks. Here’s the code for the deleteTask() method: // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", “readwrite”); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } This code does two things: it deletes the existing task from the database and removes the existing task from the ListView. In both cases, the right task is removed by using the key associated with the task. However, the task key is different in the case of the database and in the case of the ListView. In the case of the database, the task key is the value of the task id property. In the case of the ListView, on the other hand, the task key is auto-generated by the ListView. When the task is removed from the ListView, an animation is used to collapse the tasks which appear above and below the task which was removed. The Complete Code Above, I did a lot of jumping around between different files in the application and I left out sections of code. For the sake of completeness, I want to include the entire code here: the default.html, default.js, and tasks.js files. Here are the contents of the default.html file. This file contains the UI for the Task List application: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task List</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> <!-- TaskList references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> <script type="text/javascript" src="js/tasks.js"></script> <style type="text/css"> body { font-size: x-large; } form { display: inline; } #appContainer { margin: 20px; width: 600px; } .win-container { padding: 10px; } </style> </head> <body> <div> <!-- Templates --> <div id="taskTemplate" data-win-control="WinJS.Binding.Template"> <div> <span data-win-bind="innerText:title"></span> </div> </div> <h1>Super Task List</h1> <div id="appContainer"> <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> <button id="btnDeleteTasks">Delete</button> <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> </div> </div> </body> </html> Here is the code for the default.js file. This code wires up the Add Task form and Delete button: (function () { "use strict"; var app = WinJS.Application; app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { WinJS.UI.processAll().then(function () { // Get reference to Tasks ListView var tasksListView = document.getElementById("tasksListView"); // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); }); } }; app.start(); })(); Finally, here is the tasks.js file. This file contains all of the code for opening, creating, and interacting with IndexedDB: (function () { "use strict"; // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); }; }; }; // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", "readwrite"); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", "readwrite"); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks, addTask: addTask, deleteTask: deleteTask }); })(); Summary I wrote this blog entry because I wanted to create a walkthrough of building a simple database-driven application. In particular, I wanted to demonstrate how you can use a ListView control with an IndexedDB database to store and retrieve database data.

    Read the article

  • Metro Walkthrough: Creating a Task List with a ListView and IndexedDB

    - by Stephen.Walther
    The goal of this blog entry is to describe how you can work with data in a Metro style application written with JavaScript. In particular, we create a super simple Task List application which enables you to create and delete tasks. Here’s a video which demonstrates how the Task List application works: In order to build this application, I had to take advantage of several features of the WinJS library and technologies including: IndexedDB – The Task List application stores data in an IndexedDB database. HTML5 Form Validation – The Task List application uses HTML5 validation to ensure that a required field has a value. ListView Control – The Task List application displays the tasks retrieved from the IndexedDB database in a WinJS ListView control. Creating the IndexedDB Database The Task List application stores all of its data in an IndexedDB database named TasksDB. This database is opened/created with the following code: var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; The msIndexedDB.open() method accepts two parameters: the name of the database to open and the version of the database to open. If a database with a matching version already exists, then calling the msIndexedDB.open() method opens a connection to the existing database. If the database does not exist then the upgradeneeded event is raised. You handle the upgradeneeded event to create a new database. In the code above, the upgradeneeded event handler creates an object store named “tasks” (An object store roughly corresponds to a database table). When you add items to the tasks object store then each item gets an id property with an auto-incremented value automatically. The code above also includes an error event handler. If the IndexedDB database cannot be opened or created, for whatever reason, then an error message is written to the Visual Studio JavaScript Console window. Displaying a List of Tasks The TaskList application retrieves its list of tasks from the tasks object store, which we created above, and displays the list of tasks in a ListView control. Here is how the ListView control is declared: <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> The ListView control is bound to the TaskList.tasks.dataSource data source. The TaskList.tasks.dataSource is created with the following code: // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; tasks.dataSource.beginEdits(); if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); } else { tasks.dataSource.endEdits(); }; }; }; // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks }); Notice the success event handler. This handler is called when a database is successfully opened/created. In the code above, all of the items from the tasks object store are retrieved into a cursor and added to a WinJS.Binding.List object named tasks. Because the ListView control is bound to the WinJS.Binding.List object, copying the tasks from the object store into the WinJS.Binding.List object causes the tasks to appear in the ListView: Adding a New Task You add a new task in the Task List application by entering the title of a new task into an HTML form and clicking the Add button. Here’s the markup for creating the form: <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> Notice that the INPUT element includes a required attribute. In a Metro application, you can take advantage of HTML5 Validation to validate form fields. If you don’t enter a value for the newTaskTitle field then the following validation error message is displayed: For a brief introduction to HTML5 validation, see my previous blog entry: http://stephenwalther.com/blog/archive/2012/03/13/html5-form-validation.aspx When you click the Add button, the form is submitted and the form submit event is raised. The following code is executed in the default.js file: // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); The code above retrieves the title of the new task and calls the addTask() method in the tasks.js file. Here’s the code for the addTask() method which is responsible for actually adding the new task to the IndexedDB database: // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } The code above does two things. First, it adds the new task to the tasks object store in the IndexedDB database. Second, it adds the new task to the data source bound to the ListView. The dataSource.insertAtEnd() method is called to add the new task to the data source so the new task will appear in the ListView (with a nice little animation). Deleting Existing Tasks The Task List application enables you to select one or more tasks by clicking or tapping on one or more tasks in the ListView. When you click the Delete button, the selected tasks are removed from both the IndexedDB database and the ListView. For example, in the following screenshot, two tasks are selected. The selected tasks appear with a teal background and a checkmark: When you click the Delete button, the following code in the default.js file is executed: // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); The selected tasks are retrieved with the TaskList selection.getItem() method. In the code above, the deleteTask() method is called for each of the selected tasks. Here’s the code for the deleteTask() method: // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } This code does two things: it deletes the existing task from the database and removes the existing task from the ListView. In both cases, the right task is removed by using the key associated with the task. However, the task key is different in the case of the database and in the case of the ListView. In the case of the database, the task key is the value of the task id property. In the case of the ListView, on the other hand, the task key is auto-generated by the ListView. When the task is removed from the ListView, an animation is used to collapse the tasks which appear above and below the task which was removed. The Complete Code Above, I did a lot of jumping around between different files in the application and I left out sections of code. For the sake of completeness, I want to include the entire code here: the default.html, default.js, and tasks.js files. Here are the contents of the default.html file. This file contains the UI for the Task List application: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task List</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script> <!-- TaskList references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> <script type="text/javascript" src="js/tasks.js"></script> <style type="text/css"> body { font-size: x-large; } form { display: inline; } #appContainer { margin: 20px; width: 600px; } .win-container { padding: 10px; } </style> </head> <body> <div> <!-- Templates --> <div id="taskTemplate" data-win-control="WinJS.Binding.Template"> <div> <span data-win-bind="innerText:title"></span> </div> </div> <h1>Super Task List</h1> <div id="appContainer"> <form id="addTaskForm"> <input id="newTaskTitle" title="New Task" required /> <button>Add</button> </form> <button id="btnDeleteTasks">Delete</button> <div id="tasksListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: TaskList.tasks.dataSource, itemTemplate: select('#taskTemplate'), tapBehavior: 'toggleSelect', selectionMode: 'multi', layout: { type: WinJS.UI.ListLayout } }"> </div> </div> </div> </body> </html> Here is the code for the default.js file. This code wires up the Add Task form and Delete button: (function () { "use strict"; var app = WinJS.Application; app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { WinJS.UI.processAll().then(function () { // Get reference to Tasks ListView var tasksListView = document.getElementById("tasksListView"); // Handle Add Task document.getElementById("addTaskForm").addEventListener("submit", function (evt) { evt.preventDefault(); var newTaskTitle = document.getElementById("newTaskTitle"); TaskList.addTask({ title: newTaskTitle.value }); newTaskTitle.value = ""; }); // Handle Delete Tasks document.getElementById("btnDeleteTasks").addEventListener("click", function (evt) { tasksListView.winControl.selection.getItems().then(function(items) { items.forEach(function (item) { TaskList.deleteTask(item); }); }); }); }); } }; app.start(); })(); Finally, here is the tasks.js file. This file contains all of the code for opening, creating, and interacting with IndexedDB: (function () { "use strict"; // Create the data source var tasks = new WinJS.Binding.List(); // Open the database var db; var req = window.msIndexedDB.open("TasksDB", 1); req.onerror = function () { console.log("Could not open database"); }; req.onupgradeneeded = function (evt) { var newDB = evt.target.result; newDB.createObjectStore("tasks", { keyPath: "id", autoIncrement:true }); }; // Load the data source with data from the database req.onsuccess = function () { db = req.result; var tran = db.transaction("tasks"); tran.objectStore("tasks").openCursor().onsuccess = function(event) { var cursor = event.target.result; tasks.dataSource.beginEdits(); if (cursor) { tasks.dataSource.insertAtEnd(null, cursor.value); cursor.continue(); } else { tasks.dataSource.endEdits(); }; }; }; // Add a new task function addTask(taskToAdd) { var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var addRequest = transaction.objectStore("tasks").add(taskToAdd); addRequest.onsuccess = function (evt) { taskToAdd.id = evt.target.result; tasks.dataSource.insertAtEnd(null, taskToAdd); } } // Delete an existing task function deleteTask(listViewItem) { // Database key != ListView key var dbKey = listViewItem.data.id; var listViewKey = listViewItem.key; // Remove item from db and, if success, remove item from ListView var transaction = db.transaction("tasks", IDBTransaction.READ_WRITE); var deleteRequest = transaction.objectStore("tasks").delete(dbKey); deleteRequest.onsuccess = function () { tasks.dataSource.remove(listViewKey); } } // Expose the data source and functions WinJS.Namespace.define("TaskList", { tasks: tasks, addTask: addTask, deleteTask: deleteTask }); })(); Summary I wrote this blog entry because I wanted to create a walkthrough of building a simple database-driven application. In particular, I wanted to demonstrate how you can use a ListView control with an IndexedDB database to store and retrieve database data.

    Read the article

  • Optimizing transition/movement smoothness for a 2D flash game.

    - by Tom
    Update 6: Fenomenas suggested me to re-create everything as simple as possible. I had my doubts that this would make any difference as the algorithm remains the same, and performance did not seem to be the issue. Anyway, it was the only suggestion I got so here it is: 30 FPS: http://www.feedpostal.com/test/simple/30/SimpleMovement.html 40 FPS: http://www.feedpostal.com/test/simple/40/SimpleMovement.html 60 FPS: http://www.feedpostal.com/test/simple/60/SimpleMovement.html 100 FPS: http://www.feedpostal.com/test/simple/100/SimpleMovement.html The code: package { import flash.display.Sprite; import flash.events.Event; import flash.events.KeyboardEvent; import flash.utils.getTimer; [SWF(width="800", height="600", frameRate="40", backgroundColor="#000000")] public class SimpleMovement extends Sprite { private static const TURNING_SPEED:uint = 180; private static const MOVEMENT_SPEED:uint = 400; private static const RADIAN_DIVIDE:Number = Math.PI/180; private var playerObject:Sprite; private var shipContainer:Sprite; private var moving:Boolean = false; private var turningMode:uint = 0; private var movementTimestamp:Number = getTimer(); private var turningTimestamp:Number = movementTimestamp; public function SimpleMovement() { //step 1: create player object playerObject = new Sprite(); playerObject.graphics.lineStyle(1, 0x000000); playerObject.graphics.beginFill(0x6D7B8D); playerObject.graphics.drawRect(0, 0, 25, 50); //make it rotate around the center playerObject.x = 0 - playerObject.width / 2; playerObject.y = 0 - playerObject.height / 2; shipContainer = new Sprite(); shipContainer.addChild(playerObject); shipContainer.x = 100; shipContainer.y = 100; shipContainer.rotation = 180; addChild(shipContainer); //step 2: install keyboard hook when stage is ready addEventListener(Event.ADDED_TO_STAGE, stageReady, false, 0, true); //step 3: install rendering update poll addEventListener(Event.ENTER_FRAME, updatePoller, false, 0, true); } private function updatePoller(event:Event):void { var newTime:Number = getTimer(); //turning if (turningMode != 0) { var turningDeltaTime:Number = newTime - turningTimestamp; turningTimestamp = newTime; var rotation:Number = TURNING_SPEED * turningDeltaTime / 1000; if (turningMode == 1) shipContainer.rotation -= rotation; else shipContainer.rotation += rotation; } //movement if (moving) { var movementDeltaTime:Number = newTime - movementTimestamp; movementTimestamp = newTime; var distance:Number = MOVEMENT_SPEED * movementDeltaTime / 1000; var rAngle:Number = shipContainer.rotation * RADIAN_DIVIDE; //convert degrees to radian shipContainer.x += distance * Math.sin(rAngle); shipContainer.y -= distance * Math.cos(rAngle); } } private function stageReady(event:Event):void { //install keyboard hook stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown, false, 0, true); stage.addEventListener(KeyboardEvent.KEY_UP, keyUp, false, 0, true); } private final function keyDown(event:KeyboardEvent):void { if ((event.keyCode == 87) && (!moving)) //87 = W { movementTimestamp = getTimer(); moving = true; } if ((event.keyCode == 65) && (turningMode != 1)) //65 = A { turningTimestamp = getTimer(); turningMode = 1; } else if ((event.keyCode == 68) && (turningMode != 2)) //68 = D { turningTimestamp = getTimer(); turningMode = 2; } } private final function keyUp(event:KeyboardEvent):void { if ((event.keyCode == 87) && (moving)) moving = false; //87 = W if (((event.keyCode == 65) || (event.keyCode == 68)) && (turningMode != 0)) turningMode = 0; //65 = A, 68 = D } } } The results were as I expected. Absolutely no improvement. I really hope that someone has another suggestion as this thing needs fixing. Also, I doubt it's my system as I have a pretty good one (8GB RAM, Q9550 QuadCore intel, ATI Radeon 4870 512MB). Also, everyone else I asked so far had the same issue with my client. Update 5: another example of a smooth flash game just to demonstrate that my movement definitely is different! See http://www.spel.nl/game/bumpercraft.html Update 4: I traced the time before rendering (EVENT.RENDER) and right after rendering (EVENT.ENTER_FRAME), the results: rendering took: 14 ms rendering took: 14 ms rendering took: 12 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 14 ms rendering took: 12 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 14 ms rendering took: 12 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 14 ms rendering took: 14 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 24 ms rendering took: 18 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 232 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms rendering took: 14 ms rendering took: 16 ms rendering took: 12 ms rendering took: 14 ms rendering took: 12 ms The range is 12-16 ms. During these differences, the shocking/warping/flickering movement was already going on. There is also 1 peak of 232ms, at this time there was a relatively big warp. This is however not the biggest problme, the biggest problem are the continuous small warps during normal movement. Does this give anyone a clue? Update 3: After testing, I know that the following factors are not causing my problem: Bitmap's quality - changed with photoshop to an uglier 8 colours optimized graphic, no improvement at all. Constant rotation of image while turning - disabled it, no improvement at all Browser rendering - tried to use the flash player standalone, no improvement at all I am 100% convinced that the problem lies in either my code or in my algorithm. Please, help me out. It has been almost two weeks (1 week that I asked this question on SO) now and I still have to get my golden answer. Update 1: see bottom for full flex project source and a live demo demonstrating my problem. I'm working on a 2d flash game. Player ships are created as an object: ships[id] = new GameShip(); When movement and rotation information is available, this is being directed to the corresponding ship: ships[id].setMovementMode(1); //move forward Now, within this GameShip object movement works using the "Event.ENTER_FRAME" event: addEventListener(Event.ENTER_FRAME, movementHandler); The following function is then being run: private final function movementHandler(event:Event):void { var newTimeStamp:uint = UtilLib.getTimeStamp(); //set current timeStamp var distance:Number = (newTimeStamp - movementTimeStamp) / 1000 * movementSpeed; //speed = x pixels forward every 1 second movementTimeStamp = newTimeStamp; //update old timeStamp var diagonalChange:Array = getDiagonalChange(movementAngle, distance); //the diagonal position update based on angle and distance charX += diagonalChange[0]; charY += diagonalChange[1]; if (shipContainer) { //when the container is ready to be worked with shipContainer.x = charX; shipContainer.y = charY; } } private final function getDiagonalChange(angle:Number, distance:Number):Array { var rAngle:Number = angle * Math.PI/180; //convert degrees to radian return [Math.sin(rAngle) * distance, (Math.cos(rAngle) * distance) * -1]; } When the object is no longer moving, the event listener will be removed. The same method is being used for rotation. Everything works almost perfect. I've set the project's target FPS to 100 and created a FPS counter. According to the FPS counter, the average FPS in firefox is around 100, while the top is 1000 and the bottom is 22. I think that the bottom and top FPSs are only happening during the initialization of the client (startup). The problem is that the ship appears to be almost perfectly smooth, while it should be just that without the "almost" part. It's almost as if the ship is "flickering" very very fast, you can't actually see it but it's hard to focus on the object while it's moving with your eyes. Also, every now and then, there seems to be a bit of a framerate spike, as if the client is skipping a couple of frames, you then see it quickly warp. It is very difficult to explain what the real problem is, but in general it's that the movement is not perfectly smooth. So, do you have any suggestions on how to make the movement or transition of objects perfectly smooth? Update 1: I re-created the client to demonstrate my problem. Please check it out. The client: http://feedpostal.com/test/MovementTest.html The Actionscript Project (full source): http://feedpostal.com/test/MovementTest.rar An example of a smooth flash game (not created by me): http://www.gamesforwork.com/games/swf/Mission%20Racing_august_10th_2009.swf It took me a pretty long time to recreate this client side version, I hope this will help with solving the problem. Please note: yes, it is actually pretty smooth. But it is definitely not smooth enough.

    Read the article

  • FlexUnit nested async tests

    - by sharvey
    I'm trying to test some async functionality in flex 4. My test has two stages : var loader:MySuperLoader = new MySuperLoader() loader.load('foo.swf'); loader.addEventListener(Event.COMPLETE, Async.asyncHandler(this, function(e:Event):void { loader.removeEventListener(Event.COMPLETE, arguments.callee); var foo:* = loader.content; loader.load('bar.swf'); loader.addEventListener(Event.COMPLETE, Async.asyncHandler(this, function(e:Event):void { /* This call to asyncHandler generates the error */ }, 5000)); }, 5000)); The second call to asyncHandler generates an error saying : Error: Cannot add asynchronous functionality to methods defined by Test,Before or After that are not marked async Is there a way to test such funcitonality?

    Read the article

  • JavaScript: Keeping track of eventListeners on DOM elements

    - by bobthabuilda
    What is the best way to keep track of eventListener functions on DOM elements? Should I add a property to the element which references the function like this: var elem = document.getElementsByTagName( 'p' )[0]; function clickFn(){}; elem.listeners = { click: [clickFn, function(){}] }; elem.addEventListener( 'click', function(e){ clickFn(e); }, false ); Or should I store it in my own variable in my code like below: var elem = document.getElementsByTagName( 'p' )[0]; function clickFn(){}; // Using window for the sake of brevity, otherwise I wouldn't =D // DOM elements and their listeners are referenced here in a paired array window.listeners = [elem, { click: [clickFn, function(){}] }]; elem.addEventListener( 'click', function(e){ clickFn(e); }, false ); Obviously the second method would be less obtrusive, but it seems it could get intensive iterating through all those possibilities. Which is the best way and why? Is there a better way?

    Read the article

  • Firefox logs invalid URL?

    - by thanks for help
    I'm writing an extension for firefox. Using dom.location to keep track of visited search results pages, i'm getting this url http://www.google.com/search?hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=642c18fb4411ca2e . If you click it, the google search results for "hi" should come up. You'll know that from the title bar - because the rest of the page won't load. This happens with any google search. Oddly enough, if you cut part of it off, so say, http://www.google.com/search?hl=en&source=hp&q=hi - it works! But Googling "hi" myself does give me a longish URL - http://www.google.com/#hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=db658cc5049dc510 . I know for a fact that the first time that URL was visited, the page loaded, I did it myself. Can anyone make reason out of this? I just tried my experiment again, this time saving the original URL in the location bar. It turns out, dom.location.href is giving a different value. How is this happening? Original: http://www.google.com/#hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=642c18fb4411ca2e dom.location.href http://www.google.com/search?hl=en&source=hp&q=hi&aq=f&aqi=&oq=&fp=642c18fb4411ca2e window.addEventListener("load", function() { myExtension.init(); }, false); var myExtension = { init: function() { var appcontent = document.getElementById("appcontent"); // browser if(appcontent) appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true); var messagepane = document.getElementById("messagepane"); // mail if(messagepane) messagepane.addEventListener("load", function () { myExtension.onPageLoad(); }, true); }, onPageLoad: function(aEvent) { var doc = aEvent.originalTarget; // doc is document that triggered "onload" event // do something with the loaded page. // doc.location is a Location object (see below for a link). // You can use it to make your code executed on certain pages only. var url = doc.location.href; if (url.match(/(?:p|q)(?:=)([^%]*)/)) {alert("MATCH" + url);resultsPages.push(url);} else {alert(url); } } This snippet comes directly from Mozilla with the matching and alerts my own. I apologize for not posting the code earlier.

    Read the article

  • as3 - controlling flicker when scaling up a button or movieclip

    - by sol
    This is a situation I run into a lot but never seem to find a good solution. I have movieclips that I scale up slightly on rollover, but if you hover over the edge of the movieclip it just sits there and flickers, continuously receiving mouseOver and mouseOut events. How do you deal with this? Again, it's usually a problem when tweening the scale of a movieclip or button. my_mc.addEventListener(MouseEvent.MOUSE_OVER, mOver); my_mc.addEventListener(MouseEvent.MOUSE_OUT, mOut); private function mOver(m:MouseEvent) { TweenLite.to(m.target, .2, { scaleX:1.1, scaleY:1.1} ); } private function mOut(m:MouseEvent) { TweenLite.to(m.target, .2, { scaleX:1, scaleY:1} ); }

    Read the article

  • Calling AS3 function from html link - Javascript? php? swfaddress?

    - by wdense51
    I have an actionscript function that loads an external swf and is currently linked to a button in the same swf... function btnClick(event:MouseEvent):void{ SoundMixer.stopAll(); removeChild(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onSWFLoaded); loader.load(movieSWF) loader.x=Xpos loader.y=Ypos addChild(loader) } button.addEventListener(MouseEvent.CLICK,btnClick); I'm wondering if there is a way to call this function from a link on the page that the swf is housed on. I'm guessing javascript, php or swfaddress would be the most likely way, but I'm unbelievably new to all this so I'm not sure where to start or how to go about it. Any help would be appreciated.

    Read the article

  • Google Maps Rollover Problem in a Flex Website

    - by Laxmidi
    Hi, I'm using Google Maps in my Flex site to create a map. I've got polygons overlayed on the map. When the user rolls over a polygon an infowindow opens identifying the area and the fill Alpha of the area is set to 0. On roll-out, the info window is removed and the fill Alpha is returned to the default, 0.2. The polygons display and the InfoWindow is added and removed correctly. The problem is that the change in fill alpha only occurs on the very last polygon in the list. So for example, if I have polygons A, B, C, and D. If I rollover A, then A's alpha should change. But, instead D's alpha changes. No matter which polygon I rollover, the last polygon's alpha changes. It's weird, because the infoWindows behave correctly on rollover. So, if I rollover polygon A, the correct information for InfoWindow A appears. Please see the code below: private function allEncodedPolygons(event:MouseEvent) : void { var myPaneManager:IPaneManager = map.getPaneManager(); var myMapPane:IPane = myPaneManager.createPane(); if (allHoodsToggle.selected) { map.clearOverlays(); mapType.selectedIndex = -1; for each (var neighbNode:XML in detailMapResultData){ outlinePolygon = this.createPoly(neighbNode); map.addOverlay(outlinePolygon)}; allHoodsToggle.removeEventListener(MouseEvent.CLICK, allEncodedPolygons); } else {myPaneManager.clearOverlays(); allHoodsToggle.removeEventListener(MouseEvent.CLICK, allEncodedPolygons); } } The function below creates the polygons and has the rollover function: private var neighbShapes:Polygon; private function createPoly(neighbNode:XML):Polygon { var optionsDefault:PolygonOptions = new PolygonOptions( { strokeStyle: {thickness: 5, color: 0xFFFF00, alpha: 0.4, pixelHinting: true}, fillStyle: { alpha: 0.2 }} ); var neighbCenterLat:Number = neighbNode.latitudeCenter.toString(); var neighbCenterLong:Number = neighbNode.longitudeCenter.toString(); var neighbCenter:LatLng = new LatLng(neighbCenterLat,neighbCenterLong); var optionsHover:PolygonOptions = new PolygonOptions( { fillStyle: { alpha: 0.0 }} ); var encodedData:EncodedPolylineData = new EncodedPolylineData(neighbNode.encoding.toString(), neighbNode.zoomFactor.toString(), neighbNode.level.toString(), neighbNode.numlevels.toString()); var encodedList:Array = [encodedData]; neighbShapes = Polygon.fromEncoded(encodedList, optionsDefault); neighbShapes.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void { map.openInfoWindow(event.latLng, new InfoWindowOptions({content: neighbNode.name.toString(), hasCloseButton:false, hasShadow:true})); }); neighbShapes.addEventListener(MapMouseEvent.ROLL_OVER, function(event:MapMouseEvent): void { neighbShapes.setOptions(optionsHover); map.openInfoWindow(neighbCenter, new InfoWindowOptions({content: neighbNode.name.toString(), hasCloseButton:false, hasShadow:false})); }); neighbShapes.addEventListener(MapMouseEvent.ROLL_OUT, function(event:MapMouseEvent): void { neighbShapes.setOptions(optionsDefault); }); return neighbShapes; } Any suggestions as to why the function that changes the alpha is firing on the last polygon only, even though the InfoWindow appears correctly? If anyone has any ideas, I'd love to hear them. Thanks. -Laxmidi

    Read the article

  • Timer with random seconds ¿How to update the random seconds?

    - by benLIVE
    I have a timer "tmr_sendCesta" which must be called each x seconds between 1 and 3 seconds. The problem is the timer "tmr_sendCesta" is called only one time, and the random seconds is never updated. I need to call the function "createCesta" each x seconds randomly. Any idea how to do it? function createCesta() cesta = display.newImageRect("cesta.png", 100, 55) cesta.x = -110 cesta.y = screenH - 110 cesta.name = "cesta" physics.addBody( cesta, physicsData:get("cestaSmall")) grupoCesta:insert(cesta) transition.to(cesta, {time = 4000, x = screenW + 110}) end function scene:enterScene( event ) local group = self.view physics.start() Runtime:addEventListener("touch", touchScreen) Runtime:addEventListener( "collision", onCollision ) tmr_sendCesta = timer.performWithDelay((math.random(1000, 3000), randomCesta, 0) end

    Read the article

  • How to smooth an image loaded with FileReference?

    - by Lost_in_code
    Been trying to smooth images loaded with FileReferece with no luck. Below is the code I'm using: fileRef = new FileReference(); fileRef.addEventListener(Event.COMPLETE, fileLoaded); private function fileLoaded(e:Event):void{ var ldr:Loader = new Loader(); ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void{ var bm:Bitmap = Bitmap(e.target.content as Bitmap); bm.smoothing = true; img.load(bm) }); ldr.loadBytes(fileRef.data); } <custom:SWFLoaderAdvanced id="img"/> bm.smoothing should've smoothened the loaded image, but for some reason it doesn't. Am I missing something here? Note: SWFLoaderAdvanced automatically smoothens any image that's loaded inside it. It works perfectly with loaded images other than the ones loaded with FileReference.

    Read the article

  • Flex: HTTP request error #2032

    - by alexey
    In Flex 3 application I use HTTPService class to make requests to the server: var http:HTTPService = new HTTPService(); http.method = 'POST'; http.url = hostUrl; http.resultFormat = 'e4x'; http.addEventListener(ResultEvent.RESULT, ...); http.addEventListener(FaultEvent.FAULT, ...); http.send(params); The application has Comet-architecture. So it makes long running requests. While waiting a response for this request, other requests can be made concurrently. The application works in most cases. But sometimes some clients get HTTP request error executing long running request: faultCode:Server.Error.Request faultString:'HTTP request error' faultDetail:'Error: [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2032"]. URL: 'http://example.com/ws' I think it depends on user's browser. Any ideas?

    Read the article

  • count clicks using actionscript 3.0 in flash

    - by Michael Stone
    I want to change the variable value based on the number of clicks. So if you click the button once, the cCount should equal 1 and twice it should equal 2. Right now all I'm returning for the value is 0, no matter the amount of clicks. Any ideas? btnRaw.addEventListener(MouseEvent.CLICK, flip); btnRaw.addEventListener(MouseEvent.MOUSE_UP,count); //create the flipping function //create the variable to store the click count var cCount:Number = 0; function flip(Event:MouseEvent):void{ raw_patty_mc.gotoAndPlay(1); } function count(Event:MouseEvent):void{ cCount = cCount+1; if(cCount>3 || cCount<6){ titleText.text="See you're doing a great job at flipping the burger! "+String(cCount); } }

    Read the article

  • Flash AS3 - Display an error if the XML if incorrect

    - by ongoingworlds
    Hi, I'm creating a flash application which loads in some XML which is generated dynamically from the CMS. I want to display an error in case the XML file isn't formatted correctly. When I test this with incorrectly formatted XML, it will just get to the line myXML = XML(myLoader.data); and then just bomb out. How can I catch the error, display a message to the user, but the flash program to continue as normal. var myXMLURL:URLRequest = new URLRequest(XMLfile); var myLoader:URLLoader = new URLLoader(myXMLURL); myLoader.addEventListener(Event.COMPLETE, xmlLoaded); myLoader.addEventListener(IOErrorEvent.IO_ERROR, xmlFailed); var myXML:XML; //--when the xml is loaded, do this function xmlLoaded(e:Event):void { myXML = XML(myLoader.data); trace("XML = "+myXML); } //--if the xml fails to load, do this function xmlFailed(event:IOErrorEvent):void { errorMsg.text = "The XML file cannot be found" }

    Read the article

  • how to load external xml using air application for flash programmer ?

    - by Ayman
    hi, i have faced this problem couple of days ago, while trying to import an external xml file into an AIR application. import flash.net.URLRequest; var ldr:Loader = new Loader(); var url:String = "http://willperone.net/rss.php"; var urlReq:URLRequest = new URLRequest(url); ldr.load(urlReq); ldr.addEventListener(Event.COMPLETE , function(e) { trace('Wow, completed ...'); }); ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, function(e) { trace('IO_ERROR'); }); and always the IO_ERROR shows up. may i do it wrong or something needs a little of configuration, so please help

    Read the article

  • Add child to scene from within a class.

    - by Fecal Brunch
    Hi, I'm new to flash in general and have been writing a program with two classes that extend MovieClip (Stems and Star). I need to create a new Stems object as a child of the scene when the user stops dragging a Star object, but do not know how to reference the scene from within the Star class's code. I've tried passing the scene into the constructor of the Star and doing sometihng like: this.scene.addChild (new Stems ()); But apparently that's not how to do it... Below is the code for Stems and Stars, any advice would be appreciated greatly. package { import flash.display.MovieClip; import flash.events.*; import flash.utils.Timer; public class Stems extends MovieClip { public const centreX=1026/2; public const centreY=600/2; public var isFlowing:Boolean; public var flowerType:Number; public const outerLimit=210; public const innerLimit=100; public function Stems(fType:Number) { this.isFlowing=false; this.scaleX=this.scaleY= .0007* distanceFromCentre(this.x, this.y); this.setXY(); trace(distanceFromCentre(this.x, this.y)); if (fType==2) { gotoAndStop("Aplant"); } } public function distanceFromCentre(X:Number, Y:Number):int { return (Math.sqrt((X-centreX)*(X-centreX)+(Y-centreY)*(Y-centreY))); } public function rotateAwayFromCentre():void { var theX:int=centreX-this.x; var theY:int = (centreY - this.y) * -1; var angle = Math.atan(theY/theX)/(Math.PI/180); if (theX<0) { angle+=180; } if (theX>=0&&theY<0) { angle+=360; } this.rotation = ((angle*-1) + 90)+180; } public function setXY() { do { var tempX=Math.random()*centreX*2; var tempY=Math.random()*centreY*2; } while (distanceFromCentre (tempX, tempY)>this.outerLimit || distanceFromCentre (tempX, tempY)<this.innerLimit); this.x=tempX; this.y=tempY; rotateAwayFromCentre(); } public function getFlowerType():Number { return this.flowerType; } } } package { import flash.display.MovieClip; import flash.events.*; import flash.utils.Timer; public class Star extends MovieClip { public const sWide=1026; public const sTall=600; public var startingX:Number; public var startingY:Number; public var starColor:Number; public var flicker:Timer; public var canUpdatePos:Boolean=true; public const innerLimit=280; public function Star(color:Number, basefl:Number, factorial:Number) { this.setXY(); this.starColor=color; this.flicker = new Timer (basefl + factorial * (Math.ceil(100* Math.random ()))); this.flicker.addEventListener(TimerEvent.TIMER, this.tick); this.addEventListener(MouseEvent.MOUSE_OVER, this.hover); this.addEventListener(MouseEvent.MOUSE_UP, this.drop); this.addEventListener(MouseEvent.MOUSE_DOWN, this.drag); this.addChild (new Stems (2)); this.flicker.start(); this.updateAnimation(0, false); } public function distanceOK(X:Number, Y:Number):Boolean { if (Math.sqrt((X-(sWide/2))*(X-(sWide/2))+(Y-(sTall/2))*(Y-(sTall/2)))>innerLimit) { return true; } else { return false; } } public function setXY() { do { var tempX=this.x=Math.random()*sWide; var tempY=this.y=Math.random()*sTall; } while (distanceOK (tempX, tempY)==false); this.startingX=tempX; this.startingY=tempY; } public function tick(event:TimerEvent) { if (this.canUpdatePos) { this.setXY(); } this.updateAnimation(0, false); this.updateAnimation(this.starColor, false); } public function updateAnimation(color:Number, bright:Boolean) { var brightStr:String; if (bright) { brightStr="bright"; } else { brightStr="low"; } switch (color) { case 0 : this.gotoAndStop("none"); break; case 1 : this.gotoAndStop("N" + brightStr); break; case 2 : this.gotoAndStop("A" + brightStr); break; case 3 : this.gotoAndStop("F" + brightStr); break; case 4 : this.gotoAndStop("E" + brightStr); break; case 5 : this.gotoAndStop("S" + brightStr); break; } } public function hover(event:MouseEvent):void { this.updateAnimation(this.starColor, true); this.canUpdatePos=false; } public function drop(event:MouseEvent):void { this.stopDrag(); this.x=this.startingX; this.y=this.startingY; this.updateAnimation(0, false); this.canUpdatePos=true; } public function drag(event:MouseEvent):void { this.startDrag(false); this.canUpdatePos=false; } } }

    Read the article

  • OSMF - add an actionscript cuepoint to a video?

    - by redconservatory
    I'm trying to add a cuepoint to a video using OSMF. I built an OSMF video player, and I'd like to use this instead of the FLVPlayback component, which seems like the only way to add an actionscript cuepoint? Anyhow, I created a cuepoint by writing this: var cuePoint:CuePoint = new CuePoint(CuePointType.ACTIONSCRIPT, 1, "good point", null); videoElement.addEventListener(MediaElementEvent.METADATA_ADD, onMetadataAdd); trace(cuePoint.time); The cuepoint time traced out to "1" (successful). I then took this code from the documentation, thinking it would help trace the cuepoint when I published my movie (to test the video) private function onMetadataAdd(event:MediaElementEvent):void { if (event.namespaceURL == CuePoint.DYNAMIC_CUEPOINTS_NAMESPACE) { var timelineMetadata:TimelineMetadata = videoElement.getMetadata(CuePoint.DYNAMIC_CUEPOINTS_NAMESPACE) as TimelineMetadata; timelineMetadata.addEventListener(TimelineMetadataEvent.MARKER_TIME_REACHED, onCuePoint); } } private function onCuePoint(event:TimelineMetadataEvent):void { var cuePoint:CuePoint = event.marker as CuePoint; trace("Cue Point at " + cuePoint.time); } However, I don't get a trace message when the video hits 1 second. Can anyone help me?

    Read the article

  • Accessing HTML 5 Video Progress Event with jQuery

    - by jnolte
    Hello All, The below is for an HTML5 video player event. My partner and I have been stumped for a very large portion of the day on this issue and hope someone can lend some insight on the issue. We have been able to access the progress event with plain js as seen below but when trying to access this with jQuery we get undefined in console. Any help/ recommendations are greatly appreciated. //JS - Works like a charm document.addEventListener("DOMContentLoaded", init, false); function init() { var v = document.getElementById('test-vid'); console.log(v) v.addEventListener('progress', progress, false); } function progress(e) { console.log(e.lengthComputable + ' ' + e.total + ' ' + e.loaded); } // jQuery - NO BUENO - Undefined rendered in console var vid = $('#test-vid'); $(vid).bind("progress", function(e){ console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable ); }); Thanks in advance, JN

    Read the article

  • How to detect when a tab is focused or not in Chrome with Javascript?

    - by LLer
    I need to know if the user is currently viewing the current tab or not in Google Chrome. I tried to use the events blur and focus binded to the window, but only the blur seems to be working. window.addEventListener('focus', function() { document.title = 'focused'; }); window.addEventListener('blur', function() { document.title = 'not focused'; }); The focus event works weird, only sometimes. If I switch to another tab and back, focus event won't activate. But if I click on the address bar and then back on the page, it will. Or if I switch to another program and then back to Chrome it will activate if the tab is currently focused.

    Read the article

  • javascript: capturing load event on LINK

    - by pgn
    hello everyone, i'm trying to attach an event handler to the load event of a link tag, to execute some code after a stylesheet has loaded. new_element = document.createElement('link'); new_element.type = 'text/css'; new_element.rel = 'stylesheet'; new_element.href = 'http://domain.tld/file.css'; new_element.addEventListener('load', function() { alert('foo'); }, false); document.getElementsByTagName('head')[0].appendChild(new_element) i have tried onreadystatechange as well new_element.onreadystatechange = function() { alert('foo'); } unfortunately neither approach results in an alert being triggered.. Furthermore, new_element.onload is null after registering a handler for the 'load' event with addEventListener.. is that normal? thanks, andrew ps: i may not use any framework in solving this

    Read the article

  • Flash AS3 button eventlistener array bug

    - by Tyler Pepper
    Hi there, this is my first time posting a question here. I have an array of 12 buttons on a timeline that when first visiting that part of the timeline, get a CLICK eventlistener added to them using a for loop. All of them work perfectly at that point. When you click one it plays a frame label inside the specific movieClip and reveals a bio on the corresponding person with a close button and removes the CLICK eventlisteners for each button, again using a for loop. The close button plays a closing animation, and then the timeline goes back to the first frame (the one with the 12 buttons on it) and the CLICK eventlisteners are re-added, but now only the first 9 buttons of the array work. There are no output errors and the code to re-add the eventlisteners is exactly the same as the first time that works. I am completely at a loss and am wondering if anyone else has run into this problem. All of my buttons are named correctly, there are absolutely no output errors (I've used the debug module) and I made sure the array with the buttons in it is outputting all 12 at the moment the close button is clicked to add the eventlisteners back. for (var q = 0; q < ackBoDBtnArray.length; q++){ contentArea_mc.acknowledgements_mc.BoD_mc[ackBoDBtnArray[q]].addEventListener(MouseEvent.CLICK, showBio); } private function showBio(eo:MouseEvent):void { trace("show the bio"); bodVar = ackBoDBtnArray.getIndex(eo.target.name); contentArea_mc.acknowledgements_mc.BoD_mc.gotoAndPlay(ackBoDPgArray[bodVar]); contentArea_mc.acknowledgements_mc.BoD_mc.closeBio_btn.addEventListener(MouseEvent.CLICK, hideBio); for (var r = 0; r < ackBoDBtnArray.length; r++){ contentArea_mc.acknowledgements_mc.BoD_mc[ackBoDBtnArray[r]].mouseEnabled = false; contentArea_mc.acknowledgements_mc.BoD_mc[ackBoDBtnArray[r]].removeEventListener(MouseEvent.CLICK, showBio); } } private function hideBio(eo:MouseEvent):void { trace("hide it!"); contentArea_mc.acknowledgements_mc.BoD_mc.closeBio_btn.removeEventListener(MouseEvent.CLICK, hideBio); contentArea_mc.acknowledgements_mc.BoD_mc.gotoAndPlay(ackBoDClosePgArray[bodVar]); for (var s = 0; s < ackBoDBtnArray.length; s++){ trace(ackBoDBtnArray[s]); contentArea_mc.acknowledgements_mc.BoD_mc[ackBoDBtnArray[s]].mouseEnabled = true; contentArea_mc.acknowledgements_mc.BoD_mc[ackBoDBtnArray[s]].addEventListener(MouseEvent.CLICK, showBio); } Thanks in advance for any help and insight you can provide...I have a slight feeling that its something that may be obvious to another set of eyes...haha.

    Read the article

  • Is there a way to catch a MOUSE_UP Event over a static textfield in Flash?

    - by Jovica Aleksic
    When the user presses the mouse, and releases it over a static textfield with selectable text, no MOUSE_UP event is fired - not on the stage and also nowhere else. I experienced this when using a scrollbar class on a movieclip with a nested static textfield. When the user drags the scroll handle and releases the mouse over the textfield, the dragging/scrolling is stuck. To test this, create a new AS3 fla file, place a static textfield somewhere, and put in some text. Make sure the selectable property is checked in the properties panel. Add this script to the timeline: import flash.events.* function down(event:Event):void { trace('down'); } function up(event:Event):void { trace('up'); } stage.addEventListener(MouseEvent.MOUSE_DOWN, down) stage.addEventListener(MouseEvent.MOUSE_UP, up) Now test the movie and click the mouse. You will notice that trace('up') will not occur when you release the mouse over the textfield.

    Read the article

  • How to do a comet long pulling with ActionScript3?

    - by Victor Lin
    I want to load data from my web server, I want it be the AJAX/Comet way, my web-server long holds the request, response it until something happened. Thus, I wrote some as3 code like this: private function load(): void { var request:URLRequest = new URLRequest(url); var variables:URLVariables = new URLVariables(); variables.tick = this.tick; request.data = variables; urlLoader = new URLLoader(request); urlLoader.addEventListener(Event.COMPLETE, onComplete); urlLoader.addEventListener(IOErrorEvent.IO_ERROR , onIOError); log.info("Loading info from {0}", request.url); } It works, if the waiting time is short, but however, it failed with IOError 2032, seems the waiting time is out. Here is the problem, how can I do a long-polling with as3 and avoid the timeout error? Thanks.

    Read the article

< Previous Page | 3 4 5 6 7 8 9 10 11 12 13 14  | Next Page >