The use of HTML programming in Windows Phone

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

In the development of the Windows Phone project, needs several pages to the layout of the table (with renderings below), because the Grid in some sideline is empty, and no border, the decision to give up, with the border to form the line add up. So in a table layout page, feel very new energy consumption. The 512M memory on the mobile phone test will not affect what, then upload it to the store. Up to now, WP8 can not be used HTML5 programming? So he wrote a DEMO to test the use of HTML.

Like WinForm, WP also has WebBrowser the browser frame, so you can add a WebBrowser on the page as a HTML container, then the corresponding HTML page display inside.

1, A new HTML5 in VS2012 project

2, The new project after the solution structure

(vs automatically creates a default HTML5 program example, for developers to reference)

image

3 , Will we want to make the form into a HTML page to

<div>
        <table border="1">
            <tr>
                <td class="td-title">The name of the enterprise</td>
                <td id="com"></td>
            </tr>
            <tr>
                <td class="td-title">An enterprise as a legal person</td>
                <td id="name"></td>
            </tr>
            <tr>
                <td class="td-title">Corporate phone</td>
                <td id="phone"></td>
            </tr>
            <tr>
                <td class="td-title">Enterprise is located.</td>
                <td id="adress"></td>
            </tr>
            <tr>
                <td class="td-title">Record number</td>
                <td id="ipc"></td>
            </tr>
        </table>
        <p id="jianjie"></p>
    </div>

How to fill the data? → Ajax. But how to obtain the dynamic data? Each of the information ID how to wear it? To see the next step.

4, JavaScript and C#, C# and JavaScript interaction.

If you like Asp.Net as the backstage HTML additional data, or from the corresponding Id number should have much good, but WP is not Asp.Net. If you visit the URL (local HTML) add parameters, then JavaScript can be used to directly obtain the parameters. If only access to a page? For example, /Html/index.html, how to use C# to the corresponding parameter?

Write a method using JS

function GetID(id)
        {
            //Your method
        }

Then you C# through InvokeScript browser objects to call your JS

Browser.InvokeScript("GetID","10010");

(InvokeScript method supports multiple parameters)

Because I used HttpRequest to request data, the ID after the introduction of Ajax to obtain data and feel a bit slow, then directly. JSON data through the C# passed to the JS method in HTML. Then fill data to the corresponding table by JS method

function InsertHtml(json) {
            json = $.parseJSON(json);//The string format into JSON format
              
$(
"#com").html(json["CName"]);
            $("#name").html(json["Contact"]);
            $("#phone").html(json["CTel"]);
            $("#adress").html(json["CAddress"]);
            $("#ipc").html(json["OrgCoad"]);
            $("#jianjie").html(json["CIntro"]);
        }
Browser.InvokeScript("InsertHtml", "{\"CAddress\": \"*** * * * * * square, No. 1 7 floor \ ", \" CIntro\ ": \" * * Construction Group Co., Ltd. was founded in 1993, is a comprehensive construction enterprise. <br> \ ", \" CName\ ": \" * * Construction Group Limited company \ ", \" CTel\ ":" 159****0500\ "," Contact\ ": \" gold**\",       \"OrgCoad\": \"733***90X\"  }");

{96HMK@28_G@~UQGTBN)27EThe results will come out.

(Note: if you use the words of JS must be in the WebBrowser control settings for the IsScriptEnabled= "True", or JS doesn't work)

If I want to dial a phone call or C# operation in JS? Very simple, WebBrowser provides this event. The following

<input type="button" value="Making a phone call" id="btn_call" style="width: 150px" /></p>

 <script type="text/javascript">
        $(function () {
           
            $("#btn_call").click(function () {
                window.external.notify("18300001111");
            });

        });
</script>
<phone:WebBrowser x:Name="Browser"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Loaded="Browser_Loaded"
                                  IsHitTestVisible="True"
                                  IsScriptEnabled="True"
                          NavigationFailed="Browser_NavigationFailed"  Margin="0"                                                      ScriptNotify="Browser_ScriptNotify">
                </phone:WebBrowser>
private void Browser_ScriptNotify(object sender, NotifyEventArgs e)
        {
            PhoneCallTask phone = new PhoneCallTask();
            phone.PhoneNumber = e.Value;
            phone.Show();
        }

5, If the HTML of your page is a Item in Pivot or in Panorama, it will encounter this problem, is the gesture operation, sliding around may not switch Item. Then how to do? Don't worry, toolkit provides a component for us to use

<phone:WebBrowser x:Name="Browser"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Loaded="Browser_Loaded"
                                  IsHitTestVisible="True"
                          NavigationFailed="Browser_NavigationFailed"  Margin="0" ScriptNotify="Browser_ScriptNotify">
                    
                    <toolkit:GestureService.GestureListener>
                        <toolkit:GestureListener Flick="GestureListener_Flick" />                        
                    </toolkit:GestureService.GestureListener>
                </phone:WebBrowser>
private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {

            if (e.Direction.ToString() == "Horizontal")
            {
                if (e.Angle > 0)//Sliding to the left hand, namely Items scroll right
                {
                    if (MyPivot.Items.Count == MyPivot.SelectedIndex + 1)
                    {
                        MyPivot.SelectedIndex = 0;
                    }
                    else
                    {
                        MyPivot.SelectedIndex++;
                    }

                }
                else//Conversely
                {
                    if (MyPivot.SelectedIndex == 0)
                    {
                        MyPivot.SelectedIndex = MyPivot.Items.Count;
                    }
                    else
                    {
                        MyPivot.SelectedIndex--;
                    }
                }
            }
        }

If the Items header (as shown) does not exceed the width of the screen would be bug, is the problem of switching the direction, also did not think of a good solution.

image

6, On the webpage and mobile phone theme synchronization

 background-color: Background;/*Background with the system background.*/
 color: Highlight;/*Highlight theme color consistent with the system*/

7, Information sharing

Windows Phone WebBrowser skills
  HTML5 in Windows Phone 8.zip

(I don't know much about HTML5. If wrong, please correct me. Study together, progress together. )

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Rick at November 18, 2013 - 11:35 AM