Category: Mobile

Get started with Polymer 1.0 and WebStorm 11

So this year one of my goals is to learn Polymer 1.0. I followed this project for about a year now and I believe that the framework is mature enough to be adopted even into a production environment. Unfortunately Google didn’t make a great job regarding Polymer (in my own opinion) and there is not a great web development IDE available like they did with Android Studio for Android development.

In the past I worked a lot with Visual Studio but also with JetBrains tools and I found WebStorm a very reliable tool for web development, so I decided to start this article which will explain how to setup the correct development environment for Polymer 1.0 using WebStorm.

Note:
I have both Linux and Windows 10 PCs, I don’t use MAC at all, and this article is all based on my Windows configuration. If you are going to use WebStorm and Polymer on Linux the tutorial is still valid, but if you are on MAC, well you are on your own Winking smile

Download the necessary tools

First of all, in order to have the proper environment setup correctly, especially in Windows, you MUST download all tools before you start to download WebStorm or Polymer, otherwise you will start the nightmare of “path not found” errors and similar.

  • GIT
    GIT is a well-known command tool for managing GIT repositories. Even if you come from an SVN or TFS (Team Foundation Server) environment I would suggest you to get started on GIT because even companies like Microsoft are moving their source code into GitHub or BitBucket repositories and GIT is used by BOWER to download and synchronize components from Polymer.
    https://git-scm.com/
  • NODE.js
    Node is a JavaScript runtime build on Chrome V8 JavaScript engine. If you work with Polymer your primary use of Node is with the command NPM, which will be used in parallel with BOWER.
    https://nodejs.org/en/
  • BOWER
    If you come from Java you may be aware of “Maven Central” while if you come from .NET you may be aware of “Nuget”. Well BOWER is the same concept applied to web development. It allows you to download “packages” of CSS, JavaScript and HTML files packed as “components”. Without Node.js you can’t use BOWER because it requires the NPM (Node Package Manager) command tool.
    http://bower.io/

Now, after you install GIT, open your command prompt and type:

git --version
# and the output will be
git version 2.6.2.windows.1

If you don’t get so far it means that you don’t have the GIT bin folder registered as a Windows Environment Variable. The second step is to verify that node is installed and that’s the same of GIT, just type

npm version
# and the output will be
{ npm: '3.6.0',
  ares: '1.10.1-DEV',
  http_parser: '2.6.1',
  icu: '56.1',
  modules: '47',
  node: '5.6.0',
  openssl: '1.0.2f',
  uv: '1.8.0',
  v8: '4.6.85.31',
  zlib: '1.2.8' }

Great. Last step is to install the package BOWER from Node.

npm install -g bower

And then verify that bower is installed by typing:

bower --version

So now you are 100% sure that you can move forward and prepare your dev environment.

Install and Configure WebStorm

At the time I am writing this article WebStorm is available in the version 11. I assume that in the future nothing will change regarding this part of the setup, especially because all JetBrains IDE are based on the same core IntelliJ IDE. WebStorm can be downloaded here: https://www.jetbrains.com/webstorm/ and you can use it for 30 days, then you need to buy a license or apply for a free license.

After WebStorm is installed, open the IDE and choose “new empty project” and name it polymer_test like I did:

image

Now you should have an empty project and WebStorm ready to rock. If you look at the bottom of the IDE you will see a “Terminal” window. This is an instance of your DOS command prompt (in Windows) and your Terminal prompt (in Linux). Just double check that everything is fine by typing something like “bower –version” or “git –version”:

image

Step 01 – Init Bower

This is the basic of polymer which is needed in order to get started, you need to run the command “bower init” which will prepare a JSON file with the project configuration information. If you don’t know what to do here, just keep press ENTER until the json file is created.

image

Now you should have in your root a file named bower.json which contains your project’s configuration information.

Step 02 – Download the core of Polymer

Second step is to download the Polymer core. This is required by any Polymer project. type “bower install –save Polymer/polymer#^1.2.0” in order to download the latest stable version of Polymer which is the 1.2.0 version.
If you don’t specify the version, bower will download all available version and then ask you which version you want to use.

image

At this point your project will have a new folder called “bower_components” and the Polymer core component’s folders:

image

Final, create a new page and name it “index.html” with the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Polymer Application</title>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/polymer/polymer.html" rel="import">
</head>
<body>

</body>
</html>

Now your page is ready to be used as a Polymer page, you only need to import the components that you need or create your own ones. If you want to be sure that everything works as expected, just right click on your .html file and choose “browse with” and test it on your preferred browser (I assume Chrome):

image

Step 03 – Download the Material Design components

If you know already that you are going to work with Material Design components, then you can easily download the whole iron-components and paper-components into your project with two simple bower commands:

bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements

Then you can try to create your first page by importing, for example, the Material Design Toolbar components as following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Polymer Application</title>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/polymer/polymer.html" rel="import">

<!-- Toolbar element -->
<link href="bower_components/paper-toolbar/paper-toolbar.html" rel="import">
</head>
<body>
<paper-toolbar>
<div class="title">My Toolbar</div>
</paper-toolbar>
</body>
</html>

And you should have a nice page with a basic Material Design Toolbar like mine:

image

Enjoy!

Android and the transparent status bar

With the introduction of Google Material Design we also got a new status bar design and we can choose for three different layouts:

  • Leave the status bar as is (usually black background and white foreground)
  • Change the color of the status bar using a different tone
  • Make the status bar transparent

The picture below shows the three different solutions provided with the Material Design guidelines:

A) Classic Status Bar

B) Colored Status Bar

C) Transparent Status Bar

In this post I want to finally give a working solution that allows you to achieve all this variations of the status. Except for the first solution which is the default layout of Android, so if you don’t want to comply to the Material Design Guidelines just leave the status bar black colored.

Change the Color of the StatusBar

So the first solution we want to try here is to change the color of the status bar. I have a main layout with a Toolbar component in it and the Toolbar component has a background color like the following:

image

So according Material Design my Status Bar should be colored using the following 700 tone variation:

image

If you are working with Material Design only and Android Lollipop this is quite easy to accomplish, just set the proper attribute inside the Material Theme Style(v21) XML file as following:

<!-- This is the color of the Toolbar -->
<item name="colorPrimary">@color/primary</item>
<!-- This is the color of the Status bar -->
<item name="colorPrimaryDark">@color/primary_dark</item>
<!-- The Color of the Status bar -->
<item name="statusBarColor">@color/primary_dark</item>

Unfortunately this solutions does not make your status bar transparent, so if you have a Navigation Drawer the final result will look a bit odd compared to the real Material Design guidelines, like the following one:

image

As you can see the Status Bar simply covers the Navigation Drawer giving a final odd layout. But with this simple solution you can change your status bar color but only for Lollipop systems.

In Android KitKat you cannot change the color of the status bar except if you use the following solution because only in Lollipop Google introduced the attribute statuBarColor

Make the StatusBar transparent

A second solution is to make the Status Bar transparent. This is easy to achieve by using the following XML attributes in your Styles.xml and Styles(v21).xml:

    <!-- Make the status bar traslucent -->
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowTranslucentStatus">true</item>
    </style>

But with only this solution in place we get another odd result where the Toolbar moves behind the status bar and get cut like the following screenshot:

image

So first of all we need to inform the Activity that we need to add some padding to our toolbar and the padding should be the size of the status bar, which is completely different from one device to another. So how can we achieve that is quite simple. First we get the status bar height with this function:

// A method to find height of the status bar
public int getStatusBarHeight() {
    int result = 0;
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0) {
        result = getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

Then in our OnCreate method we specify the padding of the Toolbar with the following code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_drawer);

   // Retrieve the AppCompact Toolbar
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

   // Set the padding to match the Status Bar height
    toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}

And finally we can see that the Status Bar is transparent and that our Toolbar has the right padding. Unfortunately the behavior between Lollipop and KitKat is totally different. In Lollipop the system draw a translucency of 20% while KitKat does not draw anything and the final result between the two systems is completely different:

image

So, in order to get the final result looking the same on both systems we need to use a nice library called Android System Bar Tint available here on GitHub: https://github.com/jgilfelt/SystemBarTint. This library is capable of re-tinting the Status Bar with the color we need and we can also specify a level of transparency. So, because the default Material Design Status Bar should be 20% darker than the Toolbar color we can also say that the Status Bar should be 20% black, which correspond to the following RGB color: #20000000. (But you can also provide a darker color and play with transparency, this is really up to you).

So, going back to our onCreate method, after we setup the padding top for the Toolbar we can change the color of the Status Bar using the following code:

// create our manager instance after the content view is set
SystemBarTintManager tintManager = new SystemBarTintManager(this);
// enable status bar tint
tintManager.setStatusBarTintEnabled(true);
// enable navigation bar tint
tintManager.setNavigationBarTintEnabled(true);
// set the transparent color of the status bar, 20% darker
tintManager.setTintColor(Color.parseColor("#20000000"));

At this point if we test again our application, the final result is pretty nice and also the overlap of the Navigation Drawer is exactly how is supposed to be in the Material Design Guidelines:

image

The Next Video shows the final results running on KitKat and Lollipop device emulators using Genymotion.

The Final result on Lollipop and KitKat

Understand Density Independent Pixels (DPI)

If you are working on a Mobile application (using mobile CSS, native Android SDK or native iOS SDK) the first problem you are going to face is the difference between the various screen sizes. For example, if you work with Android you will notice that different devices have different screen resolutions. Android categorize these devices in 4 different buckets called respectively MDPI, HDPI, XHDPI and XXHDPI

As I usually say, a picture is worth a thousands words:

Figure 1 So as you can see, in this case we have 4 devices with 4 different pixels resolutions but also 4 different DPI classifications.

What is DPI and why we should care?

DPI stands for Dots per Inches, which can be translated in how many pixels can be drawn into a screen for a given inch of screen’s space.

This measure is totally unbind to the screen size and to the pixel resolution so we can state that screens at different size and different resolution may be classified within the same DPI category and screens with same size but different resolution may be classified into different DPI category.

Assuming we are loading on our phone a raster picture of XX px wide, this is the result we will see using different DPI if we keep the image at the same size:

image

The blurring effect is caused by the fact that on a screen with 165dpi the amount of pixels drawn per inch is way lower (165) than on a 450dpi screen so the first thing that we loose is the sharpness of the image.

How Android works with DPI?

In android you can classify your device’s screens into 4 or more different dpi buckets which are used to classify the device’s screen depending on the amount of dpi and not the pixel resolution of the screen size. The picture below shows the available DPI classifications with a sample device for each category. You can find all the available DPI classification on this lovely website DPI Love.

image

So for Android specifically, a device of 160 DPI has a ratio of 1:1 with the pixels on the screen while a device with more than 480 DPI has a ratio of 1:3 pixels on the screen compared to the same design for a 160 DPI screen.

Based on this classification we can now easily derive the following formula which can be used to calculate the real DPI resolution of a device based on its DPI classification and pixels resolution:

image

The Formula can be translated as DP = PX * 160 / DPI. So let’s make a couple of examples.

We want to design on the screen a square that should be 200px * 50px on our MDPI screen which we are using for mocking the UI (this is what I call default viewport)

Note: in Android SDK you will refer to DP  to define a density independent measure and not DPI, this is why the previous formula has on the left side px (pixels) and dp (density independent pixels).

Considering the previous list of devices (Figure 1) this is the result I come with in order to have the same aspect ration of my rectangle over multiple devices starting from an MDPI viewport:

DEVICE DPI RATIO SIZE DP SIZE
GALAXY ACE MDPI 1:1 200 * 50 px 200 * 50 dp
HTC DESIRE HDPI 1:1.5 200 * 50 px 133 * 33 dp
NEXUS 7 XHDPI 1:2 200 * 50 px 100 * 25 dp
NEXUS 6 XXHDPI 1:3 200 * 50 px 67 * 16 dp

Regarding iOS the ratio is exactly the same except for XHDPI (retina) where the ratio is 1:2.25 and not 1:3 like in Android. iOS does not offer a classification for XXHDPI devices.

Real guide, configure Exchange 2003 SP2 and iPhone 3.0 OS.

Hi guys, as I told you in the previous post, I bought a new iPhone 3GS with the new OS 3.1. The phone is pretty cool, it works great and it has tons of software, utilities and services that I didn’t find in any smart phone, including the BlackBerry.

The only big problem was to configure my business exchange email. Simply, it was not working until today. So in this small guide I am going to explain step by step what you have to do in order to have a full functional and working iPhone!

Configure ActiveSync on Exchange Server 2003.

Before starting you must successful enable ActiveSync and OMA (Outlook mobile access) into your Exchange Server. If this step will not be successful, do not go ahead!!

In order to use ActiveSync on your exchange 2003 you must have:

  1. Windows Server (standard or enterprise) with the latest updates and the Service Pack 2 working.
  2. Exchange 2003 with latest updates and Service Pack 2 installed and working.
  3. Outlook Web Access working and accessible from outside your Network.
  4. Firewall ports (443, 80) opened for OWA.

If you cannot satisfy one of these prerequisites, please Google and search for a solution. I am not going to explain here how to enable a port into your firewall or how to install OWA in Exchange Server 2003, as in my opinion, out of topic.

After you have successfully installed ActiveSync, you will have this additional option inside your server, you have to right click on global settings>mobile services and choose properties :

image

You have to enable everything in order to have full access to the OMA service.
After that, you should now download and install the Microsoft Exchange Server ActiveSync Web Administration Tool, and handful tool that allows web administration of your smart phones.

After you will install the tool, you will have this web application in Exchange local host:

image

The address is https://localhost/mobileadmin and for default is SSL enabled.

Troubleshoot OMA installation.

This step is fundamental. If you cannot access the OMA web site, you will not be able to use your iPhone or any other smart phone.

Give it a try, inside Exchange, by typing the address https://localhost/OMA and insert your Exchange credentials. If you will see a text page with your mail folders, you are fine, otherwise you need to troubleshoot the problem … If it’s working go directly to the iPhone Configuration step.

First of all open exchange active directory inside exchange and click exchange tasks over your user account. You have to enable all the futures, like this screenshot:

image

If it’s not working yet … like in my situation, you have to configure a new virtual directory for OMA. In order to configure the virtual directory, follow, step by step this Microsoft TechNet article or the HTTP error codes. It solved my problem.

Remember: until you get the OMA web site working, do not try to configure the iPhone!

Configure your iPhone.

I have an iPhone 3GS with OS 3.1, so probably if you have an older version, the screenshot below, will not be the same as mine.

Open the iPhone menu, click over Settings and then the menu Mail, Contacts and Calendars.

Insert a new account, choose an Exchange account.

image

Server: I typed my web mail address, like webmail.mydomain.com, without https. Then I choose the SSL enabled communication. You if you have a public URL for OMA then you have to type that address.
Do not type something like mymachinename.domain.whatever of course it will not work because your iPhone is not in your Office Network.

Username: it’s my Windows username I use in the office.

Domain: it’s my Active directory domain.

After that, you will be prompted for which objects you want to keep sync. I choose all of them like this screenshot:

image

After this step, after 5 minutes, you will be able to open your email and work with push technology, this means that you will be able to work directly inside your mail box from your iPhone. For example, if you add an event in the iPhone calendar, this will be added also into your mailbox in the office, and so on …

This will be the final result, pretty cool!!

image

Enjoy and please beware about the iPhones screenshots, for each version of the OS (2, 2.1, 3, 3.1) they change a little bit, but the information are always the same.

Personal Considerations from BlackBerry to iPhone.

  • Advantages
    • IPhone is more useful, the usability is better than BlackBerry and the screen more clear.
    • The contacts search, merge and copy options are awesome. BB is not so awesome …
    • The emails can be zoomed just with a finger, with the BB you cannot.
    • You can read Office, Acrobat, Images and Video in the mails, BB cannot.
  • Disadvantages
    • The most important is the battery life. My iPhone in a production environment doesn’t live more then 10 hours. The BB has a battery life of 3/4 days, always on.

Finally, Microsoft Exchange is the best as an Email server and the activesync service is very good, but the best match for me is Exchange server with IPhone, very impressive!!

Additional Resources:

http://support.apple.com

http://www.petri.co.il/configure_oma.htm

http://www.msexchange.org/tutorials/Managing-Mobile-Access-Exchange-Server-2003.html

Tags:

Mobile development, my 2 cents!

I am going mad for the iPhone. I just ordered the new iPhone 3gs and like any developers, I want to give my 2 cents. I want to talk with you about the development program and what you can really do with the Cocoa Mobile Framework and compare it with Windows CE development.

Mobile framework with Microsoft NET.

This is the most used, cool and easy framework to use in order to develop mobile application for windows CE or windows mobile, pocket PC and more. In order to do that, you need to download Visual Studio 2008. That’s it.

Then you can create a new mobile application project and choose from the various options:

image

You can choose the framework (Compact Framework 2 or 3.5), the device O.S. (pockect PC, Windows CE …)

The IDE is simply amazing because it’s visual studio! You can do everything you usually do with the normal Windows Client development. Drag controls, using the final phone interface.

image

You do not need any additional window, it’s like any other development project in C#. The GUI designer, pretty cool, the code editor with the amazing VS intellisense and all the other nice futures of VS.

If you want to enjoy a cool italian community, this user group is managed by some of my friends, and they talk only about mobile development: http://www.ugimobile.org/

Mobile Development for BlackBerry with Visual Studio.

One of the most nasty development environment is the one offered in past for systems like Symbian (Nokia) or BlackBerry.

I have just found at this address: http://na.blackberry.com/eng/developers/rapidappdev/vsplugin.jsp a development toolkit for Visual Studio. With this toolkit we can easily develop application for BB in our Visual Studio environment. Pretty cool!

Of course this is under an enrollment agreement that you can find here: https://www.blackberry.com/CorpDevZone/ but it’s free!

Have a look here:

image

Same as before. You have a nice GUI designer, you can choose the model of the virtual device (BB) and also you can test your application over different model in order to be sure that your application will be feasible for all the blackberry’s users.

Mobile Development for iPhone with XCode and Cocoa.

Ok, first of all you need to know 3 important thing about iPhone development:

  1. You can develop iPhone software only with XCode 3.0 on MAC OSX 10.5.7
  2. You need to install the latest version of the iPhone SDK
  3. You must enroll the Development program, and if you want to sell your applications, you must pay a fee on apple …

Now if you are able to do all these steps, you can open XCode 3.0 on your MAC OSX and try to develop for iPhone. These are some screenshots from my MAC:

image

This is the main screen where you can manage the files. Then, there is the GUI designer, called Interface Builder

image

Finally there is the code: Objective-C. The worst code I have ever used, trust me. This is just a small sample used to build a normal class with a couple of properties:

image

Some final considerations.

Here are my 2 cents about mobile development for Smartphone. Please tell me what you think about and if you are agree with me or not.

  Windows Mobile BlackBerry iPhone
Visual Studio yes yes no
Multi platform no yes no
multi IDE no yes no (yes with mono)
OOP yes C# yes C# yes/no obj.-C
easy SDK yes yes no
enroll program no yes free yes pay

So, as you can see, if you want to join the fun boy iPhone development and make some money, you need to pay something (at least the enroll program and a junky MAC).

If you want to do the same for Windows Mobile and BB it’s completely free.

Also if you do not want big head hake, with the Win or BB development, you can work with the power of C# but the iPhone is running only with objective-C that in my opinion has a very strange and old syntax …

Tags: