I'm new to Titanium.
Currently I'm working on a project in this the user needs to use the contact details from iOS contacts App.
My app.js looks like this
Window = require('ui/handheld/ApplicationWindow');
var win = Window();
win.open();
var button = Ti.UI.createButton({
title : 'Show Contacts',
width : 100,
height: 50,
});
win.add(button);
button.addEventListener('click',function(e){
Titanium.Contacts.showContacts({ });
});
When I click on a button the following code is displayed:
And when I select an contact the detail is displayed on the other screen:
But I don't want this, When the user selects an individual contact the details should be passed to my app.js file. And no need to go to the details page.
Is there any way to do this ?
Please help me.
Thanks in advance.
It seems that you're missing a declaration of function to be called when a person is selected:
Titanium.Contacts.showContacts({/*missing selectedPerson callback object*/});
You can read more on what parameters can be passed into showContacts method here.
Finally I got it.
I used the following code:
button.addEventListener('click',function(e){
Titanium.Contacts.showContacts(values);
});
var values = {cancel:function(){}};
values.fields = ['firstName', 'lastName', 'phone'];
values.selectedProperty = function(e) {
var cn = e.person.firstName;
var sn = e.person.lastName;
alert('Name'+cn+' '+sn);
};
Reference : Titanium Contacts
var parms = {
animated : true,
selectedPerson : function(e) {
alert(e.person);
}
};
Titanium.Contacts.showContacts(parms);
You will get the details of selected person in e.person object. that can be passed to app.js etc according to your requirements. i just showed it in the alert.
Related
I have a Kendo window which is defined as follows:
With Html.Kendo().Window().Name("tranferwindow")
.Title("Select Transfer Destination")
.Content("")
.Resizable()
.Modal(True)
.Events(Function(events) events.Open("WindowToCenter"))
.Events(Function(events) events.Refresh("transferopen"))
.Draggable()
.Width(400)
.Visible(False)
.Render()
End With
The window is opened each time by using the refresh and passing a new URL.This is to allow dynamic data to be displayed dependent on what the user clicked on a grid.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wwindow.data("kendoWindow").open(); //Display waiting window while refresh happens
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").refresh('/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID);
}
The Window is opened at the end of the refresh event to make sure the user doesn't see the previous content.
function transferopen() {
wwindow.data("kendoWindow").close(); //Close the 'wait' window
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
This all works well and the window can be closed and reopened as often as I like.
However I needed to access the resize event of the window from within the Partial View to resize the Grid which is inside the window. To achieve this I added the following to the partial view that is returned from the url.
$("#tranferwindow").kendoWindow({
resize: function (e) {
// resizeGrid();
}
});
Adding this event mapping causes the issue where I cannot open the Window more than once.
I assume I need to 'unregister' for the event somehow before closing?
Found a solution: much cleaner and no VB Razor needed :)
I changed the approach to create a new window each time I wanted to display one.
I created a div to hold the Window.
<div id="windowcontainer"></div>
Then when the user selected a command on the grid , I create the whole window appending it to the div. The key here is the this.destroy in the deactivate event.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#windowcontainer").append("<div id='tranferwindow'></div>");
var mywindow = $("#tranferwindow")
.kendoWindow({
width: "400px",
title: "Select Transfer Destination",
visible: false,
content: '/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID,
deactivate: function () {
this.destroy();
},
open: WindowToCenter,
refresh:transferopen
}).data("kendoWindow");
mywindow.refresh();
}
Then on the refresh function
function transferopen() {
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
Now I can have the event binding inside the Partial View which works fine and the window can be re opened as many times as I want. :)
Update: Adding the event binding inside the Partial View stops 'Modal' from working. Working on trying to fix this...
Can anyone help, i want to change my image(button), when i press my buttonImage i open MT.Dialog and then i login, and when i login i want the button to change how do i do that, i have found the code, but it doesn't work in MT.Dialog
Here is how i do it.
cmdLogin.TouchUpInside += delegate {
cmdLogin.SetImage(UIImage.FromFile("Images/Logout.png"), UIControlState.Normal);
};
and for the hidden thing i tried(But doesn't work)
if(cmdLogin.Hidden == True)
{
cmdLogout.Enabled;
}else{
cmdLogout.Hidden;
}
but that doesn't work in MT.Dialog ofcourse because i don't do anything with my string element(My string element got the name login and if someone got a link to a good login system w/ database that would be very helpful.
and ofcourse here is my MT.Dialog code
cmdLogin.TouchUpInside += delegate {
_window.RootViewController = new DialogViewController(new RootElement("Login") {
new Section ("B.V. Electronic"){
(password = new EntryElement ("Password", "", "", true))
},
new Section () {
(login = new StringElement ("Login", delegate {
if(password.Matches("1234")){
GoBackToView();
}else{
new UIAlertView("Wrong code", "It's the wrong code", null, "Ok", null).Show();
}
}))
},
new Section (){
new StringElement ("Cancel", delegate {
GoBackToView();
})
}
});
};
I am not real clear on exactly what you want to do. However, one suggestion I have for you is to look at this:
https://github.com/xamarin/prebuilt-apps/tree/master/FieldService
This is a sample application that was built by Xamarin that has a nice login screen that you could try and get some ideas from. It does not use Monotouch.Dialog for the login screen, so if you want that you can look at this:
http://docs.xamarin.com/recipes/ios/content_controls/tables/create_a_login_window_using_monotouch.dialog
Your code is similar to that, but it looks like you modified it a little.
If you want to change your Login StringElement, you need to modify it, then call Root.Reload(login, UITableViewRowAnimation.Automatic); afterwards. I don't think there is a simple way to just change the background image of a StringElement. You will need to make your own subclass of StringElement and customize the GetCell() routine to. You can refer to this SO question for more ideas on that:
How can I create a custom styled EntryElement with MonoTouch.dialog?
I hope that helps.
I am trying to create a bootstrapped firefox extension to obtain current tabs url and title. The issue is that I want to check when the tab url has the word "about:" in its url. The solution that I propose is to check the require("sdk/tabs").activeTab.url" using the browsers native string.substr() javascript function. Is any posibility to use browsers native javasript functions on widget or ToolbarButton onClick method?
exports.main = function(options) {
var base64 = require("sdk/base64");
var panel = require("sdk/panel").Panel({
width: 700,
height: 470,
onHide: function ()
{
panel.contentURL = "about:blank";
}
});
var tbb = require("toolbarbutton").ToolbarButton({
id: "extension-tbb-id",
label: "IFShare+",
image: "https://www.fasdfasd.es/factory/templates/templateforidkreader/favicon.ico",
panel: panel,
onClick: function()
{
windowPanel = require("sdk/tabs").activeTab;
title = windowPanel.title;
url = windowPanel.url;
// Is any posibility to do something like that ????
contentScript: "if("+url+".substring(0,5)=='about:'){"
{
url='';
title='';
}
contentScript: "}"
this.panel.contentURL = "https://www.fasdfasdf.es/factory/index2.php?option=com_idkreader&view=shareplus&task=window&Itemid=0&url="+base64.encode(url, "utf-8")+'&title='+base64.encode(title, "utf-8")+'&ref=ext';
},
});
// move the toolbar button to the navigation bar
if ("install" == options.loadReason) {
tbb.moveTo({toolbarID: "nav-bar"});
}
}
I'm not entirely clear on the details of what you're trying to accomplish, but I think you're close.
To answer the question as asked, no you can't access variables from within a content script. The best you can do is use content script messaging a mentioned in the page-mod documentation.
However, to accomplish what you want, you don't need to do this. You can just do what you want in the onClick function itself, like so
function onClick()
{
windowPanel = require("sdk/tabs").activeTab;
title = windowPanel.title;
url = windowPanel.url;
if(url.substring(0,5)=='about:'){
{
url='';
title='';
} else {
//You can insert any content script stuff you want here
}
this.panel.contentURL = "https://www.fasdfasdf.es/factory/index2.php?option=com_idkreader&view=shareplus&task=window&Itemid=0&url="+base64.encode(url, "utf-8")+'&title='+base64.encode(title, "utf-8")+'&ref=ext';
}
If you refine your question a bit, I will be happy to refine my answer.
I am newbie to titanium, I am learning JSon Parsing with titanium. I am accessing tweets for a specific screen name along with his/her profile picture. It is working well as concern to tweets but not showing the profile picture of that tweet.
My Tweet.js file is :
// Create variable "win" to refer to current window
var win = Titanium.UI.currentWindow;
// Function loadTweets()
function loadTweets()
{
// Empty array "rowData" for our tableview
var rowData = [];
var avatar;
// Create our HTTP Client and name it "loader"
var loader = Titanium.Network.createHTTPClient();
// Sets the HTTP request method, and the URL to get data from
loader.open("GET","http://api.twitter.com/1/statuses/user_timeline.json?screen_name=SenchaTouch");
// Runs the function when the data is ready for us to process
loader.onload = function()
{
var tweets = eval('('+this.responseText+')');
alert(tweets);
for (var i = 0; i < tweets.length; i++)
{
var tweet = tweets[i].text; // The tweet message
var user = tweets[i].user.screen_name; // The screen name of the user
avatar = tweets[i].user.profile_image_url; // The profile image
// Create a row and set its height to auto
var row = Titanium.UI.createTableViewRow({height:'auto'});
// Create the view that will contain the text and avatar
var post_view = Titanium.UI.createView({
height:'auto',
layout:'vertical',
top:5,
right:5,
bottom:5,
left:5
});
// Create image view to hold profile pic
var av_image = Titanium.UI.createImageView({
url:'KS_nav_ui.png', // the image for the image view
top:0,
left:0,
height:48,
width:48
});
post_view.add(av_image);
// Create the label to hold the screen name
var user_lbl = Titanium.UI.createLabel({
text:user,
left:54,
width:120,
top:-48,
bottom:2,
height:16,
textAlign:'left',
color:'#444444',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
post_view.add(user_lbl);
// Create the label to hold the tweet message
var tweet_lbl = Titanium.UI.createLabel({
text:tweet,
left:54,
top:0,
bottom:2,
height:'auto',
width:236,
textAlign:'left',
font:{fontSize:14}
});
post_view.add(tweet_lbl);
// Add the post view to the row
row.add(post_view);
// Give each row a class name
row.className = "item"+i;
// Add row to the rowData array
rowData[i] = row;
}
// Create the table view and set its data source to "rowData" array
var tableView = Titanium.UI.createTableView({data:rowData});
//Add the table view to the window
win.add(tableView);
};
// Send the HTTP request
loader.send();
}
loadTweets();
// Can any find out the flaw ?? Any help would be appreciated.
Thanking in advance :)
At last found it .. The problem was in code. I just use url property in the image view instead of image property. Replacing the image property with that of url has done the trick.
url: avatar, // It should not be used .. It is not working
image: avatar, // It is working very well..
I've got basically 5 windows in my iPad-application (created with Appcelerator Titanium) and want to be able to navigate forth and back (a back and and a next-button for that purpose).
The following approach doesn't work. Nothing happens upon clicking the button.
The first window is opened in my app.js like this:
var window = Titanium.UI.createWindow({
url:'mainwindows.js',
modal: true
});
window.open();
then in mainwindows.js I've got a button called 'next' which does this:
buttonNext.addEventListener('click', function(e){
var newWindow = Titanium.UI.createWindow({
url: "step_1.js",
title: "Step 1"
});
win.open(newWindow, { animated:true})
});
You should create NavigationGroup to operate your windows like that:
//root window for nav group — your modal
var rootWindow = Titanium.UI.createWindow({
url:'mainwindows.js',
modal: true
});
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window:window //your window (mainwindow.js)
});
rootWindow.add(navGroup);
//event handler
buttonNext.addEventListener('click', function(e){
var newWindow = Titanium.UI.createWindow({
url: "step_1.js",
title: "Step 1"
});
navGroup.open(newWindow);
});
rootWindow.open();
Explore KitchenSink, there are lots of examples there, including NavigationGroup as well.
here is an example with full source in my blog,
http://blog.clearlyinnovative.com/post/4043980803/titanium-appcelerator-quickie-minimal-ipad-splitview
It uses NavigationGroup with iPad.
I would suggest doing clean on your project and a complete rebuild
Clean your project and then run again. This most certainly solves "odd" problems that are completely unexpected. One of my favorites is:
Result of expression 'Ti.UI.iPhone' [undefined] is not an object.
When you declare var navGroup, window should be set as window: rootWindow, not window: window