Archive for June, 2010

« Older Entries

1.3.2 (1.4 RC1) Release Now Available

Monday, June 21st, 2010

As promised (but a little late), we’re going to make the upcoming 1.4 release candidate (1.3.2 release) available manually here. Please read for instructions and links to the files. For now, you’ll have to install manually until we can get some good feedback on the release and push the official 1.4. Our goal is to get feedback this week, do our final round of fixes and testing and release the final release early next week.

First, the links to the download links:

OSX (iPhone/Android): http://bit.ly/cyTWkA
Win32 (Android): http://bit.ly/90TmIY
Linux (Android): http://bit.ly/bSgTjo

To install, you’ll want to download the appropriate distribution above and then extract into your Titanium directory.

For example, on OSX, your Titanium directory will be under either /Library/Application Support/Titanium or ~/Library/Appcelerator Support/Titanium.

Once you locate your Titanium directory, extract the zip file into this directory. The zip file will expand the contents and create/overlay some new directories for 1.3.2.

NOTE for OSX users who use Safari to download: Safari by default will auto uncompress your downloads, how handy. However, if you have a directory named mobilesdk, your extracted directory will be renamed. On OSX, I suggest you use curl and do it the old fashion way. In the terminal, go to your Titanium directory and then run the following commands:



> curl -L http://bit.ly/cyTWkA >mobilesdk-1.3.2-osx.zip

> unzip -o mobilesdk-1.3.2-osx.zip

Now, you’ll need to restart Titanium Developer to pick up the new release. Once restarted, remember to change your application SDK version and then click the ‘Save’ button.

You should now be able to test with the latest release.

A few things to note:

- This release still has some issues we’re working through. You can see the latest fixes and outstanding items for 1.4.0 here. All the items on the list are not going to be fixed for the final 1.4.0 and will automatically roll into the next release (if not resolved).

- This release fixes all known crashes on iOS 4. There are a few issues we’re still working on but this release addresses the major issues we’ve found so far.

- This release is mainly a maintenance release and fixes hundreds of Android and iOS bugs. We have added some stuff that I’ll try and summarize below. We’ll have the full release notes and documentation up once 1.4 is final.

Some updated stuff worth noting:

- iAds is here! By much popular demand, you can now add iAds to your iOS applications. iAds works just like any normal view. You’ll create an iAd view by invoking Ti.UI.iOS.createAdView() and placing it at the appropriate location. Make sure you use height and width auto. Until iAds is available, you’ll only see a test ad (assuming you’ve provisioned your application for iAds).

- Support for Common JS. We have added basic support for Common JS where you can use the Common JS to import modules. We don’t fully support the various specifications yet but you can load third-party Common JS modules and use require to load them. Currently, you can drop the modules in your Resources directory and they’ll be picked up. See the updated Kitchen Sink for a simple example. Common JS is supported for both Android and iOS.

- We have deprecated the ImageView property ‘url’ and replace it with the existing ‘image’ property. You can still use the url but you’ll get a warning in the log and may encounter some issues in small cases. Using ‘image’ ensures that all cases should work.

If you find issues, please note them in the comments of this post to help us and others. Please also note we’re only focusing on show-stoppers. Feature requests for 1.4 final aren’t being considered at this time. If you’re a Premium subscriber, please open normal issues in Helpdesk instead of here so we can make sure we respond in the appropriate SLA.

Thanks for everyone’s help in testing.

Posted in Mobile | 128 Comments »

Upcoming Titanium 1.4 update

Wednesday, June 16th, 2010

UPDATE (Monday 10:42 PM PST): Unfortunately, during this evening’s testing we found a rendering bug on Table View with auto heights. We’re working on a fix and hope to have it fixed before the morning. As soon as we fix this issue and can do another round of testing, we’ll have the release up. Stay tuned to the blog for updates. Sorry for the delay!

UPDATE (Monday 11:45 PM PST): Drop is now available. Details here.

For the past 4 weeks we’ve been working very hard and fast on 1.4 and we’ve made a ton of great fixes and improvements. We’ve already resolved several hundred issues and have a number of issues we’re trying to complete before the release.

We need your help.

In 1.3, we encountered a number of regression issues and unexpected problems — a number of them that we flat out should have caught in final testing. However, a significant number of them we’ve found are simply issues we just didn’t expect or didn’t have good test coverage for. As the community and number of apps have skyrocketed over the past few months, so has the impact on the platform and our ability to support you. We’re working as fast as we can (some of us, 7 days per week) and hiring as fast as we can. We thank everyone that continues to help out in Q&A, helping us find and reproduce weird issues and working with us with patience and grace as we try and help you with your problems. We also really appreciate when you say “thank you” and tell us how much you appreciate what we’re doing.

Going forward, there’s a few things that we’re doing on a Quality front that I’d like to outline here and to ask for your help:

1. First and foremost, we’re adding full-time QA engineering. Up until recently, we had formal QA but it was done as a part-time activity by several of us near the end of a release cycle. I’m proud to announce we’ve recently hired our first full-time QA engineer that will simply do nothing but test, build tests, run more tests and work with you to get your issues so we can build more tests. Every…single…day. Proactively, as it should be done.

2. We’re working on several fronts around automated testing both for the platform itself but also something that would be useful to you – as you test your own apps. This is going to take some time to work through and we’ll do it like we do everything else, in a number of iterations. The first iteration is that with 1.4 we’re going to be introducing a new command line tool that will allow you to do some of the common tasks in Titanium Developer from the command line. For example, you can build your entire project and even run your app from command line. This will serve many different use cases – but one of the major ones is automated build and unit testing.

3. We’re going to start pre-releasing updates before they’re pushed automatically to the community-at-large. We’re going to make this something that’s more automated once the new Titanium Developer comes out – much like you can do with Chrome today. We’ll use a streams concept – something we already have in place in our infrastructure – to allow you to switch to more stable or less stable release streams automatically. For now, however, we’re going to manually push the SDK for download as a candidate release. Once we’ve completed our full round of regression and gotten sufficient feedback from the community, we’ll then push to everyone through the normal release channel. Our hope is that one of the ways you can help us help you is that you’ll download and test the candidate build(s) on your apps before we push them as final.

4. Documentation and Training. We’ve been investing heavily in training and documentation and you’ll see more content and announcements around that soon. Additionally, we’re in the process of producing a ton more written documentation, tutorials and more complete documentation sets and you will see a lot more of this over the next 4-6 weeks. In addition, as you’ve seen, we’re blogging several times a week more complete examples and tutorials here. Training and Documentation are things you’ve asked us to provide you more of – and we’re fulfilling on that promise as quickly as possible. Also, we have an upcoming San Jose Titanium training on June 26-27th.

Of course, there’s a lot more things we’ve got on the drawing board I’ll share over the next couple of weeks and months.

OK, back to 1.4.

Now that you have some context, let me tell you our plan for 1.4.

We’re going to release the 1.4 release candidate on Monday, June 21st. We’ll make the announcement here – most likely late in the afternoon West Coast time (PST) with instructions on how to download and how to report any issues you might find. We’ll also tell you what’s fixed and what we’re trying to finalize. I can tell you now that we’re wrestling with a few iOS 4.0 issues and we want to test on the new 4.0 device before we ship. Depending on how things play out, our goal would be to get you the release, get your feedback and turn around any blocking issues before June 28th for the officially targeted release. However, that date will largely depend on what we hear from you.

Code Strong!
Jeff

Posted in Mobile | 47 Comments »

Titanium Mobile TextMate Bundle

Sunday, June 13th, 2010

This weekend, esteemed community member Thomas Aylott (a.k.a subtleGradient) published his TextMate bundle for Titanium Mobile! This is a must have for any Mobile developer working on the Mac (and using TextMate of course). Installing his bundle is easy – you’ll probably want to install via git, so you can update the bundle via a simple git pull:

  1. EDIT: As per Jeff’s note below, make sure the Ruby JSON gem is installed: sudo gem install json
  2. cd /Users/[your username]/Library/Application\ Support/TextMate/Bundles
  3. git clone git://github.com/subtleGradient/JavaScript-Appcelerator-Titanium-Mobile.tmbundle.git
  4. reload your bundles or restart TextMate

To see the magic happen, simply start typing in a Titanium namespace:

At any point while typing a Titanium function, hit option+escape to bring up the code completion window. Once you’ve selected your function, hit the tab key to switch to the next argument:

There are some other goodies packed in there as well – typing “inc” then tab will create a Ti.include statement, and d+tab will output a Ti.API.debug statement. I definitely encourage you to check out this awesome TM Bundle, follow new developments in the project, and to shower praise and adulation on it’s author. Thanks for an outstanding contribution!

Posted in Mobile, Showcase, Tutorial | 16 Comments »

How to create an iPad menu with animation

Saturday, June 12th, 2010

In this tutorial, we’re going to show a technique used by the popular USA Today iPad application. The USA Today application combines the use of a section logo (in the upper left hand) that denotes the appropriate area of the paper you’re currently reading with a animatable menu when touched. This allows you to quickly toggle between various sections of the paper (calling it a paper while it’s now really an application is weird, I suppose).

First off, let’s see a screenshot of what it looks like in the real application and what we’re going to prototype in this tutorial:

When you click the left hand corner logo, the center menu (visible in the image above) will animate from the logo to the center of the screen with the appropriate section logo highlighted.

OK, let’s view a quick view of what we’re going to create in Titanium.

OK, now the code for above:

So, how does it work?

We simply create a logo view that holds the area where the section image will go. This is named logo in our code above.

We then create some filler text in a label and just place it on the screen. For this tutorial, that just makes it a little easier to see (and test) the opacity on the menu.

Next, we create the menu view itself, named menu. Notice that the left and top properties are the same as the logo. We do this so that the initial position of the menu starts from the same location of the logo. We want to animate from the logo to give the appearance that the menu comes out of the image. We also set the initial opacity to 0 (on a scale from 0.0-1.0). This makes the menu initially invisible. You can also just hide it.

We then create 2 views that are siblings on the menu view. We do this since we want to create an transparent layer with 70% opacity. If we added the icons directly to this view as children, they would inherit the opacity of the parent view and the icons would also be 70%. However, we want the icons to be 100% and the background view to have the opacity. So, we make 2 views that are siblings. The first is the 70% transparent layer and the second is the parent of the actual icons in the menu.

We then create a simple array of our sections and loop through and add the icon views to the sectionWrap view. Notice that the sectionWrap uses a horizontal layout. This makes it very easy to add a set of views to a parent in a horizontal fashion without having to provide specific x/y positioning.

In the loop, we need to add a callback that will do the menu selection. We wrap the handler logic in a Javascript closure so we can access the loop variables later.

The callback simply removes the currently selected menu’s backgroundImage and changes it to the newly selected menu. It then animates back to the center. Note that we use a delay property in the animate call. This allows us to provide a slight delay before the animation starts. The function passed to animate will be invoked after the animation has completed, in which case, we change the top left section logo to the new section.

The last main part of the logic is simply the menu presentation animation itself. By clicking on the logo we need to toggle the menu’s visibility. We simply keep a boolean to indicate the visibility state and then toggle either hiding or showing.

To animate the menu to visible, we calculate the new left and top position (x and y, respectively), and then animate the menu to this position. Since we initially set the menu to be located at the same position as the logo and the same size, when we animate, it will grow and move from this position to the center. This gives the nice effect of having the menu fly out from the logo. Notice we also change the opacity to 1.0 which will cause the menu to transition from invisible to visible in a nice fade in effect.

To animate the menu back to invisible, we simply do the opposite.

Now, wasn’t that too easy? With Titanium, there’s no reason you can’t do beautiful, GPU-optimized animations in your applications.

Posted in Mobile, Tutorial | 5 Comments »

Background Animation Visual Effect Tutorial

Friday, June 11th, 2010

One of the coolest things about building a platform like Titanium is how people use it. Often, we look at what you’ve done and we’re stumped. How did you do that? You know you’re on to something when this happens.

The guys over at Awkward Novice have a really cool Titanium based application for the iPad (and now iPhone) called Chroma. It’s a very nice application – beautifully elegant – and a great example of a well thought out user interface.

It’s the small things that matter sometimes in UI. The small touches make the biggest difference.

In the Chroma application, Fred built a really cool background animation along the top toolbar. It’s very subtle. It’s just very elegant. I showed it to Nolan yesterday and we both thought: “how’d they do that?”. Of course, I’m a sucker for a challenge and said the famous last words of all engineers: “it can’t be that hard”. (I said that over 2 years ago when we embarked on Titanium, too).

It turns out that this technique is rather easy in Titanium. Disclaimer: I have know idea how Fred actually wrote this. He could have done it differently. He didn’t share his code with me (I didn’t ask him to). However, it’s visually similar (although the effects in Chroma are more advanced). This tutorial explains the basis of this technique and show the power of combining views with images, animation and some creativity.

First, a little video to show it off.

OK, now that was cool, huh?

Let me show you the code.

OK, so what’s happening. First, we create a basic Titanium window. Nothing too complicated there.

Next, we create a view that serves as the background image. This is the image that we’ll animate behind the main toolbar image. Notice how long (width wise) this image is. It’s 997 pixels wide. It’s that wide so we can slide the image back-n-forth in an animation, very slowly.

Next up, the toolbar image. With this image, Fred punched a transparent region to the right. It’s a little visually difficult to see but it’s to the right area.

Let’s put a background color so you can see it a little easier.

You can see from the red, that the transparency just allows some of what’s behind the image to be able to come through. That’s the trick to make this work. We place the long first image behind it and slide it left and forth – very slowly.

OK, I’ll do what effectively being done in Titanium here in HTML (but without animation) so you can see it.

The other 2 views simply are for the logo and the info button. We simply use positioning to place them in the right location.

We adjust the offset of the first image to -677 pixels left. This will place the long image off to the left a bit (off screen) and then we simply animate the left image a bit to the right (from -677px to -517px) over 30 seconds. We do it slowly to create the nice, visual effect of it waving. You can move it in different offsets and for different lengths to change the color combination.

And that’s it. It’s really that simple with Titanium. You can use this type of technique for all types of purposes within Titanium.

A few comments before we exit:

1. Don’t use these images. They’re copyrighted by Awkward Novice. That would be very uncool. I’ve provided them here simply as an illustration of a really awesome app for the benefit of the general Titanium community.

2. Why didn’t I use an ImageView vs. a regular View with a background? Well, no particular reason except probably habit. I tend to use an ImageView when I want something a little more complex such as image frame animation. But when it’s a simple image, I tend to just use a View. They’re effectively the same behind the scenes.

3. When doing animations, you can alter the opacity (on a scale from 0.0 to 1.0) to create a cool fading effect. Combining movement with opacity can create nice transitions.

4. There’s a slight bug in Android currently that prevents the animation from happening correctly but will be fixed soon.

5. Do Fred a favor and buy his app (at least one or the other). He deserves it. :)

Posted in Mobile, Tutorial | 1 Comment »

« Older Entries