Domino DesignerでXPageを開いた際に開くのが遅い時の対応
Xpagesの設計をDesignerで開いた際に遅い件
Notes/Dominoエンジニア XPages担当の米原です
設計をDesigerで開いた際におそい～と思ったことはないでしょうか？？
設計が少ない場合はそうでもないのですが、
より複雑になった場合、カスタムコントロールの数が多くなっていきだんだん遅くなりますよね。
回避策としまして
- 冗長な処理をなくす
- DBを分ける
- PCのスペックを上げる。メモリ増幅 ＾＾；
などが考えられます。
ここでは取り上げる方法は、Desigerで設計を開いた際により早く開くことができるのと、
やりようによっては設計が見やすくもそうでなくもなります。
今回は1つのカスタムコントロールに5個のカスタムコントロールをセットしているもので試してみます。
これくらいなら特に遅くもならないのですが、実運用しているものでしたら、カスタムコントールの中に
カスタムコントロールはいっぱい入っているケースがあり、特にリピートコントロールは遅く成る要員の一つです
上図ではどのようなコントロールが配置されているとかがすぐわかるのでいいのはいいのですが
①のカスタムコントロールを開きまして、プロパティの設計定義を開きます。
そこに、XSPの形式で入力します。テスト的に下図のように設定します。
設定後に再度ccFormMain02を確認すると
test と表示されます。
ん、、、、見にくい
コメントは少し装飾しました。うんいい感じです
マークアップ式はこんな感じです↓
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<div style="border: 2px solid #A9A9A9; padding: 3px; margin: 5px;">
<h1>添付用のリッチテキスト</h1>
<div>
フォームA,Bで使用予定
</div>
</div>
</xp:view>
こんなふうに全て記入すると。。。
見やすくなりましたね、マークアップ箇所は基本のHTMLで記入するだけなのでお好みいに合わせて
カスタマイズできます。
ということで、見やすくなりました。めでたしめでたし！
あれれちょっと待った～表示が変わっただけなのでは、、、、
と思いきや、これで設計を開くときには今回のマークアップの設計定義を読み込むので
設計は格段に速く開くことが可能になります。
さすがに今回のサンプル的なのでは速さは体感できませんが、カスタムコントロールが増えて
複雑化してきたら結構ストレスがたまる位に起動が遅く成りますのでその際には体感できるかと思います。
それでは今回はここまでとします。
On-Premise Domino Data Access from XPages on Bluemix
Hybrid XPages appplication on Bluemix
XPages on Bluemix has been released as GA on May,2016, and developers can get the environment to develop XPages application easily on the cloud.
XPages code are compiled by "XPages runtime" for XPages on Bluemix. 
This "XPages runtime" is just for runtime environment and should not store any data like Notes Document. Therefore XPages developer usually bind the service called "XPages No SQL Database" as the data store.
In fact, this "XPages No SQL Database" is just NSF file and you can store the data and create the view, form, etc.
However this "XPages No SQL Database" service is part of "Bluemix Labs Catalog" so far and according to IBM Japan, this service should not been used as the production environment.
By this blog post, I tried to use on-premise Domino as the data store for XPages on Bluemix.
Of cause it does not need to be on-premise domino, for example domino on SoftLayer is same meaning. This approach just try to access to outside of bluemix as the data store. It seams to be called as Hybrid XPages Application on bluemix.
BluemixのXPagesSet up the domino server to be used from runtime
To run Hybrid XPages application, you need to configure your on-premise domino.
If you've already used "XPages No SQL Database" service, you maybe can ealiry imagine this, "/O=Bluemix" is used as Organization on bluemix. so xpages on bluemix cannot access to the on-premise domino without cross-certificate.
So as the first step, you need to create the new server id and then, when you deploy the application to the XPages runtime container of bluemix, you also attach the server id so that XPages on bluemix can communicate the on-premise servers through uploaded server id information.
Premise
- Installed Domino Designer, Administrator
- Installed Domino Designer 9.0.1FP6 or OpenNTF.org XPages Extension Library verson 15 or above
- Bluemix settings are configured by Domino Designer preference
- Already created XPages runtime application on Bluemix, and downloaded nsf and manifest file on your local
*Sorry, the screenshot are all in Japanese. I hope you still can understand where and what I explain.
Step 1: Create Server ID for Bluemix
- Launch Domino Administrator, then click "Configuration" tab
- From Tools pane, click "Registration" -> "Server".
- In the dialog, specify cert id and click [OK]
- Enter password for Cert ID[OK]
- If you don't need to change, then just Click Continue.
- Enter server information for bluemix. Click [Register All] to complete the process.
Server password is optional and usually you might not put password for server. but I added password since I give this server id to the bluemix. Also I recommend to output the server id as file by checking the checkbox.
OK, nothing special, just server id has been registered. the Different thing is you don't need to install domino server by this server id since you only have to pass this server id to the bluemix Xpages runtime.
*Warning 1： Please confirm the server name is contained in "LocalDomainServers" group.
*Warning 2： Please confirm the server which has the access from Bluemix XPages runtime should contains the LocalDomainServers or created server name in Trusted servers field under the server document -> "Security" tab.
Step2: Configure IBM Bluemix Manifest
- Open Domino Designer and then open Xpages application NSF which is created from Bluemix and downloaded.
- Open "Application property" -> "IBM Bluemix Manifest"
- On the right-top corner, Click Edit button in "Hybrid Configuration" section.
- Enter Hybrid configuration
- Remote Server Address ( APP_REMOTE_DATA_SERVER_ADDRESS)
: on-premise Domino IP addressのIP. - Remote Server Name (APP_REMOTE_DATA_SERVER_NAME)
: on-premise Domino server name(i.e. App01/ZetaDataBank)。 - Runtime Server Name (APP_RUNTIME_SERVER_NAME)
: Server name created above(i.e. bluemix/ZetaDataBank)。 - Runtime Server ID File (APP_RUNTIME_SERVER_IDFILE)
: Server id file created above - Runtime Server ID Password (APP_RUNTIME_SERVER_PASSWORD)
: Server id password if you specified. - Directory Assistance Enabled (APP_DA_ENABLED)
: Specify directory assistance enabled or not - Directory Assistance Domain (APP_DA_DOMAIN)
: domain name（i.e. ZetaDataBank）。 - Directory Assistance Address Book (APP_DA_ADDRESS_BOOK)
: Directory NSF which is necessary for authentication of hybrid environment (i.e. “names.nsf”)。
- Remote Server Address ( APP_REMOTE_DATA_SERVER_ADDRESS)
That's all.
I created one sample xpage below:
I specified on-premise domino view in this sample. (Line 5)
Deploy to the bluemix through Domino designer.
Bluemix service is going to reboot automatically. After wait for a while, access to the Xpage URL you created, and then if you get the on-premise data in the view, Success!
How to invoke function from string by XPages SSJS
What's the case you want to invoke the function from string?
There are many situations you want to invoke the function from string of function name. One of case is for example, you might want to switch the functions from the parameter value of HTML Get/Post method.
The example below is client-side javascript(CSJS) when it's triggered from the URL like "http://mydomain.com/ApplyFuncXAgent.xsp?func=callMe". Then switch the flow by the query parameter value of "func".
If you want to simplify the code above, you can write the code like below:
In this case, window object is used to retrieve the function object, then call the target function. However Server-side Javascript(SSJS) does not have the window object like CSJS. Therefore you need to tweak this code a little.
(1) Use "this" instead of "window"
(2) Use eval()
Both (1),(2) can get the same result.
To pass the parameters, Use call() or apply()
Now we could call the function from string of function name. Then if you want to pass the parameters as well when call the funcion, you can use call() or apply() functions. Actually this way is pretty same as CSJS.
For example, when I call the HTTP Get request like "http://mydomain.com/ApplyFuncXAgent.xsp?func=callMe&args=aa,bb". (I added [args=aa,bb] as the function argument's values.) , the SSJS code becomes like below:
The code above is the example of using call(). If you want to use apply(), then instead of passing the arguments separated by comma, pass the Array to the second argument of apply(). Below is the sample code:
Sample code of using XAgent
In my situation, I needed to get the JSON data from the many notes views as the asynchronous connection. (Passing the JSON data for Kendo UI Grid data.) So I decided to use the XAgent to return the JSON data, however I didn't want to create XAgent XPages as many as notes views. So the sample code below calls the function from the Get parameter value of function name and returns the JSON data by the specified function.
HTTP request is like this -> "http://mydomain.com/hoge.nsf/ApplyFuncXAgent.xsp?func=testFunc&args=aa,bb"
Below is the sample code of xpCommon.jss which contains the callFuncByString() above.
The advantage of this logic is avoiding to create many XAgent for notes views. But please remember that dynamically calling the functions from string value sometimes lose the serviceability of code. For example debugging purpose.
*This XAgent is just for example and for the real coding, please pay attention to the security when you use this concept since any SSJS standard functions can be called remotely if you don't add any restriction and it is very dangerous.
How to change the XPages radio button design by CSS
How to apply the CSS design to the radio button in general
If you want to change the radio button or checkbox design by css, usually you need to prepare the HTML source code like below:
The most important point in above HTML is having the "input" and "label" tag as sibling hierarchy. Based on this html, CSS should be specified as following:
First of all, hiding the original radio design by setting opacity 0.
In the next step, you can design the button as you like by using label tag like below.
The css above is the one example of customizing the radio button. The HTML and CSS would be like the image below:
The imporatnt point of this CSS is the selector of ”input[type="radio"]+label:before”.
The "+label" means to specify the label tag which is sibling of selected input tag (type is radio). By doing this, customizing the design of selected button.
You might wonder why you need to use label tag instead of using input tag directly. The reason why doing this is because input tag cannot use ":before" and input tag itself needs to be hidden. Therefore label tag is needed to customize the design for radio butto/checkbox.
Actually the explanation above is nothing related with XPages. So you will be able to find many design example if you google for the radio button design.
Now I would like to write the article for how to change the XPages radio button design by using only CSS.
Understand the HTML hierarchy of XPages radio button (radio button group)
To apply the similar design to the XPages radio button, first of all, we need to understand the HTML source code which XPages generates for radio button or radio button group control.
Below example is for radio button group control.
Then, HTML source code is like below. (Domino 9.0.1)
As you can see, label tag has the input tag as a child. In fact, this html structure makes much harder to customize the design for radio button / checkbox.
No way to inform the checked status of radio button to the label tag
In the first example of CSS above, there is selector of "input[type="radio"]:checked+label:before". This means "when radio button has been checked, change the sibling label design!". However as the XPages' HTML structure, you cannot use the selector like first example because generally CSS cannot specify the PARENT element by CHILD element status. ( in this case, input:checked cannot inform the status to the label tag)
（It is actually possible if you use the Javascript like jQuery though...）
Never give up! Applying the design only by CSS!
As I explained, XPages cannot use the example CSS above. So I needed to find the other way to apply the custom design.
Using "box-shadow"
After spending a lot of try and error, the CSS for XPages radio button control became like below:
In this CSS, "label:before" specifies the outline of radio button, and "label:after" specifies the checked radio design. The point of this CSS is masking the checked radio design by using "box-shadow" for checked and unchecked status.
I know this CSS is more complicated. However you don't need to apply any javascript or any other html attribute value, and control 100% by just using CSS.
By the way, this CSS does not work on IE8 or less since "box-shadow" is part of CSS3 and IE8 does not support it.
Deep dive more
For more advanced CSS style, for example, you can use the image for radio button design.
The XPages source code below applies the three different type of images and express checked status by using opacity.
The image below is the result. When you click the icon image, the image color is displayed clearly and unchecked radio image turns to subtle color.
