Question

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

＆＃13;

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>');
};

＆＃13;

＆＃13; 我发现我可以使用它：

＆＃13;

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

＆＃13;

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

Answer 1

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

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

添加此功能可以先选择＆＃34;添加数据项...＆＃34;屏幕设计器顶部的按钮，并按如下所示指定属性详细信息：

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

最后，您需要将以下代码添加到屏幕的创建方法中（通过选择屏幕顶部的＆＃34;编写代码\常规方法\创建＆＃34;按钮）设计师）：

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上来实现的。然后可以通过添加一个Button来显示添加的Popup来访问帮助。

以下显示了如何为这种方法构建屏幕设计：

以下显示添加按钮的设置：

如果您希望以此技术为基础，以下博文包含一个相关示例，该示例提供了一个特定于条目的帮助系统：

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

Answer 2

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

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";
};

这可以在表格上用来改变文本，例如值＆lt; 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：如何在浏览屏幕上放置静态文本

4 个答案: