作者: zgh149

分類
React Native

[React Native] Config.h not found

使用 Xcode 載入並編譯 ReactNatie 的 ios項目時出現“Config.h not found” in mutex.h
移動到 /專案目錄/node_modules/react-native/third-party/glog-0.3.4/
執行 ./configure
再執行 make
解決該問題之後，重新編譯發生 gflags.h not found。
參考此篇

分類
React Native

[React Native] Error: Unable to resolve module ModuleName from xxx.js

Error Message :

error: Error: Unable to resolve module react-navigation-redux-helpers from /project_path/App/Navigation/utils/redux.js: react-navigation-redux-helpers could not be found within the project or in these directories:
node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
2 | createReactNavigationReduxMiddleware,
3 | createReduxBoundAddListener,
> 4 | } from 'react-navigation-redux-helpers';
| ^
5 |
6 | const middleware = createReactNavigationReduxMiddleware(
7 | "root",

 
1.go to https://www.npmjs.com/ and input your missing module name as below

it will show match modules

 
3. click module link on page then show module info

4. Go to your project root directory and type install command in terminal
npm i react-navigation-redux-helpers
or using “rnpm installl react-navigation-redux-helpers” if you installed rnpm
5. Terminate running Node and restart it by type “npm start”
6. Press Reload JS button on Device
 
 

分類
React Native

[React Native] 初始化專案名稱時不要加入底線

在初始化專案時除了底線，其他特殊字元(！＠＃＄％＾＆＊（）＿＋)最好也不要加入。
否則使用 npx react-native init ProjectName 會出現以下錯誤

...
bash: /ProjectName/node_modules/react-native/scripts/generate-specs.sh: No such file or directory
Command PhaseScriptExecution failed with a nonzero exit code
...
...
 The following build commands failed:
	PhaseScriptExecution [CP-User]\ Generate\ Specs /Test06291048-dsjrkgluxojtqccvgedklqhljofa/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-F3218021401063C6A0EDA18B9CC60218.sh
(1 failure)

基本上可以看到就是 generate-specs.sh 發生了 No such file or directory。
有時間再去看看內容吧。
 

分類
ASP.NET

[ASP.NET] 使用 Conveyor by Keyoti 讓 localhost 轉成可連結的 IP

使用ASP.NET 在本機執行“開始偵錯”時，ASP.NET 會在本機上啟動https://localhost:xxx的網站伺服器。該網站伺服器讓開發者直接檢視網頁的呈現畫面，但卻無法使用行動裝置來觀看該網頁。
可以使用 Android Simulator 加上 Conveyor by Keyoti (VS plugin)來解決這個問題。
Android Simulator 透過安裝 Android Studio 或 Xamarin 後再去 AVD Manager 設定 Simulator 來取得，這邊就不再詳述。
重點為 Conveyor by Keyoti，這個套件可以方便的將 localhost 轉為 IP，可讓行動裝置透過該IP來檢視網站。
Conveyor by Keyoti 和一般的VS套件相同，使用NuGet或官網下載安裝皆可。
安裝之後的另一個重點在於修改防火牆設定，讓該套件透過指定的Port來轉址。指定的Port其實就是一開始在本機執行”開始偵錯“由ASP.NET選擇的Port。
範例如下為一個最簡單的 WebForm Example 執行 “開始偵錯” 後的畫面。

可以看到該網站的URL為 https://localhost:44358/
44358 就是在防火牆需要另外設定的 Port，設定步驟如下(參考官網)

Manually configuring your firewall
Add an inbound firewall rule allowing access to the TCP port given in the Remote URL.
1.Open Windows 'Start' and type WF.msc.
2.Click 'Inbound Rules' on the left.
3.Click 'New Rules' on the right.
4.Choose 'Port' in the new dialog, then 'Next'.
5.Select TCP, and enter the port from the Remote URL next to 'Specific local ports' (45455-45500), then 'Next'.
6.Next, and next (you may want to disable 'Public'), give it a name like 'Conveyor: web dev server access enabled'.

下方畫面為安裝完Conveyor by Keyoti 後 在Visual Studio執行”開始偵錯”的提示畫面

中間的 https://192.168.59.1:45455 就是 Conveyor by Keyoti轉址後的結果。使用 Android Simulator 連線該URL 畫面如下
 

 
完成之後就可非常方便的透過行動裝置來檢視網站畫面。
事實上在使用 Conveyor by Keyoti之前還有嘗試用過 ngrok 和 http-server。
但這兩個工具在設定及執行上都不如預期的方便，反而是 Conveyor by Keyoti 不僅安裝方便，設定也只需要調整防火牆 Port。

分類
ASP.NET Web 前端

[ASP.NET] 在TextBox輸入內容後自動跳轉到指定UI元件

需求:

有些資料欄位在UI上設計為分段或分區輸入，如下方的手機欄位分為三個區塊。

使用者希望能夠在輸入完前一個區塊後自動跳轉到後一個區塊(1跳2，2跳3)。
以下使用JavaScript來實作需求，首先實作跳轉方法。

            //輸入內容到限制長度後跳轉至指定元件
            function JumpToSpecifiedItem(currentItem, specificedItem) {
                if (currentItem.value.length == currentItem.maxLength) {
                    currentItem.form.elements[specificedItem].focus();
                }
            }

方法的第一個參數為目前使用者正在輸入的UI元件，這邊是透過maxLength來判斷是否要跳轉。
第二個參數為要跳轉的目標UI元件，該元件透過呼叫focus來達到跳轉。
接著就是UI元件部分。

<label id ="userPhoneNumberLabel">手機</label>
<div class="form-inline">
<asp:TextBox runat="server" ID="userPhoneNumberFirstSection" MaxLength="4" onKeyUp="JumpToSpecifiedItem(this,'ctl00$MainContent$userPhoneNumberSecondSection')"/>
<asp:TextBox runat="server" ID="userPhoneNumberSecondSection" MaxLength="3" onKeyUp="JumpToSpecifiedItem(this,'ctl00$MainContent$userPhoneNumberThirdSection')"/>
<asp:TextBox runat="server" ID="userPhoneNumberThirdSection" MaxLength="3" placeholder="000"/>
</div>

重點為

1.要設定ID
2.要設定MaxLength(因為是透過該值來判斷是否跳轉，當然也可以使用別的值)
3.呼叫JumpToSpecifiedItem方法，第2個參數要確認實際的ID值。(透過實際網頁上點擊F12來確認)
 
 

分類
React Native

[React Native] Xcode 編譯緩慢(30min~50min)問題

這是接手新專案的第一個Issue。狀況如下
每一次使用Xcode編譯ReactNative的ios專案都要花費30~50分鐘，就連最基本的HelloWorld也要20分。
ReactNative 環境參數如下

Environment:
OS: macOS 11.4
Node: 12.13.0
Yarn: 1.22.10
npm: 6.12.0
Watchman: Not Found
Xcode: Xcode 12.4 Build version 12D4e
Android Studio: 4.1 AI-201.8743.12.41.7199119
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ~0.55.2 => 0.55.4

因為是舊專案了，所以ReactNative版本離現在有一段差距(0.55.2)
本來懷疑是Apple M1 問題(Ｍac Mini 2020)，查來查去也沒發現太多內容。
調整Xcode設定也調了兩三天，沒有頭緒！！
還好找到一篇
https://stackoverflow.com/questions/49436853/slow-compile-times-with-react-native-ios-app
基本上就是調整 Xcode -> Build Phases -> Bundle React Native code and Images -> 把 Run Script : For install builds only 打勾

基本上可以把編譯時間從30~60分，降到1分以內。
雖然還需要了解選項到底在做啥，不過先解決燃眉之急吧！！
 

分類
Telerik

[Telerik] 如何處理匯出檔案(Excel)中的Leading Zeros

Leading Zero : 在Excel中輸入0開頭的內容時，0會自動忽略。
同理，使用Telerik匯出檔案(.xls)時若開頭為0的內容也也會自動忽略開頭0。如下方在網頁中顯示的電話欄位

在網頁上顯示的很正常，在DB的資料也是一模一樣的內容。
但匯出檔案後在檔案中(.xls)就會發生 Leading Zero。如下

解決的方式也很簡單，在匯出檔案前先對內容作處理，如下

protected void UserDataGrid_ExportCellFormatting(object sender, ExportCellFormattingEventArgs exportCellData)
{
	string uniqueNameInColumn = exportCellData.FormattedColumn.UniqueName;
	string textInColumn = exportCellData.Cell.Text;
	//avoid leading zero in export file(.xls)
	exportCellData.Cell.Text = String.Format("&nbsp;{0}", textInColumn);
}

其中UserDataGrid_ExportCellFormatting方法為Telerik:RadGrid的事件觸發方法，在匯出檔案前會先觸發該方法。

<telerik:RadGrid OnExportCellFormatting="UserDataGrid_ExportCellFormatting" ...>

重點為在方法中透過String.Format轉換內容

	//avoid leading zero in export file(.xls)
	exportCellData.Cell.Text = String.Format("&nbsp;{0}", textInColumn);

如此在匯出檔案中就可避免Leading Zeros。
 

分類
Telerik

[Telerik] 在匯出檔案前調整 RadGrid Column 的 Cell 內容

需求如標題。
原因是操作者希望在網頁看到的和匯出檔案的是兩回事。(但這兩回事必須存在某種規則)
好吧，基本上就是在匯出檔案之前做些手腳。
RadGrid提供OnExportCellFormatting事件，該事件會回呼到自定義方法讓我們可以在匯出檔案之前先對RadGrid的column內容作調整。如下

<telerik:RadGrid OnExportCellFormatting="UserDataGrid_ExportCellFormatting" ... >
接著在UserDataGrid_ExportCellFormatting方法中做手腳!!
protected void UserDataGrid_ExportCellFormatting(object sender, ExportCellFormattingEventArgs exportCellData)
{
	string uniqueNameInColumn = exportCellData.FormattedColumn.UniqueName;
	string textInColumn = exportCellData.Cell.Text;
	switch (uniqueNameInColumn)
	{
		case "Name":
			exportCellData.Cell.Text = textInColumn + 1;
			break;
		case "ID":
			exportCellData.Cell.Text = textInColumn + 2;
			break;
	}
}
值得注意的是可以從 ExportCellFormattingEventArgs 取得相對應的資訊。如上方的
1.FormattedColumn.UniqueName 會對應的 column 的 unique name。透過這個unique name來確認是哪個 column
2.Cell.Text 則是該 column 的 cell 內容，就是修改這個值來達到匯出檔案不同於網頁內容的要求。
如上就是對column名稱為Name的cell內容+1，對column名稱為 ID 的 cell 內容+2
分類
Telerik

[Telerik] 在匯出檔案中顯示Display為false的column

有時候在RadGrid的Column會設定 Display="false" 讓column隱身。如下

<telerik:GridBoundColumn Display="false" DataField="VT00" HeaderText="VT00" UniqueName="VT00" >
</telerik:GridBoundColumn>

但這些隱身的column也不會出現在匯出的檔案中。
官方的解法是在匯出之前將這些隱身column的Display設為true即可。如下

protected void ExportButton_Click(object sender, EventArgs e)
{
    UserDataGrid.MasterTableView.GetColumn("VT00").Display = true;
    UserDataGrid.MasterTableView.ExportToExcel();
}

 

分類
jQuery Telerik

使用jQuery取得Relerik:RadComboBox的值

其實就跟取得一般UI元件的值相同。步驟如下

1.從網頁的source code確定該UI的正確ID
2.使用jQuery透過UI的正確ID並取值

網頁畫面如下，UI元件是telerik:RadComboBox。需求是透過jQuery取得”請輸入學校”的值

.aspx


<div id="ctl00_MainContent_cboFirstColleges" class="RadComboBox RadComboBox_Default" minlength="2" style="width:250px;white-space:normal;">
	<table summary="combobox" style="border-width:0;border-collapse:collapse;width:100%">
		<tbody><tr>
			<td class="rcbInputCell rcbInputCellLeft" style="width:100%;"><input name="ctl00$MainContent$cboFirstColleges" type="text" class="rcbInput radPreventDecorate valid" id="ctl00_MainContent_cboFirstColleges_Input" value="憭批?憭批飛" autocomplete="off" aria-invalid="false"></td><td class="rcbArrowCell rcbArrowCellRight"><a id="ctl00_MainContent_cboFirstColleges_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
		</tr>
	</tbody></table><input id="ctl00_MainContent_cboFirstColleges_ClientState" name="ctl00_MainContent_cboFirstColleges_ClientState" type="hidden" autocomplete="off" value="{&quot;logEntries&quot;:[],&quot;value&quot;:&quot;&quot;,&quot;text&quot;:&quot;隢撓?亙飛??quot;,&quot;enabled&quot;:true,&quot;checkedIndices&quot;:[],&quot;checkedItemsTextOverflows&quot;:false}">
</div>

其中ctl00_MainContent_cboFirstColleges就是UI的ID。接下來就是使用jQuery

透過ID取得值。

.cs

function CheckUserHighestEducationSchool() {
	let userHighestEducationSchool = $("#ctl00_MainContent_cboFirstColleges").val();
}

userHighestEducationSchool就是存放”請輸入學校”。