2013年7月31日 星期三

WCF webHttpEndpoint Help Page

Tool: Visual Studio 2012
OS: Windows 8

使用jQuery或AJAX呼叫WCF服務時,可以透過webHttpEndpoint ,開放Help Page,提供給開發人員參考。

  • 設定方式,以VS2012建立的WCF Service範本專案為例:

image

  • 新增webHttpEndpoint

image

image

  • 啟用help page

image

  • 設定服務

image

image

  • 新增endpoint

image

image

  • 在browser執行service,url後方加上"help"

http://localhost:36815/Service.svc/help

  • 就可以看到說明頁

image

image

web.config檔案設定

<?xml version="1.0"?>
<configuration>
  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="false" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5"/>
  </system.web>
  <system.serviceModel>
    <services>
      <service name="Service">     
        <endpoint contract="IService" kind="webHttpEndpoint" endpointConfiguration="se" />
      </service>
    </services>
    <standardEndpoints>
      <webHttpEndpoint>
        <standardEndpoint name="se" helpEnabled="true" />
      </webHttpEndpoint>
    </standardEndpoints>
    <behaviors>
      <serviceBehaviors>
        <behavior>
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true"/>
          <serviceDebug includeExceptionDetailInFaults="false"/>
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <protocolMapping>
      <remove scheme="http" />
      <add scheme="http" binding="wsHttpBinding" />
      <add scheme="https" binding="basicHttpsBinding" />
    </protocolMapping>   
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <directoryBrowse enabled="true"/>
  </system.webServer>
</configuration>

2013年7月17日 星期三

ERROR ( message:WAS 服務無法使用 - 請先嘗試啟動服務。 )

 

在windows 8 執行

appcmd list wp

查看目前IIS w3wp.exe Process時,出現錯誤訊息

ERROR ( message:WAS 服務無法使用 - 請先嘗試啟動服務。 )

image

此屬權限不夠,改用admin執行Command Prompt

image

就可以正確執行了

image

jQuery Mobile 好用的日期選擇plugin - DateBox

提供許多種日期、時間的UI介面,有支援中文。

官網在http://dev.jtsage.com/jQM-DateBox/

下載URL:http://dev.jtsage.com/jQM-DateBox/demos/install.html

在jQuery Mobile的網頁中,在Input中直接設定data-role與mode:

<input type="date" data-role="datebox" data-options='{"mode": "calbox"}'>

執行時,只要點選文字方塊後方的圖示,就會顯示月曆

image

 

範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="Content/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
</head>
<body>
    <div data-role="page" id="Page1">
        <div data-role="header" data-position="fixed">
            <h1>jQuery Mobile</h1>
        </div>
        <!-- /header -->
        <div data-role="content">
            <input type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
        </div>
        <!-- /content -->
        <div data-role="footer" data-position="fixed">
            <h4>©Copyright 2012 Tony & Vivid </h4>
        </div>
        <!-- /footer -->
    </div>

    <script src="Scripts/jquery-2.0.2.js"></script>
    <script>
    </script>
    <script src="Scripts/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.zh-TW.utf8.js"></script>
    <script>
    </script>
</body>
</html>

2013年7月16日 星期二

自訂jQuery Mobile網頁按鈕圖示

若不想要使用內建的jQuery Mobile的按鈕圖示,也不想要自己設計,可以到此網站下載更多現成的圖示

http://www.andymatthews.net/code/jquery-mobile-icon-pack/

預設有兩套圖示可使用:Font Awesome Icons與Origonal Icons,使用方式差不多,以下以Font Awesome Icons為例:

http://www.andymatthews.net/code/jQuery-Mobile-Icon-Pack/font-awesome/

點選畫面上的 "Download the Icon Pack"下載zip檔案

image

跳到此頁面,選擇"download it”

image

解壓縮下載的zip檔案,將font、Images目錄,以及jqm-icon-pack-fa.css加入自己的jQuery Mobile網站

image

 

在jQuery Mobile網頁,引用jqm-icon-pack-fa.css,每一個button設定自己喜歡的data-icon attribute

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="Content/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
   <link href="Content/jqm-icon-pack-fa.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.0.2.js"></script>
    <script src="Scripts/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
    <div data-role="page" id="Page1">
        <div data-role="header" data-position="fixed">
            <h1>jQuery Mobile</h1>
        </div>
        <!-- /header -->
        <div data-role="content">
        </div>
        <!-- /content -->
        <div data-role="footer" data-theme="d" class="ui-bar">
            <div>
                <a data-role="button" data-icon="hand-left">新增</a>
                <a data-role="button" data-icon="hand-right">移除</a>
                <a data-role="button" data-icon="hand-up">上一筆</a>
                <a data-role="button" data-icon="hand-down">上一筆</a>
            </div>
        </div>
        <!-- /footer -->
    </div>
 
</body>
</html>

執行的效果:

image

 

您也可以挑選喜歡的圖示,打包後下載:http://jqmiconpack.andymatthews.net/#/

image

2013年7月15日 星期一

關於jQuery、jQuery Mobile SourceMap檔

 

以往在開發接段使用jQuery或jQuery Mobile時,我們會引用Development版,如jquery-2.0.2.js或jquery.mobile-1.3.1.js檔案。而在上線階段時使用Production版,jquery-2.0.2.min.js或jquery.mobile-1.3.1.min.js。

 

不過jQuery1.9版以及jQuery Mobile 1.3.1版之後,都有SourceMap檔案,可以自動對照Development版與Production版,放便在上線階段除錯,只要將它們放在相同目錄中即可。例如一個使用jQuery與jQueryMobile的網頁如下,引皆用Production版Library:

image

在Chrome按F12,進入除錯模式時,程式碼是有縮排的,被對應到Develoment版Library,這是Source Map檔案帶來的好處:

image

因為預設Chrome的設定勾選了”Enable Source Maps”,若將之清除選取

image

則除錯階段看到的是Production的版本

image

Mobile Emulator for Visual Studio 2012

 

整合Visual Studio 2012的iPhone、IPad模擬程式,含試用版。從以下網站下載:

http://visualstudiogallery.msdn.microsoft.com/6bed5adb-1d6a-483d-9e22-ae0f88ec4477

image

下載完成後,進行安裝

image

image

imageimage

安裝完成後,第一次執行ElectricMobileStudio2012.exe檔案,會要求輸入序號,或"試用",選"試用"

image

啟用Visual Studio 2012整合

image

image

然後就可以看到此畫面

image

重開Visual Studio 2012,執行程式時,便可以選iPhone或iPad模擬器

image

View in Browser

image

 

image

總網頁瀏覽量