Titanium popover not working - mobile

i'm trying to use the "Popover " functionality in the titanium.
i went throught the kitchensink and built a code in my application but some how
i'm getting this error:
Result of expression 'Ti.UI.iPad' [undefined] is not an object.
i dont know what i'm doing wrong.
here is my code:
var RLWindow=Ti.UI.createWindow({backgroundColor:'#700'});
var LBBar=Titanium.UI.createView({height:60,left:0,right:0,top:105,backgroundImage:'Images/toolbar.jpeg'});
var ShowNotes=Ti.UI.createButton({color:'blue',font:{fontSize:20,fontWeight:"bold"},‌​right:10,title:'Today Notes',height:40,width:120});
LBBar.add(ShowNotes);
RLWindow.add(LBBar);
ShowNotes.addEventListener('click',function(e){
var popover = Ti.UI.iPad.createPopover({
width:300,
height:250,
title:'Test Popover',
arrowDirection:Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP
});
popover.show({
view:button,
animated:true
});
});
please help me with this situation..
Thank you

Clear out your build/iphone folder. I notice sometimes when you add a new platform UI object the compiler doesn't include the required Ti library in the xcode project.

This only works on the iPad, not on the iPhone. I am assuming you are using that? For iPhone you should use a regular window.
That being said, what is button? Stating the name, I guess that is your problem, because you need a view in that. If I do this (below) it seems to be working perfectly for me:
var popover = Ti.UI.iPad.createPopover({
width:300,
height:250,
title:'Test Popover',
arrowDirection:Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP
});
var win = Ti.UI.createWindow({backgroundColor: '#FFF'});
win.open();
var v = Ti.UI.createView();
win.add(v);
popover.show({
view: v,
animated:true
});

Related

How to draw map using new Lat Lng in ionic

I am passing proper latitude and longitude to the map but it shows old map, having old lat lng. I know I am doing something wrong in this, but I can't figure out it. My project in ionic framework and for map I am using this plugin map plugin
This my html code
<div style="width:100%;height:200px" id="mapDisplay"></div>
This my angularJS code
var getLat = $scope.dealer.lat;
var getLng = $scope.dealer.lng;
var address = $scope.dealer.address;
var mapDiv = document.getElementById("mapDisplay");
const myGeoLocation = new plugin.google.maps.LatLng(getLat,getLng);
var map = plugin.google.maps.Map.getMap(mapDiv, {
'camera': {
'latLng': myGeoLocation,
'zoom': 15
}
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
map.addMarker({
'position': myGeoLocation,
'title': address
}, function(marker) {
marker.showInfoWindow();
});
});
From the docs of the map plugin you are using
This plugin generates only one map instance using the Map.getMap()
method. In general, you may want to create multiple maps, but this
plugin doesn't allow it.
So your plugin.google.maps.Map.getMap is only grabbing the existing instance, not creating a new one and the plugin.google.maps.event.MAP_READY is only fired once, the first time. However looking at the source code it looks like the instance exposes a remove method which you can use to destroy the existing instance and create a new one with the new sets of coordinates when the callback is called, e.g: map.remove(function() { /** reset map coordinates **/ }
** Extra **
If you just need to display a map with a set of coordinates you can do it using the native app by passing lat/lon to the $cordovaInAppBrowser plugin. As an example for iOS and Android you'd have the following:
iOS
$cordovaInAppBrowser.open('maps://?q=<latitude>,<longitude>', '_system');
Android
$cordovaInAppBrowser.open('geo:0,0?q=<latitude>,<longitude>', '_system');
And finally you need to enable the geo uri in your config.xml like so:
<allow-intent href="geo:*" />
The plugin doesn't allow to create multiple maps instance More detail.
But you can achieve this by using this code
var map = plugin.google.maps.Map.getMap(div);
map.clear();
map.off();
map.trigger("test");
map.addEventListener(plugin.google.maps.event.MAP_READY);

CamanJS: Replacing image

I'm using CamanJS to add some image processing features to my website, it's a simple and great library but still its documentation is somehow poor.
I'm uploading an image to my website, then I'm applying all the effects on the image uploaded (it's not saved on the Server, I'm modifying it on the client side).
as shown on the official website (http://camanjs.com/guides/#BasicUsage):
function invertColors() {
Caman("#original-img", function () {
this.invert().render();
});
}
The problem is when I re-upload a new image. apparently CamanJS keeps the first image cashed, and the new image is not shown.
when I read about this issue the only place I found an answer for this is here:
CamanJS - change underlying canvas after applying filters/manipulations
but I'm sorry the answer was not that clear for me. so I have to ask it again.
the answer suggested to use reloadCanvasData() but I didn't know exactly how to use it, I tried so many ways but all went in vain!
I tried:
Caman("#original-img", function () {
this.reloadCanvasData();
});
and:
Caman.reloadCanvasData();
etc.
Can anyone provide a working example?
Thanks
I thought I'd help those who came here looking at how to replace PIXEL data rather than just a loaded image:
can1 = document.getElementById("MyCanvas1");
ctx1 = can1.getContext("2d");
var c = <do what ever you need and make a new canvas here>
ctx1.putImageData(c, 0,0); // <---this replaces the pixeldata
Caman("#MyCanvas1", function () {
this.render();
});
This way you can process the image at the pixel level, and then get it back into camanjs.
As a solution what I have done is clear the canvas and have again Inserted an HTML Image tag. before calling Second Image.with camanjs
something like following
function clearCanvas() {
$('#ImageParentDiv').empty();
var htmlTag = '<img src="../images/Loading.gif" id="original-img">';
$('#ImageParentDiv').html(htmlTag);
}
Just call the revert() when you need an original image:
Caman("#original-img", function () {
this.revert();
this.render();
});

A way of clicking on hidden elements in protractor end to end tests

Is there a way to click on a hidden value in a sub menu. I would like to be able to do something like
driver.findElement(protractor.By.xpath('/html/body/div/div/a')).mouseover.then(function() {
ptor.findElement(protractor.By.className('name').getText().then(function(result) {
expect(result).toBe('Me');
});
});
when the menu item is not visible, or are we limited with this at the moment. If this is not possible is there a way around this issue at present.
ok so after a long and painful search trying to find an answer to this question I finally came across the answer trying to answer a different question.
Most of the documentation I found explain that we must use Actions in the form of a WebElement and then cast that to Javascript and pass it a script element in the form of an array with the click action.
Well the same kinds goes here but with a few modifications.
describe('', function() {
var ptor = protractor.getInstance();
var driver = ptor.driver;
it('', function() {
var hiddenElement = driver.findElement(protractor.By.yourchosenlocator(''));
driver.executeScript("arguments[0].click()", hiddenElement).then(function() {
expect(whatever).toMatch(whatever);
});
}, 30000);
});
as you can see there is no use of webelement and no cast required.
Here are the sources that helped me in my search for answers
How do you click on an element which is hidden using Selenium Webdriver?
SELENIUM WEBDRIVER – HOW TO CLICK ON A HIDDEN LINK OR MENU
Selenium WebDriver - hidden select and anchor [duplicate]
Just to add on to the accepted answer, the below code worked for me.
Import statement:
import { browser, by, element } from 'protractor';
Code:
const hiddenElement = element(by.id('hiddenIcon'));
browser.driver.executeScript('arguments[0].click();', hiddenElement.getWebElement());
Just change the hiddenIcon to the id of your element.
Instead of using
var ptor = protractor.getInstance(); var driver = ptor.driver;
we can also use
browser.driver

JS-Native bridge via Backbone.js in iOS

I know how to create a JS-Native bridge in iOS through pure JS code (no external frameworks), but I'm wondering does anything change when i use Backbone.js? If yes, then can anyone please explain.
You could use something along those lines:
yourBackboneObject.on('all', function(eventName) {
var args = Array.prototype.slice.call(arguments);
args.shift();
NativeBridge.call(eventName, args);
});
and in the object:
this.trigger('someiOSfunction', someArg, someOtherArg);

Extjs - cant load content to panel

I created Extjs.Panel and now I would like to dynamically load a content to it. So I wrote this simple code
Ext.get('contentPanel').load({
url: '#Url.Action("TempView","Home")'
});
After executing this function, panel is populated with TempView, however couple of seconds later I get an error in Extjs library
Microsoft JScript runtime error:Unable to get value of the property
'events': object is null or undefined.
EDIT
I flollowed #DmitryB advice and I used debug version of library. Here is what I found out. It turned out that the problem is in function
getElementEventCache
which is defined in file ext-all-debug.js in line 11108. The function looks this way
getElementEventCache : function(element) {
if (!element) {
return {};
}
var elementCache = Ext.cache[this.getId(element)];
return elementCache.events || (elementCache.events = {});
},
The exception is thrown in the last line, because of the fact that elementCache is null.
Here is the stacktrace from visualstudio
I had a very similar error that was resolved by adding the following line. (from this forum thread)
if(Ext.isIE) {
Ext.enableGarbageCollector=false;
}
I'm using bellow code and work cool. This may help you.
Try this
var content_div = Ext.get(div_id);
content_div.load({
url:your_url,params:{id:'abc'},scripts:true,text: 'Loading...'});
content_div.show();

Resources