Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Well, I've worked on this for some time and I have a solution that works. I am not sure it is the most effective solution, but I just kept researching and writing code until I figured out something that made sense. With the following code I need to give a big shout out to Android &amp; Amir at <a href="http://android-journey.blogspot.com/2010/01/android-webview.html">http://android-journey.blogspot.com/2010/01/android-webview.html</a> for helping me figure this out. He's got some great stuff and you all should check it out.</p> <p>The first step is to create a class in your Activity package called SimpleGestureFilter and use the code <a href="http://android-journey.blogspot.com/2010/01/android-gestures.html">found here</a>. This comes directly from Amir and dramatically simplifies the gesture interactions for swipe.</p> <p>The next step is to use ViewFlipper for your layout. I was using buttons and several other things so there is more in this layout file than necessary, but you should get the picture.</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="5dp"&gt; &lt;Button android:id="@+id/cat_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Categories" /&gt; &lt;Button android:id="@+id/home_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Home" /&gt; &lt;Button android:id="@+id/search_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Search" /&gt; &lt;/LinearLayout&gt; &lt;ViewFlipper android:id="@+id/flipview" android:layout_width="fill_parent" android:layout_height="fill_parent" &gt; &lt;WebView android:id="@+id/mainview" android:layout_height="fill_parent" android:layout_width="fill_parent" /&gt; &lt;WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/catview" android:layout_width="fill_parent" android:layout_height="fill_parent"/&gt; &lt;WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/searchview" android:layout_width="fill_parent" android:layout_height="fill_parent"/&gt; &lt;/ViewFlipper&gt; &lt;/LinearLayout&gt; </code></pre> <p>As you can see, the xml describes a linear layout that contains a ViewFlipper. In the view flipper there are three WebViews.</p> <p>The final step is the Activity...</p> <pre><code>package example.swipetest; // import Amir's SimpleGestureFilter import example.swipetest.SimpleGestureFilter; import example.swipetest.SimpleGestureFilter.SimpleGestureListener; // import other required packages import android.app.Activity; import android.app.ProgressDialog; import android.os.AsyncTask; import android.os.Bundle; import android.os.Handler; import android.view.MotionEvent; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; import android.widget.ViewFlipper; // class implements Amir's Swipe Listener public class SwipeTest extends Activity implements SimpleGestureListener { // handler for JS interface private Handler handler = new Handler(); // all the webviews to be loaded private WebView mainView; private WebView catView; private WebView searchView; // the viewflipper private ViewFlipper flipview; // buttons private Button cat_btn; private Button home_btn; private Button search_btn; // progress dialog private ProgressDialog progressDialog; // animations private Animation slideLeftIn; private Animation slideLeftOut; private Animation slideRightIn; private Animation slideRightOut; // the activity final Activity activity = this; // gesture filter private SimpleGestureFilter filter; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // set the main webview to the layout item mainView = (WebView) findViewById(R.id.mainview); // buttons cat_btn = (Button) findViewById(R.id.cat_btn); home_btn = (Button) findViewById(R.id.home_btn); search_btn = (Button) findViewById(R.id.search_btn); // set the client settings mainView = _clientSettings(mainView); // set the flipper flipview = (ViewFlipper) findViewById(R.id.flipview); // set onclick listeners for the buttons cat_btn.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { _flipView(cat_btn); } }); home_btn.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { _flipView(home_btn); } }); search_btn.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { _flipView(search_btn); } }); // these animations came from the sdk. they are xml files loaded // into the res folder into a folder called anim slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_left); slideLeftOut = AnimationUtils.loadAnimation(this, R.anim.slide_out_left); slideRightIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_right); slideRightOut = AnimationUtils.loadAnimation(this, R.anim.slide_out_right); // listen for gestures this.filter = new SimpleGestureFilter(this, this); this.filter.setMode(SimpleGestureFilter.MODE_TRANSPARENT); // load the html resource into the main view mainView.loadUrl("file:///android_asset/test1.html"); // set the client mainView.setWebViewClient(new BasicWebViewCient()); // run async to load the other web resources into the views new ManageViews().execute(); } // use a method to manage button clicks private Boolean _flipView(Button button) { // Handle item selection switch (button.getId()) { case R.id.cat_btn: _setCategories(); return true; case R.id.home_btn: _setHome(); return true; case R.id.search_btn: _setSearch(); return true; default: return false; } } // adding client settings to the webviews // I did this way so that I could set the same settings // to all of the webviews private WebView _clientSettings(WebView view) { view.getSettings().setJavaScriptEnabled(true); view.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); view.addJavascriptInterface(new PanelJSI(), "interface"); return view; } // Web view client private class BasicWebViewCient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } @Override public void onLoadResource(WebView view, String url) { if (progressDialog == null) { progressDialog = new ProgressDialog(activity); progressDialog.setMessage("Locating"); progressDialog.show(); } } @Override public void onPageFinished(WebView view, String url) { if (progressDialog.isShowing()) { progressDialog.dismiss(); } } } // Async to load the rest of the web resources into the webviews private class ManageViews extends AsyncTask&lt;Void, Void, Void&gt; { @Override protected Void doInBackground(Void... args) { // cat view will load a categories webview catView = (WebView) findViewById(R.id.catview); catView = _clientSettings(catView); catView.loadUrl("file:///android_asset/test2.html"); catView.setWebViewClient(new BasicWebViewCient()); // load a search resource searchView = (WebView) findViewById(R.id.searchview); searchView = _clientSettings(searchView); searchView.loadUrl("file:///android_asset/test3.html"); searchView.setWebViewClient(new BasicWebViewCient()); return null; } } // a method to manage the animation of the categories view private void _setCategories() { if (flipview.getDisplayedChild() != 1) { flipview.setInAnimation(slideLeftIn); flipview.setOutAnimation(slideRightOut); flipview.setDisplayedChild(1); } } // a method to manage the "center" view called home private void _setHome() { if (flipview.getDisplayedChild() != 0) { if (flipview.getDisplayedChild() == 1) { flipview.setInAnimation(slideRightIn); flipview.setOutAnimation(slideLeftOut); } else if (flipview.getDisplayedChild() == 2) { flipview.setInAnimation(slideLeftIn); flipview.setOutAnimation(slideRightOut); } flipview.setDisplayedChild(0); } } // a method to handle the "right side" called search private void _setSearch() { if (flipview.getDisplayedChild() != 2) { flipview.setInAnimation(slideRightIn); flipview.setOutAnimation(slideLeftOut); flipview.setDisplayedChild(2); } } // javascript interface final class PanelJSI { public void setView(final String shift) { handler.post(new Runnable() { public void run() { if (shift.equals("categories")) { _setCategories(); } else if (shift.equals("home")) { _setHome(); } else { _setSearch(); } } }); } } // override the dispatch @Override public boolean dispatchTouchEvent(MotionEvent me) { this.filter.onTouchEvent(me); return super.dispatchTouchEvent(me); } // manage swipe animations @Override public void onSwipe(int direction) { switch (direction) { case SimpleGestureFilter.SWIPE_RIGHT: if (flipview.getDisplayedChild() == 0) { _setCategories(); } else if (flipview.getDisplayedChild() == 2) { _setHome(); } break; case SimpleGestureFilter.SWIPE_LEFT: if (flipview.getDisplayedChild() == 1) { _setHome(); } else if (flipview.getDisplayedChild() == 0) { _setSearch(); } break; case SimpleGestureFilter.SWIPE_DOWN: case SimpleGestureFilter.SWIPE_UP: } } // manage double tap @Override public void onDoubleTap() {} } </code></pre> <p>So... The basic pattern I came up with is to use a single web client and browser settings. I use the onCreate method to load the views, set the first view and then an Async method to load the other views after the main view is loaded. So two of the views load in the background. I them use the patterns Amir passed on to manage swipe. I use buttons and JS interfaces to invoke the same animations on clicks.</p> <p>The final result is swipe and click animations for ViewFlipping webviews similar to the UI you'll see in the new android market UI. Feel free to recommend any additional implementation that might make this pattern stronger.</p>
    singulars
    1. This table or related slice is empty.
    1. POLooking for Android ViewFlipper Example with Multiple WebViews
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USjroot.zen
    1. USjroot.zen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POLooking for Android ViewFlipper Example with Multiple WebViews
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO@ jroot.Zen Great work on this topic..
      singulars
      1. PO
      1. USAkash Singh
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload