I am working on titanium and creating view from controller. I have four fields and i need to set values with their IDs. Please check following code
var row = Ti.UI.createTableViewRow();
var first_name = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: 'black',
top: 10,
left: 10,
width: 250,
height: 60,
id:'first_name',
//value:data.first_name
});
row.add(first_name);
var tbl_data=[];
tbl_data.push(row);
var tbl= Ti.UI.createTableView({
data:tbl_data
});
$.home_view.add(tbl);
The id:'first_name' does not seem to work and i have not found any example where an ID is being assigned to any UI element. Please guide
You can't set ID. But there are 2 options
1: Don't make an input in the controller, but make it a separate controller instead (see my blogpost on reusable components)
2: Just set it like this:
$.first_name = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: 'black',
top: 10,
left: 10,
width: 250,
height: 60
});
Then you can reference it later, like this: $.first_name.value;
You can also set a custom property to the create function (any property works fine) and identify it with that using events. Like this:
var field = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: 'black',
top: 10,
left: 10,
width: 250,
height: 60,
textFieldId: 'first_name'
});
field.addEventListener('blur',function(e){
var id = e.source.textFieldId;
});
Related
Once opening profile page, I ran a Cloud.Users.showMe function. In this function I put this in
var upperppicview = Ti.UI.createImageView({
image:'user.photo.urls.original',
width: '70%',
top: '10%',
height: '80%',
borderRadius: 5,
left: '5%'
});
upperpview.add(upperppicview);
The view is there but not showing the image of the user, I have already uploaded the photo on arrowdb and passed the User(photo_id) the photo.id of the created photo.
The photo was uploaded, it seemed to be attached backend as the user had an image attached but was not showing the particular image(as seen in the attachment below).
How do I show the image as I need to also do this for events.
arrowdb
You put a string into your createImageView function.
Try this instead
var upperppicview = Ti.UI.createImageView({
image:user.photo.urls.original,
width: '70%',
top: '10%',
height: '80%',
borderRadius: 5,
left: '5%'
});
upperpview.add(upperppicview);
In your given code, image property value should be image location. It would be local or remote URL.
When you assign like image:'user.photo.urls.original' then image property value is string which is not local image or remote image locations that why its not working.
If you want to display from ACS server its store in user variable.
user is object so you need to set like image:user.photo.urls.original not image:'user.photo.urls.original'
Here is final code for image display in your apps will be
var upperppicview = Ti.UI.createImageView({
image:user.photo.urls.original,
width: '70%',
top: '10%',
height: '80%',
borderRadius: 5,
left: '5%'
});
upperpview.add(upperppicview);
For more details please visit following link:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ImageView-property-image
https://docs.appcelerator.com/arrowdb/latest/#!/api/Users-property-photo
Thanks
Im developing an android app with PC with titanium/appcelerator cloud service.
I want to have the facebook's newsfeed page where list of user's post comes down.
I have managed to do this with tableView with each row displaying each post from the server.
The problem is that I somehow can not get the individual user;s photo AND (that there is button for each posts) if i clikc this button, it doesnt give me the user information of that specific user but the user of the first post.
for example, if user1, user2, user3 posts one each,
the list page shows post1, post2, post3 respectively.
If i click the button of post2(which is send message button), it tries to send it to user1 not user2.
here is my code.
been stuck for last 2 days,,
THANKS!
profileimage is the variable for photo
shopping is the variable for the message send button
win.addEventListener('open', function () {
Cloud.Posts.query({
page: 1,
per_page: 20,
order: "-created_at"
}, function (e) {
if (e.success) {
status.hide();
var tbl_data = [];
for (var i = 0; i < e.posts.length; i++) {
var post = e.posts[i];
-- there are some code here ---
var profileimage = Ti.UI.createView({
backgroundImage: post.user.photo.urls.medium_500,
backgroundColor: '#fffff',
width: 90,
height: 90,
borderRadius: 22,
top:20, left: 10
});
var shopping = Ti.UI.createView({
backgroundImage: 'shopping.png',
width: 35,
height: 35,
top: 70,
right: 10
});
shopping.addEventListener('click', function(){
//alert(post);
var tradewin,tradeinc;
tradeinc = require('trade');
tradewin = new tradeinc.trade1(post);
tradewin.open();
});
It seems as though your issue stems from adding the click event listeners for all of the shopping views inside the for loop. When the shopping click function is actually called due to user action it accesses the most recent value of post which will always be the value of post at the end of the for loop: e.posts[e.post.length - 1]. I've modified your code to alleviate this issue:
win.addEventListener('open', function () {
Cloud.Posts.query({
page: 1,
per_page: 20,
order: "-created_at"
}, function (e) {
if (e.success) {
status.hide();
var tbl_data = [];
for (var i = 0; i < e.posts.length; i++) {
var post = e.posts[i];
-- there are some code here ---
var profileimage = Ti.UI.createView({
backgroundImage: post.user.photo.urls.medium_500,
backgroundColor: '#fffff',
width: 90,
height: 90,
borderRadius: 22,
top:20, left: 10
});
var shopping = Ti.UI.createView({
backgroundImage: 'shopping.png',
width: 35,
height: 35,
top: 70,
right: 10
});
// This wrapper function returns a callback function
// for your click event that also maintains the correct
// value of `post`
function getShoppingClickCallback(associatedPost) {
return function () {
var tradewin, tradeinc;
tradeinc = require('trade');
tradewin = new tradeinc.trade1(associatedPost);
tradewin.open();
};
}
// This line calls the `getShoppingClickCallback` function and
// passes the associated `post` object. The returned value of
// `getShoppingClickCallback` is a callback function.
shopping.addEventListener('click', getShoppingClickCallback(post));
Using a helper function like getShoppingClickCallback when adding event listeners in a for loop is a really helpful pattern. I suggest trying this out in your project and seeing if your issue persists. I hope it doesn't! :)
I want to programmatically select Fabrics.js object. What do I have to do? For example, I am adding two objects like this:
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({
left: 100,
top: 100,
width: 75,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 3,
padding: 10
}));
canvas.add(new fabric.Circle({
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3
}));
and I have two button while clicking the button named
select rectangle
select second object
While clicking the select rectangle button it should select the rectangle shape and while clicking the select second object button it should select the second object circle.
Here is the Jsfiddle for workaround.
I goggled and fed up, here I am seeking for some point how to start.
EDIT
I like to have the ID for each object, it should be possible to select the object using that ID, why I am asking this is, while using the collaborative things we can't tell surely all the connected nodes will have the item in same index, so unique id will be useful.
You want to use:
canvas.setActiveObject(canvas.item(0));
In the buttons click event
The number corresponds to the order in which the object was added to the canvas.
See here:
http://jsfiddle.net/ThzXM/1/
Yes, you can set id for each item by adding the below code in all.js
In the fabric.js build version 1.3.0 : In the Object declaration add
var object = {
id: this.id,
remaining properties in all.js
}
Now you can set the object id with:
canvas.getActiveObject().id=your id value;
You can retrieve the object id with :
Myid= canvas.getActiveObject().get('id');
To find the fabric object number (item number) of the selected object use:
canvas.on({
'object:selected': selectedObject
});
function selectedObject(e) {
var id = canvas.getObjects().indexOf(e.target);
}
var id is the same number if you programmatically set the object as in Dan Brown's reply:
canvas.setActiveObject(canvas.item(id)); //id = 0, 1, 2 etc.
add an id to your objects.
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({
id: 123,
left: 100,
top: 100,
width: 75,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 3,
padding: 10
}));
canvas.add(new fabric.Circle({
id: 456,
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3
}));
function removeSpot(canvas, id) {
canvas.forEachObject(function(obj) {
if (obj.id && obj.id === id) canvas.remove(obj);
});
}
// remove rect
removeSpot(canvas, 123);
// remove circle
removeSpot(canvas, 456);
Hello I'm new to titanium studio I'm reading the docs 2 days now and trying to make a simple slide animation or even any animation of any kind except opening a modal window. but I can't make it work.Here is what I was trying now but fails:
var slide_it_left = Titanium.UI.createAnimation();
slide_it_left.left = 500;
slide_it_left.duration = 500;
var mainWinOpts = {
backgroundColor:'#fff',
fullscreen:true,
navBarHidden: true
}
var animWinOpts = {
navBarHidden: true,
backgroundColor:'#000',
top:0,
left:0,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
fullscreen:false,
animated:true
}
var mainWin = Ti.UI.createWindow(mainWinOpts);
var animWin = Ti.UI.createWindow(animWinOpts);
var labelOpts = {
text: 'click me!',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: {
fontFamily: 'monospace',
fontSize: 24
},
borderWidth: 1,
color: '#2e2e2e',
borderColor: '#2e2e2e',
backgroundColor: '#dedede',
top: 50,
left: 50,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
opacity: 1.00,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
};
var label = Ti.UI.createLabel(labelOpts);
label.addEventListener('click',function(){
animWin.open(slide_it_left);
})
mainWin.add(label);
mainWin.open();
This among other snippets I tried from their docs - forums isn't working.
Could someone please provide me some working samples or references for android window or view animation. Or point out what I'm doing wrong. Thank you in advance.
Please try changing your code to the following:
label.addEventListener('click',function(){
animWin.open();
animWin.animate(slide_it_left);
});
You cannot use the animation object as a parameter for open().
Have a look at the valid params here.
Moreover, the docs give an example for sliding in a window on Android, which is very likely what you are trying to achieve:
var win2 = Ti.UI.createWindow({fullscreen:false});
win2.open({
activityEnterAnimation: Ti.Android.R.anim.slide_in_left,
activityExitAnimation: Ti.Android.R.anim.slide_out_right
});
You can find the animations for the Android platform here.
Using Titanium Appcelerator I am trying to dynamically create elements and add event listeners to them using a loop. Here is my current code:
for(i=0;i<7;i++){
testLabels[i] = Titanium.UI.createLabel({
borderRadius: 35,
text:'hello',
textAlign:'center',
width:70,
height: 70,
top: '13%',
left:140,
touchEnabled: true
});
testLabels[i].addEventListener('click',function(e){
//do something
}
}
When I run this I get the following error:
Can't find variable: testLabels.
Its interesting to me that the variable it can't find isn't "testLabels1", which to me means the loop isn't firing... any ideas?
Thanks!
Titanium doesn't like it when I place "var" in front of the label declaration.
try this
var testLabels = [];
for(var i=0; i<7; i++ ) {
testLabels[i] = Titanium.UI.createLabel({
borderRadius: 35,
text:'hello',
textAlign:'center',
width:70,
height: 70,
top: '13%',
left:140,
touchEnabled: true
});
(function(label) {
label.addEventListener('click',function(e){
//do something
}
}(testLabels[i]));
}