Okay, guys -- I have to admit that my frustration level is growing as Titanium development continues to kick my backside. Every change I make, however innocuous it may appear, seems to break something else in a completely unexpected way.
Today, I'm simply trying to add a label to a view, but it's not displaying.
// UI Factory Include
var Inova = {};
Ti.include( '_ui.js' );
var win = Ti.UI.currentWindow;
win.layout = 'vertical';
// Header
win.add( Inova.ui.createHeaderView() );
// body
var body = Ti.UI.createView({
backgroundColor:'#00f', // Should see no blue
backgroundImage: '/images/body.png',
height: 350,
layout: 'vertical',
});
var label = Ti.UI.createLabel({
color: '#000',
text: 'Show me the label...please?',
textAlign: 'center',
});
body.add( label );
win.add( body );
I know I have to be missing something incredibly stupid and basic, but I think I've lost all ability to see the obvious. Help?
I think you need to explicitly set the width/height in the label. You can set it to width: 'auto', height: 'auto' but it has to be set.
(Oddly enough this is not true in Andriod, from my experiences).
Whenever I get flummoxed by the API, I return to the basics. Try this:
Create a new project called myTest. In the apps.js file add the following code to the bottom of the file above the last line
var win3 = Titanium.UI.createWindow({
title:'Tab 3',
backgroundColor:'#fff'
});
var tab3 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 3',
window:win3
});
var label3 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 3',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
var txtLabel = Ti.UI.createLabel({
color: '#000',
text: 'Show me the label...please?',
textAlign: 'center',
left: 100,
top: 50
});
win3.add( txtLabel );
win3.add(label3);
Your label, txtLabel, will now appear below label3 on tab3. I tried using the code you provided, but failed to get it to work as well. So, start with a basic page that shows the label, then add the other components until you get the expected results.
Hope that helps.
Related
I am using jsPdf to export table data as pdf file, I have about 50 columns in my table.
but i am not able to see all columns in pdf. only few col are visible rest seems out of page, but there is no scrollbar in pdf file.
please suggest how to get a horizontal scrollbar on pdf page.
Below is my code snippet :
exportPDF(myTableHeaders,myTableData) {
const pdf = new jsPDF();
pdf.setFont("helvetica");
pdf.setFontSize(6);
;
let headerConfig = myTableHeaders.map((header) => ({
name: header.fieldName,
prompt: header.label,
width: 30,
align: "center",
fontSize: 6,
padding: 0,
}));
pdf.table(20, 30, myTableData, headerConfig);
pdf.save("pdf.pdf");
}
Below is snap :
Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested.
Here's the code:
// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
height: 0,
width: 0,
autoAlpha: 0
})
// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
width: '2%',
height: '4%'
})
// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
backgroundColor: "#fff"
})
// the master timeline to manage the parts
const masterTimeline = new TimelineMax({paused: true})
masterTimeline.add(hideCopyContentDivsTl)
.add(shrinkCopyWrapperTL)
.add(fadeLargeBgImgTl)
// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
console.log("should play: ", masterTimeline)
masterTimeline.play()
} else {
console.log("should reverse: ", masterTimeline)
masterTimeline.reverse()
}
I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse?
The problem is with my code and not with GSAP. I have new timelines created on every click. How will it reverse something that it doesn't have a previous reference to? The solution would be to create the timelines outside of the click event and then based on the state, play forward or reverse the animation.
I have a problem with titanium 3.5.0. When I want to position my ui element based on previous element in the layout with some methods like getWidth or getTop I'm getting Nan and in the console I'm getting a warning that says:
Invalid dimension value (nan) requested. Making the dimension undefined instead.
I have scrollview and I want to arrange my item into it so what I did
this is my scrollview code
var scrollView = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
backgroundColor:'#fff',
showVerticalScrollIndicator: false,
showHorizontalScrollIndicator: false,
height:"100%",
width: "100%",
top:36.6
});
and the scrollableview code
var view = Ti.UI.createView({
backgroundColor:'#fff',
borderRadius: 0,
height: 2000,
width: Ti.UI.FILL
});
and then I started adding my ui element in the view
var type =Ti.UI.createLabel({
text:"Type",
color:label_color,
right:207,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:37.5
});
var p_name=Ti.UI.createLabel({
text:"Property Name",
color:label_color,
left:label_p_l,
font:{ fontFamily: customfont,fontSize:17},
top:type.getTop()+label_h+32
});
so now it's working perfectly because type has a numeric value and even I added three more element in this way and every things works perfectly after that
I have added the 4th element like this and now when I started to get Nan.
var space_Slider = Titanium.UI.createSlider({
top:space.getTop()+space.getHeight()+15,
min:0,
max:1000,
value:0,
height:4,
backgroundColor:"#fff",
leftTrackImage:'/images/slider_color.png',
rightTrackImage:'/images/slider_color.png',
thumbImage:'/images/slider.png',
});
now the space.getTop() starts returning Nan
Any ideas how to solve this problem?
That happens because you've specified width / top not as numeric data type, but as string. "100%", "15dp" etc
getWidth() returns numeric data types IFF you pass numeric to width parameter when constructing the element or invoking setter method.
Furthermore, if you don't specify width / top parameters during construction of the elements they will not return anything.
To get the dimensions of the element you need to add them to some container / parent view and postlayout all elements. After this is done you can ask for dimensions like this:
element.size.width
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
So i have this code:
var answerView = Ti.UI.createScrollView({ //var added
top: Ti.Platform.displayCaps.platformHeight*0.55,
left:Ti.Platform.displayCaps.platformWidth*0.1,
width: Ti.Platform.displayCaps.platformWidth*0.8,
backgroundImage: '/images/labelBackground.png',
borderRadius: 8,
height: Ti.Platform.displayCaps.platformHeight*0.5,
contentHeight:'auto',
showHorizontalScrollIndicator:true,
scrollType:'vertical',
});
for (var j = 0; j < question.answers.length; j++){
var row = createRow(question.answers[j]);
answerView.add(row);
}
and this function:
function createRow(answer) {
var row = Ti.UI.createView({
width:'100%',
height: 'auto',
});
var answerButton = Ti.UI.createButton({
top: '1%',
left: '1%',
title: answer.answer,
value: answer.order,
width:'98%',
font : {fontSize:'12sp'},
});
row.add(answerButton);
return row;
}
The problem is, the darn thing overlays all the buttons into one... that is, it isn't "pushing down" the rows. From the titanium tutorial here:
http://docs.appcelerator.com/titanium/2.1/index.html#!/api/Titanium.UI.ScrollView
I would have thought this would work, but it doesn't. I know i can do some magic with the numbers and send each row the position it should have, but I thought maybe titanium would be clever enough to do that? Am i missing something?
Oh jesus.
Titanium is moronic in this instance - the problem was I had
height: 'auto' in the definition of each row - that is:
function createRow(answer) {
var row = Ti.UI.createView({
width:'100%',
height: 'auto',
});
...
And funnily enough, that makes each row REALLY BIG, probably as big as the entire space alloted for the row. I don't know, i never tried to scroll through it. So just change the height value for the row to something sane - i always base mine off the display height.
Now I have
function createRow(answer) {
var row = Ti.UI.createView({
width:'100%',
height: Ti.Platform.displayCaps.platformHeight*0.1,
});
...
and all is well.