Imag.js| teaches you how to be a native app

Cell Phone calculator is very familiar with our daily and very simple application, such an application in the love of the Gothic platform, how to develop it?

There are roughly two ways to solve the existing layout controls combined with this prototype diagram and Imag.js.

First: Use the list layout

The bottom is laid out using the List tab, a total of 4 item, each item has 5 columns of Col, the text label label is added to Col, and the label can be replaced with a button. A total of 20 columns, each column without setting the length, is automatically assigned to each Col.

The structure diagram is as follows:

The code structure is (the rest of the three item copies are good):

<list><item>    <col><label></label></col>        <col><label> </label></col>        <col><label></label></col>        <col><label> </label></col>        <col><label></label></col>    </item></list >

This structure is equivalent to a skeleton, and the rest is to write the content.

The second type: Using the nine grid layout

The bottom uses grid layout control grid, a total of 20 item, each item has a text label label. Compared to the first method, it will be simpler, the code is less, and can be reproducible.

The structure diagram is as follows:

The code structure (the rest of the item is also copied):

<grid cols= "5" ><item><label></label></item>        <item><label></ Label></item></grid>

Grid Grid Layout Default Nine Gongge style, each line automatically matches 3 item, if requires more than 3, you need to set the grid's Cols property.

The layout is determined, and the logical sections are organized below

Online there are many Android and iOS calculator source code, which Android calculator source code needs to join the onclick to implement the button function, but also provides the button monitoring events. Also in Imag.js to the onclick to achieve the function of click, but do not need to listen to the event, while the onclick is the grid list of the item, not button buttons.

JS Core code:

<script> <!         [cdata[var num=0,result=0,numshow= "0"; var operate=0; Determine the input status of the flag Var calcul=0; The flag var quit=0 to judge the state of calculation;        Flag to prevent repeated keystrokes var Screenvalue = $ (' Numscreen '). Value;             function Refresh_screen () {$ (' numscreen '). Value = screenvalue;//Refresh display} function command (num) { var Str=screenvalue;            Gets the current display data if (str!= ' 0 ' &&operate==0) {str = str;            }else {str = ';             }//if the current value is not "0" and the status is 0, the current value is returned, otherwise a null value is returned;             STR=STR + String (num);//Append character screenvalue=str to current value; Refresh_screen ();//refresh display operate=0; Reset input State quit=0;             Reset flag to prevent repeated keystrokes} function DZero () {var str=screenvalue;            if (str!= ' 0 ' &&operate==0) {str = str + ' 00 ';            }else {str = ' 0 ';             }//if the current value is not "0" and the status is 0, return "0" if str+ "00"; Screenvalue=stR            Refresh_screen ();         operate=0;             } function dot () {var str=screenvalue;            if (str!= ' 0 ' &&operate==0) {str = str;            }else {str = ' 0 ';             }//if the current value is not "0" and the status is 0, the current value is returned, otherwise "0" is returned; for (i=0; i<=str.length;i++) {//Determine if there is already a dot if (str.substr (i,1) = = ".") return false;             If there is no longer insert} Str=str + ".";             SCREENVALUE=STR;            Refresh_screen ();         operate=0;             } function del () {//backspace var str=screenvalue;            Str=str.substr (0,str.length-1);             SCREENVALUE=STR;        Refresh_screen ();             } function Clearscreen () {//Clear data num=0;             result=0;             numshow= "0";             screenvalue= "0";        Refresh_screen (); } function Plus () {//Add calculate ();//Call calculation function operate=1;//Change Input Status Calcul=1;             Change the calculation status to add} function minus () {//subtraction calculate ();             operate=1;         calcul=2;             } function times () {//multiplication calculate ();             operate=1;         calcul=3;             } function Divide () {//Division calculate ();             operate=1;         calcul=4;             } function Persent () {//redundancy calculate ();             operate=1;         calcul=5;             } function equal () {calculate ();//equals operate=1;             num=0;             result=0;         numshow= "0";             }//function calculate () {numshow=number (screenvalue);  if (num!=0 && quit!=1) {//Determines whether the previous operand is zero and the status of the anti-repetition key switch (calcul) {//To enter a status case 1:result=num+numshow;break; Calculate "+" case 2:result=num-numshow;break;     Calculation "-" Case 3:result=num*numshow;break;                Case 4:if (numshow!=0) {result=num/numshow;}                     Else{hint ("Dividend cannot be zero!")} break;                 Case 5:result=num%numshow;break; } quit=1;             Avoid repeating keys} else{result=numshow;             } numshow=string (Result);             Screenvalue=numshow;            Refresh_screen (); Num=result; Store Current Value}]]></script>

Create an app in the AI code platform, copy the full code into the cloud development and save it, and a simple calculator application is done. With the Love Code Brother development version of Http://www.imagapp.com/workbeanch at any time to view

The complete code can be referenced https://github.com/imagjs/Calculator

Quick familiarity with mastering imag.js to watch video tutorials

http://www.soku.com/search_video/q_imag.js?f=1&kb=040200000000000__imag.js&_rp=1aqb971al1lkv&_rp= 1aqb971al1lkv

Imag.js| teaches you how to be a native app