Cross-platform mobile framework iMAG development entry, framework imag

Cross-platform mobile framework iMAG development entry, framework imag

IMAG is a very simple and efficient mobile cross-platform development framework. It is compatible with Android and iOS platforms at the same time, and can be quickly started with a bit of Web development basics. Currently, there are many frameworks for cross-platform development on mobile terminals, but iMAG also provides the advantage that the App developed with iMAG is native. IMAG adopts the XML + JavaScript (configuration + script) development method. Its principle is to interpret the XML file conforming to the iMAG development specifications into the corresponding native application code for execution. Native cross-platform development, iMAG App has the same performance and user experience as Native App. Therefore, iMAG, a Web development framework such as PhoneGap and JQuery Mobile, is suitable for scenarios with high performance requirements.

Although it is both native and cross-platform, the iMAG development environment is very simple. You do not need to install or deploy it on a local computer. Register a free account on the iMAG official website platform www.imagapp.com, now you can start development. After registering and logging on, the installation website prompts you to install the iMAG development client on your mobile phone, and then open the iMAG online development tool to start development.

Log on to the iMAG client, edit and save the XML file in the iMAG online development tool, and refresh the page on your phone to see the effect.

Hello World

The following is an example of hello world. IMAG framework uses XML files to describe the UI. Therefore, the Code must comply with the XML format specifications. A set of code can be run on Android and iOS platforms, and the Native UI effect is 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>

Imag is the root node of the XML document. page contains the content of the entire page, which is the abstraction and encapsulation of the page. In the code above, the page consists of the title and content of the page. Title is the page title navigation bar, which has three subnodes: center, left, and right. They are used to center, center, and right on the title to place text and buttons. The content contains a list control to display "Hello World !" Text content. The type attribute of list is "group", indicating a group list.

IMAG interprets XML as their local code on Android and iOS systems. For example, on Android, label is interpreted as a native TextView, in iOS, it is interpreted as the corresponding UILabel. Therefore, unlike HTML, the text content in the iMAG framework can only be placed in the label, but cannot be placed at will.

Basic page layout

A single page is usually composed 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 content in the header is always displayed on the top of the screen. content is the main content of the page, and footer content is displayed at the bottom of the screen.
List Layout
The layout of the page content can be achieved through the list control list, as shown in the following example:



Item is a list item. Each item can have its own layout. In item, col indicates a column and row indicates a row. Here, the list is a bit similar to the table in HTML. The difference is that the table first has rows (tr) and then columns (td), while the list first has columns (col) and then has rows (row ). The col-width style is used to set the span of multiple columns. Multiple columns are separated by commas (,), and asterisks (*) represent adaptive width.
The list control can be used to achieve more complex and detailed layout effects. The following is the Weibo App page developed using the iMAG framework:



UI control category
UI controls are classified into three types of iMAG framework UI controls: content controls, form controls, and layout controls.
Content Control: used to display text, images, and other content information.
Form Control: used to receive the form information entered by the user.
Layout control: controls the layout and placement of page content.
List of iMAG framework UI controls:

 

 
  
 
   
 
    
Category
 
    
Name
 
    
Tag
 
    
Description
 
   
 
  
 
  
 
   
 
    
Content Control
 
    
Text Control
 
    
Label
 
    
Used to display text content
 
   
 
   
 
    
Webpage Control
 
    
Web
 
    
Used to display webpage content
 
   
 
   
 
    
Button Control
 
    
Button
 
    
Used to display buttons
 
   
 
   
 
    
Icon Control
 
    
Icon
 
    
Used to display resource images or mobile phone Images
 
   
 
   
 
    
Image Control
 
    
Image
 
    
Used to display network images
 
   
 
   
 
    
Widget
 
    
Slideimage
 
    
Used to display a group of images
 
   
 
   
 
    
Progress bar Control
 
    
SS
 
    
Used to display progress bars
 
   
 
   
 
    
Calendar Control
 
    
Calendar
 
    
Used to display calendars. It can be used to develop calendar management functions.
 
   
 
   
 
    
Map Control
 
    
Bmap
 
    
Used to display maps. You can mark the geographical location information on the maps.
 
   
 
   
 
    
Form Control
 
    
Form Control
 
    
Form
 
    
Used to represent forms. form items are included in form labels.
 
   
 
   
 
    
Hide a domain control
 
    
Input-hidden
 
    
Used to indicate form hidden fields
 
   
 
   
 
    
Text input box Control
 
    
Input-text
 
    
Used to input single-line text content
 
   
 
   
 
    
Password Input box Control
 
    
Input-password
 
    
Used to enter the password
 
   
 
   
 
    
Digital Input box Control
 
    
Input-number
 
    
Used to enter numbers
 
   
 
   
 
    
Email address input box Control
 
    
Input-email
 
    
Used to enter the email address
 
   
 
   
 
    
Date input box Control
 
    
Input-date
 
    
Used to enter a date
 
   
 
   
 
    
Time input box Control
 
    
Input-time
 
    
Used to input time
 
   
 
   
 
    
Search box Control
 
    
Input-search
 
    
Used to enter the search content
 
   
 
   
 
    
File selection box Control
 
    
Input-file
 
    
Used to select files
 
   
 
   
 
    
Form submission button
 
    
Input-submit
 
    
Used to click to submit a form
 
   
 
   
 
    
Text Field Control
 
    
Textarea
 
    
Used to input multiple lines of text
 
   
 
   
 
    
Single-Stick Control
 
    
Select
 
    
Used to select a single value
 
   
 
   
 
    
Radio button control
 
    
Radio
 
    
Used to select a single value
 
   
 
   
 
    
Radio button group control
 
    
Radios
 
    
Used to select a single value
 
   
 
   
 
    
Multiple-choice button control
 
    
Checkbox
 
    
Used to select multiple values
 
   
 
   
 
    
Form Verification Control
 
    
Validation
 
    
Used to verify form data
 
   
 
   
 
    
Layout Control
 
    
Page Control
 
    
Page
 
    
Contains all content on the current page
 
   
 
   
 
    
Title Control
 
    
Title
 
    
Used to display the page title bar
 
   
 
   
 
    
Pin Control
 
    
Header
 
    
Top CONTENT ON SCREEN
 
   
 
   
 
    
Background Control
 
    
Footer
 
    
Set content to the bottom of the screen
 
   
 
   
 
    
Content Control
 
    
Content
 
    
Page Content
 
   
 
   
 
    
Content Group Control
 
    
Contents
 
    
MultiplecontentGroup
 
   
 
   
 
    
Label bar Control
 
    
Tabbar
 
    
The label bar is mainly usedcontentContent Switching
 
   
 
   
 
    
Tab Control
 
    
Tabs
 
    
Display content in the form of a tab
 
   
 
   
 
    
Single Row Control
 
    
Row
 
    
Displays the content of a row of controls.
 
   
 
   
 
    
List controls
 
    
List
 
    
Display content in the form of a list
 
   
 
   
 
    
Grid Control
 
    
Grid
 
    
Display content in a grid
 
   
 
   
 
    
Multi-screen controls
 
    
Screens
 
    
Display content on multiple screens
 
   
 
   
 
    
System Menu Control
 
    
Menu
 
    
Used to display system menus
 
   
 
   
 
    
Pop-up menu control
 
    
Actionmenu
 
    
Used to display the pop-up menu
 
   
 
   
 
    
Navigation menu control
 
    
Navmenu
 
    
Used to display navigation menus
 
   
 
   
 
    
Bounce Menu Control
 
    
Pathmenu
 
    
Used to display the bounce menu
 
   
 
   
 
    
Slide Menu Control
 
    
Slidingmenu
 
    
Used to display slide menus
 
   
 
  

 
By combining and setting these controls in iMAG, you can develop a UI page with various effects.
Dynamic script
The iMAG framework allows you to operate UI control objects in a standard Javascript language to achieve dynamic interaction. For example:
<?xml version="1.0" encoding="utf-8"?><imag>  <script>  <![CDATA[    $page.onload = function() {        alert('hello world!');    }  ]]>  </script>  <page>  </page></imag>
The above code will trigger the onload event during page initialization and call the JavaScript method to bring up an alert dialog box.
It is necessary to explain the concept of Javascript. The complete JavaScript implementation consists of the following three parts: the core (ECMAScript) and the Document Object Model (DOM) browser Object Model (BOM ). For iMAG, only ECMAScript is used, because iMAG does not support DOM and BOM. This is because mobile UI often has fewer simple page elements and there is no need to introduce complicated DOM operations. In addition, DOM APIs are poorly designed and unfriendly to developers. The Window, Navigator, and History objects in BOM are no longer applicable to Mobile applications, and iMAG has its own MOM (Mobile Object Model ).
MOM object defined in iMAG:
● $ Page: encapsulates the attributes and methods related to the page UI.
● $ Http: encapsulates methods related to http operations.
● $ Phone: encapsulates the call methods related to the local function of the mobile phone.
● $ Util: encapsulates some utility methods.
With these built-in JavaScript objects and methods, the iMAG framework can easily call local functions of mobile phones, such as GPS positioning.
$ Phone. locate ({provider: 'GPS ', success: function (location) {alert ('GPS positioning successful, longitude and latitude:' + location. latitude + ',' + location. longpolling) ;}, error: function () {alert ('GPS positioning failed! ');}});
The above $ phone. locate () method starts the mobile phone GPS positioning function. After the positioning is successful, the success method is called back to display the longitude and latitude information.
The iMAG framework supports the dynamic creation of UI controls and uses the $ C () method. The parameters are documents in XML format, such:
Var button = $ C ('<button id = "test_button"> button </button>'); $ ('content'). add (button );
The preceding method uses XML to dynamically create a button control and display it in the content of the page.
The iMAG framework can also use Ajax requests to obtain data, such:
$http.get('http://www.imagapp.com/download/data/http_json_ret.jsp', function(json) {    var obj = JSON.parse(json);    $('test_label').text = obj.text;});
$ Http. get () method initiates an asynchronous Ajax request. The JSON data format returned by the server is as follows:
{Text: '<font color = "blue"> JSON data </font> '}
JSON data dynamically obtained from the server is parsed using the JSON. parse () method, and then processed and displayed. Because iMAG is a native code non-browser environment at the underlying layer, there is no cross-origin problem in calling Ajax requests in the iMAG framework.
Use HMTL5
Although HTML5 is not required for iMAG development, iMAG provides excellent support and compatibility for HTML5 through web controls, in addition, the script mechanism is provided to allow the web to perform internal and external interactive calls with the native control, which is useful when developing website applications.
An example of displaying an HTML webpage using a Web control:
<? Xml version = "1.0" encoding = "UTF-8"?> <Imag> <page style = "background: white "> <title> <center> <label> webpage Control </label> </center> </title> <content> <web> <! [CDATA [<style type = "text/css"> table. altrowstable {font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; border-width: 1px; border-color: # a9c6c9; border-collapse: collapse;} table. altrowstable th {border-width: 1px; padding: 8px; border-style: solid; border-color: # a9c6c9;} table. altrowstable td {border-width: 1px; padding: 8px; border-style: solid; border-color: # a9c6c9 ;}. oddrowcolor {background-color: # d4e3e5 ;}. evenrowcolor {background-color: # c3dde0 ;} </style> <table class = "altrowstable" id = "alternatecolor"> <tr class = "evenrowcolor"> <th> Info Header 1 </th> <th> Info Header 2 </th> <th> Info Header 3 </th> </tr> <tr class = "oddrowcolor"> <td <Text 1A </td> <td> Text 1B </td> <td> Text 1C </td> </tr> <tr class = "evenrowcolor"> <td> Text 2A </td> <td> Text 2B </td> <td> Text 2C </td> </tr> <tr class = "oddrowcolor"> <td <Text 3A </td> <td> Text 3B </td> <td> Text 3C </td> </tr> <tr class = "evenrowcolor"> <td> Text 4A </td> <td> Text 4B </ td> <td> Text 4C </td> </tr> <tr class = "oddrowcolor"> <td> Text 5A </td> <td> Text 5B </td> <td> Text 5C </td> </tr> </table>]> </web> </content> </page> </imag>

The table shown here is standard HTML. Because HTML labels are embedded, CDATA must be used for marking.
Adapt to different screens
IMAG has shielded the differences between mobile phones of different platforms and different resolutions. Mobile apps developed according to iMAG specifications automatically adapt to different mobile phones. For screens with different resolutions on different platforms, you also need to use multiple sets of images of different sizes to adapt. These images only need to be placed in the corresponding Server Directory according to the rules, the mobile client automatically downloads the matching images.
The directory structure of the image resources on the server side is as follows:

Android image resource directories are differentiated by screen density (density), while iOS is differentiated by screen resolution. The anroid and ios directories have a default directory. When the screen resolution or screen density image cannot be found, the corresponding image in the default directory will be read.
For example, <pagestyle = "background: bg.png"> the order for searching the directory of the bg.png image of a mobile phone with a screen rate of X is as follows:
/Res/android/hdpi
/Res/android/default
/Res/default
The order for searching the iPhone 5 mobile phone directory is as follows:
/Res/ios/640x1136
/Res/ios/default
/Res/default
We can see that the search order is from the inside out.
The screen density of Android is as follows:


 

 
  
 
   
 
    
Density
 
    
ldpi
 
    
mdpi
 
    
hdpi
 
    
xhdpi
 
    
xxhdpi
 
   
 
   
 
    
Density value
 
    
Dip <1, 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 various screen images based on the ratio. For example, if the size of an image on hdpi is 48 × 48, the size of an image on xhdpi is 64x64, 96x96 () on xxhdpi ).

Package and release
After the App is developed, it is packaged and released. before packaging, you must upload your App icon and App to start loading images. Because you need to adapt to mobile phones with different resolutions, You need to upload multiple images. During iOS packaging, you must upload a certificate so that the packaged App can be uploaded to the AppStore.


IMAG address: http://www.imagapp.com

Good cross-platform development frameworks (or engines)
QT !! Superior cross-platform framework! Qt 5.1 Alpha version. The new version supports Android and iOS application development.
Qt is a cross-platform C ++ graphical user interface application framework. It provides the functions required for application developers to create an artistic graphical user interface. Qt is fully object-oriented, easily scalable, and allows true component programming.

It is also a cross-platform development language. Why is NET faster than JAVA?
In windows,. NET must be faster than JAVA, but in other systems,. NET will not work.
Because. NET is a Microsoft Product, and windows is a brother. Cooperation between siblings is certainly coming soon.
JAVA technology is relatively mature, and cross-platform performance is much better than. NET .. NET Microsoft has not launched virtual machines used in other operating systems. The so-called cross-platform approach is just cross-WINDOWS. Other operating systems that want to run. NET are not virtual machines created by Microsoft. Of course, the performance is worse than the virtual machines developed by java sun.