Bubble chat titanium - javascript

https://developer.appcelerator.com/question/146449/how-do-i-make-a-view-with-a-bubble-but-with-a-continuous-border
I have found this tutorial, and I am trying to create a bubble chat window in titanium.
However the trouble I am having is that I cannot get the height/width of the label until I have stuck it onto the window and inside the view, even then if the label is too small, the bubble chat becomes distorted.
What is the best way to accomplish this in titanium, thanks.
var label1 = Titanium.UI.createLabel({
color : '#999',
text : 'I am Window 1',
font : {
fontSize : 20,
fontFamily : 'Helvetica Neue'
},
textAlign : 'center',
height : 'auto',
width : 'auto',
});
var bubble1 = Ti.UI.createView({
backgroundImage : 'bubble.png',
backgroundLeftCap : 43,
backgroundRightCap : 34,
backgroundTopCap : 34,
backgroundBottomCap : 36,
height : 10,
top : 10,
visible: false,
width : 10
});
bubble1.add(label1);
win1.add(bubble1);

To get height/width of label use: label1.toImage().width or label1.toImage().height
and the best way to do it is:
after adding label to View you need:
check width of label, if it is too long, and over fit of screenwidth then change back label width to size of screen - 50 px. if(label1.toImage().width > Ti.Platform.displayCaps.getPlatformWidth()) label1.width = Ti.Platform.displayCaps.getPlatformWidth() -50;
Change back width of View to same width of label.
Set label1.heigh = Ti.UI.SIZE (auto is not supported now)
Set View.height = Ti.UI.SIZE
To check small size, you can do this:
if(Ti.Platform.displayCaps.getPlatformWidth() < 100){
label1.width = 100;
View.width = Ti.UI.SIZE;
}

Related

Move the BrowserWindow to the bottom right

I want to ask if there's method dynamically set the position or move the Browser Window to the bottom right?
BrowserWindow.setPosition(x, y)
You can use the screen API, and use a fixed with to offset from the edge of the screen:
let display = electron.screen.getPrimaryDisplay();
let width = display.bounds.width;
win = new BrowserWindow({
width: 600,
x: width - 600,
y: 0
});

Set the ID of View and TextView in titanium appacelerator

I'm creating an for to create randomly textAreas but I need to know which textArea was pressed by the user.
Is there any way to enter a unique ID for each textArea?
How I create the textView:
var txtArea = Ti.UI.createTextArea({
color : '#000',
backgroundColor : 'transparent',
font: {
fontSize : 28,
fontWeight : 'normal',
},
editable : false,
textAlign : 'left',
value : a[i],
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
I tried to put "id : i", but all textAreas returned the same ID.
It's not suggested to add custom properties to Titanium proxies. Here is what I would do (based on my guess of what you try to achieve):
for(var i = 0; i < 10; i++){
var txtArea = Ti.UI.createTextArea({
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
(function(){
var id = i;
txtArea.addEventListener('click',function(){
console.log(id);
});
})();
}
If you want assign a numerical ID, you are in the right way but I think that you must insert all TextAreas in rows of Table view. This because you get ID from table view row not from Textarea. Your id's attemp was correct if you inserted in a table view row.
Your code for create textArea is something like this:
var txtArea = Ti.UI.createTextArea({
id: i,
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
You can furthermore get the id of each row simply add a click Event Listener, in particular case:
tableViewRowName.addEventListener('click', function(e) {
console.log(e.source.id);
}
Let me know if works and not hesitate to contact me.
FULL EXAMPLE
In your controller js
var win = Ti.UI.createWindow();
var scrollableView = Ti.UI.createScrollView();
var table = Ti.UI.createTableView();
var tableData = [];
for(var i=0;i<list.length;i++){
var row = Ti.UI.createTableViewRow();
var txtArea = Ti.UI.createTextArea({
id: i,
value : "test n " + i,
textAlign : 'left',
textAlign : 'center',
top : '30%',
width : '100%',
height : '100%'
});
row.add(txtArea);
tableData.push(row);
}
table.setData(tableData);
scrollableView.add(table);
win.add(scrollableView);
win.open();
This is what i mean: in your structure you have already an empty table view.
You populate dinamically this table in your controller, with a loop (for or while it's the same).
Every iteration you push the row with the respective TextArea and at the end of loop you populate the table with setData
Regards

Image slider on Smartface

I've been trying to code with SmartFace.
I need to make an image slider. But, I am stuck and don't know where to start.
I want to make something like this :
https://www.google.com.tr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj9tIH0hcjKAhWM7hoKHQ4dCIMQjRwIBw&url=http%3A%2F%2Fjquery-plugins.net%2Ftag%2Ftouch-enabled-slider&psig=AFQjCNH_vEXXcHB4fajB7f1Pz9x2kmwU7g&ust=1453917230609303
You can make image slider by using scrollview. This document help you to create it. Also you can see an image slider example if you download 'Smartface In Action' in App Store.
Here is the sample code:
var imageSlider = new SMF.UI.ScrollView({
top : "10%",
left : "10%",
width : "80%",
height : "60%",
contentHeight : "200%",
contentWidth : "100%",
autoSize : true,
layoutType : SMF.UI.LayoutType.linear,
orientation : SMF.UI.Orientation.horizontal,
enableHorizontalPaging : true,
enableHorizontalScrolling : true,
horizontalGap : "0dp",
verticalGap : "0dp",
});
Pages.Page1.add(imageSlider);
function fillScrollView() {
for (var i = 1; i <= 10; i++) {
var image = new SMF.UI.Image({
width : "80%",
height : "30%",
top : "5%",
left : "5%",
image : "myimage.png",
multipleLine : false
});
imageSlider .add(image);
}
}
fillScrollView();

titanium animation doesn't retain its values

When I'm animating on Titanium a view, it doesn't retain its values. Let say for example I have a view named bar with height=0. I would like to animate so I made this code..
aniBar1 = Ti.UI.createAnimation({
curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 250,
height : 50,
top : 0
});
bar.animate(aniBar1);
This do the trick but when I do the second animation after some events, lets say
aniBar2 = Ti.UI.createAnimation({
curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 250,
height : 150,
top : 0
});
I want it to animate from the height 50 to 150 but it doesn't do that. When I execute second animation. It shrink down to 0 do the animation.
Is there a way to retain the values when animating? I tried to set the new values on callback but I can do callbacks.
Your help will be appreciated. Thanks in advance!
you need to set new value in its complete event...
aniBar1 = Ti.UI.createAnimation({
curve: Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 250,
height : 50,
top : 0
});
aniBar1.addEventListener('complete',function(e){
bar.height = 50;
});
bar.animate(aniBar1);

Is it possible to resize a Panel inside another Panel in ExtJs?

I have some custom panel A (inside of which I have a grid with locked columns) of size x:1000, y: 600 that is enclosed by an Ext.TabPanel B of smaller size. For some calculations I need to have A panel resized to it's full size (meaning 1000*600). Is it possible to achieve that in Ext 4.1 by some combination of suspendLayouts or some other approach ? The definitions of panels :
A = new Ext.panel.Panel({
height : 600,
width : 1000
});
B = new Ext.TabPanel({
activeTab : 0,
renderTo : Ext.getBody(),
height:450,
width: 500,
items : [
A
]
});

Categories

Resources