visual studio lightswitch HTML : 如何在浏览屏幕上放置静态文本

Question

我想向我的项目添加一些帮助屏幕，但我不知道如何向我的屏幕添加静态文本。我创建了一个名为帮助的浏览屏幕并打开了 Help.isml.js。 JavaScript 有办法将文本输出到屏幕吗？或者可能放置 HTML？我以为它会放在这里：

myapp.Help.created = function (screen) {
    // Write code here.
    //put static text here ...
    //I tried this but it looks a bit strange
    document.write('<b>Getting Started</b>');
};

我发现我可以使用这个：

var myWindow = window.open("", "MsgWindow", "width=200, height=100");
 myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

我希望收集更多建议。谢谢

Answer 1

使用document.write("Your content here");

Answer 2

虽然有许多不同的选项供您使用，但最好的方法可能是简单地将本地字符串属性数据项添加到您的屏幕。

采用这种方法将确保文本成为屏幕响应式布局的一部分并适应浏览器 windows 大小。

可以通过首先选择屏幕设计器顶部的 "Add Data Item..." 按钮并指定属性详细信息来完成添加，如下所示：

然后可以将此属性拖到屏幕的内容树中，如下所示：

最后，您需要将以下代码添加到屏幕的创建方法中（通过选择屏幕设计器顶部的 "Write Code\General Methods\created" 按钮）：

myapp.Browse.created = function (screen) {
    // Write code here.
    screen.HelpProperty = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
};

这将导致以下浏览屏幕：

通过在标准 LightSwitch 屏幕设计器中工作，可以轻松扩展此方法以实现更传统的弹出式帮助系统，如下所示：

这是通过将 HelpProperty 的控件类型从 Text 更改为 Paragraph 然后将其拖到新的 Popup 上来实现的。然后可以通过添加一个按钮来访问帮助以显示这个添加的弹出窗口。

以下显示了应如何针对此类方法构建屏幕设计：

添加按钮的设置如下：

如果您想在此技术的基础上进行构建，以下博客 post 包含一个提供特定条目帮助系统的相关示例：

Visual Studio LightSwitch Team Blog: Interacting with Content Items on the Screen with the LightSwitch API (Kevin Mehlhaff)

Answer 3

@ChrisCook 创建的带有文本框的替代选项是

element.innerText = "Text Here";

使用元素命令，您可以更改字体大小、颜色和粗细...

示例：

myapp.TestScreen.Status_postRender = function (element, contentItem) {
   element.innerText = "Text Here";
   element.style.fontWeight = 'bold';
   element.style.fontSize = "18px";
   element.style.color = "blue";
};

这也可以用在 table 上来改变文本，例如值 < 0 可以是红色，值大于 0 可以是绿色

Answer 4

自从 Lightswitch 博客被删除后，这里重新发布了最初由 Kevin Mehlhaff 建议的片段：

// Adds description help to each content item   
myapp.AddEditCustomer.columns_postRender = function (element, contentItem) {   
    // Look for content items with type either 'details' (a navigation property)    
    // or 'value' (non-relationship properties)    
    var contentItemTypes = [];   
    contentItemTypes.push(msls.ContentItemKind.details);   
    contentItemTypes.push(msls.ContentItemKind.value);   
    // Find these content items starting from the children of the 'columns' content item    
    var matchingContentItems = findMatchingContentItems(contentItemTypes, contentItem);   
    // Find all LABEL elements that are descendants of the parent element rendering the    
    // 'columns' content item    
    var $matchingElements = $(element).find("label");   
    $.each($matchingElements, function (index) {   
        // Set the LABEL element to float left    
        $(this).css("float", "left");   
        // Create a new A element that will display the '?' link    
        var $help = $("<a href='#'>?</a>");   
        $help.css({ "cursor": "pointer", "display": "block", "float": "right" });   
        var correspondingContentItem = matchingContentItems[index];   
        // Add a click event handler to display the content item description    
        $help.on('click', function (e) {   
            e.preventDefault();   
            contentItem.screen.HelpText = correspondingContentItem.description;   
            contentItem.screen.showPopup('Help');   
        });   
        // Insert the help element as a sibling after the LABEL element    
        $(this).after($help);   
    });   
};    
function findMatchingContentItems(arrayOfTypes, parentContentItem) {   
    var matches = [];   
    // Return an empty array if no children to look at    
    if (parentContentItem.children.length == 0) {   
        return matches;   
    }   
    $.each(parentContentItem.children, function (i, contentItem) {   
        $.each(arrayOfTypes, function (j, type) {   
            if (contentItem.kind == type) {   
                matches.push(contentItem);   
            }   
        });   
        // Check the child's children for matches    
        matches = matches.concat(findMatchingContentItems(arrayOfTypes, contentItem));   
    });   
    return matches;   
};

visual studio lightswitch HTML : 如何在浏览屏幕上放置静态文本

visual studio lightswitch HTML : How do I place static text on a Browse screen

javascript

html

lightswitch-2013