Category Archives: Mobile

Creating your own ios slide to unlock feature on Titanium Appcelerator

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

We currently have a project that requires a lock feature without using the actual lock button on the iPhone, since I have to somehow copy the “slide to unlock” of the iOS, I did a research thinking maybe someone have already done that on Titanium then voila! There is one! Thanks to a user named pec1985, here’s the link to the code repo.

Unfortunately he created the code during an earlier version of the Ti SDK,  Continue reading

How to revert Alloy to previous version

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

One of our development machines was recently upgraded to the latest version of Alloy and Appcelerator’s Titanium SDK which gave us a couple of minor display bugs that we didn’t want to spend time fixing at this particular moment in time.

It’s quite easy to revert as long as you know the previous version that you’d like to revert to.

Just type:

sudo npm install -g alloy@1.2.2

and just replace “1.2.2” with the version you’d like to revert to.  Don’t forget to update the Alloy version in your tiapp.xml as well if you made changes there.  And if you did make changes to your tiapp.xml don’t forget to “clean” your project before you re-build 🙂

(Thanks to the documentation: https://github.com/appcelerator/alloy/blob/master/CHANGELOG.md)

TableViewRow left offset no support in Titanium

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

While creating the layout for our Mobile App project, there was one Window where the TableViewRows should have a border at the bottom. I thought the separatorColor property would solve it but this was the result in iOS7 simulator: TableViewRowBug
As you can see, there’s a gap on the left side of the Window and the fix for this “bug” on Titanium will be released on December 9 2013, well our project cannot wait for a long time. I saw some hacks from other websites like adding a View inside the TableViewRow, etc.., but none of them really work for me. So I tried to hack it on my own and I managed to solve our problem by inserting a TableViewRow with a different property.

Now this is the result we had:

TableViewRoxFix

The height of the TableViewRow you’ll be inserting should be 1dp and change the backgroundColor to the color you need.

Quick Tips:

Our TableViewRows and the other elements in our project are added dynamically.

Here’s how we did it:

You can’t add a TableViewRow in a TableView, so you should first create an Array e.g var rowArray = []; then push the TableViewRow inside the array e.g rowArray.push(newTableViewRowName); and finally set the TableView data to the rowArray YourTableView.setData(rowArray);

Hope this will help you in some way.

SOLVED: How to fix unlicensed modules detected error in Titanium (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

If you see an the “unlicensed modules detected” error and all of your plugins are free.  Here’s a solution that worked for us (thanks to Matt Perkins’ comment here http://developer.appcelerator.com/question/126870/unlicensed-modules-detected-on-plus-modules#264492):

1. Open Terminal and run “uuidgen”

2. Copy the code you see on the terminal

3. Open tiapp.xml, replace what’s in the “guid” tag with the the code you copied.

4. In Titanium Studio, do Project –> Clean

5. Run

Further Reading: http://developer.appcelerator.com/blog/2011/09/module-verification.html

NavigationWindow: Add custom back button and label title in Titanium

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

1. Create a custom button in your controller.  NB: If you want your “color” property to be applied, you have to include “backgroundImage: ‘none'”

var btnBack = Ti.UI.createButton({
 title: '< Back',
 color: "white",
 backgroundImage: "none"
 });

2. Add an event listener on your back button and use the global reference to your navigtionWindow (that you set in your parent controller) to close the current window:

btnBack.addEventListener('click', function(){
var nav = Alloy.Globals.navLanding;
nav.closeWindow($.setupRegistration);
});

3. Set the leftNavButton property of your current window to the instance of the new button that we just created (i.e. btnBack):

$.setupRegistration.setLeftNavButton(btnBack);

4. Set the titleControl property of the current window to a new Label:

$.setupRegistration.titleControl = Ti.UI.createLabel({
 text: L('title_create'),
 color: 'white',
 font: {fontFamily: 'Bond4F-Medium', fontSize: 18}
 });

 

 

Custom Paging Control with Alloy, Titanium (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

Thanks to this Gist from Raúl Riera: https://gist.github.com/raulriera/2417902 which we forked here: https://gist.github.com/philsmithsonuk/6791373

Our specific requirements were a custom pagingcontrol element (which is unsupported by Titanium) with different designs for active and inactive pagingcontrols.

Here’s a simplified implementation of what we did:

1. Index.xml:

...
<Window id="window1">
 <View id="view_slider_container">
  <ScrollableView id="sview_slider">
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
  </ScrollableView>
 </View>
</Window>
...

2. Index.js

...
require('PagingControl');
var sViewPagingControl = new PagingControl($.sview_slider);
$.window1.add(sViewPagingControl);
...

 

iOS Multi-level Navigation with Titanium and NavigationWindow (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

I’m sure it’s in the documentation but I couldn’t see how to handle navigation with more than one level using Alloy. The key point is that I had to store a reference to the navigation menu from the index.xml as a global variable (skip to step 4 to see that).

Here’s a simplified version of what I implemented:

1. index.xml:

<Alloy>
   <NavigationWindow id="navMenu" platform="ios"> 
     <Window id="window1" class="container"> 
        <Label id="lbl_one">First window</Label> 
     </Window>
   </NavigationWindow>
</Alloy>

2. window2.xml:

<Alloy>
  <Window id="window2" class="container">
     <Label id="lbl_two">Second window</Label>
  </Window>
</Alloy>

3. window3.xml:

<Alloy>
  <Window id="window3" class="container">
     <Label id="lbl_three">Third window</Label>
  </Window>
</Alloy>

4. index.js:

$.lbl_one.addEventListener('click', function(){
    var win = Alloy.createController("window2").getView();    
    $.navMenu.openWindow(win,{animated:true});
    Alloy.Globals.navMenu = $.navMenu; //set a global reference to the navmenu that we will use in child windows	  	
});

5. window2.js:

$.lbl_two.addEventListener('click', function(){	
     var win = Alloy.createController("window3").getView();
     Alloy.Globals.navMenu.openWindow(win);		
});