登录界面输入框,FineReport中如何自定义登录界面

平凡状态下,进入Windows界面之前都有二个签到进度,如何在签到前让系统推行脚本呢?下边介绍一种艺术。

在登录平台时,不希望接纳FLX570默许的松开登录界面,想经过自定义登录界面已毕登录操作,内置登录界面如下图:

在签到平台时,不指望利用F福特Explorer暗许的松开登录界面,想透过自定义登录界面完毕登录操作,内置登录界面如下图:

成效体现

图片 1

预览界面.png

图片 2

意义彰显

从图中可以见见这一次自定义View的意义。具体职能如下:

  • 设置尾部文字的字体大小、字体颜色、文字内容

  • 设置输入框的字体大小、字体颜色、文字内容、提醒文字

1.开辟组策略,在Run(运营)中输入GREDIT.MSC,点击确认。

图片 3

图片 4

始于自定义

壹 、第壹步先新建三个类名为艾德itTextPlus(可协调取名)继承FrameLayout的公文,因为我们要兑以往布局文件中能是用本人的性子,所以大家还要在values目录下新建attrs.xml文件(用于添加自定义的质量)

图片 5

第1步.png


贰 、在 attrs.xml
文件中添加如下属性(其中除了字体的基本性情之外,还包涵了输入框的输入类型,键盘的档次等)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="EditTextPlus">
        <attr name="head_title_text" format="string" />
        <attr name="head_titile_text_size" format="dimension" />
        <attr name="head_title_text_color" format="color" />
        <attr name="edit_hint_text" format="string" />
        <attr name="edit_text_size" format="dimension" />
        <attr name="edit_text_color" format="color" />
        <attr name="edit_input_type" format="enum">
            <enum name="Text" value="0" />
            <enum name="Phone" value="1" />
            <enum name="Password" value="2" />
            <enum name="Number" value="3" />
        </attr>
            <!-- 键盘类型 -->
        <attr name="edit_editor_option" format="enum">
            <enum name="IME_ACTION_NONE" value="0" />
            <enum name="IME_ACTION_DONE" value="1" />
            <enum name="IME_ACTION_GO" value="2" />
            <enum name="IME_ACTION_NEXT" value="3" />
            <enum name="IME_ACTION_PREVIOUS" value="4" />
            <enum name="IME_ACTION_SEARCH" value="5" />
            <enum name="IME_ACTION_SEND" value="6" />
            <enum name="IME_ACTION_UNSPECIFIED" value="7" />
        </attr>
    </declare-styleable>
</resources>

登录界面输入框,FineReport中如何自定义登录界面。那么添加了那个属性之后要怎样使用呢?如下图所示:

图片 6

应用自定义属性.png

内部最根本的是要利用上面这句话,才能采取自定义的质量。(xmlns:app中的app命名可以自由)

         xmlns:app="http://schemas.android.com/apk/res-auto"

三 、在布局文件中一度接纳了自定义的性质,那么大家后天要做的就是如何剖析相关属性。所以大家回去艾德itTextPlus类中。

图片 7

声称的分子变量.png

上图为类中宣示的成员变量。

  • 在分析的时候大家透过 AttributeSet 来拿到 TypeArray(注意: 必必要调用
    recycle 方法举行回收)

  • 今非昔比档次的性质使用区其他方法来取得,而且必须设置暗中承认值,在用户并未安装属性的时候,使用暗中同意值

  • 内部经过 typedArray.getDimension
    方法拿到的参数单位为像素(px)。在接纳的时候要留心单位的转速,所以在设置默许值得时候,将
    sp 转化为 px

  • edit_editor_option 和 edit_input_type 为枚举类型,在 attrs.xml
    文件中扬言了各类枚举对应的 value

图片 8

 

 

现实分析自定义属性的代码如下:

private void initAttr(AttributeSet attrs) {
    Drawable background = getBackground();
    //当没有设置background时使用默认的background
    if (null == background) {
        setBackgroundResource(R.drawable.drawable_default_edittext_plus);
    }
    TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.EditTextPlus);
    //
    mEditTextSize = typedArray.getDimension(R.styleable.EditTextPlus_edit_text_size, sp2px(mEditTextSize));
    mEditHintText = typedArray.getString(R.styleable.EditTextPlus_edit_hint_text);
    if (TextUtils.isEmpty(mEditHintText)) {
        mEditHintText = "";
    }
    mEditTextColor = typedArray.getColor(R.styleable.EditTextPlus_edit_text_color,
            ContextCompat.getColor(mContext, R.color.EditTextPlusDefaultTextColor));
    mInputType = typedArray.getInt(R.styleable.EditTextPlus_edit_input_type, mInputType);
    mEditorOption = typedArray.getInt(R.styleable.EditTextPlus_edit_editor_option, mEditorOption);
    //
    mHeadTextSize = typedArray.getDimension(R.styleable.EditTextPlus_head_titile_text_size, sp2px(mHeadTextSize));
    mHeadText = typedArray.getString(R.styleable.EditTextPlus_head_title_text);
    if (TextUtils.isEmpty(mHeadText)) {
        mHeadText = "未设置";
    }
    mHeadTextColor = typedArray.getColor(R.styleable.EditTextPlus_head_title_text_color, mEditTextColor);
    //
    typedArray.recycle();
}

2.各样点击Computer Configuration -> Windows Settings ->
Scripts(Startup/Shutdown)

签到界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这七个参数访问认证地址举行验证。

签到界面,获取到用户名和密码的值,发送到报表系统,报表服务带着那三个参数访问认证地址举行表明。

拿到属性方法的调用顺序如下

图片 9

构造方法以及initAttr 和 initView方法.png

  • 在七个参数构造方法中调用三个参数的构造方法,在多个参数的构造方法中调用八个参数的构造方法。那样子全体的构造方法都会因而多少个参数的构造方法

  • 在构造方法中填充布局,调用 initAttr 得到各样属性的值,再调用
    initView 设置对应属性的值。


肆 、既然设置自定义属性的值,并且属性都设置到相应的岗位。最后二个难点,就是何等将自定义View中的事件传输出去,如:删除按钮的点击事件。

  • 在类中宣示接口

public interface OnDeleteListener {
    void onDelete();
}
  • 在类中注脚成员变量 onDeleteListener

图片 10

宣称接口的成员变量.png

  • 扬言变量的 set 方法

    public void setOnDeleteListener(OnDeleteListener onDeleteListener) {
           this.onDeleteListener = onDeleteListener;
     }
    
  • 在 initView 中设置点击事件,并判断是或不是注解的 onDeleteListener
    是还是不是为空,不为空则调用接口中的方法

     ivDelete.setOnClickListener(new OnClickListener() {
          @Override
          public void onClick(View view) {
              etInput.setText("");
              if (mHasDeleteAnimator) {
              //为了实现在点击删除时,控件左右抖动的效果
                  EditTextPlus.this.animate().translationX(5).setInterpolator(new CycleInterpolator(3)).setDuration(500).start();
              }
              if (null != onDeleteListener) {
                  onDeleteListener.onDelete();
              }
          }
      });
    
  • 利用该接口的时候就一定于设置系统控件的点击事件相同,调用
    setOnDeleteListener 方法。

图片 11

自定义接口的采用.png

GitHub地址:
EditextDemo

图片 12

自定义登录界面

自定义登录界面

3.在左侧双击Stratup,出现如图弹窗,可在此添加cmd只怕PowerShell脚本。

报到界面设置

签到界面设置

图片 13

自定义html登录页面:命名为login.html,并保留在%F途锐_HOME%\WebReport下,代码如下:

自定义html登录页面:命名为login.html,并保留在%F卡宴_HOME%\WebReport下,代码如下:

4.点击确认

<html>    
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script>    
<script type="text/javascript">    
function doSubmit() {    
    var username = FR.cjkEncode(document.getElementById("username").value); //获取输入的用户名    
    var password = FR.cjkEncode(document.getElementById("password").value);  //获取输入的参数    
jQuery.ajax({    
     url:"http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的管理平台报表服务器    
     dataType:"jsonp",//跨域采用jsonp方式    
     data:{"fr_username":username,"fr_password":password},//获取用户名密码    
     jsonp:"callback",    
     timeout:5000,//超时时间(单位:毫秒)    
     success:function(data) {    
            if (data.status === "success") {  
window.location=data.url;//认证成功跳转页面,因为ajax不支持重定向所有需要跳转的设置  
                  //登录成功       
            } else if (data.status === "fail"){    
                 alert("用户名或密码错误");//登录失败(用户名或密码错误)    
            }    
     },    
     error:function(){    
           alert("超时或服务器其他错误");// 登录失败(超时或服务器其他错误)    
     }    
});  
}    
</script>    
</head>    
<body>    
<p>请登录</p>    
<form name="login" method="POST">    
    <p>    
        用户名:    
        <input id="username" type="text" />    
    </p>    
    <p>    
        密 码:    
        <input id="password" type="password" />    
    </p>    
    <input type="button" value="登录" onclick="doSubmit()"/>    
</form>    
</body>    
</html>  
<html>    
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script>    
<script type="text/javascript">    
function doSubmit() {    
    var username = FR.cjkEncode(document.getElementById("username").value); //获取输入的用户名    
    var password = FR.cjkEncode(document.getElementById("password").value);  //获取输入的参数    
jQuery.ajax({    
     url:"http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的管理平台报表服务器    
     dataType:"jsonp",//跨域采用jsonp方式    
     data:{"fr_username":username,"fr_password":password},//获取用户名密码    
     jsonp:"callback",    
     timeout:5000,//超时时间(单位:毫秒)    
     success:function(data) {    
            if (data.status === "success") {  
window.location=data.url;//认证成功跳转页面,因为ajax不支持重定向所有需要跳转的设置  
                  //登录成功       
            } else if (data.status === "fail"){    
                 alert("用户名或密码错误");//登录失败(用户名或密码错误)    
            }    
     },    
     error:function(){    
           alert("超时或服务器其他错误");// 登录失败(超时或服务器其他错误)    
     }    
});  
}    
</script>    
</head>    
<body>    
<p>请登录</p>    
<form name="login" method="POST">    
    <p>    
        用户名:    
        <input id="username" type="text" />    
    </p>    
    <p>    
        密 码:    
        <input id="password" type="password" />    
    </p>    
    <input type="button" value="登录" onclick="doSubmit()"/>    
</form>    
</body>    
</html>