Appcelerator Developer Blog

Xcode 4.3 and Titanium

Published on February 17, 2012 by Kevin Whinnery (Platform Evangelist)
UPDATE (3/19/2012): Xcode 4.3 is now supported in our continuous integration builds. Go to http://build.appcelerator.net to get it, and make sure you are downloading from the master branch.
UPDATE (3/16/2012): You can get Xcode 4.3 working with Titanium as detailed in this post: http://developer.appcelerator.com/blog/2012/03/titanium-and-xcode-4-3-revisited.html

Apple has recently released Xcode 4.3, which some developers have already started adopting. Please note that per our compatibility matrix here, Xcode 4.2 is the latest Xcode version that can work with Titanium. We are working to add Xcode 4.3 support as soon as we can.

An unsupported and untested workaround can be found on the Q&A here, but your mileage will vary. Please refrain from upgrading your Xcode tools to version 4.3 until we can release tooling support for that version.

Thanks, and we’ll update this post as we have new information.

    —

    Forging Titanium Episode 22: Path-like Menu

    Published on February 15, 2012 by Tony Lukasavage (Platform Evangelist)

    Editors note: This and future episodes of Forging Titanium are available here.

    Today we’re going to do something a little different with Forging Titanium. We’re going to take a popular app from the wild and see how we can implement some of its features in Titanium. Today’s target: the animated menu from the Path mobile app.

    In this episode we’ll cover topics like:

    • Advanced animation techniques
    • Rotating and scaling UI components
    • Native iOS module development
    • Cross-platform considerations
    • Titanium extensibility

    With these techniques, we’ll not only show you that Titanium can execute and perform as well as its native counterpart, but also do so from a single code base.

    Episode Resources:

      Mobile —

      Newbie Tuesday: WebView with remote HTML

      Published on February 14, 2012 by Kevin Whinnery (Platform Evangelist)

      The following is the latest entry in a series of Tuesday blog posts covering basic topics in Titanium and JavaScript development.

      A common need in Titanium applications is to display the content of a remote web page inside a web view. Maybe it’s a blog post linked to in an RSS feed or your own website – in any event, you often need to embed that content directly in your app, rather than launching a web page in the device’s browser.

      In order to do this effectively, you should be sure to give the user feedback as the remote site is loading, so they know your app is doing something. This is especially important for web pages that are not mobile optimized, and tend to load up slowly over a mobile data network. How you create this UI will vary greatly depending on the nature of your app, but the events you’ll listen for on the web view will be the same. The web view has lifecycle events that will clue you in to the current progress of a web page as it loads.

      Let’s create a simple application with a web view that will load the url given to it in a text field:

      var w = Ti.UI.createWindow({
	backgroundColor:'white'
});
 
var form = Ti.UI.createView({
	height:60,
	top:0,
	backgroundColor:'#787878'
});
w.add(form);
 
var urlField = Ti.UI.createTextField({
	value:'http://www.cnn.com',
	top:5,
	left:5,
	right:120,
	bottom:5,
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
form.add(urlField);
 
var btn = Ti.UI.createButton({
	width:110,
	right:5,
	top:5,
	bottom:5,
	title:'Go'
});
form.add(btn);
 
var webView = Ti.UI.createWebView({
	url:'http://www.cnn.com',
	top:60
});
w.add(webView);
 
w.open();

      Which will look like this on iOS and Android:

      Now, let’s expand that application with a modal loading state we’d like to display as the page loads by adding an opaque view to the main window:

      var overlay = Ti.UI.createView({
	backgroundColor:'#cdcdcd',
	opacity:0.75
});
overlay.add(Ti.UI.createLabel({
	height:'auto',
	width:'auto',
	text:'Loading...',
	color:'#787878',
	font: {
		fontSize:24,
		fontWeight:'bold'
	}
}));
w.add(overlay);

      Which should look like:

      Next, let’s add some logic around the button click and the web view’s “load” event to toggle the overlay.

      btn.addEventListener('click', function() {
	urlField.blur();
	webView.url = urlField.value;
	overlay.show();
});
 
webView.addEventListener('load', function() {
	overlay.hide();
});

      Our little web browser is now complete! Drop this complete sample in app.js to see it in action:

      var w = Ti.UI.createWindow({
	backgroundColor:'white'
});
 
var form = Ti.UI.createView({
	height:60,
	top:0,
	backgroundColor:'#787878'
});
w.add(form);
 
var urlField = Ti.UI.createTextField({
	value:'http://www.cnn.com',
	top:5,
	left:5,
	right:120,
	bottom:5,
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
form.add(urlField);
 
var btn = Ti.UI.createButton({
	width:110,
	right:5,
	top:5,
	bottom:5,
	title:'Go'
});
form.add(btn);
 
var webView = Ti.UI.createWebView({
	url:'http://www.cnn.com',
	top:60
});
w.add(webView);
 
var overlay = Ti.UI.createView({
	backgroundColor:'#cdcdcd',
	opacity:0.75
});
overlay.add(Ti.UI.createLabel({
	height:'auto',
	width:'auto',
	text:'Loading...',
	color:'#787878',
	font: {
		fontSize:24,
		fontWeight:'bold'
	}
}));
w.add(overlay);
 
btn.addEventListener('click', function() {
	urlField.blur();
	webView.url = urlField.value;
	overlay.show();
});
 
webView.addEventListener('load', function() {
	overlay.hide();
});
 
w.open();

      Hope that helps!

        Newbie Tuesday,Tutorial —

        Featured Developer – Ben Bahrenburg

        Published on February 13, 2012 by Sharry Stowell

        Editor’s note: Sharry Stowell is the editor of Learning Titanium, where he frequently comments on the latest contributions of the Titanium community.

        Over the previous few months I’ve noticed a few developers in the Titanium community shine brighter and brighter. They’ve helped out on the Q&A forum, answered questions over IRC, shared the latest Titanium news and even created modules for the Appcelerator MarketPlace for all to use and enjoy. The Titanium developer of the week has to go to Ben Bahrenburg for his outstanding contribution to the community.

        Ben has over 14 years experience in systems, software and module development. Starting out as a Oracle DBA, then moved onto focus on DSL base high volume payroll transactions for PriceWaterhouseCoopers.

        Interview with Ben Bahrenburg

        A few weeks ago I had an interview with Ben and asked him a few question about Titanium, here is what he said:

        How did you get involved in Titanium development?

        I found Titanium about three years ago through Twitter. After a couple of weekends experimenting with the API, I was hooked. It was impressive even back then how quickly you could build apps.

        Do you have any Apps created in Titanium?

        Like most Titanium developers I’ve created a ton of apps over the years. The two most notable are Aidori an app to help with the Japan 2011 Earthquake, and bARk an open source augmented reality app that was used in a session at last year’s CodeStrong conference.

        A majority of the apps and frameworks I’ve created are for my employer. The most notable of these is the myTravel app which is featured in a recent Appcelerator case study.

        How are you involved in the Titanium Community?

        There has always been a great community around Titanium. Back in the 0.4 days Jeff and Nolan would answer most support questions themselves. In this spirit I help out in the Q&A forums, on community project, and over Twitter as much as possible.

        Whenever I run into an interesting problem in the QA forum or on my own projects I create tutorials on my blog bencoding.com or post samples to github.

        The Titanium Titan program has provided the chance to talk about Titanium at several hackathons and user groups. This has been a great opportunity to code and learn from the Titanium community. It has become a personal mission of mine to pair program with as much of the Titanium community as possible. This has been a great way to both learn and give back.

        Do you have any experience in Titanium Module creation?

        I’ve created a few commonJS format modules.

        TiTaffyDb – A Titanium port of the populator NoSQL JavaScript database
        Soup – A framework for working with Geo Location based content providers
        Atlas – A Geo Location framework, that allows for chaining, provider rating, and fallbacks.

        The Titanium module architecture make is relatively easy to plugin native modules. I have a few native iOS modules I hope to make available once iOS 5.1 ships.

        What’s your favorite platform to develop in? Any plans to expand?

        I enjoy the challenge of building for tablets. Until just recently that meant the iPad but now with the Kindle Fire and Windows 8 Metro it is starting to be more exciting from a cross platform point of view.

        Over the last month I have been experimenting to see how much code re-use I can achieve using Titanium on the Kindle Fire and WinJS on Windows 8. So far the results have been limited but encouraging. From a Titanium devs point of view WinJS feels similar and provides a great level of skill reuse.

        Modules

        Since taking part the interview, Ben has been busy trying a new challenge – to release a module each Monday for a month! So far he has created 3 great modules, with a few more to come too:

        NETWORK HELPERS MODULE

        TiNetworkHelpers is a module that provides support for Carrier information, SSID, BSSID, and Apple’s Reachability utility class. Its currently only available on iOS, with Android support coming shortly:

        1. CarrierInfo – Provides access to the native CTTelephonyNetworkInfo framework object

        • carrierName – Provides access to the carrier name associated with the device’s SIM.
        • mobileCountryCode – Provides access to the carrier Mobile Country Codes (MCCs). This is the country code associated with the carrier on the SIM
        • mobileNetworkCode – Provides access to the carrier’s Mobile Network Code. This is the network code associated with the carrier on the SIM
        • isoCountryCode – The ISO country code for the user’s cellular service provider. This is the carrier on the SIM
        • allowsVOIP – Indicates if the carrier allows VoIP calls to be made on its network

        CarrierInfo

        2. CurrentNetwork – Provides access to the native CNCopyCurrentNetworkInfo object

        • SSID – Provides access the SSID the device is currently connected
        • BSSID – Provides access the BSSID the device is currently connected

        CurrentNetwork

        3. Reachability – Provides a wrapper for the Apple Reachability module

        • reachabilityForLocalWiFi – This method provides a boolean result if Local Wifi is enabled
        • reachabilityWithHostName – This method takes a host name, such as www.appcelerator.com and returns a boolean result if the host is reachable
        • hostNameReachableBy – This method takes a host name, such as www.appcelerator.com and returns a constant with how it is reachable

        Reachability
        Useful links: BLOG POST | CODE | MARKETPLACE

        TITANIUM DICTIONARY MODULE

        What to use the native iOS5 Dictionary in your Titanium Mobile app? The new benCoding.Dictionary module that makes it easy to this functionality into any Titanium app that targets iOS5 or greater.

        Dictionary module

        Useful links: BLOG POST | CODE | MARKETPLACE

        TITANIUM SMS MODULE

        The benCoding.SMS module makes it easy to add SMS functionality into your iOS Titanium apps. We unleash the power of Apple’s native Apple SMS component to Titanium with an API fashioned after the Titanium EmailDialog to make it familiar to use.

        SMS module

        Useful links: BLOG POST | CODE | MARKETPLACE

        As you can see from above, Ben has been extra busy! Please remember all these modules are FREE to use and are available within the Appcelerator Marketplace.

        If you have have developed an App in Titanium, a module for Titanium or just have some news you wish to share with the community please head on over to LearningTitanium.com or follow me on Twitter here.

        Code strong!

          — Tags: —

          Win up to $5K hacking Titanium apps with Box

          Published on February 10, 2012 by Kevin Whinnery (Platform Evangelist)

          Titanium developers have a great opportunity to score up to $5000 cash money in two developer challenges, sponsored by Box. The first is a challenge open only to Titanium developers, offering up to $1250 in prize money for the best Titanium apps making use of the new, open source Box CommonJS module.

          Sign up here for the Titanium-only Box developer contest.

          Box is also putting out a call for the best iPad application – native or otherwise – utilizing the Box APIs. We have a feeling a Titanium app could win this one as well :).

          Sign up here for the iPad Box developer contest.

          To help bootstrap your Box development knowledge, please check out this week’s episode of Forging Titanium, which covers the usage of the new Box module. Good luck, and we can’t wait to see what you come up with!

            —
            Page 30 of 91« First...1020...2829303132...405060...Last »