How can I get my title and my bottom to show in Titanium? - titanium

var galWin = Ti.UI.createWindow({
title: "Alejandro's Big Adventure",
modal: true,
backgroundColor: "828F99",
layout: "horizontal"
});
var border = Ti.UI.createView({
backgroundColor: "2585CC",
height: 1,
width: pWidth,
top: 30
});
var bottomButton = Ti.UI.createView({
backgroundColor: "828F99",
height: "10%",
width: pWidth,
bottom: 0
});
var galContainer = Ti.UI.createScrollView({
top: 0,
width: pWidth,
height: pHeight - border.height - border.top,
backgroundColor: "2585CC",
layout: "horizontal",
contentWidth: pWidth,
showVerticalScrollIndicator: true
});
for(var i = 0; i < myImages.length; i++){
var view = Ti.UI.createView({
borderRadius: 10,
top: margin,
left: margin,
width: size,
height: size
});
var img = Ti.UI.createImageView({
image: "images/" + myImages[i],
top: 0,
width: view.width * 1.25,
height: view.height * 2
});
view.add(img);
galContainer.add(view);
};

Firstly: for the title if you want to get the title of the window
so you can get it with getTitle() method like this
galWin.getTitle()
secondly: for the bottom
if you want to get the bottom of the window here you can't do that because the window is the top element in you hierarchy and is the doc
Window's bottom position, in platform-specific units.
On Android, this property only works with lightweight windows. See "Android Heavyweight and Lightweight Windows" in the main description of Titanium.UI.Window for more information.
so you get the bottom of the element according to it's parent so here the window have no parent
but in general if you want to get the bottom of any element
you can use getBottom() but be aware that this method will return a number only if you provide a bottom property inside the element other than that you will get Nan
and if you want to get the bottom of an element after the layout drawn on the screen you can you postlayout event and using rect.y to get the top of the element and then you can add the element height and finally minus it from the window height and for that if you don't have the window height you can use displayCaps.contentHeight to get the screen height
sorry for Long hope it help

Related

How to pass an array of color for rectangle in qml

I want to pass the colorModelData for rectangle shown below.
Requirement is: on click of button i want to open a popup. And inside popup want to display multiple number of circles with different colors. Using button can i create a popup which will give me list of colors? ALso list of color should be exposed from outside.
How can i do it?
Rectangle {
id: control
property var colorModelData: ["Red", "Green", "Blue"]
Button{
id: btn
width: 100
height: 100
onClicked: {
rect.visible = true
}
}
Rectangle{
id: rect
visible: false
width: 400
height: 300
color: "gray"
anchors.top: btn.bottom
GridView{
width: rect.width
height: rect.height
model: colorModelData
delegate: Column{
Rectangle {
width: 20
height: 20
radius: width/2
//color: colorModelData [..... getting error]
}
}
}
}
}
I tested your code and it works for me. So I assume the only part you're missing is the line you have commented out. Use this:
color: colorModelData[index]

QML Slider : handle and mouse cursor

I created a slider in an item and customized it like in the following code :
Item {
id: item1
x: 0
y: 0
width: 200
height: parent.height
Rectangle {
id: background
anchors.fill: parent;
color:Qt.rgba(0.9,0.9,0.9,1);
}
Slider {
anchors.centerIn: parent
orientation: Qt.Vertical
height: parent.height
style: SliderStyle {
groove: Rectangle {
implicitWidth: 200
implicitHeight: 8
color: "gray"
radius: 8
}
handle: Rectangle {
anchors.centerIn: parent
color: control.pressed ? "white" : "lightgray"
border.color: "gray"
border.width: 2
width: 20
height: 20
radius: 6
}
}
}
}
The problem appears when I change the size of the handle to have it wider than high, so I change in the handle :
width: 20
height: 80 //the height is changed instead of width but I think
//it's because it is a vertical slider
And then, when I move the handle, it doesn't stay under the mouse cursor but there is an offset between the two.
How to fix that?
The slider is internally rotated 90 degrees when the orientation is vertical, so you'll need to set the width instead of the height. In other words, always style the handle assuming that the slider is horizontal, and the rest will just work...
... except for the mouse offset bug that you just ran into. It appears that your use case isn't auto-tested. Please submit a bug report at bugreports.qt.io.

How to specify maxWidth and maxHeight in using SimpleModal

When I call the simplemodal method, I do that like so:
jQuery("#stats").modal({
maxWidth: 400,
maxHeight: 300,
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.data.hide();
dialog.container.fadeIn('slow', function () {
dialog.data.slideDown('slow');
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut('slow', function () {
dialog.container.hide('slow', function () {
dialog.overlay.slideUp('slow', function () {
jQuery.modal.close();
});
});
});
}
});
However, when the modal is rendered, both max values are ignored. The resulting element with inline styles is
<div id="simplemodal-container"
class="simplemodal-container"
style="height: 697px; width: 1861px; left: 231px; top: 85.5px; position: fixed; z-index: 1002;">
Is there an issue with the way I specified the max values? Or, is there an issue with simplemodal?
Thanks! E
I think those min/max settings are used to just set the actual height/width for SimpleModal. The modal's container will be sized according to the content as long as the content's size is within the min/max settings. Otherwise, the modal container size will be set at to the min/max values. That's all it does. For example, if the content is bigger than maxHeight & maxWidth settings, then there will be scroll bars:
See this fiddle here
Your content
<div id="stats" style="width:400px; height:400px;">
Your content will show in modal with scroll bars,
because it is bigger than maxWidth, maxHeight.
</div>
The modal
jQuery("#stats").modal({
maxWidth: 300,
maxHeight: 300,
minWidth: 100,
minHeight: 100,
...
If you don't want the modal to shrink/expand with the content, you can force the modal to stay at a specified width & height. Some people even swap out classes (one for normal modal, one for long modal, etc.):
#simplemodal-container {
height: 360px;
width: 600px;
}
If you dynamically change the content of the div (like from an ajax call) you can also do this:
$("#simplemodal-container").css('height', 'auto'); //Resets container height
$("#simplemodal-container").css('width', 'auto'); //Resets container width
$(window).trigger('resize.simplemodal'); //Refresh the modal dialog

To change the windows size depending on another view

My application has two views.
One view is fixed 50pt height.
the other view must be 100% - 50pt.
How can I do this calculate in tss?
or is it impossible?
If so how can I decide the windowsize?
index.tss
"#tableView": {
width: "100%" -50,
height: "98%",
top:0
}
"#adView": {
backgroundColor:"black",
width: "100%",
height: 50,
bottom: 0
}
Use the Titanium.Platform.DisplayCaps.platformWidth property to get the size of the window, assuming that the #tableview's parent is the app window:
#tableview : {
width : Titanium.Platform.DisplayCaps.platformWidth - 50,
height: "98%",
top:0
}
Option 2 is you can calculate this inside your controller using the postlayout event like this:
function adjustTableWidth(e) {
$.tableView.width = $.tableView.rect.width - 50;
// Remove the listener so it doesn't keep calling infinitely
$.tableview.removeEventListener('postlayout, adjustTableWidth);
}
$.tableview.addEventListener('postlayout, adjustTableWidth);
Just make sure if you use option two, you set the TSS to this:
"#tableView": {
width: "100%",
height: "98%",
top:0
}

Titanium Scrollable view is jerky, momentarily stops half way

I have been trying to figure out why a scrollable view in my app is very jerky, it momentarily stops half way when I swip between pages. The contents of each page is not complex, just a few text fields and an image. The number of pages is up to 8.
The versions I use are; Titanium 3.1.2GA Alloy 1.2.1 iOS 6.1.3 on an iPhone4 <<< Important - the jerkyness is not that visible on the iPhone5
Please note that I started this project in November last year and have along the way upgraded my enviroment when new releases have become available. Could there be some old code being used? I saw an early pre-1.0 Alloy bug raised for this issue, could it still be there in my environment?
I created a test app using the standard two tab Alloy template and added the code below. For the second tab I had just saved to the disk the image used in tab 1. Tab 3 did not have any images but was still a bit jerky. In my app I have a few more views on each page and it is very jerky.
If anyone have any suggestions I would really appreciate it. It would be great if someone please confirm the issue with an iPhone4, just to have make sure my environment is not the cause (I guess i could try to uninstall and reinstall but I am not sure how to properly uninstall everything).
Cheers, Lars
Index.xml
<Alloy>
<TabGroup>
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="window1" title="Tab 1">
</Window>
</Tab>
<Tab title="Tab 2" icon="KS_nav_views.png">
<Window id="window2" title="Tab 2">
</Window>
</Tab>
<Tab title="Tab 3" icon="KS_nav_ui.png">
<Window id="window3" title="Tab 3">
</Window>
</Tab>
</TabGroup>
Index.js
function createViews() {
var v10 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#00FFFF");
var v11 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FF00FF");
var v12 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFF00");
var v13 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
var v14 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
var v15 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
var v20 = createPage("images/Mona_Lisa.jpg", "#00FFFF");
var v21 = createPage("images/Mona_Lisa.jpg", "#FF00FF");
var v22 = createPage("images/Mona_Lisa.jpg", "#FFFF00");
var v23 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
var v24 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
var v25 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
var v30 = createPage(null, "#229900");
var v31 = createPage(null, "#333333");
var v32 = createPage(null, "#009900");
var v33 = createPage(null, "#FF77FF");
var v34 = createPage(null, "#007744");
var v35 = createPage(null, "#009988");
var v36 = createPage(null, "#DDBB00");
var v37 = createPage(null, "#CCCCCC");
var v38 = createPage(null, "#99FFFF");
var photosView1 = Ti.UI.createScrollableView({
views:[
v10,v11,v12,v13,v14,v15 // http images
],
showPagingControl:true,
cacheSize: 21
});
$.window1.add(photosView1);
var photosView2 = Ti.UI.createScrollableView({
views:[
v20,v21,v22,v23,v24,v25 // file images
],
showPagingControl:true,
cacheSize: 21
});
$.window2.add(photosView2);
var photosView3 = Ti.UI.createScrollableView({
views:[
v30,v31,v32,v33,v34,v35 // colored pages
],
showPagingControl:true,
cacheSize: 21
});
$.window3.add(photosView3);
}
function createPage(image, bkgColor) {
var detailsView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.FILL,
top: 5,
left: 5,
right: 5,
bottom: 100,
backgroundColor: bkgColor
});
if (image) {
var imageView = Ti.UI.createImageView({
image:image
});
detailsView.add(imageView);
}
var labelView0 = Ti.UI.createLabel({
text: "Label 0"
});
detailsView.add(labelView0);
var pageView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: "#E4E8E8"
});
pageView.add(detailsView);
var labelContainer = Ti.UI.createView({
height: 90,
bottom: 5,
left: 5,
right: 5,
backgroundColor: "#FFAAFF"
});
pageView.add(labelContainer);
var labelView1 = Ti.UI.createLabel({
bottom: 50,
text: "Label 1"
});
labelContainer.add(labelView1);
var labelView2 = Ti.UI.createLabel({
bottom: 10,
text: "Label 2"
});
labelContainer.add(labelView2);
return pageView;
}
createViews();
$.index.open();
6 Sep 2013 ...
Based on a comment that ambiguity of the layouts could cause the jerkyness I have now tried with views that have absolute positions and sizes. I also used just images from the file system that had the exact size as the image view. Please see code below. It is better but the jerkyness is still there which means that the underlaying issue is not resolved by absolute positions and sizes.
function createPage(image, bkgColor) {
var detailsView = Ti.UI.createView({
width: 300,
height: 300,
top: 0,
backgroundColor: bkgColor
});
if (image) {
var imageView = Ti.UI.createImageView({
width: 300,
height: 300,
image:image
});
detailsView.add(imageView);
}
else {
var labelView0 = Ti.UI.createLabel({
width: 300,
height: 300,
text: "No Image"
});
detailsView.add(labelView0);
}
var pageView = Ti.UI.createView({
width: 300,
height: 400,
backgroundColor: "#E4E8E8"
});
pageView.add(detailsView);
var labelContainer = Ti.UI.createView({
width: 300,
height: 100,
top: 300,
backgroundColor: "#FFAAFF"
});
pageView.add(labelContainer);
var labelView1 = Ti.UI.createLabel({
width: 300,
height: 20,
top: 10,
left: 10,
text: "Label 1"
});
labelContainer.add(labelView1);
var labelView2 = Ti.UI.createLabel({
width: 300,
height: 20,
top: 40,
left: 10,
text: "Label 2"
});
labelContainer.add(labelView2);
return pageView;
}
For me, it had to do with the scrollableView.cacheSize property. Try setting it to the length of your views array.