Loading docs/html/topic/libraries/data-binding/index.jd +50 −50 Original line number Diff line number Diff line Loading @@ -246,21 +246,21 @@ android { </pre> <p> Expressions within the layout are written in the attribute properties using the “<code>&commat;{}</code>” syntax. Here, the TextView’s text is set to the "<code>@{}</code>" syntax. Here, the TextView's text is set to the firstName property of user: </p> <pre> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="&commat;{user.firstName}"/> android:text="@{user.firstName}"/> </pre> <h3 id="data_object"> Data Object </h3> <p> Let’s assume for now that you have a plain-old Java object (POJO) for User: Let's assume for now that you have a plain-old Java object (POJO) for User: </p> <pre> Loading Loading @@ -296,8 +296,8 @@ public class User { </pre> <p> From the perspective of data binding, these two classes are equivalent. The expression <strong><code>&commat;{user.firstName}</code></strong> used for the TextView’s <strong><code>android:text</code></strong> attribute will expression <strong><code>@{user.firstName}</code></strong> used for the TextView's <strong><code>android:text</code></strong> attribute will access the <strong><code>firstName</code></strong> field in the former class and the <code>getFirstName()</code> method in the latter class. Alternatively, it will also be resolved to <code>firstName()</code> if that Loading @@ -310,10 +310,10 @@ public class User { <p> By default, a Binding class will be generated based on the name of the layout file, converting it to Pascal case and suffixing “Binding” to it. The above file, converting it to Pascal case and suffixing "Binding" to it. The above layout file was <code>main_activity.xml</code> so the generate class was <code>MainActivityBinding</code>. This class holds all the bindings from the layout properties (e.g. the <code>user</code> variable) to the layout’s Views layout properties (e.g. the <code>user</code> variable) to the layout's Views and knows how to assign values for the binding expressions.The easiest means for creating the bindings is to do it while inflating: </p> Loading @@ -328,7 +328,7 @@ protected void onCreate(Bundle savedInstanceState) { } </pre> <p> You’re done! Run the application and you’ll see Test User in the UI. You're done! Run the application and you'll see Test User in the UI. Alternatively, you can get the view via: </p> Loading Loading @@ -434,15 +434,15 @@ public class Presenter { </pre> Then you can bind the click event to your class as follows: <pre> <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="task" type="com.android.example.Task" /> <variable name="presenter" type="com.android.example.Presenter" /> <variable name="task" type="com.android.example.Task" /> <variable name="presenter" type="com.android.example.Presenter" /> </data> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{() -> presenter.onSaveClick(task)}" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{() -> presenter.onSaveClick(task)}" /> </LinearLayout> </layout> </pre> Loading @@ -465,7 +465,7 @@ public class Presenter { above could be written as: </p> <pre> android:onClick="@{(view) -> presenter.onSaveClick(task)}" android:onClick="@{(view) -> presenter.onSaveClick(task)}" </pre> Or if you wanted to use the parameter in the expression, it could work as follows: <pre> Loading @@ -474,7 +474,7 @@ public class Presenter { } </pre> <pre> android:onClick="@{(theView) -> presenter.onSaveClick(theView, task)}" android:onClick="@{(theView) -> presenter.onSaveClick(theView, task)}" </pre> You can use a lambda expression with more than one parameter: <pre> Loading @@ -483,8 +483,8 @@ public class Presenter { } </pre> <pre> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" /> </pre> <p> If the event you are listening to returns a value whose type is not {@code Loading @@ -498,7 +498,7 @@ public class Presenter { } </pre> <pre> android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}" android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}" </pre> <p> If the expression cannot be evaluated due to {@code null} objects, Data Binding returns Loading @@ -510,7 +510,7 @@ If you need to use an expression with a predicate (e.g. ternary), you can use {@code void} as a symbol. </p> <pre> android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}" android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}" </pre> <h5>Avoid Complex Listeners</h5> Loading Loading @@ -580,7 +580,7 @@ any business logic inside the callback method that you invoked from the listener </pre> <p> When there are class name conflicts, one of the classes may be renamed to an “alias:” "alias:" </p> <pre> Loading @@ -601,7 +601,7 @@ any business logic inside the callback method that you invoked from the listener <import type="com.example.User"/> <import type="java.util.List"/> <variable name="user" type="User"/> <variable name="userList" type="List&lt;User>"/> <variable name="userList" type="List<User>"/> </data> </pre> <p class="caution"> Loading Loading @@ -695,7 +695,7 @@ any business logic inside the callback method that you invoked from the listener <p> By default, a Binding class is generated based on the name of the layout file, starting it with upper-case, removing underscores ( _ ) and capitalizing the following letter and then suffixing “Binding”. This class capitalizing the following letter and then suffixing "Binding". This class will be placed in a databinding package under the module package. For example, the layout file <code>contact_item.xml</code> will generate <code>ContactItemBinding</code>. If the module package is Loading @@ -718,7 +718,7 @@ any business logic inside the callback method that you invoked from the listener This generates the binding class as <code>ContactItem</code> in the databinding package in the module package. If the class should be generated in a different package within the module package, it may be prefixed with “.”: ".": </p> <pre> Loading @@ -741,7 +741,7 @@ any business logic inside the callback method that you invoked from the listener </h3> <p> Variables may be passed into an included layout's binding from the Variables may be passed into an included layout's binding from the containing layout by using the application namespace and the variable name in an attribute: </p> Loading Loading @@ -855,8 +855,8 @@ any business logic inside the callback method that you invoked from the listener <pre> android:text="@{String.valueOf(index + 1)}" android:visibility="@{age &lt; 13 ? View.GONE : View.VISIBLE}" android:transitionName='@{"image_" + id}' android:visibility="@{age < 13 ? View.GONE : View.VISIBLE}" android:transitionName='@{"image_" + id}' </pre> <h4 id="missing_operations"> Missing Operations Loading Loading @@ -945,9 +945,9 @@ android:transitionName='@{"image_" + id}' <import type="android.util.SparseArray"/> <import type="java.util.Map"/> <import type="java.util.List"/> <variable name="list" type="List&lt;String>"/> <variable name="sparse" type="SparseArray&lt;String>"/> <variable name="map" type="Map&lt;String, String>"/> <variable name="list" type="List<String>"/> <variable name="sparse" type="SparseArray<String>"/> <variable name="map" type="Map<String, String>"/> <variable name="index" type="int"/> <variable name="key" type="String"/> </data> Loading @@ -969,17 +969,17 @@ android:text="@{map[key]}" </p> <pre> android:text='@{map["firstName"]}' android:text='@{map["firstName"]}' </pre> <p> It is also possible to use double quotes to surround the attribute value. When doing so, String literals should either use the &quot; or back quote When doing so, String literals should either use the ' or back quote (`). </p> <pre> android:text="@{map[`firstName`}" android:text="@{map[&quot;firstName&quot;]}" android:text="@{map['firstName']}" </pre> <h4 id="resources"> Resources Loading Loading @@ -1216,7 +1216,7 @@ private static class User { } </pre> <p> That's it! To access the value, use the set and get accessor methods: That's it! To access the value, use the set and get accessor methods: </p> <pre> Loading Loading @@ -1247,15 +1247,15 @@ user.put("age", 17); <pre> <data> <import type="android.databinding.ObservableMap"/> <variable name="user" type="ObservableMap&lt;String, Object>"/> <variable name="user" type="ObservableMap<String, Object>"/> </data> … <TextView android:text='@{user["lastName"]}' android:text='@{user["lastName"]}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text='@{String.valueOf(1 + (Integer)user["age"])}' android:text='@{String.valueOf(1 + (Integer)user["age"])}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> </pre> Loading @@ -1277,15 +1277,15 @@ user.add(17); <data> <import type="android.databinding.ObservableList"/> <import type="com.example.my.app.Fields"/> <variable name="user" type="ObservableList&lt;Object>"/> <variable name="user" type="ObservableList<Object>"/> </data> … <TextView android:text='@{user[Fields.LAST_NAME]}' android:text='@{user[Fields.LAST_NAME]}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text='@{String.valueOf(1 + (Integer)user[Fields.AGE])}' android:text='@{String.valueOf(1 + (Integer)user[Fields.AGE])}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> </pre> Loading Loading @@ -1428,7 +1428,7 @@ public abstract void setNote(String note); <p> When inflating another layout, a binding must be established for the new layout. Therefore, the <code>ViewStubProxy</code> must listen to the <code>ViewStub</code>'s layout. Therefore, the <code>ViewStubProxy</code> must listen to the <code>ViewStub</code>'s {@link android.view.ViewStub.OnInflateListener} and establish the binding at that time. Since only one can exist, the <code>ViewStubProxy</code> allows the developer to set an <code>OnInflateListener</code> on it that it will call after establishing the binding. Loading @@ -1443,9 +1443,9 @@ public abstract void setNote(String note); </h4> <p> At times, the specific binding class won't be known. For example, a At times, the specific binding class won't be known. For example, a {@link android.support.v7.widget.RecyclerView.Adapter} operating against arbitrary layouts won't know the specific binding class. It still must assign the binding value during the won't know the specific binding class. It still must assign the binding value during the {@link android.support.v7.widget.RecyclerView.Adapter#onBindViewHolder}. </p> Loading Loading @@ -1499,13 +1499,13 @@ public void onBindViewHolder(BindingHolder holder, int position) { For an attribute, data binding tries to find the method setAttribute. The namespace for the attribute does not matter, only the attribute name itself. <p> For example, an expression associated with TextView's attribute For example, an expression associated with TextView's attribute <strong><code>android:text</code></strong> will look for a setText(String). If the expression returns an int, data binding will search for a setText(int) method. Be careful to have the expression return the correct type, casting if necessary. Note that data binding will work even if no attribute exists with the given name. You can then easily "create" attributes for any setter by using data binding. For example, support DrawerLayout doesn't have any using data binding. For example, support DrawerLayout doesn't have any attributes, but plenty of setters. You can use the automatic setters to use one of these. </p> Loading @@ -1522,7 +1522,7 @@ namespace for the attribute does not matter, only the attribute name itself. </h3> <p> Some attributes have setters that don't match by name. For these Some attributes have setters that don't match by name. For these methods, an attribute may be associated with the setter through {@link android.databinding.BindingMethods} annotation. This must be associated with a class and contains {@link android.databinding.BindingMethod} annotations, one for Loading Loading @@ -1591,8 +1591,8 @@ public static void loadImage(ImageView view, String url, Drawable error) { } </pre> <pre> <ImageView app:imageUrl=“@{venue.imageUrl}” app:error=“@{@drawable/venueError}”/> <ImageView app:imageUrl="@{venue.imageUrl}" app:error="@{@drawable/venueError}"/> </pre> <p> Loading Loading @@ -1747,7 +1747,7 @@ public static void setListener(View view, final OnViewDetachedFromWindow detach, <pre> <TextView android:text='@{userMap["lastName"]}' android:text='@{userMap["lastName"]}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> </pre> Loading Loading
docs/html/topic/libraries/data-binding/index.jd +50 −50 Original line number Diff line number Diff line Loading @@ -246,21 +246,21 @@ android { </pre> <p> Expressions within the layout are written in the attribute properties using the “<code>&commat;{}</code>” syntax. Here, the TextView’s text is set to the "<code>@{}</code>" syntax. Here, the TextView's text is set to the firstName property of user: </p> <pre> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="&commat;{user.firstName}"/> android:text="@{user.firstName}"/> </pre> <h3 id="data_object"> Data Object </h3> <p> Let’s assume for now that you have a plain-old Java object (POJO) for User: Let's assume for now that you have a plain-old Java object (POJO) for User: </p> <pre> Loading Loading @@ -296,8 +296,8 @@ public class User { </pre> <p> From the perspective of data binding, these two classes are equivalent. The expression <strong><code>&commat;{user.firstName}</code></strong> used for the TextView’s <strong><code>android:text</code></strong> attribute will expression <strong><code>@{user.firstName}</code></strong> used for the TextView's <strong><code>android:text</code></strong> attribute will access the <strong><code>firstName</code></strong> field in the former class and the <code>getFirstName()</code> method in the latter class. Alternatively, it will also be resolved to <code>firstName()</code> if that Loading @@ -310,10 +310,10 @@ public class User { <p> By default, a Binding class will be generated based on the name of the layout file, converting it to Pascal case and suffixing “Binding” to it. The above file, converting it to Pascal case and suffixing "Binding" to it. The above layout file was <code>main_activity.xml</code> so the generate class was <code>MainActivityBinding</code>. This class holds all the bindings from the layout properties (e.g. the <code>user</code> variable) to the layout’s Views layout properties (e.g. the <code>user</code> variable) to the layout's Views and knows how to assign values for the binding expressions.The easiest means for creating the bindings is to do it while inflating: </p> Loading @@ -328,7 +328,7 @@ protected void onCreate(Bundle savedInstanceState) { } </pre> <p> You’re done! Run the application and you’ll see Test User in the UI. You're done! Run the application and you'll see Test User in the UI. Alternatively, you can get the view via: </p> Loading Loading @@ -434,15 +434,15 @@ public class Presenter { </pre> Then you can bind the click event to your class as follows: <pre> <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="task" type="com.android.example.Task" /> <variable name="presenter" type="com.android.example.Presenter" /> <variable name="task" type="com.android.example.Task" /> <variable name="presenter" type="com.android.example.Presenter" /> </data> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{() -> presenter.onSaveClick(task)}" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="@{() -> presenter.onSaveClick(task)}" /> </LinearLayout> </layout> </pre> Loading @@ -465,7 +465,7 @@ public class Presenter { above could be written as: </p> <pre> android:onClick="@{(view) -> presenter.onSaveClick(task)}" android:onClick="@{(view) -> presenter.onSaveClick(task)}" </pre> Or if you wanted to use the parameter in the expression, it could work as follows: <pre> Loading @@ -474,7 +474,7 @@ public class Presenter { } </pre> <pre> android:onClick="@{(theView) -> presenter.onSaveClick(theView, task)}" android:onClick="@{(theView) -> presenter.onSaveClick(theView, task)}" </pre> You can use a lambda expression with more than one parameter: <pre> Loading @@ -483,8 +483,8 @@ public class Presenter { } </pre> <pre> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" /> <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" /> </pre> <p> If the event you are listening to returns a value whose type is not {@code Loading @@ -498,7 +498,7 @@ public class Presenter { } </pre> <pre> android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}" android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}" </pre> <p> If the expression cannot be evaluated due to {@code null} objects, Data Binding returns Loading @@ -510,7 +510,7 @@ If you need to use an expression with a predicate (e.g. ternary), you can use {@code void} as a symbol. </p> <pre> android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}" android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}" </pre> <h5>Avoid Complex Listeners</h5> Loading Loading @@ -580,7 +580,7 @@ any business logic inside the callback method that you invoked from the listener </pre> <p> When there are class name conflicts, one of the classes may be renamed to an “alias:” "alias:" </p> <pre> Loading @@ -601,7 +601,7 @@ any business logic inside the callback method that you invoked from the listener <import type="com.example.User"/> <import type="java.util.List"/> <variable name="user" type="User"/> <variable name="userList" type="List&lt;User>"/> <variable name="userList" type="List<User>"/> </data> </pre> <p class="caution"> Loading Loading @@ -695,7 +695,7 @@ any business logic inside the callback method that you invoked from the listener <p> By default, a Binding class is generated based on the name of the layout file, starting it with upper-case, removing underscores ( _ ) and capitalizing the following letter and then suffixing “Binding”. This class capitalizing the following letter and then suffixing "Binding". This class will be placed in a databinding package under the module package. For example, the layout file <code>contact_item.xml</code> will generate <code>ContactItemBinding</code>. If the module package is Loading @@ -718,7 +718,7 @@ any business logic inside the callback method that you invoked from the listener This generates the binding class as <code>ContactItem</code> in the databinding package in the module package. If the class should be generated in a different package within the module package, it may be prefixed with “.”: ".": </p> <pre> Loading @@ -741,7 +741,7 @@ any business logic inside the callback method that you invoked from the listener </h3> <p> Variables may be passed into an included layout's binding from the Variables may be passed into an included layout's binding from the containing layout by using the application namespace and the variable name in an attribute: </p> Loading Loading @@ -855,8 +855,8 @@ any business logic inside the callback method that you invoked from the listener <pre> android:text="@{String.valueOf(index + 1)}" android:visibility="@{age &lt; 13 ? View.GONE : View.VISIBLE}" android:transitionName='@{"image_" + id}' android:visibility="@{age < 13 ? View.GONE : View.VISIBLE}" android:transitionName='@{"image_" + id}' </pre> <h4 id="missing_operations"> Missing Operations Loading Loading @@ -945,9 +945,9 @@ android:transitionName='@{"image_" + id}' <import type="android.util.SparseArray"/> <import type="java.util.Map"/> <import type="java.util.List"/> <variable name="list" type="List&lt;String>"/> <variable name="sparse" type="SparseArray&lt;String>"/> <variable name="map" type="Map&lt;String, String>"/> <variable name="list" type="List<String>"/> <variable name="sparse" type="SparseArray<String>"/> <variable name="map" type="Map<String, String>"/> <variable name="index" type="int"/> <variable name="key" type="String"/> </data> Loading @@ -969,17 +969,17 @@ android:text="@{map[key]}" </p> <pre> android:text='@{map["firstName"]}' android:text='@{map["firstName"]}' </pre> <p> It is also possible to use double quotes to surround the attribute value. When doing so, String literals should either use the &quot; or back quote When doing so, String literals should either use the ' or back quote (`). </p> <pre> android:text="@{map[`firstName`}" android:text="@{map[&quot;firstName&quot;]}" android:text="@{map['firstName']}" </pre> <h4 id="resources"> Resources Loading Loading @@ -1216,7 +1216,7 @@ private static class User { } </pre> <p> That's it! To access the value, use the set and get accessor methods: That's it! To access the value, use the set and get accessor methods: </p> <pre> Loading Loading @@ -1247,15 +1247,15 @@ user.put("age", 17); <pre> <data> <import type="android.databinding.ObservableMap"/> <variable name="user" type="ObservableMap&lt;String, Object>"/> <variable name="user" type="ObservableMap<String, Object>"/> </data> … <TextView android:text='@{user["lastName"]}' android:text='@{user["lastName"]}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text='@{String.valueOf(1 + (Integer)user["age"])}' android:text='@{String.valueOf(1 + (Integer)user["age"])}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> </pre> Loading @@ -1277,15 +1277,15 @@ user.add(17); <data> <import type="android.databinding.ObservableList"/> <import type="com.example.my.app.Fields"/> <variable name="user" type="ObservableList&lt;Object>"/> <variable name="user" type="ObservableList<Object>"/> </data> … <TextView android:text='@{user[Fields.LAST_NAME]}' android:text='@{user[Fields.LAST_NAME]}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text='@{String.valueOf(1 + (Integer)user[Fields.AGE])}' android:text='@{String.valueOf(1 + (Integer)user[Fields.AGE])}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> </pre> Loading Loading @@ -1428,7 +1428,7 @@ public abstract void setNote(String note); <p> When inflating another layout, a binding must be established for the new layout. Therefore, the <code>ViewStubProxy</code> must listen to the <code>ViewStub</code>'s layout. Therefore, the <code>ViewStubProxy</code> must listen to the <code>ViewStub</code>'s {@link android.view.ViewStub.OnInflateListener} and establish the binding at that time. Since only one can exist, the <code>ViewStubProxy</code> allows the developer to set an <code>OnInflateListener</code> on it that it will call after establishing the binding. Loading @@ -1443,9 +1443,9 @@ public abstract void setNote(String note); </h4> <p> At times, the specific binding class won't be known. For example, a At times, the specific binding class won't be known. For example, a {@link android.support.v7.widget.RecyclerView.Adapter} operating against arbitrary layouts won't know the specific binding class. It still must assign the binding value during the won't know the specific binding class. It still must assign the binding value during the {@link android.support.v7.widget.RecyclerView.Adapter#onBindViewHolder}. </p> Loading Loading @@ -1499,13 +1499,13 @@ public void onBindViewHolder(BindingHolder holder, int position) { For an attribute, data binding tries to find the method setAttribute. The namespace for the attribute does not matter, only the attribute name itself. <p> For example, an expression associated with TextView's attribute For example, an expression associated with TextView's attribute <strong><code>android:text</code></strong> will look for a setText(String). If the expression returns an int, data binding will search for a setText(int) method. Be careful to have the expression return the correct type, casting if necessary. Note that data binding will work even if no attribute exists with the given name. You can then easily "create" attributes for any setter by using data binding. For example, support DrawerLayout doesn't have any using data binding. For example, support DrawerLayout doesn't have any attributes, but plenty of setters. You can use the automatic setters to use one of these. </p> Loading @@ -1522,7 +1522,7 @@ namespace for the attribute does not matter, only the attribute name itself. </h3> <p> Some attributes have setters that don't match by name. For these Some attributes have setters that don't match by name. For these methods, an attribute may be associated with the setter through {@link android.databinding.BindingMethods} annotation. This must be associated with a class and contains {@link android.databinding.BindingMethod} annotations, one for Loading Loading @@ -1591,8 +1591,8 @@ public static void loadImage(ImageView view, String url, Drawable error) { } </pre> <pre> <ImageView app:imageUrl=“@{venue.imageUrl}” app:error=“@{@drawable/venueError}”/> <ImageView app:imageUrl="@{venue.imageUrl}" app:error="@{@drawable/venueError}"/> </pre> <p> Loading Loading @@ -1747,7 +1747,7 @@ public static void setListener(View view, final OnViewDetachedFromWindow detach, <pre> <TextView android:text='@{userMap["lastName"]}' android:text='@{userMap["lastName"]}' android:layout_width="wrap_content" android:layout_height="wrap_content"/> </pre> Loading