- This topic has 12 replies, 8 voices, and was last updated 11 years, 10 months ago by
.
-
Posts
-
Example: How to Sum Numeric Fields
We have received requests for an example app that demonstrates processing a set of input fields to produce a single result. In this example 3 numeric input fields collect user input. When any input field is updated, the sum of all fields is computed and output. Because mobile apps are touch-centric a button to clear each field is provided
Here is a mockup of the UI See attachment sum-screenshot-mock1.png
Highlights
Using the Visual Designer, I laid out the UI as shown in the mockup using the following steps. The source code for this example is attached at the conclusion of this article.1) I created and configured the arg label, inputfield and clear button. Then I copy-pasted it 2 more times to quickly fill out the bulk of the UI.
2) The input fields and the delete buttons use the same OnChange/OnClick Run JavaScript actions. That is I wrote a function to compute the sum which is called by each input-field widget. I wrote a clearArg() function which is called by each clear button.
See attachment sum-screenshot1.png
3) The input-fields are typed to be numeric. Thus at runtime when user touches into the field the numeric keypad will appear.
See attachment sum-iphone-screenshot.pngSource code
See attachment sum-example.zipThanks for the calculate example, however I am new to Javascript and cannot follow it.
Does the function which does the calculations updateTotal() have to be in the sum_custom.js file?Does the sum.mobi file have to be in same folder as sum_custom.js?
What does the “#” in #m1-sum-arg1Field’) do?
I am a VB programmer and will be reading up on Javascript basics, can you point me to a good Javascript intro on the web?I love your program, it is as easy to use as Visual Studio.net.
Regards Paul GJust to help you Paul,
All personal JS scripts / functions need to be into _custom.js file.
Some default functions are implememted by mb1 as new page, page loading…etc… So you can add your personal js code in these mb1 functions or create your personal functions and call them directly from the GUI into action filed ‘Run Javascript’Sum.mobi is the project file.
Click on the green arrow into the Design center. Automatically your project will be generated into your projectname-www directory. So all necessary files will be here. And the _custom.js file is created also, but need to be modified with your code if necessary.# and $ are used by Jquery syntax (for info $ is a shorcut of “jQuery” word) . Check on web site at http://www.jquery.org
So the syntax:
$(“#m1-sum-arg1Field”) is interpreted like jQuery(“”m1-sum-arg1Field”)and “#m1-sum-arg1Field” is a selector. A selector is the name of your <div> into html code generated by mb1.
Hope this helps
Regards
What if I want to calculate monetary amounts e.g. $12.58
There is no decimal point on the keypad?
Is there a method to show a decimal point on the keypad?
Paul
Hi Wayne or Octavio:
I’ve been reviewing this example. When I download it and run it on the emulator the “total” does not sum. Do you know why?Also, (please be patient I am learning too), but in the Design mode when I click on “Arg1” for example, the Outline show “On Change” Run JavaScript and then “update Total()”. I cannot click and see any programming language i.e. Jquery code or is “update Total()” all there is too it. Are the drop down arrows locked? Is the code that Wayne references below entered in the “Code UpdateTotal() …”.
Please help. I need to create an app that has these functions (and multiplication/division/subtraction.
Thank you for your help.
Celeste
@support-octavio wrote:
@CelesteP
The code “updateTotal()” is a call to a javascript function that is defined in the sum_custom.js. You can find more information about this here: workingWithGeneratedFiles/index.html#using_javascript_to_customize
I just tried the example and works good. Did you do any changes to it? Didn’t sum putting values in any of the 3 args?
Hi Octavio:
No I did not change anything. I will download again and try it. I will also look up the js function you suggested. I am testing on the emulator–would that be the difference? But what would prevent me from seeing the code generated or is it just a snippet? (@CelesteP wrote:
@support-octavio wrote:
@CelesteP
The code “updateTotal()” is a call to a javascript function that is defined in the sum_custom.js. You can find more information about this here: workingWithGeneratedFiles/index.html#using_javascript_to_customize
I just tried the example and works good. Did you do any changes to it? Didn’t sum putting values in any of the 3 args?
Hi Octavio:
No I did not change anything. I will download again and try it. I will also look up the js function you suggested. I am testing on the emulator–would that be the difference? But what would prevent me from seeing the code generated or is it just a snippet? (Hi Wayne or Octavio:
I tried it again and it doesn’t work on the emulator or my Ipod touch. When I open “sum” a box comes up and says Upgrade sum.mobi(r) file format? Then MobiOne would like to upgrade sum.mobi(r) to the latest format when saved and it gives you button options: Upgrade, Open as read-only, Create backup file or Don’t ask me again.This is a great example because I am creating a form that users put in data and they have to calculate a sum. It will include multiplying, dividing, etc… Please can you help.
Thanks again,
Celeste
@support-octavio wrote:
@CelesteP
Please select the option: Upgrade. Then run again the app in Test Center. If it doesn’t work please share the project in a zip file to investigate.
Octavio:
Thank you so much. I did what you said and then I figured out that I had not extracted all of the files. (…so embarrassing…) That worked! Extracted, then selected upgrade, ran it and it works perfectly.
I’ve created an app but will need help (just a little) with mathematical calculations if you don’t mind. One question I have is in this example when using the snippet “updatetotal()” in the input fields, how does it know to put the total in the totalfield? Can you explain?
I’m getting more and more familiar with MobiOne but just a little confused on some items. I’ve created a 4-5 screen app and all works perfectly (but I don’t have the math calculating yet).
Thank you so much for your help today. I really appreciate it.
Celeste
Hi,
I can copy your project files, open the project, test the project and everything is fine and calculates great. What I don’t understand is why as soon as I change the project name, it does not work, and the custom calc sum javascript is gone from the custom_js file. And if I re-paste the javascript it still does not work. Is there more code somewhere that is affecting this javascript? Maybe in the main javascript file? Also, do the id’s of the arg fields have to be arg1Field, arg2Field and so on to work, or can I rename length1, width1, and change the custom script to match where necessary?
I don’t have much experience, but would really like to try and make a simple math calculating app that will be able to take the totals / sums and use them on another page of the app. So I also need to try and see if your local storage demo can work for this, or do I need to look at some other type of storage method?
Any help I can get would be greatly appreciated. I don’t think what I am trying to do could be too complicated, but for a novice like me,
it seems like I am hitting roadblocks at every step.Hi Nickford,
When you change the name of your design, mobione change the id of your widgets on generated files, but it doesn’t on <project>_custom.js file. So, you will have to change every
$(‘#m1-oldnameapp-widget’).(…) for
$(‘#m1-newnameapp-widget’).(…)Don’t hesitate to ask any additional question.
