🍬 🖕 🎅🏿 विंडोज फोन के लिए एप्लिकेशन विकसित करने के लिए एचटीएमएल 5 और जावास्क्रिप्ट का उपयोग करना 👊🏻 💅🏿 😛

आज मैं इस बारे में बात करना चाहता हूं कि एचटीएमएल 5 और जावास्क्रिप्ट के मालिकाना हक वाले विंडोज फोन के विकास के लिए क्या अतिरिक्त अवसर हैं।

सबसे पहले, आइए जानें कि यह कैसे संभव है। विंडोज फोन के लिए एचटीएमएल 5 + जेएस विकास से जुड़ी सभी संभावनाएं बोर्ड पर इंटरनेट एक्सप्लोरर की उपस्थिति से जुड़ी हुई हैं, जो डेस्कटॉप इंटरनेट एक्सप्लोरर 9 की कार्यक्षमता के समान है। और यह समझ में आता है क्योंकि उनके पास एक समान कोड आधार है। नीचे ब्राउज़र द्वारा समर्थित मुख्य (लेकिन सभी नहीं) विशेषताएं हैं।

इस तरह के समर्थन के साथ एक मोबाइल ब्राउज़र की उपस्थिति पहले से ही मोबाइल प्लेटफॉर्म पर होने की बुनियादी संभावना प्रदान करती है: एक समृद्ध मोबाइल साइट बनाना। लेकिन हम आवेदन लिखना चाहते थे! डेवलपर्स के लिए उपलब्ध WebBrowser नियंत्रण अनुप्रयोगों को विकसित करने की अनुमति देता है:

<phone:WebBrowser Grid.Row="1" Name="MyBrowser" IsGeolocationEnabled="True" IsScriptEnabled="True" Background="{StaticResource PhoneBackgroundBrush}"/>

एक पूरी तरह से कार्यात्मक मोबाइल साइट की उपस्थिति और हमारे आवेदन में एक WebBrowes नियंत्रण सम्मिलित करने की क्षमता हमें विंडोज फोन के लिए पहले प्रकार के HTML5 अनुप्रयोग की ओर ले जाती है : वे अनुप्रयोग जो WebBrowser नियंत्रण में एक मोबाइल वेबसाइट की मेजबानी करते हैं और मंच से संबंधित अतिरिक्त सेवा सुविधाओं को जोड़ते हैं, उदाहरण के लिए, पुश अधिसूचना। ।

आइए, ऐसे एप्लिकेशन का एक उदाहरण लिखते हैं। हम यैंडेक्स मोबाइल साइट की मेजबानी करेंगे। सादगी के लिए, हम अतिरिक्त सेवाओं का आविष्कार नहीं करेंगे, लेकिन एक ApplicationBar और कुछ बटन जोड़ें जो हमारी राय में सबसे लोकप्रिय कार्यक्षमता तक पहुंच प्रदान करेंगे।

हमेशा की तरह, हम विंडोज फोन एप्लिकेशन टेम्पलेट के आधार पर एक एप्लिकेशन बनाकर शुरू करते हैं। NuGet का उपयोग करते हुए, एप्लिकेशन में विंडोज फोन टूलकिट पैकेज के लिए सिल्वरलाइट जोड़ें। उसके बाद, पेज लोड करने की प्रक्रिया को दिखाने के लिए MainPaige.xaml एप्लिकेशन के मुख्य पृष्ठ पर WebBrowser नियंत्रण और PerformanceProgressBar जोड़ें। परिणामस्वरूप, XAML कोड इस तरह दिखेगा:

 <toolkit:PerformanceProgressBar Name="Progress" Height="10" IsIndeterminate="False" Background="{StaticResource PhoneBackgroundBrush}"/> <phone:WebBrowser Grid.Row="1" Name="Yandex" IsGeolocationEnabled="True" IsScriptEnabled="True" Background="{StaticResource PhoneBackgroundBrush}"/>

विंडोज फोन टूलकिट के लिए सिल्वरलाइट से नियंत्रण का उपयोग करने के लिए एक नाम स्थान लिंक जोड़ना न भूलें:

  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

विंडोज फोन की शैली में एक एप्लिकेशन बनाने के लिए और इसमें बटन जोड़ने के लिए, मैंने एप्लीकेशनबियर को अनलॉक्ड किया, और लेख से जानकारी का उपयोग किया कि विंडोज फोन एप्लिकेशन के लिए आइकन कहां प्राप्त करें ? मेरे आवेदन के लिए आवश्यक आइकन खोजने के लिए। मैंने तुरंत एप्लिकेशन हैंडबार पर बटन में ईवेंट हैंडलर भी जोड़े। एक्सएएमएल के परिणामस्वरूप, मेरे आवेदन का मेरा मेनपेज.xaml पेज का कोड इस तरह दिखाई देने लगा:

 <phone:PhoneApplicationPage x:Class="MyYandexWithBJ.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True"> <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <toolkit:PerformanceProgressBar Name="Progress" Height="10" IsIndeterminate="False" Background="{StaticResource PhoneBackgroundBrush}"/> <phone:WebBrowser Grid.Row="1" Name="Yandex" IsGeolocationEnabled="True" IsScriptEnabled="True" Background="{StaticResource PhoneBackgroundBrush}"/> </Grid> <!--Sample code showing usage of ApplicationBar--> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton IconUri="/icons/appbar.back.rest.png" Text="" lick="ApplicationBarBackButton_Click"/> <shell:ApplicationBarIconButton IconUri="/icons/appbar.home.png" Text="" Click="ApplicationBarHomeButton_Click"/> <shell:ApplicationBarIconButton IconUri="/icons/appbar.plane.rotated.45.png" Text="" Click="ApplicationBarFlightsButton_Click"/> <shell:ApplicationBarIconButton IconUri="/icons/appbar.next.rest.png" Text="" Click="ApplicationBarForwardButton_Click"/> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> </phone:PhoneApplicationPage>

प्रोजेक्ट में आइकन फ़ोल्डर में आइकन जोड़े गए थे, यदि नया है तो कंटेंट टाइप कंटेंट, कॉपी टू आउटपुट में कॉपी पर सेट है। अब स्टार्टअप पर ही आवेदन इस तरह दिखता है:

एक कोड जोड़ें, जब एप्लिकेशन डाउनलोड किया जाता है, घर के साथ बटन पर क्लिक करके, यैंडेक्स मोबाइल पेज खोलता है, इसे खोलता है, और जब आप विमान पर क्लिक करते हैं - उड़ान अनुसूची के साथ मोबाइल पेज को फाड़ दें।

 // Constructor public MainPage() { InitializeComponent(); Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { Yandex.Navigate(new Uri("http://m.yandex.ru")); } private void ApplicationBarHomeButton_Click(object sender, EventArgs e) { Yandex.Navigate(new Uri("http://m.yandex.ru")); } private void ApplicationBarFlightsButton_Click(object sender, EventArgs e) { Yandex.Navigate(new Uri("http://m.rasp.yandex.ru/station?plane=1")); }

अब लॉन्च में एप्लिकेशन यांडेक्स मोबाइल पेज को खोलता है, और जब आप विमान के साथ बटन पर क्लिक करते हैं, तो यह उड़ान अनुसूची के साथ मोबाइल पेज खोलता है:

यह पृष्ठ पर नेविगेट करते समय आगे / पीछे बटनों के प्रसंस्करण और प्रोग्रेसबार के प्रदर्शन को जोड़ने के लिए रहता है। ProgressBar प्रदर्शन को जोड़ने के लिए, आपको WebBrowation नियंत्रण के नेविगेट और नेविगेट किए गए ईवेंट हैंडलर को जोड़ने की आवश्यकता है:

 void MainPage_Loaded(object sender, RoutedEventArgs e) { Yandex.Navigated += new EventHandler<System.Windows.Navigation.NavigationEventArgs>(Yandex_Navigated); Yandex.Navigating += new EventHandler<NavigatingEventArgs>(Yandex_Navigating); Yandex.Navigate(new Uri(http://m.yandex.ru)); } void Yandex_Navigating(object sender, NavigatingEventArgs e) { Progress.IsIndeterminate = true; } void Yandex_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e) { Progress.IsIndeterminate = false; }

बटन को आगे और पीछे दबाने के लिए, हम एप्लिकेशन कोड से इसे कॉल करने की क्षमता के साथ-साथ जावास्क्रिप्ट और इतिहास विकल्पों का उपयोग करेंगे:

 private void ApplicationBarBackButton_Click(object sender, EventArgs e) { Yandex.InvokeScript("eval", "history.go(-1)"); } private void ApplicationBarForwardButton_Click(object sender, EventArgs e) { Yandex.InvokeScript("eval", "history.go(1)"); }

अब हमारे पास एक होम बटन और फ़्लाइट शेड्यूल के साथ हमारा अपना एप्लिकेशन "मोबाइल यांडेक्स" है। व्यायाम के लिए एक अच्छा निष्कर्ष पिछड़े / आगे के बटन को स्थानांतरित करने की क्षमता की एक परिभाषा जोड़ना है ताकि वे केवल तभी सक्रिय हों जब संक्रमण वास्तव में किया जा सकता है।

यह एप्लिकेशन रिमोट एचटीएमएल 5 + जेएस सामग्री का उपयोग करता है, तार्किक अगला चरण विंडोज फोन के लिए एचटीएमएल 5 अनुप्रयोग का दूसरा प्रकार है, जो फोन पर स्थानीय सामग्री का उपयोग करता है, या कम से कम छोड़ने पर, वेबब्रोसर नियंत्रण ।

आइए, ऐसे एप्लिकेशन का एक उदाहरण लिखते हैं। यह एक स्थानीय एचटीएमएल 5 पेज होगा जिसकी सक्रिय सामग्री जेएस द्वारा बनाई जाएगी। विकास को सरल बनाने के लिए, हम jQuery लाइब्रेरी का उपयोग करेंगे।

हमेशा की तरह, हम विंडोज फोन एप्लिकेशन टेम्पलेट के आधार पर एक एप्लिकेशन बनाकर शुरू करते हैं। अपने दम पर एक एचटीएमएल 5 आवेदन लिखने के लिए नहीं, मैंने टेकईड रूस 2011 में कोस्त्या किचिंस्की की एक रिपोर्ट से एसवीजी उदाहरण लिया।

प्रोजेक्ट में, सामग्री फ़ोल्डर बनाएँ और इसमें svgdemo.htm और jquery-1.7.min.js फाइलें जोड़ें। Svgdemo.html फ़ाइल में, jquery-1.7.min.js स्क्रिप्ट पथ को बदलें ताकि तकनीकी स्क्रिप्ट इस प्रकार हो:

 <script src="jquery-1.7.min.js" type="text/javascript"></script>

यदि svgdemo.htm और jquery-1.7.min.js फ़ाइलों के लिए नया है तो कॉपी में आउटपुट और कॉपी में आउटपुट में एक्शन सेट करना भी आवश्यक है।

अब, WebBrowser नियंत्रण को एप्लिकेशन के मुख्य पृष्ठ पर जोड़ें ताकि यह सभी स्थान को भर दे। परिणामस्वरूप, XAML कोड इस तरह दिखेगा:

 <phone:PhoneApplicationPage x:Class="IE9HTML.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True"> <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <phone:WebBrowser Name="myBrowser" IsScriptEnabled="True" /> </Grid> </Grid> </phone:PhoneApplicationPage>

पहली नज़र में, वास्तव में, विकास पूरा हो गया है (इस तथ्य को ध्यान में रखते हुए कि हमने समाप्त एचटीएमएल 5 आवेदन लिया था), लेकिन अभी भी एक सूक्ष्म बिंदु बना हुआ है। तथ्य यह है कि एप्लिकेशन तैनात होने के बाद हमारी HTML और JS फाइल वेबब्राउजर नियंत्रण के लिए उपलब्ध नहीं होगी, क्योंकि वे आइसोलेटेड स्टोरेज में नहीं होंगे। इसलिए, एप्लिकेशन लॉन्च करते समय, हमें अपने HTML5 एप्लिकेशन को आइसोलेटेड स्टोरेज में तैनात करना होगा। इसके लिए, हम MSDN से उदाहरण कोड का उपयोग करेंगे, इसमें फाइलों के सेट को अपने स्वयं में बदलेंगे:

 private void SaveFilesToIsoStore() { //These files must match what is included in the application package, //or BinaryStream.Dispose below will throw an exception. string[] files = { "content/svgdemo.htm", "content/jquery-1.7.min.js" }; IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication(); if (false == isoStore.FileExists(files[0])) { foreach (string f in files) { StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative)); using (BinaryReader br = new BinaryReader(sr.Stream)) { byte[] data = br.ReadBytes((int)sr.Stream.Length); SaveToIsoStore(f, data); } } } } private void SaveToIsoStore(string fileName, byte[] data) { string strBaseDir = string.Empty; string delimStr = "/"; char[] delimiter = delimStr.ToCharArray(); string[] dirsPath = fileName.Split(delimiter); //Get the IsoStore. IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication(); //Re-create the directory structure. for (int i = 0; i < dirsPath.Length - 1; i++) { strBaseDir = System.IO.Path.Combine(strBaseDir, dirsPath[i]); isoStore.CreateDirectory(strBaseDir); } //Remove the existing file. if (isoStore.FileExists(fileName)) { isoStore.DeleteFile(fileName); } //Write the file. using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile(fileName))) { bw.Write(data); bw.Close(); } }

SaveFilesToIsoStore () विधि निर्दिष्ट करती है कि निर्दिष्ट फाइलें आइसोलेटेड स्टोरेज में नहीं हैं और असिस्टेंट SaveToIsoStore विधि का उपयोग करके उन्हें कॉपी करती हैं, जिससे डायरेक्टरी पदानुक्रम का संरक्षण होता है।

अब सब कुछ कोड लिखने के लिए तैयार है जो हमारे एचटीएमएल 5 अनुप्रयोग के आरंभीकरण को पूरा करेगा:

 // Constructor public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { SaveFilesToIsoStore(); myBrowser.Navigate(new Uri("content/svgdemo.htm", UriKind.Relative)); }

IsolatedStorage के लिए फ़ाइलों को सहेजें और WebBrowser नियंत्रण में मुख्य HTML5 फ़ाइल प्रदर्शित करें। एक कार्य अनुप्रयोग निम्नानुसार है:

मुझे लगता है कि यह एक महान उदाहरण है। इसके लिए कोस्त्या ( किसिक ) को धन्यवाद।

अगर हमें अब शुद्ध HTML5 + JS की आवश्यकता नहीं है और हम ब्राउज़र के नियंत्रण से परे जाना चाहते हैं, तो हम विंडोज फोन के लिए तीसरे प्रकार के HTML5 एप्लिकेशन के बारे में बात कर सकते हैं , जो न केवल फोन पर स्थानीय सामग्री का उपयोग करता है, बल्कि सुविधाओं का उपयोग करते हुए वेबसेंटर के नियंत्रण से भी आगे जाता है। प्लेटफार्मों (जैसे एक्सेलेरोमीटर) । हम अपने दम पर "स्क्रैच से" ऐसा आवेदन कर सकते हैं, जो हो रहा है (window.external.notify / ScriptNotify) के मंच को सूचित करने की क्षमता का उपयोग करते हुए या सी # कोड (WebBrowser.InvitScript) से एक जेएस स्क्रिप्ट को कॉल कर सकते हैं। लेकिन मौजूदा समाधान - PhoneGap का उपयोग करना बेहतर है।

लेखन के समय, संस्करण 1.3 उपलब्ध था। आप इसे वेबसाइट phonegap.com पर डाउनलोड कर सकते हैं, वहां भी प्रलेखन है। डाउनलोड करने के बाद, संग्रह को अनज़िप करें और विंडोज फोन फ़ोल्डर से PhoneGapCustom.zip और PhoneGapStarter.zip फ़ाइलों को Visual Studio 2010 \ Templates \ फ़ोल्डर में कॉपी करें, Visual Studio के सभी चलने वाले संस्करणों को अनलोड करें। विज़ुअल स्टूडियो शुरू करने के बाद, एक नए प्रकार की परियोजना दिखाई देगी:

चलिए PhoneGapStarter पर आधारित एक प्रोजेक्ट बनाते हैं। हम परियोजना की संरचना को देखते हैं:

दरअसल, PhoneGap ही JS फ़ाइल phonegap-1.3.0.js और .NET CF लाइब्रेरी WP7GapClassLib है जो इस पर प्रतिक्रिया देता है। इसके अलावा, अंतर्निहित WebBrowser तत्व के बजाय, PGView नियंत्रण का उपयोग किया जाता है, जो उसी WP7GapClassLib में स्थित है।

सहायक फ़ाइल ManifestProcessor.js का उपयोग GapSourceprise.xml फ़ाइल को अपडेट करने के लिए किया जाता है, जिसमें सामग्री फ़ाइलों (परियोजना की www निर्देशिका) की एक सूची होती है, जो कि जैसा कि हम पहले से ही पिछले उदाहरण से जानते हैं, को एप्लिकेशन बनाने से पहले आइसोलेटेड स्टोरेज में तैनात करना होगा।

हम एक सरल एप्लिकेशन लिखेंगे जो एक्सेलेरोमीटर डेटा को पढ़ेगा और इसे पृष्ठ पर प्रदर्शित करेगा। ऐसा करने के लिए, index.html फ़ाइल के टैग की सामग्री को निम्न के साथ बदलें:

 <h1>Accelerometer sample</h1> <div id="valueX"></div> <div id="valueY"></div> <div id="valueZ"></div>

अब आपको इस पृष्ठ पर स्क्रिप्ट को अपने स्वयं के साथ बदलने की आवश्यकता है, जो एक्सेलेरोमीटर के साथ काम करता है (कोड डेविड रौसेट द्वारा लेख से लिया गया है, ट्यूटोरियल: विंडोज फोन पर एचटीएमएल 5 एप्लिकेशन कैसे बनाएं फोनगैप के लिए धन्यवाद) :

 <script type="text/javascript"> document.addEventListener("deviceready", onDeviceReady, false); // variable to output the current x, y & z values of the accelerometer var valueX; var valueY; var valueZ; // when PhoneGap tells us everything is ready, start watching the accelerometer function onDeviceReady() { valueX = document.getElementById("valueX"); valueY = document.getElementById("valueY"); valueZ = document.getElementById("valueZ"); startWatch(); } // start monitoring the state of the accelerometer function startWatch() { var options = { frequency: 500 }; navigator.accelerometer.watchAcceleration(onSuccess, onError, options); } // if the z-axis has moved outside of our sensitivity threshold, move the aarvark's head in the appropriate direction function onSuccess(acceleration) { valueX.innerHTML = "X: " + acceleration.x; valueY.innerHTML = "Y: " + acceleration.y; valueZ.innerHTML = "Z: " + acceleration.z; } function onError() { alert('onError!'); } </script>

दरअसल, केवल एक चीज की व्याख्या करने की आवश्यकता है जो नाविक वस्तु है, जिसने हमें एक्सेलेरोमीटर से कनेक्ट करने की अनुमति दी है। यह वास्तव में PhoneGap का हिस्सा है। आप PhoneGap.com पर PhoneGap API के बारे में अधिक पढ़ सकते हैं।

यह केवल एप्लिकेशन चलाने और यह सुनिश्चित करने के लिए बना रहता है कि यह काम करता है:

प्लेटफ़ॉर्म की क्षमताओं के उदाहरण के रूप में, मैं डेविड राउसेट द्वारा उसी लेख से HTML5 गेम का स्क्रीनशॉट देना चाहता हूं:

परियोजना के उदाहरण :
MyYandex
एसवीजी डेमो
फोनगैप एक्सेलेरोमीटर नमूना

उपयोगी लिंक:
लाइव टाइल्स और बैकग्राउंड एजेंट
MSDN पर विंडोज फोन विकास केंद्र (विंडोज फोन कोर्स)
विंडोज फोन एसडीके 7.1
रूसी में विंडोज फोन विकास मंच

विंडोज फोन के लिए एप्लिकेशन विकसित करने के लिए एचटीएमएल 5 और जावास्क्रिप्ट का उपयोग करना

More articles: