Xamarin Android Build Java Exited with Code 1 ProGuard

When building a Xamarin Android app and using the option to Enable ProGuard, we may get the following error:

error MSB6006: "java.exe" exited with code 1

Note: Proguard is a file shrinker/optimizer which is often used on a release version. This can be found on the Android Options tab.

The error means that java is not able to build the application due to some an error that is raised during the build process. To find out what the error details, we need to set the MSBuild verbosity mode to Diagnostic which provides detail log on each step during the build. We can change the verbosity mode from Visual Studio Build and Run settings which can be found on the following menu option:

Tools->Options->Project and Solutions-Build and Run

Once this option is set, we should be able to compile again and see more detail about what is happening. If we look at the MSBuild output (output window on Visual Studio), we can find the error or exception that can provide more insight on the problem.

For this case, we can see that there is an error associated to the proguard tool. The error reads that there is an unknown option on the configuration file proguard.cfg.

proguard.ParseException: Unknown option '-dontwarn' in line 1 of file 'proguard.cfg', (TaskId:226)

If we look carefully, we can see that there is a funny character on the error message.  This leads us to think that there is some junk data in the proguard.cfg file, or there is an encoding problem.

Solution:

The proguard tool does not handle files that contain Byte Order Mark BOM. Visual Studio creates files with this information. The BOM is used to indicate the file encoding type. To see and remove that encoding, use a tool like Notepad++ and save the file without the BOM encoding which is a menu option when saving the file.

After removing the BOM from the file, we should be able to build the project again and see a successful build. Inspecting the log, we can also see that the proguard task completes with no errors:

Done executing task "Proguard". (TaskId:179)

Hopefully this can help solve similar errors when building Xamarin Android Apps.

Originally published by ozkary.com

When building a Xamarin Android app and using the option to Enable ProGuard, we may get the following error: error MSB6006: ...

Read Article →

ANGULARJS Calculate Totals Using Directives

In this article, we show how to do a calculation of subtotals and totals using AngularJS. To illustrate how we can do the aggregates, we build a simple invoice in which we will add the total quantity of items and subtotals per item and final amount. 

We first start by showing the JSON model that represents a list of items with quantity and cost per unit. These are the amounts that we will be adding using directives.

$scope.items = [{     name: 'Baseball Bats',     quantity: 2,     unitCost: 75 }, {     name: 'Soccer Balls',     quantity: 5,     unitCost: 15 }, {     name: 'Baseball Gloves',     quantity: 3,     unitCost: 40 }];

As shown in the JSON model, there is quantity and cost information, but we need to add a new attribute that can provide the total for each item by using this simple formula (quantity * unitCost). We also need to provide a total amount for both the sum of items and cost.

In order to meet our goal, we use the ng-repeat and ng-init directives. The ng-repeat directive allows us to iterate every item in the list. The ng-init directive allows us to execute an expression or call a function for each item. This is what enable us to extend the model by adding attributes that hold the total amounts. We can see this with the following code snippets:

The setTotals function in the invoice controller calculates each item total. It also uses the invoiceCount and invoiceTotal scope variables to aggregate (sum) the quantity and total for all items.  This is what allows us to generate a total row in the grid.

I hope this post provides you with more ideas on how to deal with calculated values using AngularJS.

In this article, we show how to do a calculation of subtotals and totals using AngularJS. To illustrate how we can do the aggregates, we ...

Read Article →

Wireframe a Mobile Application

og-bit.com

When designing a mobile application, one of the first activities should be to wireframe the application first. This allows us to define the application views, navigation and the user interaction.

What is a wireframe?

This is the design process of the application in which you can create rough sketches of how the application should look and behave. This allows us to identify any possible design issues early in the process. The corrections can be made on the sketch which has less impact than to try to correct software already written. The goal should be that all your application requirements should be met and that the user interface should be consistent, intuitive, balanced and readable.

Application Views

These are the pages/screens of your application. The idea is to understand what the application should offer to the user and identify how many views are needed to deliver the feature set. When defining the view, we need to have a plan for the following elements:

Header

The header displays application information like title and icons, and it is displayed in all the views.  It is also used to provide a Back and/or home navigation button to allow the navigation back to the previous page.

Theme

The theme is the combination of color that you want on your application. The colors are used on the different elements like headers, footers, controls, content panels and fonts.

Design/Layout

This determines the look of your application. You may want an application with icons, sliding images or list views on the main page.  You also need to define how you want the layout of the labels, input controls and buttons. Place your elements with enough padding and alignment to create a balanced layout. This is the most difficult aspect of the design. You need to be creative and be able to define something that is appealing and intuitive to the users. The key is to also be consistent with your design in all the views. Maintain the same look and feel in all the views. 

Fonts

Make sure the fonts that you select are clearly visible and with enough padding between other elements to provide a balance and easy to read interface.

Footer

The footer is also displayed in all the views. It is used to provide quick actions to the users like a toolbar. It is also often used to show promotional or copyright information to the user. The footer is a context driven element. It may display controls or information that is just relevant to the current view.

Navigation

This is very important on any application. You need to provide users with the ability to know where they are in the application and how they can get to another location in a very intuitive way. The user should be able know how to get back to previous views without much effort or just click back to the main page. The transitions between views should have the same effect in the entire application. You should select sliding, popup or any other effect that lets the user know that a new view is in transition. The key is to be consistent and maintain the same effect. 

User Interaction

First minute of usage is important. If the user finds your application easy to use, he will probably explore more and navigate to other pages to see what other features are available.  The application should load quickly, so the user is not left waiting for too long. Here we need to make sure that we choose user interface elements that are intuitive for the user to interact with.

Conclusion

There are several tools on the internet that can let you create a wireframe for free. Just search for one in one of your favorite search engines. If you like, you can also just use a pencil and paper and then scan your sketches.

I hope I was able to provide some ideas on what to consider when building wireframes for your next mobile applications. If you follow these tips, I am sure you will find that your next design will adjust easy to changes.

og-bit.com When designing a mobile application, one of the first activities should be to wireframe the application first. This allows us t...

Read Article →

HTML5 Web Database and Mobile Web Applications

The Web SQL Storage (based on SQLite) API in HTML 5 is ideal for Mobile Web applications that require a complex data storage support and that work mostly offline. The Web storage remains locally on the device, and it is persisted even after the application or browser is closed. The implementation of the data access is all done using JavaScript and the SQL script format is compliant with the SQLite specifications.

To create or open a database, the following script can be used:

var data=null; //connection handler
var Tables= ['CREATE TABLE IF NOT EXISTS mynotes(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,notes TEXT, date TEXT)'];

if (typeof (window.openDatabase) != 'undefined' && window.openDatabase) {
    var maxSize = 5 * 1024 * 1024; // in bytes = 5MB
    //name,version,displayName,maxsize to identify the app database
    data = window.openDatabase('appName', '1.0', 'appName_db', maxSize);
    if (data) {//transaction is open
       data.transaction(function (tx) {  $(tables).each(function () { tx.executeSql(this); });  });
    }
}

The script above checks the openDatabase property from the windows object. If the value is true, there is Web Storage support, and we can move forward with the API calls to open the database. The openDatabase call opens the connection to the database. If the database does not currently exists, the database gets automatically created, but with no tables. The parameters to open the database uniquely identify the database and its size. Once we have a valid handle to the database, we can use a transaction object to run a SQL statement and build our tables using the executeSql method. This method is also used to execute other SQL statements on the database. The SQl statement to build the tables checks to see if the table does not exists before creating.

CRUD Methods:

To insert, update, and delete a record, we just need to use the following scripts:

Execute: function (sql, params, dataHandler, errHandler) {
   if (data) {//transaction is open
      data.transaction(function (tx) {tx.executeSql(sql, params, dataHandler, errHandler);});
   }
},
ErrorHandler: function (tx, err) {
    alert('DbError: ' + err.message + ' (Code ' + err.code + ')');
   return false;
},
DataHandler: function (tx, data) {
  if (typeof (data) != 'undefined') {
       if (data.rows.length == 0) {
            //TODO CHECK FOR rowsAffected,insertedId FOR updates,deletes, inserts.
       }
      else if (data.rows.length > 0) { //selects
          for (i = 0; i < data.rows.length; i++) {
              var row = data.rows.item(i);
             var data = [row['id'] ,row['notes'], row['date']] //sets value in array
             //TODO CONSUME THE DATA HERE
         }
     }
  }
}

The execute function executes a SQL statement by calling the transaction executeSql method. This method takes the SQL statement, a parameters array and handlers for successful or failed responses. The DataHandler manages the return recordset (data parameter) or rows affected from an update, delete and insert statement. The data.rows collection is populated when a select statement is executed. For an insert on a table with an identity column, the data.insertedId property is set to the new identity id. The DataHandler method is where the recordset can be iterated to populate the UI with the data.

The CRUD statements look as follows:

sqlIns: 'INSERT INTO mynotes(notes,date) values(?,?)',
sqlUpd: 'UPDATE mynotes SET notes=?,date=? WHERE id=?',
sqlDel: 'DELETE mynotes WHERE id=?',
sqlSel: 'SELECT * FROM mynotes WHERE id=?'

You should note the question marks. These are the parameter variables that are matched to the values in the params array of the Execute function. For example, to insert a new record, use the following:

var params = [‘my notes here’,’02/20/2011’];
Execute(sqlIns, params,DataHandler,ErrorHandler);

The browsers that support this feature have an option to allow you to see the resources which include web databases. For instance. Google Chrome (menu Tools->Developer Tools) provides the ability to see tables and data in the database. It also provides an interface with you can use to execute queries on your database.

With the ability to open a database and execute SQL statements against the database, simple data providers could be implemented to provide data support for your mobile applications. This can be handy for disconnected mode support in mobile applications.

I hope this is helpful.

CodeProject
og-bit.com

The Web SQL Storage (based on SQLite) API in HTML 5 is ideal for Mobile Web applications that require a complex data storage support and tha...

Read Article →

Use HTML5 LocalStorage in your Mobile Web Applications

LocalStorage or Dom Storage provides Web pages with the ability to store named key/value pairs locally. This storage is different from the browser cookies. In some systems, it allows Web applications to store from 5MB to 10MB of application data. Unlike cookies, this data is not posted back to the server. It remains locally on the device, and it is persisted even after navigating to another site or closing the browser. Like cookies, this data can be removed if the user clears the browsing history.

This storage is ideal for Web mobile applications that do not require a lot of data storage, and all the data access can be done with scripting objects. When using the local storage, you should consider the following:

1)      Validate that the local storage is available. This is available on browsers that support HTML5 and IE8+. Devices like IPhone, Android and BlackBerries support HTML5. Windows Mobile 7 may be getting HTML5 support in the middle of 2011.

2)      For the keys, use a namespace that differentiates the Web applications in the same domain and append a unique token for that record.

3)       Always check that the storage limit has not been reached. This exception would be raised when adding new items.

Simple data provider to illustrate the ability to add and read values from the Local Storage:

og.Data.Storage = {

    isSupported: function () {

        try {

            return ('localStorage' in window && window['localStorage'] !== null);          

        } catch (e) {

            return false;

        }

    },

    Add: function (key, value) {

           try {

                localStorage.setItem(key, value);

                //or localStorage[key] = value; //like associative arrays

            } catch (e) {

                alert(e.Description);

                return -1;

            }

    },

    Get: function (key) {

        return localStorage.getItem(key);

        //or localStorage[key];

    }

}

This simple data provider implementation can be used to test if the localStorage is available. It also supports Add and Get methods. To use the provider, you could write a simple script as follows:

if (og.Data.Storage.isSupported()){
    og.Data.Storage.Add("myapp.key1","value 1");   //notice the key name
    og.Data.Storage.Add("myapp.key2","value 2");
    var val1= og.Data.Storage.Get("myapp.key1");
    var val2= og.Data.Storage.Get("myapp.key2");
}

If you need data storage for small Web apps, this may be something to look into.

CodeProject
og-bit.com

LocalStorage or Dom Storage provides Web pages with the ability to store named key/value pairs locally. This storage is different from the ...

Read Article →

JQuery Mobile - Select Controls Populated Dynamically do not Reload

When using JQuery mobile to dynamically populate select controls, you may notice that the options of the control do not really refresh. This is because the native control is in fact replaced by html content when the page loads.   When the options of the select control are updated dynamically, you must rebuild the html content representation to reflect the new state of the native control. This is already supported by the mobile framework by the use of the refresh command.

Use this call to refresh and rebuild the custom content of the select box. The second parameter must be set to true to rebuild the view.

$(mySelectBoxId).selectmenu('refresh', true);

A typical scenario for this is with the use of cascading drop down. The first dropdown filters the options from the second drop which gets populated dynamically. After adding the options dynamically, a call to rebuild the control needs to be made.
I hope this helps.

CodeProject
og-bit.com

When using JQuery mobile to dynamically populate select controls, you may notice that the options of the control do not really refresh. This...

Read Article →

Android Emulator - Use Localhost Web Server

If you are using the Android emulator, and you are trying to reach your web pages in your local development machine, you will soon realize that the emulator can't reach your local web server using localhost, the machine IP address or the machine name. There is however a simple explanation for this. The emulator has its own localhost loopback interface (127.0.0.1).  This means that when you type http://localhost/mypage.aspx, the emulator tries to reach its own loopback interface, and this is probably what you do not need.

There is an easy resolution for this. You can reach the development machine using IP address 10.0.2.2 which is a special alias to the loopback interface for the computer hosting the emulator. Your url should then look as follows: http://10.0.2.2/mypage

I hope this helps.

CodeProject
og-bit.com

If you are using the Android emulator, and you are trying to reach your web pages in your local development machine, you will soon realize t...

Read Article →

Support Multiple Orientations - Windows Phone 7

If you worked on Windows Mobile before, you probably remember all the work that had to be done to support different orientations on your Windows Mobile application. You had to create different layouts/resources and detect the orientation change to load the corresponding layout. In Windows Phone7, this is much easier to handle.

By default, Silverlight applications for Windows Phone 7 run in portrait mode.  To support both portrait and landscape mode, we just need to add an attribute in the root of your main page XAML file.

SupportedOrientations="PortraitOrLandscape"

You can also restrict the orientation mode of your application by using the same attribute. For example, a game application (Silverlight) may be better viewed in landscape mode. In this case, the attribute would be set as follows:

SupportedOrientations="Landscape"

For applications that get text input, it may not be enough to just set the orientation property because the hardware keyboard will take some of the display area.  For this case,  you may need to manipulate the layout by trapping the OrientationChanged event in the code.

In the XAML, we will need to add the event attribute as:

OrientationChanged="PhoneApplicationPage_OrientationChanged"

In the code, we will write the handler as follows:

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)

{

          string orientation = e.Orientation.ToString();

          //add logic to handle your layout

          base.OnOrientationChanged(e);

}

CodeProject
og-bit.com

If you worked on Windows Mobile before, you probably remember all the work that had to be done to support different orientations on your Win...

Read Article →