-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
155 lines (151 loc) · 9.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<title>AVB Code Generator</title>
<script src="codegenerator.js"></script>
<link rel="stylesheet" type="text/css" href="navbar.css">
<link rel="icon" href="favicon.png" type="image/png" sizes="128x128">
<link src="codegenerator.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" type="text/css" href="theme.css"> -->
<link rel="stylesheet" type="text/css" href="custom.css">
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-55878529-10', 'auto');
ga('send', 'pageview');
</script>
</head>
<body onload="init()" class="body-custom">
<div>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<h1 class="custom-text">Android View Binding (AVB) Code Generator</h1>
<h4 class="custom-text">An easy way to generate binding code from XML layout</h4>
</div>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row area-holder">
<div class="col col-lg-6 col-md-6 col-sm-6 col-io">
<div class="io-holder">
<div class="io-header">
<p class="custom-text io-header-text">XML layout</p>
</div>
<textarea id="textAreaInput" class="input-text-area" onfocus="this.select();">
</textarea>
</div>
</div>
<div class="col col-lg-6 col-md-6 col-sm-6 col-io">
<div class="io-holder">
<ul class="nav nav-pills nav-custom">
<li id="li-activity" class="li-custom" role="presentation"><a href="javascript:update_output_type(1);">Activities</a></li>
<li id="li-fragment" class="li-custom" role="presentation"><a href="javascript:update_output_type(2);">Fragments / ViewHolders / Others</a></li>
<li id="li-butterknife" class="li-custom" role="presentation"><a href="javascript:update_output_type(3);" onClick>ButterKnife</a></li>
<li id="li-butterknifeLib" class="li-custom" role="presentation"><a href="javascript:update_output_type(4);" onClick>ButterKnife Lib. Module</a></li>
</ul>
<textarea id="textAreaOutput" class="output-text-area" onfocus="this.select();">
</textarea>
<div class="row div-add-prefix ">
<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12 div-add-prefix">
<input type="checkbox" name="checkbox" id="checkbox_add_prefix" value="value" onchange='onCheckBoxClicked();'>
Add 'm' prefix to variable name. For example, <b>'mEdittextUserName'</b>
<br/>
<input type="checkbox" name="checkbox" id="checkbox_do_type_cast" value="value" onchange='onCheckBoxClicked();'>
Add typecasting for view. For example, '<b>(TextView)</b> findViewById(R.id.tv_name);'
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default intro-panel">
<div class="panel-heading">
<h3>Android View Binding (AVB) Code Generator </h3></div>
<div class="panel-body">
<h4>What is this?</h4> Mother of this tool is a question, why should I write whole binding code in java activity when view IDs are already mentioned in XML file.
<br/>This is a tool for those android developers who don't want to waste time in writing binding code. :)
<br/>
<br/>
<h4>How to use</h4>
<ol>
<li>Add ids to all XML views which are required in java code</li>
<li>Copy XML layout file</li>
<li>Paste the copied file text in "XML layout" area</li>
<li>Now copy the generated code</li>
<li>Paste that code to java activity / fragment / viewholde / ... accordingly</li>
<li>Done!</li>
</ol>
<br/>
<br/>
<h4>Use in Activity</h4>
<ul>
<li>Make sure that output mode is set to <b>Acitivities</b></li>
<li>After pasting generated code <i>(How to use step 5)</i>, call <b>bindViews()</b> function after <b>setContentView()</b> in onCreate() method.</li>
</ul>
<br/>
<h4>Use in Fragment / Viewholder etc..</h4>
<ul>
<li>Make sure that output mode is set to <b>Fragments / ViewHolders / Others</b></li>
<li>After pasting generated code <i>(How to use step 5)</i>, call <b>bindViews()</b> function when layout is populated.
<ul>
<li>Fragments: in function <b>onViewCreated()</b>.</li>
<li>Viewholders: after super(view); call in constructor.</b>
</li>
</ul>
</li>
</ul>
<br/>
<h4>Use with ButterKnife</h4>
<a href="http://jakewharton.github.io/butterknife/">Butter Knife</a> is a great and well known android library used for view injection.It is maintained by <a href="https://github.com/JakeWharton">Jake Wharton</a>. To integrate ButterKnife, check github <a href="https://github.com/JakeWharton/butterknife"> guide.</a>
<ul>
<li>Set output mode to <b>ButterKnife</b></li>
<li>After pasting generated code <i>(How to use step 5)</i>, call ButterKnife bind code when layout is populated. Make sure you are using ButterKnife library version >8.</li>
<li>Check <a href="http://jakewharton.github.io/butterknife/">Butter Knife guide</a> for more details.</li>
</ul>
<br/>
<h4>Use with ButterKnife in Library Module</h4>
<ul>
<li>Set output mode to <b>ButterKnife Lib. Module</b></li>
<li>After pasting generated code <i>(How to use step 5)</i>, call ButterKnife bind code when layout is populated.</li>
<li>This uses R2.id.tvTitle instead of R.id.tvTitle. Please check Butter Knife's <a href="https://github.com/JakeWharton/butterknife#library-projects"> library module guide</a> for complete integration details.</li>
</li>
</ul>
<br/>
<h4>Add 'm' prefix to variable name</h4>
<ul>
<li>Many developers follow naming convention with prefix 'm'.</li>
<li>Add / remove prefix using checkbox at the bottom of generated code block.</li>
</ul>
<br/>
<h4>Note</h4>
<ul>
<li>Binder code will be generated for views which have declared
<label style="font-style:italic;">android:id</label>.</li>
<li>View's variable name will be the camelCase of it's xml
<label style="font-style:italic;">android:id</label>.</li>
<li>Can not generate binder code for views which are included using
<label style="font-style:italic;"><include layout="@layout/custom_layout"></label>.
<li>If anything goes wrong, please create an issue on <a href="https://goo.gl/K8wIus">Github repository.</a> In issue, please add xml file's text for which tool did not work correctly.</li>
</ul>
</div>
</div>
</div>
</body>
</html>