Sharing your Story – Hardywood Park Craft Brewery

Sharing your Story – Hardywood Park Craft Brewery

Shockoe continues its goal for 2014 of becoming more involved in the community by learning more about how companies are impacting Richmond through their mission and works, this time by visiting one of Richmond’s locally owned and operated micro-brewing companies – Hardywood. Patrick and Eric were generous enough to open their doors for our team to learn more about how and why they started their brewing company, and of course share a few of their beers, including:  Hoplar, Bourbon Cru, and the staple Singel

Hardywood has not only done an amazing job brewing great local beers, but has an incredible marketing plan with a great story to support it.  We cannot begin to tell the Hardywood Story, but if you go to the tasting room, you can check it out for yourselves on a mural painted by Ed Trask.  Our take is that Hardywood has held true to their mission in becoming one of the most respected brewers in the United States by using amazing ingredients and truly respecting the brewing heritage.  Don’t believe us, check out their newest brew – The Bohemian Pils, released last night, definitely one of our favorites

Shockoe and Hardywood are two very different organizations, but have similar principles and challenges as we continue to impact and help our city as it grows.

Join us next month as we continue to bring in new guest speakers and collaborate with businesses around Richmond to Share their Story.

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!

Testing in a mobile environment

Want to test on an iPad but don’t have one? Now there are online solutions that will allow you to test on all the devices that you don’t have.  Searching for the right testing software is very important, it needs to be able to support large a variety of devices, test the performance of the apps, be some what user friendly, and at the same time be reasonably priced. When I started my search I found lots of great free testing tools online, but they were all usually limited to one or two devices.

iPhoney is a great way to display your web app in an iPhone setting. You can open any website with Safari, rotate the phone, zoom in and out, test different browser redirection scripts. There is a similar simulator called the iPadPeek which helps you visualize everything on the popular tablet as well. Simulating on an android environment, however,  is a little trickier and involves downloading the Android SDK and setting up a virtual device.

If you do have some room in your budget for App testing then there are definitely a few different tools that are worth your attention.

DeviceAnywhere  is a big name in device testing. The company provides an easy to use web interface which gives the user access to a wide range of devices. The picture quality of the screen shots is very clear and also supports 2-way audio.  DeviceAnywhere can help save  money by letting the user “Release” a device before the reserved amount of time is up (14-16/hr).

Perfectomobile is great because it supports many of the of the same features as DeviceAnywhere but it can come at a lower cost with the right subscription.  The price difference means less handsets to test with but the software does come with the same testing tools.  Perfectomobile is faster than DeviceAnywhere and allows you to change devices with ease. Test automation in Perfectmobile is also structured nicely and very user friendly.

If you are just trying to do general device compatibility testing for your web application you may be more interested in something like Crossbrowsertesting. This application lets you test your next site on over 100 browsers and 25 different operating systems including mobile devices such as: iPhone, iPad, and Android.  While you may not get to test your web app on a wide range of models for mobile devices you still get interactive and side by side testing at prices starting at 29.95 a month.

Overall, mobile app testing and/or mobile website testing is by itself a big part of the process when you develop applications for mobile devices. At Shockoe we are always looking for new and different ways of putting our applications to the test. Selecting the right tools or the right devices for testing and development is essential so everybody is happy with the final result and making sure that it doesn’t have to come back to the developers again in the future.

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!