Titanium TableView to ListView : a retrospective

Titanium TableView to ListView : a retrospective

I recently had the opportunity to switch a client app over to making use of the (relatively) new Titanium ListView.  The ListView is a high performance UI element designed to display templated sets of data in an ordered fashion, making use of some arcane optimizations that I can only assume involve black magic to beat out the performance of a table view by an order of magnitude.  Coming from TableViews, the switch over to ListViews was somewhat jarring, differences in view structure, event structure, and the unique quirks of these view elements made the transition a somewhat challenging process.  Here’s a few interesting things I learned in the process.

Everything is structured.

Everyone has a few guilty little lapses in structure when making an app.  Why bother redesigning a view for one specific case when I can just add the new view elements at run time?  ListViews will have no part of that. Each template has a static set of views, and after creation, the elements in a given row are unchanging.  The only way to change the information contained in a row is to push a new data object to the row, and the only way to add another view element is to modify the template.  This requires a rather significant shift in how you develop for list views, as ad-hoc development and spaghetti code just doesn’t work with list views.

There are no row events.  Only list events.

This was one of the most distinct differences in developing for ListViews as opposed to TableViews.  Where Table views expose all of the events available to their child elements to you, ListViews expose a solitary ‘itemclick’ event.  As the name suggests, this event is triggered when the user clicks on an individual list item.  From there, you need to sort out what to do with the individual item, figure out which subview triggered the event, and proceed from there as you would with any click event.

Quirks, limitations, and tradeoffs

One major consideration with using a ListView is that they are in active development, and as such have a number of quirks and limitations, not all of which are documented.  At one point, I had been debugging an app crash that produced no error messages, and realized that simply changing the bindId of one of the subviews of a template fixed it completely.  Additionally, there are a number of little styling quirks (for instance, you can’t presently style the separator color or the section header/footer), and a I mentioned earlier you cannot change the contents of a row without rebuilding and replacing it.  As with all new view elements, you need to weigh these drawbacks against the benefits before you’ve spent the better part of a week developing with a view element that just won’t work.

The benefits

The core benefits of list views are, as I see it, performance and maintainability.  The forced structure of list views require you to declare all of your view elements up front, to run all of your events through the same functions, and structure all of your data in the same way, making a well designed ListView much easier to understand and maintain than an equally well designed TableView.  Additionally, the performance isn’t even comparable.  Before switching over to ListViews, we were lucky to get twenty items into our lists.  Now, we can easily load more than 500 at a time.  That kind of performance difference speaks for itself.

Shockoe Helps Homes.com House Hunters Find Perfect Rental

Shockoe Helps Homes.com House Hunters Find Perfect Rental

Mobile technology is changing the fundamental interactions between business and customers in meaningful ways not foreseen a decade ago.  Even a traditional business model, like car rentals, has been disrupted by a rapidly expanding company with what seemed a niche idea, due to the flexibility that mobile technology gives consumers.

Why can’t the same principle apply in the home rental space?

Homes.com is part of the fifth-largest real estate listing portal network with over three million homes represented in the United States and that’s the question that they asked us at Shockoe.com.

Since then, we have been working with Homes.com to enchance their collection of iOS and Android apps.  One of the first joint projects was released on October 16th to great acclaim.  Homes.com’s industry knowledge guided the thoughtful design and solid codebase that Shockoe supplied and the brand new Homes.com Rental app is averaging 4.9 out of 5 in the Google Play Store and 5/5 stars on the iOS App Store in just a week’s time.  And as a recent study showed, app ratings are now more critical to rankings, thus exposure, than ever before

So how did Shockoe and Homes.com do it?

The new Rentals app was built with today’s sophisticated renter in mind.  The app is the first in the market to offer current commute times for points of interest such as user’s place of employment, gym or shopping, tailoring the app to today’s ever busy consumer.  This of course hits the three keys to mobile real estate: geolocation, geolocation, geolocation.

Now, on-the-go consumers can easily browse an expansive database of rental listings on the Homes.com app, which has built-in extensions to Homes.com’s sister site ForRent.com.  ForRent.com is the exclusive provider of apartment listings on the Rentals app. Homes.com developed the smartphone app for effortless use on both iOS and Android devices and included iOS7 features such as natural navigation gestures.

“With year-over-year rental search traffic growing on Homes.com by more than 514 percent on mobile devices, our first priority in designing the rentals mobile app was to create an optimal shopping experience for renters,” said Brock MacLean, executive vice president of Homes.com. “The new app allows consumers to customize searches, instantly view and save listings, and connect with agents or property managers. Whether a renter is searching for a place to celebrate, create or unwind, the place to find it is Homes.com.”

The mobile app enables potential renters to tap into current listings filtered by user preferences.  Filters run from standards like price, size and type of residence to many extras like fireplaces, parking or (a mobile first for the industry) pet-friendly rentals. Map searches are made simple with slide and tap navigation, all while referencing a geo-targeted map for an easy view of points of interest throughout the search experience.

How did Shockoe create this for Homes.com in such a short timeframe?

From the beginning, Dominion tasked Shockoe with building the revisions in the Appcelerator Titanium codebase to create an amazing user experience across multiple operating systems and devices while improving overall app performance.  Rebuilding a unified codebase for Homes.com within Titanium offered Shockoe.com a chance to make big changes to simple usability and interface aspects of both mobile app experiences. For example, the older version of the mobile app made dynamic selection difficult in the area overview map.

Due to past experience, the Shockoe development team decided a whole new map design was necessary since the map function is a crucial. While it sounds daunting, we know it would end up being a major time saver since the redesign would be built just once in the Appcelerator Titanium toolset.  The new map function would then be instantly reflected across both iOS and Android versions for multiple form-factors and the functionality could be re-used and applied to other projects down the road for Homes.com.

Shockoe has been a longtime partner and evangelist of Appcelerator.  The cross-platform nature of Titanium enables us to meet deadlines and budgets that would be impossible had we designed for each platform separately.  Our experience with Titanium makes an already accelerated schedule even shorter.

We at Shockoe look forward to collaboration with Homes.com and their sister site ForRent.com in coming up with new and interesting ways to help the companies enhance products and tie themselves together in the mobile environment.  With an economical foundation on which to fortify their ability to acquire and cross-sell their customers in the mobile space, look for many more good things to come from the teams at Homes.com and ForRent.com.

How can Shockoe help your business take a great idea and make it a disruptive force in your industry?

Download the new Homes.com Rentals apps – [Google Play] [Apple App Store]

About Homes.com®
As one of North America’s top online real estate destinations, Homes.com® Rentals inspires consumers to dream big. From affordable houses to luxurious estates, condos, apartment rentals and more, Homes.com features nearly 3 million property listings and a user-friendly format, making finding your next home easy. Visitors to the Homes.com blog will find a collection of rich content and posts on DIY projects, painting, organization tips and more, providing the ultimate resource for everything home related. From finding your first apartment to buying your first home, upgrading, downsizing and everything in between, Homes.com is an inspiring and engaging partner in every phase of the home buying or renting process.

Homes.com is a division of Dominion Enterprises, a leading marketing services and publishing company headquartered in Norfolk, Virginia. For more information, visit www.dominionenterprises.com.

About ForRent.com®
As one of the nation’s leading online home search destinations, ForRent.com® inspires renters to discover their next apartment, loft, townhouse, or condo. ForRent.com features rental listings in a user-friendly format, making finding your next home an easy exploration. Visitors to ForRent.com’s apartment living blogFacebook pageTwitter account and Pinterest boards will discover relevant content and can join the conversation surrounding their home decorating style, rental tips and more, serving as the complete resource for renters in every part of their living experience.

Titanium Conference 2013 – TiConf.US

Titanium Conference 2013 – TiConf.US

America’s first and premier community-run mobile development conference

Update: For limited time, receive $70 off, when you register using code SHOCKOE70

Shockoe is proud sponsor of the next mobile development conference primarily based around JavaScript and Appcelerator Titanium. It’s a community-run event featuring some of the best JavaScript and Titanium Mobile developers from the US and abroad.

Titanium Conference 2013 takes place between the 28th-29th of June 2013 – open to all regardless of your skill level. Come and meet us there, we would love to talk to you.

 

Beginner's Titanium: Titanium DisplayCaps on iOS

There are now a multitude of device resolutions and densities running iOS, how can you make sure your content appears how you want it to appear regardless of which device your users have? This is, of course, one of the trickier areas for mobile applications. Fortunately, Titanium Studio has tools to help us attack this problem. Initially I thought that the DisplayCaps properties I could access through the Titanium API would produce the exact pixel dimensions of the device my App was running on. Upon a more careful inspection of the Titanium documentation these properties will produce values of “density-independent pixels (dip) on iOS”. I went ahead and ran a few tests on the simulator to determine what values I would receive on each device:

[cc]
Ti.API.info(“height: ” + Ti.Platform.displayCaps.platformHeight);
Ti.API.info(“width: ” + Ti.Platform.displayCaps.platformWidth);
[/cc]

iPad (non-retina): height: 1024 width: 768
iPad (retina): height: 1024 width: 768
iPhone (non-retina): height: 480 width: 320
iPhone (3.5 inch retina): height: 480 width: 320
iPhone (4 inch retina): height: 568 width: 320

Also keep in mind that the values are relative the the orientation of the UI (not necessarily the physical orientation of the device). Another useful property of Ti.Platform is the dpi property which can provide useful information about whether the device has a retina display or not. This information helped clear up some issues for me and enabled me to better plan layouts for multiple devices, I hope the information was helpful for your App Development as well!

Developing apps for Grandma: Developer, know thy user

If you’ve heard anything about software development in the last five years, you’ve probably heard someone talk about “knowing your user” or “putting the user first”. The massive growth of Apple in the last decade has shone a massive spotlight on relentless user focus and has caused developers at companies large and small to re-think their priorities and put usability first. However, if knowing your user is so important, what do you do when you don’t know or have anything in common with your user?

Recently, we were approached and hired to develop an application for a group of users that fits that description perfectly: non-tech savvy grandmothers and grandfathers. The gist of the app is to make it easier for them to access a specific kind of content that they have on their computers easily and quickly on their smartphones. What makes this task so interesting is that it’s not about facilitating them to do something they can’t already do: a user with any amount of tech savvy could accomplish this task with relative ease. It’s about making it so somebody with almost NO knowledge of the technology they’re using can transfer and easily  access this content with getting overly frustrated.

This task is 100% about knowing your user and catering to their needs by making existing technology more useable. The problem is, I’m a developer, capable of not only using difficult applications, but creating them from scratch. I pride myself on being a mid-adopter who is in touch with his “how I open Word again?” roots, but going into the project I found myself wondering if I really could adequately put myself in the shoes of someone who thinks opening Safari just opens Google and that Firefox opens the Internet.

So I did the only thing I could do: I talked to my own grandmother, creator of the aforementioned “Safari=Google” theory. She told me about using her computer and what she hates about it, and it was eye opening. She hates the updates and the clutter. She only wants to send and receive email, check her bank account, and use Google and that’s it. If there were 3 icons on her screen: Email with just an in and out box, her bank account, and Google that would be perfect. So even though she CAN access those 3 things from any web browser that exists, that’s not really sufficient: it’s not easy enough and browsers are too cluttered with, well, the internet.

My eyes opened, I now undertake the task of making her vision of simplicity and ease of access a reality, at least for one type of content.  Wish me luck (I’m going to need it).

Beginner’s Titanium: Working With Map Annotations on iOS

With the release of Apple’s iOS 6 the device’s maps have changed from the usage of Google maps to using Apple’s own mapping service.  Fortunately, very little has changed when working with map annotations across iOS versions 5 and 6.

Today we are taking a closer look at some of the features when utilizing map annotations.  A map annotation requires a latitude and longitude value to tell the map where to display the annotation.  Although this is all that is required to display a pin on the map, if you want to detect click events on your map pins, then you will need to add a title to the annotation.
var myannotation = Ti.Map.createAnnotation({

latitude: latitude, //coordinates

longitude: longitude, //coordinates

animate: false,  //it won’t animate the pin

title: “My Title”, // will be required if you need to detect a ‘click’ event

subtitle: “My Subtitle”,

image: ‘images/my_annotation_image.png’ // can be used to replace the default pin

});

The click events are registered to the map view itself and the annotation clicked is specified in the event object.  It is also possible to add subtitles and images to your annotation to customize the display of information.  Another great feature is the ability to use custom images for your map pins.
MyMapView.addEventListener('click', function(e){
if(e.clicksource === 'pin'){
Ti.API.info("The Pin at Latitude: " + e.annotation.latitude + " Longitude: " + e.annotation.longitude + " was clicked.");
}
}

The only caveat being that the center of the image is placed at the specified latitude/longitude values.  Possible workarounds are extending the transparent area around your image so that the base of your pin is centered in the image.

Minimizing the size of your custom image also helps due to there being less error in the offset.  Hopefully, an offset property will be released soon!

Changing the custom pin image of an annotation during runtime is a little trickier.  In order for the appearance to be updated, the annotation must be removed and added back to the map view.

Armed with these features, creating a map-based app can be accomplished efficiently with effective results!

Happy Mapping!

Get in the Game! Appcelerator’s Mobile Dev Challenge

Shockoe Mobile & Web Development partner Appcelerator announced this week that they are raising the stakes yet again.

As part of it’s inaugural Mobile Dev Challenge Appcelerator, leading mobile platform, has decided to add an additional $5,000 of prize money for challenge participants who best integrate Appcelerator’s Cloud Services (ACS) into their entry application!  Initially Appcelerator had planned to award over $30,000 in cash and prizes, but the new $5,000 bonus prize will go to the the app that “makes the most innovative use” of Appcelerator Cloud Services (ACS) according to their press release.  This may be given as a stand-alone prize or in addition to one of the other prizes that are awarded. All prizes will be presented at CODESTRONG 2012 in San Francisco from October 21-23, 2012.

To kick off their Mobile Dev Challenge, Appcelerator has invited its community of over 350,000 developers from all over the globe to create new mobile apps that leverage ACS with features like push notifications, photo sharing, check-ins, status posts, social integration, chat, ratings, and much more — Appecelerator’s cloud services technology make it fast and easy to integrate the could into any mobile app.

There are very few restrictions for apps that can enter into the Mobile Dev Challenge.  Apps can be built for consumers, businesses or the social good. Entries will be judged based on depth of integration, utility, user experience, and originality of concept.

For rules and submission information, visit appcelerator.challengepost.com. For more information on CODESTRONG, visit CODESTRONG.com

Shockoe Mobile & Web Development partner Appcelerator announced this week that they are raising the stakes yet again.

As part of it’s inaugural Mobile Dev Challenge Appcelerator, leading mobile platform, has decided to add an additional $5,000 of prize money for challenge participants who best integrate Appcelerator’s Cloud Services (ACS) into their entry application!  Initially Appcelerator had planned to award over $30,000 in cash and prizes, but the new $5,000 bonus prize will go to the the app that “makes the most innovative use” of Appcelerator Cloud Services (ACS) according to their press release.  This may be given as a stand-alone prize or in addition to one of the other prizes that are awarded. All prizes will be presented at CODESTRONG 2012 in San Francisco from October 21-23, 2012.

To kick off their Mobile Dev Challenge, Appcelerator has invited its community of over 350,000 developers from all over the globe to create new mobile apps that leverage ACS with features like push notifications, photo sharing, check-ins, status posts, social integration, chat, ratings, and much more — Appecelerator’s cloud services technology make it fast and easy to integrate the could into any mobile app.

There are very few restrictions for apps that can enter into the Mobile Dev Challenge.  Apps can be built for consumers, businesses or the social good. Entries will be judged based on depth of integration, utility, user experience, and originality of concept.

For rules and submission information, visit appcelerator.challengepost.com. For more information on CODESTRONG, visit CODESTRONG.com and see the early bird special Shockoe is offering for CODESTRONG! 

Nuevos desarrolladores TITANIUM certificados

Nuestros cursos en Chile el pasado mes de Julio  fueron todo un éxito, las clases fueron desarrolladas y aprovechadas al máximo  gracias a la participación de las personas que estuvieron con nosotros y aportaron también con sus experiencias.

Algunos de nuestros participantes nos dan su opinión sobre el curso.

“Los cursos me han parecido realmente excepcionales, Edwin Huertas, ha respondido a todas nuestra dudas y preguntas, eso se valora y te motiva a querer aprender mas y mas, ha pesar de que ya llevaba dos años programando con Appcelerator Titanium, aprendí cosas completamente nuevas, cambios importantes al momento de realizar una aplicación, esto me ha incentivado a tomar una de mis aplicaciones y comenzar a programarla nuevamente bajo los estándares que nos enseñaron en el curso TCAD, gracias a esto cada día que voy desarrollando la aplicación veo que hay una notable mejoría.”

Jonathan S.

“Me gusto mucho el curso, debido a que pude comprender de mejor manera la plataforma de Titanium, mejorar mis prácticas al desarrollar, y aprender de que acá en chile no es reconocida, si esta muy bien posesionada a nivel mundial.”

Manuel P.

“El poder participar del curso me permitió, obtener nuevos conocimientos y adquirir  nuevas lógicas de desarrollo. Así mismo también  asimilar y complementar de una manera más eficiente los conocimientos y técnicas donde cada  una se vio enriquecida y  actualizada para una mayor competencia laboral y personal. Quedo muy agradecido por los aprendizajes que he logrado  y por la calidad de información entregada.”

Miguel P.

Estaremos nuevamente en Chile en el próximo curso a dictarse, esperamos contar con su apoyo y participación para hacer los nuevos cursos tan fructíferos como los anteriores.

No se olviden revisar nuestro calendario de clases, si ustedes se encuentran en otros paises como Ecuador, Argentina o Brazil, estaremos en los próximos meses.

Beginner’s Titanium: UI Layouts Using Nested Views

Making user interface elements display how you want them is not always a simple task. The Titanium 2.0 SDK changed the way the ‘auto’ sizing keyword is handled. These changes may require some existing code to be modified in order to produce the same output. So, we’ve put together a simple iOS example to show the use of nested views with the new values Ti.UI.SIZE and Ti.UI.FILL.

We want to make a layout that looks like this:

 

First, let’s create our window.


var window = Ti.UI.createWindow({
    backgroundColor:'lightgray',
});

Next, we want to create an outer view container for our layout and add it to our window. This container’s layout property is set to horizontal so that our content will be added from left to right.


var outerView = Ti.UI.createView({
backgroundColor: 'blue',
layout: 'horizontal',
height: 100,
width: 300,
});

window.add(outerView);

We’ll create an ImageView, set its photo, and add it to our outer view container.


var photo = Ti.UI.createImageView({
width: 7
height: Ti.UI.FILL,
borderColor: '#444',
borderWidth: 2,
borderRadius: 2,
backgroundColor: 'white',
});

photo.image = 'http://www.shockoe.com/media/shockoelogo_web.png';

outerView.add(photo);

Since we don’t want our labels to go directly next to the photo, we need a small buffer. We’ll create a view to use as a buffer and add it to our outer view container.


//5 pixel buffer between photo and nestedViewContainer

outerView.add(Ti.UI.createView({

width: 15,

height: Ti.UI.FILL,

backgroundColor: 'green',

}));

We want a container with a vertical layout so we can add three rows of labels from top to bottom. We create another nested view and use it as a container for labels.


var nestedViewContainer = Ti.UI.createView({
layout: 'vertical',
height: Ti.UI.FILL, //fill remaining height of parent
width: Ti.UI.FILL, //fil remaining width of parent
backgroundColor: 'yellow',
});

We create our Labels and add them to the nested view container.


var topLabel = Ti.UI.createLabel({
text: 'I am topLabel',
width: Ti.UI.SIZE,
height: '50%', //make the top label taller than the others
backgroundColor: 'cyan'
});

var middleLabel = Ti.UI.createLabel({
text: 'I am middleLabel',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,//make this label as wide as its parent view
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,//center the text in the width of the label
backgroundColor: 'red'
});

var bottomLabel = Ti.UI.createLabel({
text: 'I am bottomLabel',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
backgroundColor: 'purple'
});

//add our labels to the nestedViewContainer
nestedViewContainer.add(topLabel);
nestedViewContainer.add(middleLabel);
nestedViewContainer.add(bottomLabel);

Finally, we add our nested view container to the outer view container and open our window.


//add our nestedViewContainer to the outerView

outerView.add(nestedViewContainer);

//open our window

window.open();

The UI views are colored to indicate the output of each element.  Comparing the code to the output should provide some idea of how the properties affect the outcome.  Please let us know in the comments section if this example was helpful!