Make an twaver HTML5 iPhone app

There are many technical methods to build an iOS app. This article introduces an iPhone app example of how to embed the cocoa touch component based on uiwebview into an HTML page. In this article, the basic content of iOS, basic applications of twaver HTML5, and technical points of mutual calls between Objective C and JavaScript are interspersed.

First, build an empty application using xcode.

Create a uiviewcontroller subclass named mainviewcontroller, and drag the following interface in XIB, including a uiswitch switch, a uislider pull bar, a uitextfield input box, and a most important uiwebview component.

 

In this example, uiswitch is used for automatic layout, uislider is used as the scaling control of the network topology, uitextfield is used as the edit and update of the label of the element, and uiwebview is used to load the topology component of twaver HTML5.

 

Add the page content drag of twaver.jsand demo.html to the project to form the project with the following directory structure. This line of code <meta name = "viewport" content = "user-scalable = No, width = 500"> </meta>, in this example, I want to allow the topology to control the scaling, So I disabled the Scalable function of the browser and set the width. For more viewport knowledge, refer to here.
 

 

In this case, we need to make a setup. xcode uses JS as the source rather than the resource by default, so the JS resource cannot be found. In xcode build phases, we can set twaver. JS is killed from compile sources, and twaver is added to copy bundle resources. JS
 

When the following code is displayed in the interface, the loadrequestrequest listener of uiwebviewdirects demo.html to the nsurlrequest. Note that the empty function added to textfield is used to cancel editing by carriage return. The final becomefirstresponder is used to receive the shake gesture, in this example, the edit alarm page is displayed by shaking the phone with the selected elements.

 

 

JS Code  

1. -(Void) viewdidappear :( bool) animated
2. {
3. [Self. webview setdelegate: Self];
4. [Self. webview setscalespagetofit: Yes];
5. Nsurl * url = [[nsbundle mainbundle] urlforresource: @ "Demo" withextension: @ "html"];
6. Nsurlrequest * Req = [[nsurlrequest alloc] initwithurl: url];
7. [Self. webview loadrequest: req];
9. [Self. textfield addtarget: Nil action: @ selector (dummy :)
10. Forcontrolevents: uicontroleventeditingdidendonexit];
12. [Self becomefirstresponder];
13. }

 

The following is the JavaScript code on the HTML page controlled by the switch. Objective C is easier to call JavaScript and can directly call stringbyevaluatingjavascriptfromstring to run the code.

 

 

JS Code  

1. -(Ibaction) handleswitchchange :( ID) sender {
2. If (self. switcher. On ){
3. [Self. webview stringbyevaluatingjavascriptfromstring: @ "window. springlayouter. Start ();"];
4. } Else {
5. [Self. webview stringbyevaluatingjavascriptfromstring: @ "window. springlayouter. Stop ();"];
6. }
7. }

If the JavaScript function returns a value, it is the return value of the stringbyevaluatingjavascriptfromstring function. The following code obtains the current zoom value of the network and the name information of the currently selected element through this method.

 

 

JS Code  

1. -(Void) updateslider {
2. Nsstring * zoom = [self. webview stringbyevaluatingjavascriptfromstring: @ "window. Network. getzoom ();"];
3. Self. Slider. value = [zoom floatvalue];
4. }
5. -(Void) updatetextfield {
6. Nsstring * name = [self. webview stringbyevaluatingjavascriptfromstring: @ "window. getcurrentname ();"];
7. Self. textfield. Text = Name;
8. }

 

JavaScript does not directly call Objective C functions. We can only intercept the shouldstartloadwithrequest function callback in uiwebviewdelegate of uiwebview by changing the page location to implement JavaScript to actively call Objective C code. Actually it is not so perfect. I suggest you read this article. I only have it now. I suggest setting up another IFRAME method to change location to avoid some side effects. The following is the relevant code, the logic is simple and I will not explain it.

 

JS Code  

1. -(Bool) webview :( uiwebview *) webview shouldstartloadwithrequest :( nsurlrequest *) Request navigationtype :( uiwebviewnavigationtype) navigationtype {
2. Nsstring * url = [[request URL] absolutestring];
3. If ([url hasprefix: @ "call:"]) {
4. Nsarray * array = [url componentsseparatedbystring: @ ":"];
5. Nsstring * method = [array objectatindex: 1];
6. [Self defined mselector: nsselectorfromstring (method)];
7. Return no;
8. }
9. Return yes;
10. }

 

 

JS Code  

1. VaR IFRAME = Document. createelement ("iframe ");
3. Network. addpropertychangelistener (function (e ){
4. If (E. Property = 'zoom '){
5. IFRAME. setattribute ("src", "Call: updateslider ");
6. Document. Body. appendchild (IFRAME );
7. IFRAME. parentnode. removechild (IFRAME );
8. }
9. });
11. Box. getselectionmodel (). addselectionchangelistener (function (e ){
12. IFRAME. setattribute ("src", "Call: updatetextfield ");
13. Document. Body. appendchild (IFRAME );
14. IFRAME. parentnode. removechild (IFRAME );
15. });

 

 

Finally, in order for the itouch, which has been unable to upgrade to ios5 after more than four years, to continue using the residual heat, the following settings must be made for debugging and testing. First, the deployment target in summary needs to be set to 4. * version. In the plist file, delete the required device capabilities setting and change it to armv7 and armv6 in ubuntures.

 

 

 

 

Finally, there are two important OBC and js code files for your reference. twaver HTML5 demo

 

Finally, archive the application archive and publish it to the App Store, waiting for Apple's "trial". If it goes well, you can find the "twaver" keyword on the App Store in a few days, download and play the app of this article, and finally the free app.