Imag Introductory tutorial on Cross-platform Mobile Web application Development Framework _android

Source: Internet
Author: User

Imag is a very concise and efficient mobile cross-platform development framework that can be used to develop a platform that is compatible with both Android and iOS, and a bit of web development basics. There are many frameworks for the current mobile-side cross-platform development, but there is a benefit with imag that the app developed with Imag is native. IMAG uses XML + JavaScript (configuration + scripting) to develop the principle of interpreting XML files conforming to the IMAG development specification as corresponding native application code to execute. Native Cross-platform Development, imag app has the same performance and user experience as the native app, so the Web development framework Imag for PHONEGAP, JQuery Mobile, and so on, is ideal for performance requirements.

Although the original and Cross-platform, IMAG development environment is very simple, do not need to install or deploy on the local computer, in Imag's official website to register a free account, you can start to develop immediately. After registering the login, install the website prompts to install the Imag development version client on the handset first, then opens imag the On-line development tool to begin to develop.


Log on to the Imag development client, edit the XML file in the Imag Online development tool and save it, and refresh the page on the phone to see the effect.

Hello World

Here's a look at the Hello World example. The IMAG framework uses XML-formatted files to describe the UI, so the code must conform to the XML format specification, a set of code that works on both the Android and iOS platforms, and the native UI effects are displayed.


<?xml version= "1.0" encoding= "Utf-8"?>
<imag>
  <page>
    <title style= "background:# 6495ED ">
      <center><label> Test app</label></center>
    </title>
    < content>
      <list type= "group" >
        <item>
          <label>hello world!</label>
        < /item>
      </list>
    </content>
  </page>
</imag>

Where <imag> is the root node of the XML document,<page> contains the contents of the entire page, is the abstraction and encapsulation of the page. The above code <page> includes <title> and <content> two parts, respectively, the title and content of the page. <title> is the page title navigation bar, there are <center>, <left>, <right> three child nodes, respectively, in the title on the center, left and right to display text and buttons. <content> has a <list> control to show "Hello world!" Text content, the Type property of the list is "group", which means a grouped list.

Imag will interpret XML as a native code on Android and iOS, such as <label> on Android as a native TextView, and on iOS as a corresponding uilabel. So unlike HTML, text content in the Imag frame can only be placed in label labels, not arbitrarily.

Basic Page Layout

A single page is usually made up of title, header, content, and footer:

<?xml version= "1.0" encoding= "Utf-8"?>  
<imag>  
  <page>  
    <title style= "background:# 999999 ">  
      <center><label> title </label></center>  
    </title>  
     
 

The table table shown here is standard HTML because the HTML tag is embedded, so you must use CDATA to mark it.

Fit with different screens

The imag has shielded the difference between different platforms with varying resolution phones, and the mobile applications developed according to the IMAG specification are automatically adapted to different handsets. For different platforms with different resolution of the screen, also need to use a number of different sizes of pictures to fit, these pictures need to be placed in accordance with the rules of the corresponding server directory, mobile phone clients will automatically download the matching pictures.

The server-side picture Resource directory structure is as follows:

The Android Image resource directory is differentiated by screen density (density), and iOS is differentiated by screen resolution. The Anroid and iOS directories have a default directory that reads the corresponding picture in the default directory when the specific screen resolution or screen density picture is not found.

For example,:<page> 's directory lookup order for 800x480 mobile phone bg.png images for Android screen resolution is:

Copy Code code as follows:
/res/android/hdpi
/res/android/default
/res/default

For IPhone5 Mobile directory lookup order is:

Copy Code code as follows:
/res/ios/640x1136
/res/ios/default
/res/default

You can see that the lookup order is from an introvert.
The android screen density values are as follows:

Density ldpi mdpi hdpi xhdpi xxhdpi
Density value dip<140 140<=dip<190 190<=dip<280 280<=dip<400 400<=dip
Resolution 240x320 320x480 480x800
480x854
720x1280 1080x1920
Proportion 3 4 6 8 12

You can design the size of a variety of screen pictures according to the scale: for example, a picture on the hdpi size of 48x48, then on the xhdpi for 64x64, xxhdpi for 96x96 (6:8:12).

Package publication

App development is completed after the package and release, before packaging to upload their own application icon and app start loading pictures, because to fit the different resolution of the mobile phone, the picture to upload more sets. When iOS is packaged, it also uploads a certificate so that the packaged app can be uploaded to the App Store.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.