WebSharper साइटें: एक दो-पृष्ठ वेबसाइट बनाना

मुझे वेबसर्पर साइटों का उपयोग करके आपको सबसे सरल पूर्ण उदाहरण दिखाते हैं जो 2.1 रिलीज होगी।



दो पृष्ठों (और दो कार्यों) की एक वेबसाइट को परिभाषित करें:

type Action = | Home | AboutUs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कच्चे SiteletExample1.fs देखें यह GitHub द्वारा आपके लिए लाया गया है।

अब F # HTML द्वारा निर्मित कंबाइनर्स का उपयोग करके वेबसाइट टेम्पलेट को मैश कर दें। एक टेम्पलेट केवल एक फ़ंक्शन है जो शरीर को प्राप्त करता है और इसे सजाता है:

 module View = let ( => ) ab = A [HRef b] -< [Text a] let Page title body = PageContent <| fun ctx -> { Page.Default with Title = Some title Body = H1 [Text title] :: UL [ LI ["Home" => ctx.Link Home] LI ["AboutUs" => ctx.Link AboutUs] ] :: body }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ध्यान देने योग्य दो बातें:

1. एफ # आपको अपने स्वयं के सिंटैक्स को परिभाषित करने की अनुमति देता है और उदाहरण इसे स्वतंत्र रूप से उपयोग करता है (=>)।
2. URL को मैन्युअल रूप से जनरेट करने के बजाय, आप कार्रवाई के लिए लिंक बनाने के लिए संदर्भ पूछ रहे हैं। यह सुरक्षा सुनिश्चित करता है: यदि आप गृह कार्रवाई का नाम बदलते हैं, तो परियोजना संकलन बंद कर देगी; यदि आप इसे किसी अन्य URL पर ले जाते हैं, तो लिंक सही रहेंगे।

अब साइटों को परिभाषित करते हैं:

 module Site = let HomePage = View.Page "Home" [ Div [Text "Welcome to our website!"] ] |> Sitelet.Content "/" Home let AboutUsPage = View.Page "About Us" [ Div [Text "TODO: describe us."] ] |> Sitelet.Content "/about" AboutUs let Main = Sitelet.Sum [ HomePage AboutUsPage ]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HomePage और AboutUsPage एक URL और एक कार्रवाई के साथ एकल पृष्ठ साइटलेट हैं। उन्हें एक वेबसाइट में जोड़ दिया जाता है जो सम ऑपरेटर का उपयोग करता है।

अब थोड़ा प्रशासनिक बॉयलरप्लेट:

 type Website() = interface IWebsite<Action> with member this.Actions = [] member this.Sitelet = Site.Main [<assembly: WebsiteAttribute(typeof<Website>)>] do ()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और वह सब है! आइए इस पर एक नज़र डालें:





अभी तक तो अच्छा है। पृष्ठों में वे URL होते हैं जिनकी हमें उम्मीद थी और मेनू में लिंक काम करते हैं।

ऊपर वर्णित है कि किसी भी सभ्य वेब फ्रेमवर्क द्वारा किया जा सकता है। चलो सीमाओं को धक्का दें और इसे थोड़ा ऊपर मसाला दें। कुछ F # लाइनें जोड़ें जो जावास्क्रिप्ट में संकलित होंगी:

 module Client = open IntelliFactory.WebSharper.Html [<JavaScript>] let Button label = Button [Text label] |>! OnClick (fun button _ -> button.Text <- "CLICKED") type ButtonControl(label: string) = inherit Web.Control() new () = new ButtonControl("unlabelled") [<JavaScript>] override this.Body = Button label :> _
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

एक बटन है जो दबाए जाने पर, शिलालेख को अपने आप बदल देता है। और एक नियंत्रण है।

अब, इस तथ्य के बावजूद कि बटन पूरी तरह से क्लाइंट पर रहता है (वास्तव में, यह डोम नोड्स बनाता है), नियंत्रण एक क्वांटम संक्रमण करता है: निर्माण को सर्वर पर निष्पादित किया जाता है, और क्लाइंट पर बॉडी निष्पादित की जाती है।

लेकिन इसका मतलब है कि आप क्लाइंट और सर्वर को गोंद करने के लिए कंट्रोल का उपयोग कर सकते हैं। आइए अब AboutUs पृष्ठ को बदलें:

 let AboutUsPage = View.Page "About Us" [ Div [Text "TODO: describe us."] Div [new Client.ButtonControl("Click me!")] ] |> Sitelet.Content "/about" AboutUs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहाँ यह है। अब उपयोगकर्ता F # में लागू जावास्क्रिप्ट के साथ पुश बटन को देखेगा, जहां आप इसकी अपेक्षा करते हैं। स्क्रिप्ट टैग के बारे में कोई चिंता नहीं है, कोई निर्भरता नहीं है, "ondocumentready" के साथ कोई चिंता नहीं है, सब कुछ बस काम करता है:





नीचे पूरी सूची दी गई है। संस्करण 2.1 जारी होने के बाद, आप इसे स्वयं शुरू कर सकते हैं। हमारे साथ रहो!

 namespace WebSharperSiteletsProject open System open System.IO open System.Web open IntelliFactory.Html open IntelliFactory.WebSharper open IntelliFactory.WebSharper.Sitelets type Action = | Home | AboutUs module View = let ( => ) ab = A [HRef b] -< [Text a] let Page title body = PageContent <| fun ctx -> { Page.Default with Title = Some title Body = H1 [Text title] :: UL [ LI ["Home" => ctx.Link Home] LI ["AboutUs" => ctx.Link AboutUs] ] :: body } module Client = open IntelliFactory.WebSharper.Html [<JavaScript>] let Button label = Button [Text label] |>! OnClick (fun button _ -> button.Text <- "CLICKED") type ButtonControl(label: string) = inherit Web.Control() new () = new ButtonControl("unlabelled") [<JavaScript>] override this.Body = Button label :> _ module Site = let HomePage = View.Page "Home" [ Div [Text "Welcome to our website!"] ] |> Sitelet.Content "/" Home let AboutUsPage = View.Page "About Us" [ Div [Text "TODO: describe us."] Div [new Client.ButtonControl("Click me!")] ] |> Sitelet.Content "/about" AboutUs let Main = Sitelet.Sum [ HomePage AboutUsPage ] type Website() = interface IWebsite<Action> with member this.Actions = [] member this.Sitelet = Site.Main [<assembly: WebsiteAttribute(typeof<Website>)>] do ()