使用移动主题控制 XPages CSS 的顺序答案

【问题标题】：Controlling order of XPages CSS using mobile theme使用移动主题控制 XPages CSS 的顺序
【发布时间】：2013-09-23 12:58:38
【问题描述】：

当使用 XPages Mobile 主题时，我作为资源添加到页面的 CSS 文件被添加到 IBM 作为移动主题的一部分提供的 CSS 文件之前。

例子：

<xp:this.resources>
  <xp:styleSheet href="css/font-awesome/css/font-awesome.css"></xp:styleSheet>
  <xp:styleSheet href="/mobile.css"></xp:styleSheet>
</xp:this.resources>

生成以下 HTML

<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/css/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/mobile.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/dojox/mobile/themes/iphone/iphone.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customMobile.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/css/customIphone.css">

有没有办法强制在 IBM 之后添加我自己的自定义控件？当我自己的 CSS 在链中排在首位时，控制样式更具挑战性（但并非不可能）。

【问题讨论】：

您能说明如何将它们包含在您的 XPage 中吗？我假设它们被作为资源包含在 ? 下

标签： css mobile xpages

【解决方案1】：

此答案假定使用移动工具不会改变加载对象的方式。

我使用了一个主题，我的 CSS 文件出现在生成的 CSS 文件之后。

<theme extends="webstandard">
    <resource>
        <content-type>text/css</content-type>
        <href>crmStyle.css</href>
    </resource>
</theme>

在使用主题的页面上生成以下内容：

<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/dojoroot-1.8.1/ibm/domino/widget/layout/css/domino-default.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xsp.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspLTR.css">
<link rel="stylesheet" type="text/css" href="/domjava/xsp/theme/webstandard/xspSF.css">
<link rel="stylesheet" type="text/css" href="/Path/crmStyle.css">

为了测试带有移动主题的 CSS 文件，我执行了以下操作：

创建新页面 m_Landing。添加 CSS 文件作为资源。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex" xmlns:xc="http://www.ibm.com/xsp/custom" themeId="MyTheme">
    <xp:this.resources>
        <xp:styleSheet href="/crmStyle.css"></xp:styleSheet>
    </xp:this.resources>
</xp:view>

生成的 HTML：

<head>
<title></title>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/dojo/dojo.js" djConfig="locale: 'en-us'"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/ibm/xsp/widget/layout/layers/xspClientDojo.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="/Path/crmStyle.css">
</head>

【讨论】：

你能证明应用了移动主题吗？我的经验是，当指定移动主题时，它会忽略应用程序的主题设置。
嗯。实际上，我只是用移动主题测试它（创建一个新的m_XPage，我将styleSheet作为资源包含在内，它仍然出现在生成的文件之后。你使用的是什么版本的Designer？
这令人费解。在您的示例中，我实际上没有看到 IBM 为支持移动设备而提供的任何移动 CSS 文件。我希望看到 customMobile.css 和其他两个适用于 Android 或 iPhone 的 CSS。它让我的自定义 CSS 出现在挑战之后。完全删除它们不是一种选择。我正在为 Designer 和 Domino 运行 9.0。
也许我们对移动主题的定义不同。您是否遵循与我相同的工作流程？（编辑 XSP 属性，创建带前缀的 XPage）？
根据您生成的 HTML，我猜测 XPage 没有任何实际的移动控件。仅当在 XPage 上定义了一个或多个移动控件时才添加 IBM CSS 文件（无论移动前缀设置如何）。我的测试显示，如果我在设置启用移动前缀后构建应用程序，则排除现有的主题资源。

【解决方案2】：

我找到了解决方案。我不确定它是否符合 W3 规范，但我可以通过将其作为 XML 代码放置在 XPage 中来简单地将链接添加到正文中。

<link rel="stylesheet" type="text/css" href="/redpill/graph.nsf/mobile.css"></link>

【讨论】：