Some months have passed and here I am with a new cool app: Lottery Roulette. As with Palladio GPS Guide, I’ve built it with simple Web technologies, such as CSS and Javascript.
This time the challenge was the roulette-like scroll area. I’ve realized the number animation with CSS transitions.
Check out the app’s feature on the dedicated web page, or download it directly on App Store.
While I was developing the Palladio’s app, I was wondering if it would be accepted by Apple. I was worried about the discussions about Flash and third parties’ tools rejected from the App Store. When it was time to do the submission, I carefully read all the tips from the Apple Developer center and I searched other possible causes of rejection. As a result, I discovered that you should pay attention to the following advices:
The list layout of the Palladio App
The application name is Andrea Palladio Architectures Gps Guide and it is a guide to Palladian villas. For those who don’t know, Andrea Palladio is a famous Italian architect of the 16th century, whose works are mainly situated in the Veneto Region, a beautiful region in the North of Italy.
The cover of the "villa"
We’ve spent about six months to develop it, because there was a lot to do on Phonegap. We wanted to realize an app that looks and feels like a real app, made with Objective C. So we have analyzed and extended the Phonegap’s code in order to create a toolBar with custom buttons, a better integration with Maps and we have also worked to optimize Javascript performance. The result, we think, is an application that is like a native one.
If you want to see more screenshots just go to the dedicated page on my graphic studio’s website. There, you will also get other informations and a direct link to iTunes page.
The code in this article works only with the custom Map class, so you need first apply the patch i’ve described here.
To view user’s current position you need to edit Map.m into PhoneGapLib’s project, placed into Documents folder, then find this line:
//mapView.showsUserLocation=true;
and just remove the double slashes:
mapView.showsUserLocation=true;
If all is gone fine, just clean and compile your project and you will see a green pointer on Cupertino (if you are working with the simulator).
If you want to modify the background color of the Web view, not the background color of the HTML page but the default gray one “under” it, just open the PhoneGapLib.xcodeproj into your Documents (or wherever you put it) and edit PhoneGapDelegate.m at aline 160 and add, after:
webView = [ [ UIWebView alloc ] initWithFrame:screenBounds ]; [webView setAutoresizingMask: (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight) ];
[webView setBackgroundColor:[UIColor blackColor]];
First of all, we need to modify the Phonegap project. So, get the new map.m and map.h files from here and substitute the ones into the Pg project (I’ve found mine in ~/Documents/PhoneGapLib/Classes/).
Than, open PhoneGapLib.xcodeproj and add the Mapkit framework.
Now, you can easily play with maps inside you app!
Just add this lines into navigator.geolocation.getCurrentPosition success function:
// initialize the map
PhoneGap.exec("Map.init");
// add one point, you can add as many as you want
PhoneGap.exec("Map.addPoint", mylatitude, mylongitude, "Tooltip title", "Tooltip subtitle", "color", "_callback()"); // Callback must be quoted!
// than show the map and center it
// params are: "function", , longitude,
PhoneGap.exec("Map.center", mylatitude, mylongitude, 0.4, 0.4); // Last two numbers are latitudeDelta [0-1] and longitudeDelta [0-1]
iPhone TabBar positioned at the bottom of the view
The TabBar, as you can see, is the black bar positioned at the bottom of the screen. It is useful because it remains the same through different views, making users able to easily switch between them.
To create it, just write:
// init the TabBar
window.uicontrols.createTabBar();
// than we create some items, we can add up to five elements
window.uicontrols.createTabBarItem(
"id", // string identifier
"My button", // title displayed
"mappa.png", // icon file
{
onSelect: callback // callback function
}
);
// than we can show the empty TabBar
window.uicontrols.showTabBar();
// after make it visible we show the buttons by specifying the id
window.uicontrols.showTabBarItems("id");
With this methods, we can create how many buttons we would like to have in our app and easily hide/show them.
For example, to add the two buttons displayed above, write on index.html into your project/www folder:
// this is the default function lauched when the device is ready
function onDeviceReady() {
window.uicontrols.createTabBar();
window.uicontrols.createTabBarItem(
"btn1",
"My button",
"icon.png",
{ onSelect: function() { callback('my') } })
window.uicontrols.createTabBarItem(
"btn2",
"My Favourite",
"tabButton:Favorites"
);
window.uicontrols.showTabBar();
window.uicontrols.showTabBarItems("btn1", "btn2");
}
As you can see in the picture above, the second button, even if I called it “My Favorite”, is showed as “Favorites”. This happens because it’s image is not a png, but it is “tabButton:Favorites”. This is a special type of button, which creates a standard system button (so your title will be overwritten). In PhoneGap you can choose between:
tabButton:More tabButton:Favorites tabButton:Featured tabButton:TopRated tabButton:Recents tabButton:Contacts tabButton:History tabButton:Bookmarks tabButton:Search tabButton:Downloads tabButton:MostRecent tabButton:MostViewed
But PhoneGap has some other useful methods to manage TabBar buttons.
For example, to make a button selected (really useful!):
window.uicontrols.selectTabBarItem("id");
Or, to add a badge (the small number on top of the button):
var num = 2;
window.uicontrols.updateTabBarItem("id", { badge: num });
Currently, the TabBar has some positioning bugs and using it with TabBar is very buggy ToolBar causes some issues.
So, to use both of them, we need do patch the PhoneGap source code.
Soon on this blog.
iPhone: UIControls (TabBar)
PhoneGap: TabBar Class Reference
–
Phonegap version: 0.9.0
albertogasparin