I am new in Titanium alloy and I would like to change my project from titanium default template to alloy. Below is the code for creating a text box in default template. I would like to change this to alloy template.
var checkbox = Ti.UI.createSwitch({
id:'checkbox',
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
});
Not hard at all! Try this inside your Alloy XML view markup:
checkbox.xml
<Alloy>
<Switch id="checkbox"/>
</Alloy>
Now we can use the style file to set attributes based on the id.
checkbox.tss
"#checkbox[platform=android]" : {
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX
}
This will set the style to checkbox, also note that I set this to only happen for android.
Alternatively, if we wanted every switch to be of the checkbox style we could set this inside app.tss:
"Switch" : {
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX
}
You can create the check box like this.
var checkbox = Ti.UI.createSwitch({
style: Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
textAlign:Ti.UI.TEXT_ALIGNMENT_LEFT,
title:'Notice Me',
value:true,
width: 300,
left: 18
});
win.add(checkbox);
checkbox.addEventListener('change',function(e){
//function
Ti.API.info('Switch value: ' + checkbox.value);
});
Related
If I want to create a pop up view in Android, say on clicking a button, a QR code will pop up and things behind will be blurred a bit, I called the Dialog class in Android/Java, which I think is more like a View in iOS.
May I know whether there is a class which is almost equivalent in iOS? I googled around and seems no one mention about that. While some might say I could use AlertController, I would say the experience is completely different. Dialog in Android can contain everything - text, buttons, images, layouts, you name it, while AlertController in iOS is literally just the alert and it does not expect you to do so much customization.
Can anyone illustrate the road ahead for me?
You use UIAlertController in Swift.
Example
DispatchQueue.main.async {
let alertController = UIAlertController(title: "My Title", message: "My Message", preferredStyle: .alert)
alertController.view.tintColor = UIColor.blue //Change this or remove
//Blur Effect
let blurEffect = UIBlurEffect(style: .light)
let blurVisualEffectView = UIVisualEffectView(effect: blurEffect)
blurVisualEffectView.frame = self.view.bounds
self.view.addSubview(blurVisualEffectView) //Add the blur effect to the dialog
//Set Image
var myImage = UIImageView(frame: CGRect(x: 89, y: 35, width: 95, height: 80))
myImage.image = UIImage(named: "MyImage")!
alertController.view.addSubview(myImage)
//Button actions
let cancelAction = UIAlertAction(title: "Cancel", style: .destructive) {_ in
blurVisualEffectView.removeFromSuperview()
}
let okAction = UIAlertAction(title: "OK", style: .default) {_ in
blurVisualEffectView.removeFromSuperview()
}
//Height constraint handler
var height: NSLayoutConstraint = NSLayoutConstraint(
item: alertController.view, attribute:
NSLayoutConstraint.Attribute.height,
relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil,
attribute: NSLayoutConstraint.Attribute.height,
//Change this as desired
multiplier: 1, constant: self.view.frame.height * 0.4)
alertController.view.addConstraint(height) //Set the constraint
alertController.addAction(cancelAction)
alertController.addAction(okAction)
//Display (present) the alertcontroller
self.present(alertController, animated: true, completion: nil)
}
Result
Breaking This Down
Declare the alertController. Set the title to "My Title" and the message.
Set the tintColor. This changes it to custom colors other than the default iOS blue tint.
Add the UIBlurEffect. "Tries" to mimic Androids AlertDialog. :)
Declare and add the UIImageView to the alertController as a sub view
Add the action buttons. cancelAction and okAction. Notice the style: property? This allows you to choose between .destructive, and .default. .destructive makes the button red-tinted, and .default leaves it as the alertController's tintColor.
Add a height constraint. Useful if you want more content visible (like UIImageViews)
Use the alertController.addAction functions to add our buttons, and present it.
Extra note: All of this is contained inside DispatchQueue.main.async {}. This is useful if you want to show your dialog before the parent ViewController is fully loaded. (E.G. You show your dialog in the .viewDidLoad function.
My engironment is titanim 6.0.1.GA
It doesn't show the label on Android, while iOS show the label correctly.
var descriptionView = Ti.UI.createView({
height:'100%',width:'100%'
children:[Ti.UI.createLabel({
wordWrap :true,top:0,
color:'black',
text:"my label",
})]
});
It works well both on Android/iOS
var descriptionView = Ti.UI.createView({
height:'100%',width:'100%'
});
var label = Ti.UI.createLabel({
wordWrap :true,top:0,
color:'black',
text:"my label",
});
descriptionView.add(label)
I just wonder using children is bad behaivor for andorid?
However it sometimes very useful to simplify the code.
Is there anyone who uses children successfully for Android??
According to the titanium API 'Children' property is a read only property and it should not be used to set data. It's considered to be good luck as it's working with IOS but with Android we need to be specific with the code.
I would never suggest you to use this coding style to simplify the code, rather you could use the following to simplify and also memory effective way :
var descriptionView = Ti.UI.createView({
height:'100%',width:'100%'
});
descriptionView.add(Ti.UI.createLabel({
wordWrap :true,top:0,
color:'black',
text:"my label",
}));
Good luck,
Cheers
I'm developing an app in Titanium that needs to work on android and IOS, but I'm getting some memory problems.
In my app.js file I have this:
var win = Ti.UI.createWindow({
backgroundColor : 'white',
url : 'Home.js'
});
win.open();
Ti.App.View = [];
The Ti.App.View array is tu keep a reference to all my container views along my project so I can close them or check if they are already visible.
Then in my Home.js file I have some buttons to open some views. Ex:
var view = Ti.UI.createView({
height : deviceHeight,
width : deviceWidth,
backgroundColor : 'white'
});
Ti.UI.currentWindow.add(view);
var viewMenu = Ti.UI.createView({
layout : 'vertical',
width : deviceWidth * 0.20,
backgroundColor : 'transparent',
});
view.add(viewMenu);
viewMenu.addEventListener('click', function() {
var Favorites = require("Eventos");
Events.AddLayout();
});
This is the way how I add a new layout to the same window.
Then on my Events.js file I have a function like this and a global event :
exports.AddLayout = function(e) {
//adding all my layout.....
}
Ti.App.addEventListener('Update', function() {
// due something in hear
});
My question is how can I remove all Ti.UI objects created in the AddLayout function from memory when I press back button? And how can I remove the global event created by the Events.js file?
I have tried to reference te container view to null but it has not solved my problem.
Have you considered developing this with Alloy? It uses a commonJS approach and would remove the need to use Global events like this and structure the app in a way that's easier to represent views, open and destroy views etc.
If not, try to avoid using Global Event listeners -- typically there's no need to use these and they'll end up causing all kinds of memory leaks.
This is a great video on the subject:
Your Apps Are Leaking
Hope this helps!
Can I set a default fontFamily in my app (iOS and Android)??
I don't want set it in each screen.
Any idea?
The only way to do this is from the native side of things. See here:
Set a default font for whole iOS app?
and
Is it possible to set a custom font for entire of application?
Although, if you use the library Cairn (disclaimer: I wrote it) it's trivial. Simply define your global text style and extend from it everywhere. Cairn makes all global stuff reusable while not breaking component-specific overrides and extensions.
// styles.js
import { createStylesheet } from 'react-native';
import cairn from 'cairn';
export default cairn({
text: {
fontFamily: '...'
}
}, (styles) => createStylesheet(styles));
Then extend those global styles in your component and apply to your text element:
// components/MyComponent.js
import styleContext from '../styles';
const style = styleContext.extend({
'text.header': {
fontSize: 30
}
});
export default const MyComponent = () => (
// Spreads style={[styleContext.text, style['text.header']]}
<Text {...style('text.header')}>Header!</Text>
);
I am working on my very first app in Titanium Studio.
So my project consists of an login page and if the login is successful a tableview will populate the screen.
The problem I enconter is, on the Titanium emulator the app works OK, but when I installed on a device, the two textboxs and the button are missing.
Do you have any ideas what I am doing wrong ?
For mobile web, the app works just fine.
Thanks.
The code :
var win = Titanium.UI.currentWindow;
var username = Titanium.UI.createTextField({
color:'#336699',
top:10,
left:10,
width:300,
height:40,
hintText:'Username',
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(username);
var password = Titanium.UI.createTextField({
color:'#336699',
top:60,
left:10,
width:300,
height:40,
hintText:'Password',
passwordMask:true,
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(password);
var loginBtn = Titanium.UI.createButton({
title:'Login',
top:110,
width:90,
height:35,
borderRadius:1,
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});
win.add(loginBtn);
for android,
try to remove property borderStyle. its for iphone only.
and also comment borderRadius and font property for button and try. If you want to use borderRadius then you need to set other two relative properties for that . borderWidth and borderColor.
to use custom font , you need to first configure it so just try to comment that property and try.