Xamarin.Forms with Zumero
I am a Xamarin fanboy, so my excitement about Xamarin.Forms is perhaps unsurprising.
But I see an awful lot of potential for this technology. I want to show you some of
the stuff we've been doing with Xamarin.Forms here at Zumero.
Andrew Jackson in Two Minutes
First I am going to race through this demo very quickly. Then I'll circle back around
and explain things.
STEP ONE: Download ZAG and run it
and download the ZAG application. For this demo, I'm using ZAG on Mac OS X
(but you could choose Windows or Linux) and I am targetting iOS (but you could
choose Android or Windows Phone).
When you run the app, you should see something like this:
STEP TWO: New Database
Under the "File" menu, choose "New Database...".
You should see this dialog:
Fill in the Server URL and DBFile exactly as shown in the screen shot (Server URL: "http://demo.zumero.com:8080". DBFile: "demo"). Click the OK button.
You should see a dialog asking you where to save the local copy of the database:
Click OK. You should see "Syncing with the ZSS Server":
And when the sync is complete, at the bottom of the ZAG window, you should see "Sync result: 0 (success)".
STEP THREE: Generate
Under the "Generate" menu, find and choose the item labeled "Xamarin.Forms C#":
You will be asked three questions, and you should be able to just click OK on all
STEP FOUR: Open the sln file
You can quit the ZAG application now. It should have generated a folder somewhere like
/Users/eric/Documents/demo.zssdemo/. Under that folder you should find a
Xamarin solution tree that looks something like this:
Double-click the demo.sln file to open it in Xamarin Studio. You should see
four C# projects: a Portable Class Library called "demo.Shared", plus one app
target each for iOS, Android, and Windows Phone 8:
STEP FIVE: Build and run the app
If you build and run the demo.iOS app in the iPhone simulator, you should
see something like this:
STEP SIX: Sync
Click the "Sync" button in the upper right. You should see:
The defaults should be fine. Just tap the "Sync Now" button. When the
sync is completed, you should see a list of tables:
STEP SEVEN: Andrew Jackson
Tap the "presidents" table. In an iPad instance of the simulator, you would see this:
And tap the seventh item. You should see Andrew Jackson, the only U.S.
president ever to kill someone in a duel:
What is ZAG?
ZAG is short for "ZSS App Generator". It's a desktop app
which generates ready-to-build source code and build scripts
for mobile apps that sync using ZSS.
We think of ZAG as a way for getting people started faster.
Many people come to our product without much experience in
mobile app development. ZAG can be used to give them
a starting point, sort of like sample code that is customized
for their data.
What is Zumero for SQL Server?
Zumero for SQL Server (ZSS) is a solution for
data sync between SQL Server and mobile devices.
More info from Dan Bricklin about offline in mobile apps: http://bricklin.com/offline.htm
More info about Zumero on our website: zumero.com
More info about Zumero from my previous blog entry: here
What is demo.zumero.com:8080?
This is a publicly accessible ZSS server provided so that
folks can play with Zumero clients more easily. It contains
some basic sample data such as U.S. presidents and the
periodic table of the elements.
In real-world scenarios, a customer would use ZAG to generate
their starter app after they have completed setup of their ZSS
What is Xamarin?
Xamarin is (IMHO) a great solution for building mobile apps.
One of the main benefits of the Xamarin platform is the ability to
write the non-UI parts of your iOS/Android/WP8 apps in cross-platform
code while implementing a native user interface for each mobile environment.
But I would use Xamarin even for a single-platform app, simply to get
the benefits of working in .NET/C#.
More info on the Xamarin website: http://xamarin.com/
What is Xamarin.Forms?
Xamarin.Forms is Xamarin's solution for making [most of] your
UI code cross-platform as well, while retaining fully native
performance and feel.
In a nutshell, the coolness of Xamarin.Forms lies in the fact
that in the solution generated by ZAG above, the demo.Shared project is a Portable Class Library
even though it contains the entire user interface for the app.
More info on the Xamarin website: http://xamarin.com/forms
What is a Portable Class Library (PCL)?
A PCL is a .NET class library that is annotated with information
about which platforms it should support. This metadata allows the
tooling to enforce portability rules in both the development and the
consumption of the library.
More info on Scott Hanselman's blog: http://www.hanselman.com/blog/CrossPlatformPortableClassLibrariesWithNETAreHappening.aspx
More info on the Xamarin website: http://developer.xamarin.com/guides/cross-platform/application_fundamentals/pcl/introduction_to_portable_class_libraries/
Why does ZAG generate separate projects for iOS, Android, and WinPhone?
Xamarin.Forms can make most of your UI code portable, but not all of it.
The actual building of the mobile app is specific to each platform. But
if you look in the code for each of those platform-specific projects,
you'll see that there isn't much there.
What dependencies does the ZAG-generated app have?
The following NuGet packages will need to be retrieved:
What is the "SQLite-net PCL" NuGet package?
This is the Portable Class Library (PCL) version of SQLite-net,
the popular lightweight SQLite ORM by Frank Krueger (@praeclarum).
More info on GitHub: https://github.com/praeclarum/sqlite-net
More info on the NuGet website: https://www.nuget.org/packages/sqlite-net-pcl/
What is the "SQLitePCL.raw_basic" NuGet package?
SQLitePCL.raw is my Portable Class Library for accessing
SQLite from C#.
More info on Github: https://github.com/ericsink/SQLitePCL.raw
More info on the NuGet website: https://www.nuget.org/packages/SQLitePCL.raw_basic/
What is SQLite?
SQLite is the most popular SQLite database for mobile devices.
More info on the SQLite website: sqlite.org
What is the "Zumero" NuGet package?
This is the Zumero Client SDK in the form of a Portable Class Library in a NuGet package.
More info on the Zumero website: http://zumero.com/dev-center/zss/
More info on the NuGet website: https://www.nuget.org/packages/Zumero/
What do Zumero's client-side SQLite files look like?
As much as possible, they look exactly like they looked in
Table and column names are the same.
All data values are the same (whenever possible).
Foreign keys in SQL Server are reconstructed as foreign keys in SQLite.
Since SQLite does not perform type checking, Zumero adds constraints to do so.
And so on...
What's happening in step two?
ZAG is acting as a Zumero client and synchronizing the data on the server
into a local SQLite file. This file is used to obtain information about the
tables and columns necessary to generate the mobile app.
The same sync is happening in step six, except then it is the
mobile app performing the sync instead of ZAG.
What were those three questions in step three?
The first one is the project name:
Then ZAG wants to know the settings for your sync server. These should
already be filled in with the ones you entered earlier:
Finally, ZAG is asking you where to save the source code and project files
for the app to be generated:
Does a ZAG-generated app allow modifications to the data?
For the Xamarin.Forms C# target, yes. On the item detail page,
you should be able to enter new values in text fields and 'Save' the
But you should get a permission denied error if you try to sync
those changes to our public demo server. :-)
Is ZAG generating UI stuff as XAML or as C# code?
Currently, it's XAML. You'll find the files in the 'xaml' folder
in the demo.Shared project.
Does ZAG generate polished ready-to-use apps?
Oh definitely not. :-)
The output of ZAG should build and run with no
errors (if it doesn't, it's a bug, and please let us know), but
it's just a starting point for further development.