How to develop cross-platform mobile applications on Linux?

【51CTO translation】The past few years have witnessed the rapid development of the mobile market, which is mainly driven by a large number of applications. As consumers, we all hate to see a certain market monopoly caused by any platform. After all, the more intense the competition, the more innovation. As developers, we have mixed feelings about cross-platform development. There are several disadvantages of cross-platform development, such as poor platform integration and inflexible design. But on the other hand, we can reach a wider market with more consumers and provide a unified look and feel for our developed applications on many platforms.

Nowadays, almost all modern mobile platforms provide object-oriented APIs. Therefore, there is no reason not to develop cross-platform applications. In this tutorial, we will step through the basics of cross-platform development. We will use the Titanium SDK from Appcelerator as a cross-platform SDK (Software Development Kit).

What do we need?

• Knowledge of Java

•PC

• Android SDK

•Titanium SDK

As a development platform, Titanium allows you to develop native applications for Google Android and Apple iOS through a single source code. It uses Java as the main language and can also run with HTML and JavaScript. It does not rely on WebUI and is extensible. Modules can be written in Objective-C.

For those who know Java and HTML, Titanium is a great starting point for mobile development. If you want to develop Android apps, you need the Android SDK; if you want to develop iOS apps, you need a Mac. Fortunately for us, once you have the code, you can import it into Titanium on the Mac and compile it for iOS.

To use Titanium SDK properly, we need the following:

• Oracle Java JDK 6 or 7

•Node.js

• Android SDK and Android NDK

• At least 2 GB of RAM

Download the Titanium SDK here (registration required): https://my.appcelerator.com/auth/signup.

Once Titanium is downloaded, go to the download directory and unzip it to /opt.

$ sudo unzip titanium.linux.gtk.x86_64.zip -d /opt

Next, enter the terminal and set the path.

$ echo 'export MOZILLA_FIVE_HOME=/usr/lib/mozilla' >> ~/.bashrc

$ source ~/.bashrc

Next, we want to install all the dependencies for the Titanium SDK.

On Ubuntu or Debian, we will use apt-get:

$ sudo apt-get install libjpeg62 libwebkitgtk-1.0-0 lib32z1 lib32ncurses5 lib32bz2-1.0

On Fedora, use yum:

$ sudo yum install libjpeg62 libwebkitgtk-1.0-0 lib32z1 lib32ncurses5 lib32bz2-1.0

After the dependencies are installed, we need to reinstall Titanium as shown below.

$ sudo ln -s /opt/Titanium_Studio/TitaniumStudio /usr/local/bin/TitaniumStudio

Before we run the Titanium SDK for the first time, we must create a build directory for Titanium. I usually have a folder called "builds" in the /home directory (with subfolders below) where I store all my projects. Let's create a build directory first.

$ mkdir ~/builds

Once the build directory is created, start Titanium.

$ TitaniumStudio

[[126212]]

Log in with the user account you created during the Titanium download process and navigate to your build directory.

The Titanium SDK work window is connected to the account you created earlier. It provides a wealth of information and a lot of help. On the left, we can choose whether to create a new project or import an old one. For the purpose of this tutorial, we will create a new project, so select the "Create Project" tab.

In the New Project window, we can choose between several templates. We will choose the default project template for this tutorial.

After that, we need to name our project. Enter the application ID and company URL. The application ID is the reverse of the company URL, ending with .appname. Our website URL is http://xmodulo.com, and our application name is "firstapp". This makes our application ID "com.xmodulo.firstapp".

As far as named items go, we need to select Android components. I usually select all Android components.

Titanium will download and configure all the required components, and will also update old components. After downloading and installing the Android components, Titanium will automatically open a working window for our project.

The working window includes two tabs: app.js and application editor. app.js is used to write code, and the application editor window is used to provide application information.

Now that Titanium is set up, let's create some simple code in the app.js window to understand the basic elements of Titanium.

The most important element in Titanium is the window element. Windows are not complicated at all. You can think of a window as a container for your development work. For a certain application, you can add one or more windows. The next important element is the view element, which is a rectangle that can hold other elements, such as tags in HTML. Other important elements are tag groups and tags. How do they work? Each tag group contains one or more tags, and each tag controls multiple windows.

Building a simple application

In this part of the tutorial, we will build a simple application that has only the main elements. First, let's specify some basic aspects, such as pixels. Pixel sizes are not specified in the standard px notation, but in percentages, and need to be written as strings.

 top, 20 , 
 
 width: "50%"

As for the colors, we don't use names because they are in hexadecimal RGB color codes.

 backgroundColor:"#f00", 
 
 borderColor:"#87C8FF"

Now using the function Titanium.UI.createWindow, we can build the first batch of windows, which I will explain in a little more detail.

 var win1 = Titanium.UI.createWindow({ 
 
 title: 'Tab 1' , 
 
 backgroundColor: '#fff'   
 
 });

What does this code mean? It shows that we pass a variable containing all the properties to the createWindows function. The logic behind those elements is simple.

The tagGroup is the root of the application and cannot be contained in some other element. It contains tags, and each tag contains its own window. Let's put all this together and build a simple application that demonstrates windows, tags, and views.

 // Create a tag group 
 
 var tabGroup = Titanium.UI.createTabGroup();

Now, let's create some windows and markers.

 // Create basic UI tags and windows
 var win1 = Titanium.UI.createWindow({ 
 
 title: 'I am Window 1.' , 
 
 backgroundColor: '#fff'   
 
 }); 
 
 var tab1 = Titanium.UI.createTab({ 
 
 icon: 'KS_nav_views.png' , 
 
 title: 'Tab 1' , 
 
 window:win1 
 
 }); 
 
 var win2 = Titanium.UI.createWindow({ 
 
 title: 'I am Window 2' , 
 
 backgroundColor: '#fff'   
 
 }); 
 
 var tab2 = Titanium.UI.createTab({ 
 
 icon: 'KS_nav_views.png' , 
 
 title: 'Tab 2' , 
 
 window:win2 
 
 });

Afterwards, we might as well connect all of these into a whole.

 // Add markers 
 
 tabGroup.addTab(tab1); 
 
 tabGroup.addTab(tab2); 
 
 // Open the tag group 
 
 tabGroup.open();

Once we have written the code, we need to define its appearance. For this, we use the label element. With this label element, we can add a background wallpaper to the application, define native fonts and colors. In addition, it allows to define the appearance of other elements. We will define the appearance of the window elements for the application we develop. Let's build a simple label element for our application.

 var label1 = Titanium.UI.createLabel({ 
 
 color: '#999' , 
 
 text: 'I am Window 1' , 
 
   font:{fontSize: 20 ,fontFamily: 'Helvetica Neue' }, 
 
 textAlign: 'center' , 
 
 width: 'auto'   
 
 });

What does the entire source code look like?

 // Create a tag group 
 
 var tabGroup = Titanium.UI.createTabGroup(); 
 
 // Create basic UI tags and root window 
 
 var win1 = Titanium.UI.createWindow({ 
 
 title: 'Tab 1' , 
 
 backgroundColor: '#fff'   
 
 }); 
 
 var tab1 = Titanium.UI.createTab({ 
 
 icon: 'KS_nav_views.png' , 
 
 title: 'Tab 1' , 
 
 window:win1 
 
 }); 
 
 var label1 = Titanium.UI.createLabel({ 
 
 color: '#999' , 
 
 text: 'I am Window 1' , 
 
   font:{fontSize: 20 ,fontFamily: 'Helvetica Neue' }, 
 
 textAlign: 'center' , 
 
 width: 'auto'   
 
 }); 
 
 win1.add(label1); 
 
 var win2 = Titanium.UI.createWindow({ 
 
 title: 'Tab 2' , 
 
 backgroundColor: '#fff'   
 
 }); 
 
 var tab2 = Titanium.UI.createTab({ 
 
 icon: 'KS_nav_views.png' , 
 
 title: 'Tab 2' , 
 
 window:win2 
 
 }); 
 
 var label2 = Titanium.UI.createLabel({ 
 
 color: '#999' , 
 
 text: 'I am Window 2' , 
 
   font:{fontSize: 20 ,fontFamily: 'Helvetica Neue' }, 
 
 textAlign: 'center' , 
 
 width: 'auto'   
 
 }); 
 
 win2.add(label2); 
 
 // Add markers 
 
 tabGroup.addTab(tab1); 
 
 tabGroup.addTab(tab2); 
 
 // Open the tag group 
 
 tabGroup.open();

This is what our simple application looks like when running in the Android emulator.

This code is short and simple, but it is a good starting point to start experiencing cross-platform development.

Original English text: http://xmodulo.com/develop-cross-platform-mobile-apps-linux.html

Bugatti Compilation