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:
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!
Shaun is a student at Virginia Commonwealth University studying Computer Science. He wields the sword and shield of algorithms to slay the beast of complexity. Software Development is his passion and enjoys any discussion related to development.
If there’s one thing that hasn’t changed for me from the first day I started writing code until today, about my 500th day, it’s that not knowing where to start is incredibly intimidating. I acutely remember the panic of learning HTML and having no idea how to get my divs to go where I wanted them to go. The concept of setting up a grid system made sense to me, but the execution eluded me for days.
My relief finally came when I had the greatest realization of my young coding life: good lord, there is working code everywhere! It’s all over the internet! Just find it, copy it, and see how it works and you’re golden! I became a Google, “view source”, and “inspect element” maestro over night, learning structures and logics by reading other people’s successful executions. And for a while, this was all I needed. I needed to learn such basic things that just reading and seeing how other people’s code executed then editing it to fit my needs was the best thing for me. However, as my skills improved, I found myself lacking the skill to write code from scratch as elegantly as I wanted to. So I started a new system: instead of coping other people’s code, I type it out.
When Hunter S. Thompson was working as a copy boy at Time Magazine in 1959, he spent his spare time typing out the entire Great Gatsby by F. Scott Fitzgerald and A Farewell to Arms by Ernest Hemingway in order to better understand what it feels like to write a great book. To be able to feel the author’s turns in logic and storytelling weren’t possible from reading the books alone, you had to feel what it feels like to actually create the thing. And so I have found it to be with coding.
When I’m doing anything from executing a JQuery plugin someone else wrote to creating a static page in Python on a framework (like Cactus), whenever possibly I split the code onto one screen and my IDE on the other and type out the whole thing. It’s amazing how deeply I can understand the logic and any foreign syntax when I actually have to write it out. My mind has to actually narrate, like “here’s where they’re splitting the string, here’s where they’re parsing it, and WHOA! I didn’t know you could do that with Javascript!” when I undergo this process.
And it’s working. It’s awesome. I suggest you try it.
Nobody ever learned to become a great writer just by reading books, you’ve got to feel it.
If you make web or mobile mockups and you haven’t used Balsamiq Mockups yet – stop reading this blog and go try it.
Did you try it? Did you love it? Good.
Balsamiq is a drag-and-drop rapid wire-framing tool for designing mockups for web and mobile pages. Basically, it allows you to quickly and beautifully design websites, mobile sites, and mobile apps collaboratively with your team before you waste any time writing code. It was designed for teams to collaborate on designs, but at Shockoe.com we’ve found an even more powerful use for it: communicating with clients.
When a client first communicates a job to us, we’re often left wondering if we’re sure exactly what they want built. We could receive and email like this:
And we would think, “Great! Of course we can!” So we would send them back something that looks like this, made in Balsamiq:
However, a few minutes later, we (of course) receive an email like this:
Now you may be thinking “that’s a completely different thing! The only overlap is cat pictures!” And you’d be right! But understand that the client is thinking about the cat pictures and not the execution, while we’re thinking about the execution NOT the cat pictures. We’re operating on two totally different levels, and that’s totally understandable. With Balsamiq, we’re able to get our clients to focus for a minute on execution to make sure we’re building what they’re imaging.
However Balsamiq can do much more than that! Look for a post next week about how to combine Balsamiq with Appcelerator Titanium to do some amazing things.
The creator’s of the smash hit, Angry Birds, are back with a game that provides a different perspective on the war between the pigs and the birds, but with the same addictive game play. Bad Piggies is the story of the pigs making their great escape with stolen eggs over 84 different levels. Players must use their ingenuity to drive, fly, and crash through obstacles to advance through the increasingly difficult situations. You will have over 30 different objects to create the perfect get-away machine for your pig to get through the dangerous levels. The familiar 3 star system keeps players coming back for more until they complete the level with the optimal amount of points. Getting 3 stars not only means you successfully passed the level in the best way possible, but also unlocks more levels for you to explore. Shockoe believes that this a worthy successor to the incredibly successful angry bird series and is a must have for your ipod/iphone.
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!
Shaun is a student at Virginia Commonwealth University studying Computer Science. He wields the sword and shield of algorithms to slay the beast of complexity. Software Development is his passion and enjoys any discussion related to development.
After surveying over 3,600 Appcelerator Titanium developers, Apple’s phone and tablet devices have a %16 lead over Google’s Android platforms. The results show that Apple’s iOS is now the the preferred choice for both, business-focused developers and consumer-app focused developers. This lead is interesting considering that they were even less than a year ago, but it does not come as a surprise for many developers.
Source: Appcelerator/IDC 5/2012
“Enterprise mobile app developers are quickly souring on Android,” said Scott Ellison, VP of Mobile & Consumer Connected Platforms at IDC, because there is “too much fragmentation, too much malware and a sense that Apple is better suited to the enterprise.”
Apple has been very successful in the mobile arena by appealing not just to their customers, but to the developers as well. They have lots of useful resources online for people who are interested in learning how to deploy their iOS app and even have case studies on companies that have done so also. Apple has provided the Human Interface Guide to give developers professional advice on making their iOS app an intuitive user experience and tips on design strategies. The rising demand for the iPad may have also played a role in the growth of iOS development.
The gap in development does not necessarily mean bad things for Google. Interest in the Android platform in the last year has started to pick up and Google has become a viable competitor against Apple, despite initial concerns. Android’s advantage is in it’s large collection of devices, which happen to have lower prices than it’s main and only competition. By “outgunning” Apple’s devices, the playing field is leveled for consumers to make their own judgement calls on which platform is right for them.
Many developers, including the ones here at Shockoe, believe that the Android can make a comeback if it can slow down its rapid fragmentation the platform has been going through. The platform needs to be scalable and consistent to reduce the headache for mobile app developers. The long term picture is still unclear and unpredictable for developers, Google’s recent adoption of Motorola has not had enough time to make an impact and we have yet to see the potential for Windows-based mobile devices.
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. More information about the changes are available here. 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.
[ccw_javascript]var window = Ti.UI.createWindow({
backgroundColor:’lightgray’,
});[/ccw_javascript]
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.
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.
[ccw_javascript]//5 pixel buffer between photo and nestedViewContainer
outerView.add(Ti.UI.createView({
width: 15,
height: Ti.UI.FILL,
backgroundColor: ‘green’,
}));[/ccw_javascript]
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.
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);
[/ccw_javascript]
Finally, we add our nested view container to the outer view container and open our window.
[ccw_javascript]//add our nestedViewContainer to the outerView
outerView.add(nestedViewContainer);
//open our window
window.open();[/ccw_javascript]
This is our result!
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!
Shaun is a student at Virginia Commonwealth University studying Computer Science. He wields the sword and shield of algorithms to slay the beast of complexity. Software Development is his passion and enjoys any discussion related to development.
What if knowing where to go was as easy as checking the map on your Smartphone? Real time! With uPulse it is! uPulse is a mobile application that we have developed here at Shockoe, to let you know what’s hot in your area, right now! With fully customized preferences for each user uPulse only finds local events that you are interested in. Search filters easily let you find what your looking for whether it is fast food or a concert near you. uPulse is now available in the Google Play Market and will coming soon to the iOS App Store.
Development Tools
- Appcelerator Titanium Mobile Platform
- Custom map module in Objective-C (iOS Platforms)
- Custom map module in Java (Android Platforms)
- Google Mapping API
Web Services Integration
- WordPress Integration
- Facebook Integration
App Features:
- View local events on map/lists
- Categorize events by type
- Get group coupon type deals
Web Features:
- Easily get event information
- View local events on map/lists
- Categorize events by type
- Facebook Login integration
- Add Facebook events
- Get group coupon type deals
uPulse will let you know whats going on in your neighborhood so you don’t ever have to miss out on the fun again. uPulse is customized to each user’s preferences so it only finds local events that you are interested in. Search filters easily let you find what your looking for whether it is fast food or a concert near you. uPulse is available in google play or the app store for your mobile connivence, for more information check out their website.
