如何在sapui5页面中创建div

Question

I am trying to put a signature pad in my code, but since that is initiating the a div element and putting scribble area into it. 我试图在我的代码中放置一个签名板，但是由于那是启动div元素并将涂鸦区域放入其中。 I am struck doing that. 我为此感到震惊。 http://www.zetakey.com/codesample-signature.php http://www.zetakey.com/codesample-signature.php

<script>
<div id="canvas"></div>
function signature() {
signatureCapture();
var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
alert(dataURL);
}
</script>

So how to initiate directly in view Thank You in Advance. 因此，如何在“谢谢您”中直接启动。

Answer 1

I'm not sure if I undersood correctly but here's an option to use the library you have given. 我不确定我是否能正确理解，但这是使用您提供的库的选项。

What I'm suggesting is you to use the sap.ui.core.HTML component to add the relevant html code that will instantiate the signature pad. 我建议您使用sap.ui.core.HTML组件添加将实例化签名板的相关html代码。 For this to work you need to have the Signature.js file (downloaded from the site) on your project with a minor change. 为此，您需要在项目上进行Signature.js文件（从网站下载）进行较小的更改。

Please, check the code sample. 请检查代码示例。

index.html index.html

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

    <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.m" 
        data-sap-ui-theme="sap_goldreflection">
    </script>

<script>
    sap.ui.localResources("util");
    sap.ui.localResources("test");
    jQuery.sap.require("util.Signature");
    var view = sap.ui.view({id:"idApp1", viewName:"teste.App", type:sap.ui.core.mvc.ViewType.JS});
    view.placeAt("content");                
</script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
</html>

test/App.view.js 测试/ App.view.js

sap.ui.jsview("test.App", {

    /** Specifies the Controller belonging to this View. 
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf teste.App
    */ 
    getControllerName : function() {
        return "test.App";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
    * Since the Controller is given to this method, its event handlers can be attached right away. 
    * @memberOf test.App
    */ 
    createContent : function(oController) {

        var mySignature = '<div id="wrapper"> ' +
        '            <p>Zetakey Signature Webapp</p> ' +
        '            <div id="canvas"> ' +
        '                Canvas is not supported. ' +
        '            </div> ' +
        ' ' +
        '            <script> ' +
        '                signatureCapture(); ' +
        '            </script> ' +
        '        </div>';

        var myhtml = new sap.ui.core.HTML();
        myhtml.setContent(mySignature);

        var clearBtn = new sap.m.Button({text: "Clear Signature", tap: function(evt) {
            signatureClear();
        }});

        return new sap.m.Page({
            title: "Title",
            content: [
                      myhtml,
                      clearBtn
            ]
        });
    },

});

util/Signature.js (as downloaded but I've added the first line to make it a ui5 module) util / Signature.js （下载后，但我添加了第一行使其成为ui5模块）

jQuery.sap.declare("util.Signature");

/*************************************************

 Signsend - The signature capture webapp sample using HTML5 Canvas

 Author: Jack Wong <jack.wong@zetakey.com>
 Copyright (c): 2014 Zetakey Solutions Limited, all rights reserved

 ...THE REST OF THE FILE...

Will this work for you? 这对您有用吗？ Let me know. 让我知道。

Regards. 问候。

Answer 2

Actually, I have created a signature pad control for this. 实际上，我为此创建了一个签名板控件。 So that you can encapsulate signature pad code in one control. 这样就可以将签名板代码封装在一个控件中。 http://jsbin.com/suquki/18/edit http://jsbin.com/suquki/18/edit

-D -D

如何在sapui5页面中创建div

问题描述

2 个解决方案

解决方案1
5 已采纳 2014-10-15 11:02:37

解决方案2
1 2014-10-17 04:36:06

如何在sapui5页面中创建div

问题描述

2 个解决方案

解决方案1 5 已采纳 2014-10-15 11:02:37

解决方案2 1 2014-10-17 04:36:06

解决方案1
5 已采纳 2014-10-15 11:02:37

解决方案2
1 2014-10-17 04:36:06