Screen Break Menu

Enterprise apps often contain a number of features. Providing a compelling way to display these features and submenus can be challenging. One unique navigation option is to implement a Screen Break Menu, similar to how iOS folders work. This navigation technique allows you to present additional information only when requested by the user.

In this recipe, we will demonstrate how you can implement a cross-platform version of the Screen Break animation and link this effect to a menu view.

Getting ready

This recipe walks through using the screen break interaction pattern to create additional space for an Add Notes field. You can easily tweak this recipe for more complex menu needs, such as implementing advanced options or an interactive help menu.

Menu when closed

When the menu is closed, all space is usable for other controls. The following image shows the Screen Break Menu in its closed state.

Menu when closed

The menu, when opened

When the menu is opened, the screen is split and the bottom section of the Ti.UI.Window is animated, exposing a menu area. The following example shows the Screen Break Menu, when opened, and displaying a Ti.UI.TextArea for taking notes:

The menu, when opened

Adding the Screen Break Menu to your project

The Screen Break Menu is a CommonJS module consisting of a single JavaScript file. To install it, simply copy the breakmenu.js file into your project, as shown in the following screenshot:

Adding the Screen Break Menu to your project

How to do it…

Once you've added the breakmenu.js file to your project, you need to use require to import the module into your code, as the following snippet demonstrates:

//Create our application namespace
var my = {
  breakingMenu : require('breakmenu')
};

Creating the sample window

To demonstrate the Screen Break Menu, we create a basic window with a single button. When this button is clicked, the Screen Break Menu is activated.

var win = Ti.UI.createWindow({
  backgroundColor:'#fff'
});

//Create button
var button = Ti.UI.createButton({
  title:'Add Notes', left:20, right:20, height:50, top:150
});
win.add(button);

Adding Screen Break Menu listeners

Next in our example, we add a series of listeners. The following code block demonstrates how to add a listener, to be fired when the Screen Break Menu starts, to show the menu.

my.breakingMenu.addEventListener('breaking',function(e){
  Ti.API.info("Screen is breaking");
});
  1. The broken event is fired when the menu is fully displayed.
    my.breakingMenu.addEventListener('broken',function(e){
  Ti.API.info("Screen is broken, menu is visible");
});
  2. The closing event is fired when the menu starts to close. This will take a second to fully close.
    my.breakingMenu.addEventListener('closing',function(e){
  Ti.API.info('Menu starting to close'),
});
  3. Only when the menu is fully hidden, the closed event is fired.
    my.breakingMenu.addEventListener('closed',function(e){
  Ti.API.info('Menu is closed'),
});

Creating a notes menu object

Displaying a Ti.UI.View is at the core of the Screen Break Menu. In this example, we create a notes menu object containing Ti.UI.View and Ti.UI.TextArea controls. These controls are used to present the user with an area for entering notes, when the Screen Break Menu is visible.

var notesMenu = {
  value : '', //Our value for the notes screen
  view : function(){
    //Create a view container
    var vwMenu = Ti.UI.createView({
      backgroundColor:'yellow',top:150,
      height:200, width: Ti.UI.FILL
    });
    //Create a textArea for the user to type
    var txtField = Ti.UI.createTextArea({
      width: Ti.UI.FILL,height:Ti.UI.FILL,
      hintText:"Add a note", value : notesMenu.value, backgroundColor:'transparent',font:{fontSize:14,fontWeight:'bold'}
    });
    vwMenu.add(txtField);
    //When text is added, update the menu value
    txtField.addEventListener('change',function(e){
      notesMenu.value = txtField.value; 
    });
    //Return the view so we can later bind for display
    return vwMenu;
  }
};

Showing the menu

When the sample's button is pressed, the breakScreen function is called to show the Screen Break Menu.

The breakScreen function takes the following parameters:

  • The first parameter is the Ti.UI.Window that you wish to split in order to reveal the menu.
  • The second parameter is the Ti.UI.View that you wish to use as your menu. Please note this can only be a Ti.UI.View object type.
  • The final parameter is the settings object. This object contains the following properties:
    • breakStartPoint: The position measured from the top of the screen indicating where the break should start.
    • bottomViewHeight: This property decides the height of the bottom-half section. This value determines the size of the bottom half of the screen that is animated down the screen.
    • slideFinishPoint: The position from the top of the screen indicating where the bottom view should slide to.

      Tip

      You will need to adjust these settings properties to meet your screen layout requirements.

The following code block implements all the three properties:

button.addEventListener('click',function(e){
  //Options object
  var settings = {};
  //Point of the screen where the screen will separate
  settings.breakStartPoint = 150; 
  //Size of the bottom half of screen, ie the sliding part
  settings.bottomViewHeight = 218, 
  //The bottom point you want the screen to slide to. 
  //Measured from top of screen
  settings.slideFinishPoint = 340;			
  //Call function to split the screen & show our menu
  my.breakingMenu.breakScreen(win,notesMenu.view(),settings);
});
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.233.26