How do I offset the title control in titanium?
Right now I am trying to put a left: -100 property on the label that is in the title control and that works for when you open up the view but then it moves back into the center.
Are there any suggestions on how I can achieve this move over?
Thanks in advance!
var txtSearch = Titanium.UI.createTextField({
hintText: 'Keyword to search for',
height: 'auto',
width: 220,
left: -100,
font: {fontSize: 12},
enabled: true,
keyboardType:Titanium.UI.KEYBOARD_EMAIL,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
clearButtonMode: Titanium.UI.INPUT_BUTTONMODE_ONFOCUS
});
win.setTitleControl(txtSearch);
var btnSearch = Titanium.UI.createButton({
title: 'Search',
height: 'auto',
width: 'auto',
font: {fontSize: 13}
});
win.rightNavButton = btnSearch;
If I click the search button and it brings me to the search results page and then I hit the back button the textbox is not moved over and looks fine.. Only when the page first loads
Try adding the text field to a view, then setting the view as the title control:
var container = Ti.UI.createView({
width: 320
});
var txtSearch = Titanium.UI.createTextField({
hintText: 'Keyword to search for',
height: 'auto',
width: 220,
left: 0,
font: {fontSize: 12},
enabled: true,
keyboardType:Titanium.UI.KEYBOARD_EMAIL,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
clearButtonMode: Titanium.UI.INPUT_BUTTONMODE_ONFOCUS
});
container.add(txtSearch);
win.setTitleControl(container);
Related
I am trying to get an information card (consisting of a Konva.Rect and Konva.Text) to appear below an image while hovering over it. I've tried combining the info card into a separate child group and added it to a parent group that consists of the image and the image label. The issue is that when hovering over the image the rectangle appears far off to the right rather than in the correct x,y position. How can I set the child group's coordinates such that if the image moves across the screen the info card will always appear below it?
I've tried setting the rectangle's x attribute as group.x() (where group is the parent group's x coordinate). I've also tried setting it as image.x() yet the rectangle still appears far off to the right of the parent image.
let group = new Konva.Group({
x: 100,
y: 20,
id: attr.status,
visible: ng.checkboxValues[status] ? true : false,
});
let image = new Konva.Image({
x: group.x(),
y: group.y(),
image: DOMImage,
width: 40,
height: 40,
listening: true,
visible: true,
});
let robotAlias = new Konva.Text({
x: image.x() - 20,
y: image.y() + 10,
text: attr.alias,
fontSize: 13,
fontFamily: 'Roboto',
fill: ng.colorMap[attr.status],
visible: true,
});
let complexText = new Konva.Text({
x: image.x(),
y: image.y(),
text: `${attr.alias}-${attr.status}`,
fontSize: 15,
padding: 10,
fontFamily: 'Roboto',
align: 'center',
fill: this.colorMap[attr.status],
height: 60,
width: 160,
visible: true,
});
let rect = new Konva.Rect({
x: image.x(),
y: image.y(),
stroke: '#fff',
strokeWidth: 1,
fill: '#fff',
height: 60,
width: 160,
shadowColor: 'black',
shadowBlur: 5,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
visible: true,
});
let descriptionCardGroup = new Konva.Group({
x: image.x(),
y: image.y(),
visible: false,
name: `${attr.id}`,
})
group.add(image);
group.add(robotAlias);
descriptionCardGroup.add(rect);
descriptionCardGroup.add(complexText);
group.add(descriptionCardGroup);
Here's a screenshot of the current behavior: https://ibb.co/QMYjxrw
I'm using jspdf-autotable on angular 4.
The line width is wrong when there is an overflow of content. I will like to use long content on my table but the breakline doesn't work right. What can i do????
There is my source code
doc.autoTable(colonnes, rows, {
theme: 'striped',
styles: {
fillColor: [10, 10, 20],
overflow: 'linebreak',
fontSize: 15,
rowHeight: 20,
columnWidth: 'wrap',
theme: 'striped',// 'striped', 'grid' or 'plain'
startY: false, // false (indicates margin top value) or a number
pageBreak: 'auto', // 'auto', 'avoid' or 'always'
tableWidth: 'wrap', // 'auto', 'wrap' or a number,
showHeader: 'firstPage', // 'everyPage', 'firstPage', 'never',
tableLineColor: 200, // number, array (see color section below)
tableLineWidth: 2,
},
tableWidth: 'auto',
columnWidth: 'auto',
columnStyles: {
id: {fillColor: [15, 15,25]},
//1: {columnWidth: 'auto'},
columnWidth: 'wrap',
},
headerStyles: {theme: 'striped'},
margin: {top: 60},
addPageContent: function(data) {
doc.text(nom + ' Nombre Total : ' + rows.length, 150, 40);
/*fontSize: 25;
fontFamily: 'vivaldi';*/
}
});
doc.save(nom+now+'.pdf');
In columnStyles add 'overflow: '
Possible values for overflow:
overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'normal'
columnStyles = {
columnId: {
overflow: 'ellipsize'
}
}
I'm having a few issues with the last couple of pieces on my iOS app built with Appcelerator Titanium.
The app sample below shows one of my windows which allows the user to tap a view (which contains a word), which flips around to show the same word in a different language. The user can then tap the same view again and it animates back to the original position showing the original word.
When the user wants to move onto another word, they simple swipe on the view and it brings in the next word.
Here are the issues i'm experiencing;
If a user swipes super fast through loads of words, then taps to flip, it crashes.
If a user taps the view to flip the view around sometimes the second word flashes up before the animation takes place, it should only be seen as the view comes around into view.
and
3) The user can opt to drop the word, which when tapped performs a database update and then reloads the function and brings a new word in. Great for the first time you use it, but on the 2nd, 3rd, 4th time, the alertbox pops up multiple times rather than once.
Now, I suspect I'm doing something wrong here, but I can't work it out, i've moved code around to make sure labels aren't displaying before they should, but it keeps happening.
Can anyone shed any light on 1 or all of my points? I'm about to lose my mind!
I'm using Titanium 3.20 for iOS
Many thanks
Simon
var win = Titanium.UI.currentWindow;
var selectedlanguage = Ti.App.Properties.getString('langSelect');
// detect height
if (Titanium.Platform.displayCaps.platformHeight == 480) {
var MVTOP = 115;
var tapTOP = 83;
var swipeTOP = 275;
} else {
var MVTOP = 165;
var tapTOP = 133;
var swipeTOP = 325;
}
var masterView = Ti.UI.createView({
backgroundColor: '#FFF',
top: MVTOP,
width: 300,
height: 140,
opacity: 0.7
});
var state = true;
win.add(masterView);
var front = Ti.UI.createView({
backgroundColor: '#FFF',
top: 0,
left: 0,
width: 300,
height: 140,
opacity: 1.0,
touchEnabled: false
});
var back = Titanium.UI.createView({
backgroundColor: '#FFF',
top: 0,
left: 0,
width: 300,
height: 140,
opacity: 1.0,
touchEnabled: false
});
if (win.section == 'word_expressions') {
var label1 = Ti.UI.createLabel({
//text: verb_german,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 20
},
top: 50
});
var label2 = Ti.UI.createLabel({
//text: verb_english,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 20
},
top: 50
});
} else {
var label1 = Ti.UI.createLabel({
//text: verb_german,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 30
},
top: 50
});
var label2 = Ti.UI.createLabel({
//text: verb_english,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 30
},
top: 50
});
}
var dropButton = Ti.UI.createButton({
width: 120,
height: 41,
right: 15,
bottom: 15,
title: 'drop word',
backgroundColor: '#fd0100',
color: '#FFF',
font: {
fontSize: 15
},
opacity: 1.0
});
win.add(dropButton);
function loadWords() {
// get the section to query for the database
var wordSection = win.section;
// get a random pair of words
var db = Ti.Database.open('germanV6');
var rows = db.execute('SELECT * FROM Words WHERE ' + wordSection + ' = 1 AND word_dropped = 0 ORDER BY RANDOM() LIMIT 1');
var x = 0;
while (rows.isValidRow()) {
if (selectedlanguage == 'en') {
var word_1 = rows.fieldByName('word_english');
var word_2 = rows.fieldByName('word_german');
} else if (selectedlanguage == 'de') {
var word_2 = rows.fieldByName('word_english');
var word_1 = rows.fieldByName('word_german');
}
var word_id = rows.fieldByName('word_id');
rows.next();
}
// close database
rows.close();
var state = true;
label1.text = word_1;
front.add(label1);
masterView.add(front);
label2.text = word_2;
back.add(label2);
masterView.addEventListener('click', function (e) {
switch (state) {
case true:
Ti.API.info('true');
masterView.animate({
view: back,
transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
});
break;
case false:
Ti.API.info('false');
label1.text = word_1;
masterView.animate({
view: front,
transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
});
break;
}
state = !state;
});
var eventListener = function () {
// update the DB to tell it the word has been dropped
var dbDelete = Ti.Database.open('germanV6');
var rowsDelete = dbDelete.execute('UPDATE Words SET word_dropped=1 WHERE word_id=' + word_id);
// pop an alert to notify the user the word has been dropped
var alertDialog = Titanium.UI.createAlertDialog({
title: 'Word Dropped',
message: 'This word has been dropped!' + word_id,
buttonNames: ['OK']
});
// show the message
alertDialog.show();
// load in a new word
//loadWords();
alertDialog.addEventListener('click', function (j) {
loadWords();
});
};
}
// fire the function and load our words into play
loadWords();
var tapLabel = Ti.UI.createLabel({
width: 200,
top: tapTOP,
text: 'tap to flip',
textAlign: 'center',
color: '#FFF',
font: {
fontSize: 15
}
});
var swipeLabel = Ti.UI.createLabel({
width: 320,
top: swipeTOP,
text: 'swipe for next word',
textAlign: 'center',
color: '#FFF',
font: {
fontSize: 15
}
});
win.add(tapLabel);
win.add(swipeLabel);
var grammarButton = Ti.UI.createButton({
width: 120,
height: 41,
left: 15,
bottom: 15,
title: 'verb tables',
backgroundColor: '#ffff01',
color: '#000',
font: {
fontSize: 15
},
opacity: 1.0
});
win.add(grammarButton);
swipeLabel.addEventListener('swipe', function (e) {
// reload the new word
loadWords();
});
masterView.addEventListener('swipe', function (e) {
// reload the new word
loadWords();
});
grammarButton.addEventListener('click', function (e) {
var newWin = Titanium.UI.createWindow({
url: 'verb_table.js',
backgroundImage: '/images/background_random.jpg',
backgroundColor: '#FFF',
barColor: '#000',
translucent: true,
color: '#FFF',
navTintColor: '#FFF',
titleControl: Ti.UI.createLabel({
text: 'Verb Table',
color: '#FFF'
}),
statusBarStyle: Titanium.UI.iPhone.StatusBar.LIGHT_CONTENT,
backButtonTitle: ''
});
newWin.nav = win.nav;
win.nav.openWindow(newWin, {
animated: true
});
});
loadWords() adds an event listener to masterView every time it is called. Probably the source of the crash. Do the Ti.API.info calls build up over time of using the app? I'd expect you should see it popping out 1 then 2 then 3... as it runs along.
Is there missing code? The eventListener function is defined, but I can't find where it is called. This function then has another listener that then calls loadWords again adding more listeners. the name of the function eventListener was difficult to look for because all the addEventListener references come up in a search because they match. I'd change the name of that function to something more distinct. It might be getting called in there, but I gave up looking for it.
There is something up with this code. I would expect that the var label1 and var label2 aren't the ones you are adding to the view later on, but I would expect them to go out of scope when they leave your blocks {}. I would move the var label1 and var label2 outside this if-else and just have label1 = Ti.UI... and the label2 = Ti.UI.. in there.
var label1;
var label2;
if (win.section == 'word_expressions') {
label1 = Ti.UI.createLabel({ // FIX
//text: verb_german,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 20
},
top: 50
});
label2 = Ti.UI.createLabel({ // FIX
//text: verb_english,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 20
},
top: 50
});
} else {
label1 = Ti.UI.createLabel({ // FIX
//text: verb_german,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 30
},
top: 50
});
label2 = Ti.UI.createLabel({ // FIX
//text: verb_english,
text: '',
textAlign: 'center',
color: '#000',
font: {
fontSize: 30
},
top: 50
});
}
front.add(label1);
back.add(label2);
Variable Scrope
http://msdn.microsoft.com/en-us/library/bzt2dkta(v=vs.94).aspx
I would say you need to rethink the loadWords function. It is perhaps doing way too much and the source of all the issues. The masterView.addEventListener should be moved out. The alertDialog should be setup a different way as well. Perhaps moving that code to generate the alert outside of the omni function loadWords.
The database is opened repeatedly inside loadWords, but never closed. You did close the row, but forgot the db.
front.add and back.add aren't necessary in the loadWords function, you should have these after the If-Else statement where you are defining them. Keep the code in there that updates, their .text properties.
Looking closer at the label definitions you are defining them exactly the same aside from the font size. I would fix that to only change the font inside the IF-ELSE.
Fix the place where you detect height as well. Move all the var [variable names] out of the block and define them once. In the IF-ELSE then assign them the correct values.
I want to create label bars in titanium for the text of my labels. I know am supposed to add a label property but i don't know which is it.
Below is my label.
var label = Titanium.UI.createLabel({
text: 'Register',
height: 35,
width: 200,
top: 10,
color: '#336699'
});
what i want to achieve is something like my label text which is 'register' to be on a Colored bar.
I believe backgroundColor is what you are looking for:
var label = Titanium.UI.createLabel({
text: 'Register',
height: 35,
width: 200,
top: 10,
color: '#336699',
backgroundColor: 'red'
});
You can also change the padding with backgroundPadding(Top/Left/Bottom/Right).
I'm trying to create a dialog using jQueryUI and I'm running into 2 issues that I didn't expect and haven't found a solution that seems to work for me. Using this code:
$( '<div/>' ).load( $this.attr( 'href' ) ).dialog({
height: 'auto',
maxWidth: 600,
position: 'center',
resizable: false,
title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
width: 'auto',
resize: function( e, ui ) {
$(this).dialog( 'option', 'position', 'center' );
}
});
I end up with a dialog that's positioned such that the upper left corner is at the center of the screen (or thereabouts) and whose width seems wholly dependent on the text it contains. Is there something obvious that I'm missing? I'd really like for the dialog as a whole to be center aligned on both axes and for the width to not exceed 600px.
Thanks.
Your width: 'auto' is the culprit, I think. Also, the resize function doesn't apply to whether the browser window resizes, that was just if you resize the dialog itself. Since you set resizable to false, that won't happen.
How about setting a minWidth as well?
$( '<div/>' ).attr('id', 'my-dialog').load( 'hello.html' ).dialog({
height: 'auto',
maxWidth: 600,
minWidth: 500,
position: 'center',
resizable: false,
title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false,
});
$(window).resize(function(){
$('#my-dialog').dialog( 'option', 'position', 'center' );
});
More in the documentation: http://api.jquery.com/resize/