Use Bootstrap Modal as a view

Bootstrap modals are a nice way to alert users without using the basic JS alerting mechanism. I use them when I can and wanted to tie one to a backbone view and it was not hard at all:

Modal HTML:


<div class="modal fade" id="delete_modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Delete Sheet</h4>
 </div>
 <div class="modal-body">
 Are you sure that you want to permantely delete this sheet?<br>
 <b></b>Please note that we are trying to keep a history of sheets and only sheets with major mistakes should be deleted.</b><br>
 <br>
 Click Delete Sheet to confirm and your sheet will be deleted and a blank template will be placed into the edit area.
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-danger" id="delete_sheet">Delete Sheet</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

var DeleteSheetModalClass = Backbone.View.extend({
   el: "#delete_modal",
   initialize: function(){
     this.$el.modal("show");
   },
   events:{
      "click #delete_sheet": "deleteSheet"
   },
   deleteSheet: function(){
        var that = this;
		that.collection.remove(that.collection.where({sheet_id: that.model.get("sheet_id")})[0]);
		that.model.destroy({success:function(){
		that.collection.fetch();
		that.collection.trigger("reset");
		$("#sheet_type").change();
		}
		that.$el.modal("hide");
		});
   },
   render: function(){
    
  }

Essentially, you just need to set the el and events correctly and you are ready to go. I placed my modal(“show”) in init but it may be better off in render, that is up to you.

Advertisements
Tagged , ,

Backbone Resources

I am just getting into backbone and love it. I thought I would share what resources that I am using to get familiar with it.

 

The video that got me interested in it:

https://www.youtube.com/watch?v=4udR30JYenA
Lynda also had a getting started section on it:

http://www.lynda.com/Backbone-js-training-tutorials/1583-0.html

Here is a great set of videos talking about Marionette as well, I only watched the free ones:

http://www.backbonerails.com/series/engineering_single_page_apps

Try it out some free things here but also some paid:
https://www.codeschool.com/courses/anatomy-of-backbonejs

It is very freeing to let your data be your data and your view be your view.

Tagged , ,

Convert cookies into a Backbone collection

I had a need to look at my cookies in a Backbone project and decided that I needed them in a Collection and here is how I did it.
  //Create a base ModelClass
  var cookieModelClass = Backbone.Model.extend({

  });

//Create the collection
   var CookieCollectionClass = Backbone.Collection.extend({
	   model: cookieModelClass,
	   initialize: function(){
                   //Grab the cookies and go to work
 		   var ca = document.cookie.split(';');
			for(var i=0; i<ca.length; i++)
			{
			         var cookie = ca[i].trim().split("=");
					 this.add(new cookieModelClass({
					   name: cookie[0],
					   value: cookie[1]
					  }));

			}
	}
    });

//To retrive
var cookies = new CookieCollectionClass();
cookies.where({name: 'user_email'})[0].get("value")
Tagged , ,

TinyMCE remove table borders

TinyMCE is a fantastic Javascript library that allows for rich text entry on the web. I like it very much but was not happy that it would put borders around the tables.

After looking at their CSS, I was able to see how to override the table format using my own CSS.

First we need to tell TinyMCE to use a custom content css.

tinymce.init({
              selector:'textarea',
	      content_css : "/css/tinyMCE.css",
	      plugins: ["image","print","table","code"],
              image_advtab: true
	     });

Then in our CSS we need to overide these styles:

table.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{
border: none;
}

That is it, now the tables have no borders.

You can certainly add different borders instead of removing them all together.

Tagged , ,

Twitter Bootstrap Toggle Dropdown on Mouseover

When combining Bootstrap tables with libraries like datatables for sorting you need to use the click function to sort the field and not initiate the dropdown. So the logical thing to do is to toggle the dropdown on mouseover.

This is how I accomplish this task:

  	  <th>
              <ul class="nav">
	      <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="status_filter_dropdown">
                    Notification Status <span class="caret"></span>
                 </a>
                 <ul class="dropdown-menu">
                   <li><a class="status_filter" selected>Open</a></li>
	           <li><a class="status_filter">Closed</a></li>
	           <li><a class="status_filter">All</a></li>
                  </ul>
              </li>
	     </ul>
	  </th>
$(".dropdown-toggle").mouseover(function(){
	     $(this).dropdown('toggle');
	});
Tagged , , ,

Android setOnKeyListener in Dialog

It took me a few tries to get the onKeyListener to work on a dialog EditText. The key is to use View.OnKeyListener() instead of just OnKeyListener().

Here is the code:

		final Dialog newReminderDialog = new Dialog(getActivity());
		newReminderDialog.setContentView(R.layout.dialog_new_reminder);
		newReminderDialog.setTitle("Set Time");
		newReminderDialog.show();
		EditText addToTimeEditText = (EditText) newReminderDialog.findViewById(R.id.addToTimeEntry);
		addToTimeEditText.setOnKeyListener(new View.OnKeyListener(){
			@Override
			public boolean onKey(View arg0, int arg1, KeyEvent arg2) {
				// TODO Auto-generated method stub
				Toast.makeText(getActivity(), "t", Toast.LENGTH_SHORT).show();
				return true;
			}
			
		});
Tagged , , ,

Android use ArrayList to handle Fragments

As you dive into the current world of Android development, you will be dealing more and more with Fragments and less with new Activities. Weather you choose a dropdown or tabbed navigation it is a good idea to create some sort of array of your Fragments that can map to the positions returned by the dropdown or tabs.

Here is the code from my MainActivity:

@Override
		public Fragment getItem(int position) {
			// getItem is called to instantiate the fragment for the given page.
			ArrayList <Fragment> fragments = new ArrayList <Fragment>();
			fragments.add(new ReminderFragment());
			fragments.add(new PatientFragment());
			fragments.add(new StopWatchFragment());
			Fragment fragment = fragments.get(position);
			Bundle args = new Bundle();
			fragment.setArguments(args);
			return fragment;
		}

When a tab is selected this function is run and the position arg sent can be used as an array index for getting the correct fragment. All you have to do is create and ArrayList and add the fragments in the same order as their tabs. This keeps the fuction smaller and more scalable.

Tagged , , ,