Tutorials‎ > ‎

Onsen UI Framework

posted Dec 10, 2017, 11:39 PM by Tedy Junaidi   [ updated Dec 10, 2017, 11:40 PM ]

Introduction

Mobile is one of popular device. We can easy to create mobile website using Onsen.js that provide UI for android and it opensource.  Onsen.js can combine with angular.js, react.js or vue.js.

 On this tutorial we will create calculator for mobile website with css and js.

You can download all the component on https://github.com/OnsenUI/OnsenUI-dist/releases/tag/2.8.2.

I put folder css and js in lib folder. Now you can use the Onsen.

Getting Started

We Going to create main.html. On this main I put all css and js.

main.html

1.  <!DOCTYPE html>  

2.  <html>  

3.      <head>  

4.          <!-- All css and js from onsen -->  

5.          <link rel="stylesheet" href="lib/css/onsenui.css">  

6.              <link rel="stylesheet" href="lib/css/onsen-css-components.min.css">  

7.                  <script src="lib/js/onsenui.min.js"></script>  

8.                  <link rel="stylesheet" type="text/css" href="main.css">  

9.                  </head>  

10.                  <body>  

11.                      <!-- will make side slide -->  

12.                      <ons-splitter>  

13.                          <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>  

14.                              <ons-page>  

15.                                  <!-- Component of slide -->  

16.                                  <ons-list>  

17.                                      <ons-list-item onclick="fn.load('calculator.html')" tappable>  

18.            Calculator  

19.          </ons-list-item>  

20.                                      <ons-list-item onclick="fn.load('converterLength.html')" tappable>  

21.            Length Converter  

22.          </ons-list-item>  

23.                                  </ons-list>  

24.                              </ons-page>  

25.                          </ons-splitter-side>  

26.                          <!-- the main template  -->  

27.                          <ons-splitter-content id="content" page="calculator.html"></ons-splitter-content>  

28.                      </ons-splitter>  

29.                      <!-- the pages of onsen we use template -->  

30.                      <template id="calculator.html" style="height: 100vh">  

31.                          <ons-page>  

32.                              <ons-toolbar>  

33.                                  <div class="left">  

34.                                      <ons-toolbar-button onclick="fn.open()">  

35.                                          <ons-icon icon="md-menu"></ons-icon>  

36.                                      </ons-toolbar-button>  

37.                                  </div>  

38.                                  <div class="center">  

39.          Calculator  

40.        </div>  

41.                              </ons-toolbar>  

42.                              <ons-row style="height: 40%;" >  

43.                                  <div id="result"></div>  

44.                                  <div id="formula" class="scrollable"></div>  

45.                              </ons-row>  

46.                              <ons-row style="height: 60%">  

47.                                  <ons-row style=" height: 20%">  

48.                                      <ons-button  onclick="clean()" class="actionButton C-button" > C </ons-button>  

49.                                      <ons-button  onclick="operatorClick('%')" class="actionButton"> % </ons-button>  

50.                                      <ons-button  onclick="operatorClick('/')" class="actionButton"> / </ons-button>  

51.                                      <ons-button  onclick="operatorClick('x')" class="actionButton"> × </ons-button>  

52.                                  </ons-row>  

53.                                  <ons-row style=" height: 20%">  

54.                                      <ons-button onclick="type(7)"> 7 </ons-button>  

55.                                      <ons-button onclick="type(8)"> 8 </ons-button>  

56.                                      <ons-button onclick="type(9)"> 9 </ons-button>  

57.                                      <ons-button onclick="operatorClick('-')" class="actionButton"> - </ons-button>  

58.                                  </ons-row>  

59.                                  <ons-row style=" height: 20%">  

60.                                      <ons-button onclick="type(4)"> 4 </ons-button>  

61.                                      <ons-button onclick="type(5)"> 5 </ons-button>  

62.                                      <ons-button onclick="type(6)"> 6 </ons-button>  

63.                                      <ons-button onclick="operatorClick('+')" class="actionButton"> + </ons-button>  

64.                                  </ons-row>  

65.                                  <ons-row style=" height: 20%">  

66.                                      <ons-button onclick="type(1)"> 1 </ons-button>  

67.                                      <ons-button onclick="type(2)"> 2 </ons-button>  

68.                                      <ons-button onclick="type(3)"> 3 </ons-button>  

69.                                      <ons-button onclick="equal()" class="actionButton equal-button"> = </ons-button>  

70.                                  </ons-row>  

71.                                  <ons-row style=" height: 20%">  

72.                                      <ons-button onclick="type(0)"   

73.                    style="flex: 0.725"> 0 </ons-button>  

74.                                  </ons-row>  

75.                              </ons-row>  

76.                          </ons-page>  

77.                      </template>  

78.                  </body>  

79.                  <!-- js that i create -->  

80.                  <script  src="main.js" type="text/javascript"></script>  

81.                  <script  src="converterLength.js" type="text/javascript"></script>  

82.              </html>  

Main.css

1.  .button {  

2.    display: flex;  

3.    flex: 1;  

4.    align-items: center;  

5.    justify-content: center;  

6.    font-size: 20px;  

7.    border-radius: 0px;  

8.    background-color: white;  

9.    color:black;  

10.  }  

11.    

12.  ons-row {  

13.    background: #fffcf7;  

14.  }  

15.    

16.  .actionButton {  

17.    opacity: 1;  

18.  }  

19.    

20.  .screen {  

21.    font-size: 20px;  

22.    

23.  }  

24.    

25.  .C-button{  

26.    color:red !important;  

27.  }  

28.    

29.  .equal-button{  

30.    height: 200%;  

31.    background-color: #ff7200;  

32.    color: white !important;  

33.    font-size: 30px;  

34.  }  

35.    

36.  .button-action{  

37.    height: 200%;  

38.    font-size: 30px;  

39.  }  

40.    

41.  #result{  

42.    display: flex;  

43.    justify-content: center;  

44.    align-items: center;  

45.    height: 90%;  

46.    width: 100%;  

47.    font-size: 40px;  

48.    font-weight: bold;  

49.  }  

50.    

51.  #formula{  

52.    color: #7b7c7c;  

53.    width: 100%;  

54.    text-align: right;  

55.  }  

56.    

57.  .scrollable{  

58.    overflow: scroll;  

59.  }  

60.    

61.  ::-webkit-scrollbar {  

62.      width: 0px;  

63.      background: transparent; /* make scrollbar transparent */  

64.  }  

 

JS.

Attribute

Formula : will type in screen.

EditFormula : is editable formula its gonna use for user edit.

Operator : Will accept all sign

Operand: will accept all number.

Result; is result of the formula;

EditResult : is editable result from formula;

Operation/function

Type(number) : handle event number;

OperatorClick(type) : handle event sign.

Clean() : handle event to reset all;

 

Main.js

1.  window.fn = {};  

2.    

3.  window.fn.open = function() {  

4.    var menu = document.getElementById('menu');  

5.    menu.open();  

6.  };  

7.    

8.  window.fn.load = function(page) {  

9.      reset();  

10.    var content = document.getElementById('content');  

11.    var menu = document.getElementById('menu');  

12.    content.load(page)  

13.      .then(menu.close.bind(menu));  

14.  };  

15.    

16.  var formula;  

17.  var operator;  

18.  var operand;   

19.  var result;  

20.  var editFormula;  

21.  var editResult;  

22.  var lastOperator = "";  

23.    

24.    

25.  window.onload = function(){  

26.      reset = function reset(){  

27.          formula ="";  

28.          operator = "";  

29.          operand = "0";   

30.          result = 0;  

31.          editFormula = "0";  

32.          editResult = 0;  

33.          lastOperator = "";  

34.      }  

35.      init = function init(){  

36.          reset();  

37.          show();  

38.      }  

39.    

40.      showResult = function showResult(){  

41.          document.getElementById("result").innerHTML = editResult;  

42.      }  

43.      showFormula = function showFormula(){  

44.          document.getElementById("formula").innerHTML = formula + editFormula;  

45.      }  

46.    

47.      function checkCalculate(){  

48.          if(lastOperator == ""){  

49.              editResult = result + parseInt(operand);  

50.          }else if(lastOperator == "+"){  

51.              editResult = result + parseInt(operand);  

52.          }else if(lastOperator == "-"){  

53.              editResult = result - parseInt(operand);  

54.          }else if(lastOperator == "/"){  

55.              editResult = result / parseInt(operand);  

56.          }else if(lastOperator == "x"){  

57.              editResult = result * parseInt(operand);  

58.          }else if(lastOperator == "%"){  

59.              editResult = result % parseInt(operand);  

60.          }  

61.          showResult();  

62.      }  

63.      show = function show(){  

64.          showFormula();  

65.          checkCalculate();  

66.      }     

67.      init();  

68.    

69.        

70.  }  

71.    

72.    

73.  function type(number){  

74.      if(operand == ""){  

75.          formula +=  editFormula + " ";  

76.          lastOperator = operator;  

77.          operator = "";  

78.      }  

79.      operand += number+"";  

80.      editFormula = parseInt(operand)+"";  

81.      show();  

82.  }  

83.    

84.  function operatorClick(symbol){  

85.      if(operator == ""){  

86.          result = editResult;  

87.          formula += editFormula;  

88.          operand = "";  

89.      }  

90.      operator = symbol;  

91.      editFormula = " "+symbol;  

92.      showFormula();  

93.  }  

94.  function clean(){  

95.      reset();  

96.      show();  

97.  }  

98.    

99.  function equal(){  

100.     editFormula += " = " + editResult;  

101.     showFormula();  

102.     reset();  

103. }  

And I create for converter length to for understand why we use this application.

Converter.html

1.  <ons-page>  

2.      <ons-toolbar>  

3.          <div class="left">  

4.              <ons-toolbar-button onclick="fn.open()">  

5.                  <ons-icon icon="md-menu"></ons-icon>  

6.              </ons-toolbar-button>  

7.          </div>  

8.          <div class="center">  

9.          Converter Length  

10.        </div>  

11.      </ons-toolbar>  

12.      <ons-row style="height: 40%;" >  

13.          <ons-row style="height: 50%">  

14.              <ons-select id="sourceType" onchange="editSelects(this)">  

15.                  <option value="km">km</option>  

16.                  <option value="m">m</option>  

17.                  <option value="cm">cm</option>  

18.              </ons-select>  

19.              <div style="width: 100%; text-align: right; font-size: 40px" id="source"> 0 </div>  

20.          </ons-row>  

21.          <ons-row style="height: 50%">  

22.              <ons-select id="convertType" onchange="editSelects(this)">  

23.                  <option value="km">km</option>  

24.                  <option value="m" selected="true">m</option>  

25.                  <option value="cm">cm</option>  

26.              </ons-select>  

27.              <div style="width: 100%; text-align: right; font-size: 40px" id="convert"> 0 </div>  

28.          </ons-row>  

29.      </ons-row>  

30.      <ons-row style="height: 60%">  

31.          <ons-row style=" height: 25%">  

32.              <ons-button onclick="typeConvert(7)"> 7 </ons-button>  

33.              <ons-button onclick="typeConvert(8)"> 8 </ons-button>  

34.              <ons-button onclick="typeConvert(9)"> 9 </ons-button>  

35.              <ons-button onclick="clearConvert()" class="actionButton button-action C-button"> AC </ons-button>  

36.          </ons-row>  

37.          <ons-row style=" height: 25%; flex: 0.748">  

38.              <ons-button onclick="typeConvert(4)"> 4 </ons-button>  

39.              <ons-button onclick="typeConvert(5)"> 5 </ons-button>  

40.              <ons-button onclick="typeConvert(6)"> 6 </ons-button>  

41.          </ons-row>  

42.          <ons-row style=" height: 25%">  

43.              <ons-button onclick="typeConvert(1)"> 1 </ons-button>  

44.              <ons-button onclick="typeConvert(2)"> 2 </ons-button>  

45.              <ons-button onclick="typeConvert(3)"> 3 </ons-button>  

46.              <ons-button onclick="back()" class="actionButton button-action"><   

47.              </ons-button>  

48.          </ons-row>  

49.          <ons-row style=" height: 25%; flex: 0.748">  

50.              <ons-button onclick="typeConvert(0)"> 0 </ons-button>  

51.          </ons-row>  

52.      </ons-row>  

53.  </ons-page>  

Attribute

sourceText : attribute that handle number;

source : that will show on view

sourceType : will check unit of attribute

convert : handle the result.

convertType : handle the result type;

Method

convertToMeter() : return value based on type;

typeConvert () : handle input number user

back() : remove one text.

clearConvert(): reset

converterLength.js


1.   var sourceText;  

2.   var source;  

3.   var sourceType  

4.   var convert;  

5.   var convertType;  

6.     

7.     

8.     

9.   window.onload = function(){  

10.      init = function init(){  

11.          sourceText = "0";  

12.          sourceType = "km";  

13.          convertType = "m";  

14.          source = 0;  

15.          convert =0;  

16.      }  

17.      init();  

18.  }  

19.    

20.  function convertResult(number){  

21.      source = number;  

22.      convert = convertToMeter(sourceType) * source/convertToMeter(convertType);  

23.      showAll()  

24.    

25.  }  

26.    

27.  function showAll(){  

28.      document.getElementById("source").innerHTML = source;  

29.      document.getElementById("convert").innerHTML = convert;  

30.  }  

31.    

32.  function convertToMeter(type){  

33.      if(type == "km"){  

34.          return  1000;  

35.      }else if(type == "m"){  

36.          return 1;  

37.      }else if(type == "cm"){  

38.          return 1/100;  

39.      }  

40.      return 0;  

41.  }  

42.    

43.  function typeConvert(number){  

44.      sourceText += number+"";  

45.      convertResult(parseFloat(sourceText))  

46.  }  

47.    

48.  function editSelects(data) {  

49.    var id = data.id;  

50.    if(data.id == "sourceType"){  

51.      sourceType = data.value;  

52.    }else if(data.id == "convertType"){  

53.      convertType = data.value;  

54.    }  

55.    convertResult(parseFloat(sourceText));  

56.  }  

57.    

58.  function back(){  

59.      sourceText= sourceText.slice(0, -1);  

60.      if(sourceText.length  

61.  <1) sourceText = "0";  

62.      convertResult(parseFloat(sourceText))  

63.  }  

64.    

65.  function clearConvert(){  

66.      init();  

67.      convertResult(parseFloat(sourceText));  

68.  }  





Comments