< Read the Blog @newdev-blog - Tumblr Blog

Ternary Operator Controlling of UIView elements.

This is just a cool little trick I realized I could use, when trying to update images based on the selected UISegmentedControl.

deleteBtn.imageView.image = (noteType.selectedSegmentIndex) ? [UIImage imageNamed:@"remove_button.png"]:[UIImage imageNamed:@"delete_button.png"] ;

Gist: Node Passport - OAuth Social and Local

Install Jade / Stylus Syntax Highlighter - Sublime Text 2

This is just a post it post! a remember me. but if you find it, because you want to syntax highlight Sublime Text 2 for JADE or Stylus.

cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages

git clone https://github.com/miksago/jade-tmbundle.git Jade

git clone https://github.com/LearnBoost/stylus.git Stylus

#JADE #STYLUS #Sublime Text 2

#Broadstreet: FF compatibility changes, Compass #Backbone #JQuery

Making it look good on FireFox

I've made some changes to the control.scss file that better display's the project for xcross browser compatibilty. The fact is, Broadstreet can be used to develop, HTML5 web apps as well as mobile apps. It's the reason we use Compass.

Future State

Later on, I will be structuring the sass file, in such a way that you should be able to change the entire style file.

I have also added a setClass method that removes the base styling to all the objects in Broadstreet.

The direction will be to include a few default themes that you'll be able to switch too and from.

Darren. :)

github: https://github.com/DarrenHurst/BroadStreet

demo: http://darrenhurst.github.com/BroadStreet/

#BroadStreet #jquery #backbone #Compass #sass

#Broadstreet: headerNavigation control first draft, check it out under the twitter nav item, #Backbone #JQuery #MobileDev

Usage Example

this.header = new HeaderBar().render();

this.header.setTitle("Twitter");

this.header.setRightNav("Next",this);

this.header.setLeftNav("Back",this);

The event handling for the control is NOT published yet, I'll update when it's in.

Darren. :)

github: https://github.com/DarrenHurst/BroadStreet

demo: http://darrenhurst.github.com/BroadStreet/

#backbone.js #backbone #jquery #BroadStreet

Project #Broadstreet: Using Hash Tags in navigationNavBar Controller #Backbone #JQuery

Setting the MainView NavBar

The mainview controller is the start of any new page set that you are building. In the example, we have created a new page set under /views/kitchensink/twitter. This view creates it's own mainview controller. the twitterView is now a separate object, and can have child object added to it.

Routing to new MainView

You can route to the new view by setting up the router in your MobileRouter or DesktopRouter.

routes: {

// When there is no hash bang on the url, the home method is called

'': 'home',

'twitter':'twitter' //twitter kitchen sink

},

when the #twitter is called we render the new view.

'twitter': function(){

var twitter = new TwitterView();

twitter.render();

}

You can set up the hash link on the navBarController like this.

this.navbar = new NavBar().render(this.app);

this.navbar.addButton("twitter","Twitter Example",{"link":"#twitter"});

view the example :http://darrenhurst.github.com/BroadStreet/

follow the gitHub: https://github.com/DarrenHurst/BroadStreet

#backbone.js #BroadStreet #jquery

Trouble, He surfs on the iPad

Trouble finds a new use for my iPad.

Thinking Through the Configuration for BroadStreet - Discussion

Current State

BroadStreet in it's current state, looks fine in the Landscape Orientation only, I placed it into the 960 grid pattern because I was designing for the desktop webview.

Future State,

I'll be creating a configuration JSON file that will configure the body and bsm_page to set width. etc.

The viewport only works so well.

If you want to define the base scss, you could control the layout like so.

@media screen {

.bsm_page{

}

@media(orientation: landscape){

.bsm_page{

}

Object Design

JSON file.

{

"PORTRAIT_WIDTH_PHONE":"320",

"LANDSCAPE_WIDTH_PHONE":"480",

"PORTRAIT_WIDTH_TABLET":"768",

"LANDSCAPE_WIDTH_TABLET":"1024"

}

Config.js will set .bsm_page with $(window).bind('orientationchange resize', function(event){});

and default to 100% if mobile browser not detected.

This is open to discussion, so please let me know your thoughts.

#BroadStreet #jquery #backbone.js

BroadStreet Listview Control

The ListView Control in JQM is a UL LI, Then they highly modified the style, This approach is that the List is a view, and add row view to itself.

var list = new listView().render(this.ScrollView1.getId());

for(x in data){

list.addRow(this.buildTweetBlock(data[x]));

}

notice that the .render() method is getting the id of the scrollView that it will be placed into.

as well the .addRow method is calling a method to build the html. You could also build a cell view or a template to pass the html to the row.

this control will eventually need icons as well as select row and delete row methods.

view the ListView - Page 3 on the control popup.

http://darrenhurst.github.com/BroadStreet/

#Broadstreet #Backbone.js #Jquery #Listview

Backbone.js, JQuery, BroadStreet Mobile Development

What is BroadStreet, and Why?

I’ve been developing with Backbone.js for just over a year, but more recently implemented it into a large iPad application for one of the top 5 Banks in Canada. I started looking at how I could make some of the controls in that project reuseable, with more OOP/OOD patterns.

It was decided that after I created the base controls project for BroadStreet Mobile (Toronto Development Mobile Company), that we would open source the project, hopefully gardner development support and bring Backbone.js into a more rapid development environment.

Backbone.js not only places javascript in an MVC like design framework, it promotes data syncing across views with it’s models.

BroadStreet is only a couple weeks old, but if you would like to contribute, contact me.

http://darrenhurst.github.com/BroadStreet/

#BroadStreet #jquery #backbone.js #mobile

newdev-blog

Update:

navBar controller with SVG icons and Text.

newdev-blog

Update:

navBar controller with SVG icons and Text.

NavBar Controller Version 1.0 release to wild.

Example:

this.navbar = new NavBar().render(this.app); // set the start location;

this.navbar.addButton(“gear”,“Settings”,{“nav”:this.page2});

this.navbar.addButton(“video”,“Video”,{“nav”:this.page3});

this.navbar.addButton(“githubalt”,“GitHub”,{“link”:“https://github.com/DarrenHurst/BroadStreet”});

http://darrenhurst.github.com/BroadStreet/

#backbone.js #jquery #BroadStreet #SVG

Building out the NavBar Controller.

Creating a fixed tool bar nav at the bottom of the page will be created with a few lines of code.

navBar: function(){

this.navbar = new NavBar().render("navbar");

this.navbar.addButton("github","GitHub",this.page1);

The buttons will size to the amount of buttons you add to the controller.

You will be able to add svg icon, text, and the mainView controller you want to navigate to.

You will be able to setHide and setShow on the controller if you want the navBar out of view.

I'll update again when i've added the svg icon and text placement.

#BroadStreet #backbone.js #jquery

Using the popup control

Example

this.Popup1 = new Popup("controls_left3");

this.Popup1.render();

var Popup_Control = this.Popup1.isControl(); this.Popup1.setPointer(257);

this.Popup1.setPosition(120,97); //alert(Popup_Control);

var ScrollView1 = new ScrollView(Popup_Control,this).render();

ScrollView1.setHtml("

This is a scrollView inside a popup control.

"+ "If you would like to contribute please contact me. If you like what you see. Star or Watch the Repo."+ "<br/"+ "Suggestions are welcome!"+ "Thank you for checking us out! I could add a whole lot of text in here to make it scroll, but instead i decided that if I told you, it would most likely be enough text to demonstrate that the control does infact scroll.");

ScrollView1.setHeight("100");

this.Popup2 = new Popup("controls_left3");

this.Popup2.render("top"); // top is handle pointer on top.

this.Popup2.setContent("This is just a text popup and takes html or text");

this.Popup2.setPosition(160,97);

The two examples are provided above to demonstrate the flexibility of top and bottom positioning.

After a bit more testing i'll release into the wild.

https://github.com/DarrenHurst/BroadStreet

#backbone.js #jquery #BroadStreet